fix: 修改全局表格居中，工艺路线项目新增功能修改

spring

10 小时以前 8e9796a5deb805268ef8b8f60486f1c2ea9b2467

fix: 修改全局表格居中，工艺路线项目新增功能修改

 src/assets/styles/element-ui.scss

@@ -152,3 +152,23 @@
.el-dropdown .el-dropdown-link {

  color: var(--el-color-primary) !important;

}



// 全局设置 el-table 表头和单元格居中

.el-table {

  th {

    text-align: center !important;

  }

  td {

    text-align: center !important;

  }

  .el-table__header-wrapper {

    th {

      text-align: center !important;

    }

  }

  .el-table__body-wrapper {

    td {

      text-align: center !important;

    }

  }

}


 src/views/productionManagement/processRoute/processRouteItem/index.vue

@@ -2,140 +2,55 @@
  <div class="app-container">
    <PageHeader content="工艺路线项目">
      <template #right-button>
        <el-button
            type="primary"
            @click="isShowProcessSelectDialog = true"
        >
          选择工序
        </el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
        <el-switch
            v-model="isTable"
            inline-prompt
            active-text="表格"
            inactive-text="列表"
            @change="handleViewChange"
            style="margin-left: 10px;"
        />
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </template>
    </PageHeader>
    
    <el-table
        v-if="isTable"
        ref="multipleTable"
        v-loading="tableLoading"
        border
        :data="routeItems"
        :data="tableData"
        :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
        row-key="id"
        tooltip-effect="dark"
        class="lims-table"
        style="cursor: move;"
    >
      <el-table-column align="center" label="序号" width="60">
      <el-table-column align="center" label="序号" width="60" type="index" />
      <el-table-column label="工序名称" prop="processId" width="200">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column
          v-for="(item, index) in tableColumn"
          :key="index"
          :label="item.label"
          :width="item.width"
          show-overflow-tooltip
      >
        <template #default="scope" v-if="item.dataType === 'action'">
          <el-button
              v-for="(op, opIndex) in item.operation"
              :key="opIndex"
              :type="op.type"
              :link="op.link"
              size="small"
              @click.stop="op.clickFun(scope.row)"
          >
            {{ op.name }}
          </el-button>
        </template>

        <template #default="scope" v-else>
          <template v-if="item.prop === 'processId'">
            {{ getProcessName(scope.row.processId) || '-' }}
          </template>
          <template v-else>
            {{ scope.row[item.prop] || '-' }}
          </template>
      </el-table-column>
      <el-table-column label="产品名称" prop="productName" min-width="160" />
      <el-table-column label="规格名称" prop="model" min-width="140" />
      <el-table-column label="单位" prop="unit" width="100" />
      <el-table-column label="操作" align="center" fixed="right" width="150">
        <template #default="scope">
          <el-button type="primary" link size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" link size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 使用普通div替代el-steps -->
    <div
        v-else
        ref="stepsContainer"
        class="mb5 custom-steps"
    >
      <div
          v-for="(item, index) in routeItems"
          :key="item.id"
          class="custom-step draggable-step"
          :data-id="item.id"
          style="cursor: move; flex: 0 0 auto; min-width: 220px;"
      >
        <div class="step-content">
          <div class="step-number">{{ index + 1 }}</div>
          <el-card
              :header="item.productName"
              class="step-card"
              style="cursor: move;"
          >
            <div class="step-card-content">
              <p>{{ item.model }}</p>
              <p>{{ item.unit }}</p>
              <el-select
                  v-model="item.processId"
                  style="width: 100%;"
                  @mousedown.stop
                  :disabled="true"
              >
                <el-option
                    v-for="process in processOptions"
                    :key="process.id"
                    :label="process.name"
                    :value="process.id"
                />
              </el-select>
              <el-button
                  type="primary"
                  size="small"
                  style="margin-top: 8px; width: 100%;"
                  @click.stop="handleSelectProductForRow(item)"
              >
                选择产品
              </el-button>
            </div>
            <template #footer>
              <div class="step-card-footer">
                <el-button type="danger" link size="small" @click.stop="removeItemByID(item.id)">删除</el-button>
              </div>
            </template>
          </el-card>
        </div>
      </div>
    </div>

    <!-- 工序选择对话框 -->
    <!-- 新增/编辑弹窗 -->
    <el-dialog
        v-model="isShowProcessSelectDialog"
        title="选择工序"
        width="400px"
        v-model="dialogVisible"
        :title="operationType === 'add' ? '新增工艺路线项目' : '编辑工艺路线项目'"
        width="500px"
        @close="closeDialog"
    >
      <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="120px"
      >
        <el-form-item label="工序" prop="processId">
      <el-select
          v-model="selectedProcessId"
          placeholder="请选择工序（可多选）"
              v-model="form.processId"
              placeholder="请选择工序"
              clearable
          style="width: 100%"
          multiple
          collapse-tags
          collapse-tags-tooltip
      >
        <el-option
            v-for="process in processOptions"
@@ -144,90 +59,78 @@
            :value="process.id"
        />
      </el-select>
        </el-form-item>

        <el-form-item label="产品名称" prop="productModelId">
          <el-button type="primary" @click="showProductSelectDialog = true">
            {{ form.productName && form.model 
              ? `${form.productName} - ${form.model}` 
              : '选择产品' }}
          </el-button>
        </el-form-item>

        <el-form-item label="单位" prop="unit">
          <el-input 
              v-model="form.unit" 
              :placeholder="form.productModelId ? '根据选择的产品自动带出' : '请先选择产品'" 
              clearable 
              :disabled="true" 
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="isShowProcessSelectDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSelectProcess">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
      </template>
    </el-dialog>

    <!-- 产品选择对话框 -->
    <ProductSelectDialog
        v-model="isShowProductSelectDialog"
        @confirm="handleSelectProductForCurrentRow"
        v-model="showProductSelectDialog"
        @confirm="handleProductSelect"
        single
    />
  </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance, onMounted, onUnmounted, nextTick } from "vue";
import { ref, computed, getCurrentInstance, onMounted } from "vue";
import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
import { findProcessRouteItemList, addOrUpdateProcessRouteItem } from "@/api/productionManagement/processRouteItem.js";
import { processList } from "@/api/productionManagement/productionProcess.js";
import Sortable from 'sortablejs';
import { useRoute, useRouter } from 'vue-router'

const processOptions = ref([]);
const tableLoading = ref(false);
const isShowProductSelectDialog = ref(false);
const isShowProcessSelectDialog = ref(false);
const selectedProcessId = ref([]);
const currentSelectRow = ref(null);
const routeItems = ref([]);
let tableSortable = null;
let stepsSortable = null;
const multipleTable = ref(null);
const stepsContainer = ref(null);
const isTable = ref(true);
import { useRoute } from 'vue-router'
import { ElMessageBox } from 'element-plus'

const route = useRoute()
const router = useRouter()
const routeId = computed({
  get() {
    return route.query.id;
  },
const { proxy } = getCurrentInstance() || {};

  set(val) {
    emit('update:router', val)
  }
const routeId = computed(() => route.query.id);

const tableLoading = ref(false);
const tableData = ref([]);
const dialogVisible = ref(false);
const operationType = ref('add'); // add | edit
const formRef = ref(null);
const submitLoading = ref(false);

const processOptions = ref([]);
const showProductSelectDialog = ref(false);

const form = ref({
  id: undefined,
  routeId: routeId.value,
  processId: undefined,
  productModelId: undefined,
  productName: "",
  model: "",
  unit: "",
});


const tableColumn = ref([
{ label: "工序名称", prop: "processId", width: 200 },
  { label: "产品名称", prop: "productName"},
  { label: "规格名称", prop: "model" },
  { label: "单位", prop: "unit" },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 180,
    operation: [
      {
        name: "选择产品",
        type: "primary",
        link: true,
        clickFun: (row) => {
          currentSelectRow.value = row;
          isShowProductSelectDialog.value = true;
        }
      },
      {
        name: "删除",
        type: "danger",
        link: true,
        clickFun: (row) => {
          const idx = routeItems.value.findIndex(item => item.id === row.id);
          if (idx > -1) {
            removeItem(idx)
          }
        }
      }
    ]
  }
]);
const rules = {
  processId: [{ required: true, message: '请选择工序', trigger: 'change' }],
  productModelId: [{ required: true, message: '请选择产品', trigger: 'change' }],
};

// 根据工序ID获取工序名称
const getProcessName = (processId) => {
@@ -236,326 +139,173 @@
  return process ? process.name : '';
};

const removeItem = (index) => {
  routeItems.value.splice(index, 1);
  nextTick(() => initSortable());
};

const removeItemByID = (id) => {
  const idx = routeItems.value.findIndex(item => item.id === id);
  if (idx > -1) {
    routeItems.value.splice(idx, 1);
    nextTick(() => initSortable());
  }
};

// 选择工序 - 新增多条记录
const handleSelectProcess = () => {
  if (!selectedProcessId.value || selectedProcessId.value.length === 0) {
    proxy?.$modal?.msgWarning("请选择工序");
    return;
  }
  
  // 为每个选中的工序创建一条记录
  const newItems = selectedProcessId.value.map(processId => ({
    processId: processId,
    productName: "",
    model: "",
    unit: "",
    productModelId: undefined,
    routeId: routeId.value,
    id: `${Date.now()}-${Math.random().toString(36).slice(2)}-${processId}`,
  }));
  
  routeItems.value.push(...newItems);
  
  // 延迟初始化，确保DOM完全渲染
  nextTick(() => {
    initSortable();
  });
  
  isShowProcessSelectDialog.value = false;
  selectedProcessId.value = [];
};

// 为指定行选择产品
const handleSelectProductForRow = (row) => {
  currentSelectRow.value = row;
  isShowProductSelectDialog.value = true;
};

// 处理当前行的产品选择
const handleSelectProductForCurrentRow = (products) => {
  if (products && products.length > 0 && currentSelectRow.value) {
    const product = products[0];
    // 更新当前行的产品信息
    currentSelectRow.value.productName = product.productName;
    currentSelectRow.value.model = product.model;
    currentSelectRow.value.unit = product.unit || "";
    currentSelectRow.value.productModelId = product.id;
    isShowProductSelectDialog.value = false;
    currentSelectRow.value = null;
  }
};

const findProcessRouteItems = () => {
// 获取列表
const getList = () => {
  tableLoading.value = true;
  findProcessRouteItemList({ routeId: routeId.value })
      .then(res => {
      tableData.value = res.data || [];
        tableLoading.value = false;
        routeItems.value = res.data.map(item => ({
          ...item,
          processId: item.processId === 0 ? undefined : item.processId
        }));
        // 延迟初始化，确保DOM完全渲染
        nextTick(() => {
          setTimeout(() => initSortable(), 100);
        });
      })
      .catch(err => {
        tableLoading.value = false;
        console.error("获取列表失败：", err);
      proxy?.$modal?.msgError("获取列表失败");
      });
};

const findProcessList = () => {
// 获取工序列表
const getProcessList = () => {
  processList({})
      .then(res => {
        processOptions.value = res.data;
      processOptions.value = res.data || [];
      })
      .catch(err => {
        console.error("获取工序失败：", err);
      });
};

const { proxy } = getCurrentInstance() || {};
// 新增
const handleAdd = () => {
  operationType.value = 'add';
  resetForm();
  dialogVisible.value = true;
};

const handleSubmit = () => {
  const hasEmptyProcess = routeItems.value.some(item => !item.processId);
  if (hasEmptyProcess) {
    proxy?.$modal?.msgError("请为所有项目选择工序");
    return;
  }

  addOrUpdateProcessRouteItem({
// 编辑
const handleEdit = (row) => {
  operationType.value = 'edit';
  form.value = {
    id: row.id,
    routeId: routeId.value,
    processRouteItem: routeItems.value.map(({ id, ...item }) => item)
    processId: row.processId,
    productModelId: row.productModelId,
    productName: row.productName || "",
    model: row.model || "",
    unit: row.unit || "",
  };
  dialogVisible.value = true;
};

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该工艺路线项目？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(res => {
        router.push({
          path: '/productionManagement/processRoute',
    .then(() => {
      // 调用删除接口，传单个对象（包含id）
      addOrUpdateProcessRouteItem({
        id: row.id,
        routeId: routeId.value,
        })
        proxy?.$modal?.msgSuccess("提交成功");
        .then(() => {
          proxy?.$modal?.msgSuccess('删除成功');
          getList();
      })
      .catch(err => {
        proxy?.$modal?.msgError(`提交失败：${err.msg || "网络异常"}`);
        .catch(() => {
          proxy?.$modal?.msgError('删除失败');
      });
    })
    .catch(() => {});
};

const destroySortable = () => {
  if (tableSortable) {
    tableSortable.destroy();
    tableSortable = null;
  }
  if (stepsSortable) {
    stepsSortable.destroy();
    stepsSortable = null;
// 产品选择
const handleProductSelect = (products) => {
  if (products && products.length > 0) {
    const product = products[0];
    form.value.productModelId = product.id;
    form.value.productName = product.productName;
    form.value.model = product.model;
    form.value.unit = product.unit || "";
    showProductSelectDialog.value = false;
    // 触发表单验证
    formRef.value?.validateField('productModelId');
  }
};

const initSortable = () => {
  destroySortable();
// 提交
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      submitLoading.value = true;

  if (isTable.value) {
    if (!multipleTable.value) return;
    const tbody = multipleTable.value.$el.querySelector('.el-table__body tbody') ||
        multipleTable.value.$el.querySelector('.el-table__body-wrapper > table > tbody');
    if (!tbody) return;
      // 构建提交数据对象（单个对象形式）
      const submitData = {
        routeId: routeId.value,
        processId: form.value.processId,
        productModelId: form.value.productModelId,
      };

    tableSortable = new Sortable(tbody, {
      animation: 150,
      ghostClass: 'sortable-ghost',
      handle: '.el-table__row',
      filter: '.el-button, .el-select',
      onEnd: (evt) => {
        if (evt.oldIndex === evt.newIndex || !routeItems.value[evt.oldIndex]) return;

        // 使用数组 splice 方法重新排序，与表格模式保持一致
        const moveItem = routeItems.value.splice(evt.oldIndex, 1)[0];
        routeItems.value.splice(evt.newIndex, 0, moveItem);
        routeItems.value = [...routeItems.value];
        console.log('排序后数组:', routeItems.value);
      }
      if (operationType.value === 'add') {
        // 新增：传单个对象
        addOrUpdateProcessRouteItem(submitData)
          .then(() => {
            proxy?.$modal?.msgSuccess('新增成功');
            closeDialog();
            getList();
          })
          .catch(() => {
            proxy?.$modal?.msgError('新增失败');
          })
          .finally(() => {
            submitLoading.value = false;
    });
  } else {
    if (!stepsContainer.value) return;

    // 修改：直接使用stepsContainer.value作为拖拽容器
    const stepsList = stepsContainer.value;
    if (!stepsList) {
      console.warn('未找到步骤条拖拽容器');
      return;
        // 编辑：传单个对象，包含id
        addOrUpdateProcessRouteItem({
          ...submitData,
          id: form.value.id,
        })
          .then(() => {
            proxy?.$modal?.msgSuccess('修改成功');
            closeDialog();
            getList();
          })
          .catch(() => {
            proxy?.$modal?.msgError('修改失败');
          })
          .finally(() => {
            submitLoading.value = false;
          });
    }

    // 修改：简化拖拽配置
    stepsSortable = new Sortable(stepsList, {
      animation: 150,
      ghostClass: 'sortable-ghost',
      draggable: '.draggable-step', // 可拖拽元素
      handle: '.draggable-step, .step-card', // 拖拽手柄
      filter: '.el-button, .el-select, .el-input', // 过滤按钮/选择器
      forceFallback: true,
      fallbackClass: 'sortable-fallback',
      preventOnFilter: true,
      scroll: true,
      scrollSensitivity: 30,
      scrollSpeed: 10,
      bubbleScroll: true,
      onEnd: (evt) => {
        if (evt.oldIndex === evt.newIndex || !routeItems.value[evt.oldIndex]) return;

        // 使用数组 splice 方法重新排序
        const moveItem = routeItems.value.splice(evt.oldIndex, 1)[0];
        routeItems.value.splice(evt.newIndex, 0, moveItem);
        routeItems.value = [...routeItems.value];
      }
    });

    // 调试：打印容器和实例，确认绑定成功
    console.log('步骤条拖拽容器:', stepsList);
    console.log('Sortable实例:', stepsSortable);
  }
};

const handleViewChange = () => {
  destroySortable();
  // 延迟初始化，确保视图切换后DOM完全渲染
  nextTick(() => {
    setTimeout(() => initSortable(), 100);
  });
// 重置表单
const resetForm = () => {
  form.value = {
    id: undefined,
    routeId: routeId.value,
    processId: undefined,
    productModelId: undefined,
    productName: "",
    model: "",
    unit: "",
  };
  formRef.value?.resetFields();
};

// 关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false;
  resetForm();
};

onMounted(() => {
  findProcessRouteItems();
  findProcessList();
});

onUnmounted(() => {
  destroySortable();
});

defineExpose({
  handleSubmit,
  getList();
  getProcessList();
});
</script>

<style scoped>
:deep(.sortable-ghost) {
  opacity: 0.6;
  background-color: #f5f7fa !important;
}

:deep(.el-table__row) {
  transition: background-color 0.2s;
}

:deep(.el-table__row:hover) {
  background-color: #f9fafc !important;
}

:deep(.el-card__footer){
  padding: 0 !important;
}


/* 修改：自定义步骤条容器样式 */
.custom-steps {
  min-height: 100px;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

/* 修改：自定义步骤项样式 */
.custom-step {
  cursor: move !important;
  padding: 8px;
  position: relative;
  transition: all 0.2s ease;
  flex: 0 0 auto;
  min-width: 220px;
  touch-action: none;
}

/* 拖拽悬浮样式，提示可拖拽 */
.custom-step:hover {
  background-color: rgba(64, 158, 255, 0.05);
  transform: translateY(-2px);
}

.sortable-ghost {
  opacity: 0.4;
  background-color: #f5f7fa !important;
  border: 2px dashed #409eff;
  margin: 10px;
  transform: scale(1.02);
}

.sortable-fallback {
  opacity: 0.9;
  background-color: #f5f7fa;
  border: 1px solid #409eff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: rotate(2deg);
  margin: 10px;
}

.step-card {
  cursor: move !important;
  transition: box-shadow 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  margin: 10px;
  height: 260px;
}

.step-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.step-content {
  width: 245px;
  user-select: none;
}

.step-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 140px;
}

.step-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
}

/* 自定义序号样式优化 */
.step-number {
  font-weight: bold;
  text-align: center;
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin: 0 auto 10px;
  background: #409eff;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
}
</style>