refactor(equipment): 优化设备台账表单结构并更新质管检验选项

liding

2026-06-02 476a9ca89794a830b8a8279b80d9b446624a0641

 src/views/qualityManagement/rawMaterial/components/formDia.vue

@@ -1,41 +1,58 @@
<template>
  <div>
    <el-dialog
        v-model="dialogFormVisible"
        :title="operationType === 'add' ? '新增原料' : operationType === 'view' ? '原料详情' : '编辑原料'"
        width="70%"
        @close="closeDia"
      v-model="dialogFormVisible"
      :title="
        operationType === 'add'
          ? '新增原料'
          : operationType === 'view'
          ? '原料详情'
          : '编辑原料'
      "
      width="70%"
      @close="closeDia"
    >
      <el-form
          v-if="operationType !== 'view'"
          :model="form"
          label-width="140px"
          label-position="top"
          :rules="rules"
          ref="formRef"
        v-if="operationType !== 'view'"
        :model="form"
        label-width="140px"
        label-position="top"
        :rules="rules"
        ref="formRef"
      >
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="产品名称：" prop="productId">
              <el-tree-select
                  v-model="form.productId"
                  placeholder="请选择"
                  clearable
                  check-strictly
                  @change="getModels"
                  :data="productOptions"
                  :render-after-expand="false"
                  :disabled="operationType === 'edit' || operationType === 'view'"
                  style="width: 100%"
                v-model="form.productId"
                placeholder="请选择"
                clearable
                check-strictly
                @change="getModels"
                :data="productOptions"
                :render-after-expand="false"
                :disabled="operationType === 'edit' || operationType === 'view'"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格型号：" prop="productModelId">
              <el-select v-model="form.productModelId" placeholder="请选择" clearable
                         :disabled="operationType === 'edit' || operationType === 'view'"
                         filterable readonly @change="handleChangeModel">
                <el-option v-for="item in modelOptions" :key="item.id" :label="item.model" :value="item.id"/>
              <el-select
                v-model="form.productModelId"
                placeholder="请选择"
                clearable
                :disabled="operationType === 'edit' || operationType === 'view'"
                filterable
                readonly
                @change="handleChangeModel"
              >
                <el-option
                  v-for="item in modelOptions"
                  :key="item.id"
                  :label="item.model"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
@@ -43,17 +60,17 @@
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="单位：" prop="unit">
              <el-input v-model="form.unit" disabled/>
              <el-input v-model="form.unit" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="批号：" prop="batchNo">
              <el-input
                  style="width: 100%"
                  v-model="form.batchNo"
                  placeholder="请输入"
                  clearable
                  :disabled="operationType === 'view'"
                style="width: 100%"
                v-model="form.batchNo"
                placeholder="请输入"
                clearable
                :disabled="operationType === 'view'"
              />
            </el-form-item>
          </el-col>
@@ -61,18 +78,24 @@
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="检验类型：" prop="checkType">
              <el-select v-model="form.checkType" :disabled="operationType === 'view'">
                <el-option label="入厂检" :value="0"/>
                <el-option label="车间检" :value="1"/>
                <el-option label="出厂检" :value="2"/>
              <el-select
                v-model="form.checkType"
                :disabled="operationType === 'view'"
              >
                <el-option label="入厂检" :value="0" />
                <el-option label="车间检" :value="1" />
                <el-option label="出厂检" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测结果：" prop="checkResult">
              <el-select v-model="form.checkResult" :disabled="operationType === 'view'">
                <el-option label="合格" :value="1"/>
                <el-option label="不合格" :value="0"/>
              <el-select
                v-model="form.checkResult"
                :disabled="operationType === 'view'"
              >
                <el-option label="已检" :value="1" />
                <el-option label="未检" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
@@ -81,103 +104,139 @@
          <el-col :span="12">
            <el-form-item label="检验员：" prop="checkUserName">
              <el-select
                  v-model="form.checkUserName"
                  placeholder="请选择"
                  clearable
                  filterable
                  style="width: 100%"
                  :disabled="operationType === 'view'"
                v-model="form.checkUserName"
                placeholder="请选择"
                clearable
                filterable
                style="width: 100%"
                :disabled="operationType === 'view'"
              >
                <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName"
                           :value="item.nickName"/>
                <el-option
                  v-for="item in userList"
                  :key="item.nickName"
                  :label="item.nickName"
                  :value="item.nickName"
                />
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测日期：" prop="checkTime">
              <el-date-picker
                  v-model="form.checkTime"
                  type="date"
                  placeholder="请选择日期"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  clearable
                  style="width: 100%"
                  :disabled="operationType === 'view'"
                v-model="form.checkTime"
                type="date"
                placeholder="请选择日期"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                clearable
                style="width: 100%"
                :disabled="operationType === 'view'"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-descriptions
          v-else
          :column="2"
          border
          size="small"
          style="margin-bottom: 12px;"
        v-else
        :column="2"
        border
        size="small"
        style="margin-bottom: 12px"
      >
        <el-descriptions-item label="产品名称">{{ viewProductName }}</el-descriptions-item>
        <el-descriptions-item label="规格型号">{{ viewProductModel }}</el-descriptions-item>
        <el-descriptions-item label="单位">{{ form.unit || '-' }}</el-descriptions-item>
        <el-descriptions-item label="批号">{{ form.batchNo || '-' }}</el-descriptions-item>
        <el-descriptions-item label="检验类型">{{ viewCheckType }}</el-descriptions-item>
        <el-descriptions-item label="检测结果">{{ viewCheckResult }}</el-descriptions-item>
        <el-descriptions-item label="检验员">{{ form.checkUserName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="检测日期">{{ form.checkTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="产品名称">{{
          viewProductName
        }}</el-descriptions-item>
        <el-descriptions-item label="规格型号">{{
          viewProductModel
        }}</el-descriptions-item>
        <el-descriptions-item label="单位">{{
          form.unit || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="批号">{{
          form.batchNo || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="检验类型">{{
          viewCheckType
        }}</el-descriptions-item>
        <el-descriptions-item label="检测结果">{{
          viewCheckResult
        }}</el-descriptions-item>
        <el-descriptions-item label="检验员">{{
          form.checkUserName || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="检测日期">{{
          form.checkTime || "-"
        }}</el-descriptions-item>
      </el-descriptions>
      <div style="margin-bottom: 10px">
        <el-button
            v-if="operationType !== 'view'"
            type="primary"
            @click="isShowItems = true"
        >添加检测项目</el-button>
          v-if="operationType !== 'view'"
          type="primary"
          @click="isShowItems = true"
          >添加检测项目</el-button
        >
      </div>
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :tableLoading="tableLoading"
          :is-show-pagination="false"
          height="400"
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :tableLoading="tableLoading"
        :is-show-pagination="false"
        height="400"
      >
        <template #slot="{ row }">
          <span v-if="operationType === 'view'">{{ row.testValue }}</span>
          <el-input
              v-else
              v-model="row.testValue"
              clearable
          />
          <el-input v-else v-model="row.testValue" clearable />
        </template>
      </PIMTable>
      <template #footer>
        <div class="dialog-footer">
          <el-button v-if="operationType !== 'view'" type="primary" @click="submitForm">确认</el-button>
          <el-button @click="closeDia">{{ operationType === 'view' ? '关闭' : '取消' }}</el-button>
          <el-button
            v-if="operationType !== 'view'"
            type="primary"
            @click="submitForm"
            >确认</el-button
          >
          <el-button @click="closeDia">{{
            operationType === "view" ? "关闭" : "取消"
          }}</el-button>
        </div>
      </template>
    </el-dialog>

    <item-select v-model="isShowItems" @confirm="handleItemSelect"/>
    <item-select v-model="isShowItems" @confirm="handleItemSelect" />
  </div>
</template>

<script setup>
import {ref, reactive, toRefs, getCurrentInstance, nextTick, computed} from "vue";
import {modelList, productTreeList} from "@/api/basicData/product.js";
import {qualityInspectParamInfo} from "@/api/qualityManagement/qualityInspectParam.js";
import {qualityInspectDetailByProductId} from "@/api/qualityManagement/metricMaintenance.js";
import {userListNoPage} from "@/api/system/user.js";
import {createRawMaterial, findRawMaterialDetail, updateRawMaterial} from "@/api/qualityManagement/rawMaterial.js";
import {
  ref,
  reactive,
  toRefs,
  getCurrentInstance,
  nextTick,
  computed,
} from "vue";
import { modelList, productTreeList } from "@/api/basicData/product.js";
import { qualityInspectParamInfo } from "@/api/qualityManagement/qualityInspectParam.js";
import { qualityInspectDetailByProductId } from "@/api/qualityManagement/metricMaintenance.js";
import { userListNoPage } from "@/api/system/user.js";
import {
  createRawMaterial,
  findRawMaterialDetail,
  updateRawMaterial,
} from "@/api/qualityManagement/rawMaterial.js";
import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";

const {proxy} = getCurrentInstance()
const emit = defineEmits(['close'])
const ItemSelect = defineAsyncComponent(() => import("@/views/qualityManagement/rawMaterial/components/itemSelect.vue"));
const { proxy } = getCurrentInstance();
const emit = defineEmits(["close"]);
const ItemSelect = defineAsyncComponent(() =>
  import("@/views/qualityManagement/rawMaterial/components/itemSelect.vue")
);

const dialogFormVisible = ref(false);
const operationType = ref('')
const isShowItems = ref(false)
const operationType = ref("");
const isShowItems = ref(false);
const data = reactive({
  form: {
    checkTime: "",
@@ -193,13 +252,21 @@
    checkUserName: "",
  },
  rules: {
    checkTime: [{required: true, message: "请输入", trigger: "blur"},],
    checkUserName: [{required: false, message: "请选择检验员", trigger: "blur"}],
    productId: [{required: true, message: "请输入", trigger: "blur"}],
    productModelId: [{required: true, message: "请选择产品型号", trigger: "change"}],
    batchNo: [{required: true, message: "请输入批次", trigger: "blur"}],
    checkType: [{required: true, message: "请选择检验类型", trigger: "change"}],
    checkResult: [{required: true, message: "请选择检测结果", trigger: "change"}],
    checkTime: [{ required: true, message: "请输入", trigger: "blur" }],
    checkUserName: [
      { required: false, message: "请选择检验员", trigger: "blur" },
    ],
    productId: [{ required: true, message: "请输入", trigger: "blur" }],
    productModelId: [
      { required: true, message: "请选择产品型号", trigger: "change" },
    ],
    batchNo: [{ required: true, message: "请输入批次", trigger: "blur" }],
    checkType: [
      { required: true, message: "请选择检验类型", trigger: "change" },
    ],
    checkResult: [
      { required: true, message: "请选择检测结果", trigger: "change" },
    ],
  },
});
const tableColumn = ref([
@@ -222,29 +289,29 @@
  {
    label: "化验值",
    prop: "testValue",
    dataType: 'slot',
    slot: 'slot',
    dataType: "slot",
    slot: "slot",
  },
  {
    dataType: 'action',
    label: '操作',
    align: 'center',
    fixed: 'right',
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 140,
    operation: [
      {
        name: '删除',
        type: 'text',
        name: "删除",
        type: "text",
        clickFun: (row) => handleDelete(row.id),
        disabled: () => operationType.value === 'view',
      }
    ]
  }
        disabled: () => operationType.value === "view",
      },
    ],
  },
]);
const tableData = ref([]);
const tableLoading = ref(false);

const {form, rules} = toRefs(data);
const { form, rules } = toRefs(data);
const userList = ref([]);
const productOptions = ref([]);
const currentProductId = ref(0);
@@ -261,9 +328,9 @@
// 打开弹框
const openDialog = async (type, row) => {
  operationType.value = type;
  userListNoPage().then(res => {
  userListNoPage().then((res) => {
    userList.value = res.data || [];
  })
  });
  // 先重置表单数据（保持字段完整，避免弹窗首次渲染时触发必填红框“闪一下”）
  form.value = {
    checkTime: getTodayStr(),
@@ -277,17 +344,17 @@
    checkResult: "",
    unit: "",
    checkUserName: "",
  }
  };
  tableData.value = [];
  // 先确保产品树已加载，否则编辑时产品/规格型号无法反显
  await getProductOptions();
  if (operationType.value === 'edit') {
  if (operationType.value === "edit") {
    await fetchData(row.id);
    currentProductId.value = row.productId || 0
    currentProductId.value = row.productId || 0;
    // 关键：编辑时加载规格型号下拉选项，才能反显 productModelId
    if (currentProductId.value) {
      try {
        const res = await modelList({id: currentProductId.value});
        const res = await modelList({ id: currentProductId.value });
        modelOptions.value = res || [];
        // 同步回填 model / unit（有些接口返回的 row 里可能没带全）
        if (form.value.productModelId) {
@@ -300,17 +367,16 @@
    }
    // 编辑模式下，先加载指标选项，然后加载参数列表
    if (currentProductId.value) {

    } else {
      getQualityInspectParamList(row.id);
    }
  }
  if (operationType.value === 'view') {
  if (operationType.value === "view") {
    await fetchData(row.id);
    currentProductId.value = row.productId || 0
    currentProductId.value = row.productId || 0;
    if (currentProductId.value) {
      try {
        const res = await modelList({id: currentProductId.value});
        const res = await modelList({ id: currentProductId.value });
        modelOptions.value = res || [];
        if (form.value.productModelId) {
          handleChangeModel(form.value.productModelId);
@@ -331,7 +397,7 @@
  nextTick(() => {
    proxy.$refs?.formRef?.clearValidate?.();
  });
}
};
const getProductOptions = () => {
  return productTreeList().then((res) => {
    productOptions.value = convertIdToValue(res);
@@ -342,11 +408,11 @@
  form.value.productModelId = undefined;
  form.value.unit = undefined;
  modelOptions.value = [];
  currentProductId.value = value
  currentProductId.value = value;
  form.value.productName = findNodeById(productOptions.value, value);
  modelList({id: value}).then((res) => {
  modelList({ id: value }).then((res) => {
    modelOptions.value = res;
  })
  });
  if (currentProductId.value) {
    getList();
  }
@@ -354,14 +420,19 @@

const handleItemSelect = (value) => {
  // 过滤已存在的指标
  value = value.filter(item => !tableData.value.some(existingItem => existingItem.id === item.id));
  tableData.value.push(...value)
}
  value = value.filter(
    (item) =>
      !tableData.value.some((existingItem) => existingItem.id === item.id)
  );
  tableData.value.push(...value);
};

const handleChangeModel = (value) => {
  form.value.model = modelOptions.value.find(item => item.id == value)?.model || '';
  form.value.unit = modelOptions.value.find(item => item.id == value)?.unit || '';
}
  form.value.model =
    modelOptions.value.find((item) => item.id == value)?.model || "";
  form.value.unit =
    modelOptions.value.find((item) => item.id == value)?.unit || "";
};

const findNodeById = (nodes, productId) => {
  for (let i = 0; i < nodes.length; i++) {
@@ -380,35 +451,37 @@

// 详情模式展示字段（不使用表单控件）
const viewProductName = computed(() => {
  const id = form.value?.productId
  const label = id ? findNodeById(productOptions.value || [], id) : null
  return label || id || '-'
})
  const id = form.value?.productId;
  const label = id ? findNodeById(productOptions.value || [], id) : null;
  return label || id || "-";
});

const viewProductModel = computed(() => {
  const modelId = form.value?.productModelId
  const matched = (modelOptions.value || []).find((x) => String(x.id) === String(modelId))
  return matched?.model || modelId || '-'
})
  const modelId = form.value?.productModelId;
  const matched = (modelOptions.value || []).find(
    (x) => String(x.id) === String(modelId)
  );
  return matched?.model || modelId || "-";
});

const viewCheckType = computed(() => {
  const t = form.value?.checkType
  if (t === 0 || t === '0') return '入厂检'
  if (t === 1 || t === '1') return '车间检'
  if (t === 2 || t === '2') return '出厂检'
  return '-'
})
  const t = form.value?.checkType;
  if (t === 0 || t === "0") return "入厂检";
  if (t === 1 || t === "1") return "车间检";
  if (t === 2 || t === "2") return "出厂检";
  return "-";
});

const viewCheckResult = computed(() => {
  const r = form.value?.checkResult
  if (r === 1 || r === '1') return '合格'
  if (r === 0 || r === '0') return '不合格'
  return '-'
})
  const r = form.value?.checkResult;
  if (r === 1 || r === "1") return "合格";
  if (r === 0 || r === "0") return "不合格";
  return "-";
});

function convertIdToValue(data) {
  return data.map((item) => {
    const {id, children, ...rest} = item;
    const { id, children, ...rest } = item;
    const newItem = {
      ...rest,
      value: id, // 将 id 改为 value
@@ -423,24 +496,24 @@

// 提交产品表单
const submitForm = () => {
  if (operationType.value === 'view') return;
  proxy.$refs.formRef.validate(valid => {
  if (operationType.value === "view") return;
  proxy.$refs.formRef.validate((valid) => {
    if (valid) {
      const data = {...form.value, qualityInspectItem: tableData.value}
      const data = { ...form.value, qualityInspectItem: tableData.value };
      if (operationType.value === "add") {
        createRawMaterial(data).then(res => {
        createRawMaterial(data).then((res) => {
          proxy.$modal.msgSuccess("提交成功");
          closeDia();
        })
        });
      } else {
        updateRawMaterial(data).then(res => {
        updateRawMaterial(data).then((res) => {
          proxy.$modal.msgSuccess("提交成功");
          closeDia();
        })
        });
      }
    }
  })
}
  });
};

const getList = () => {
  if (!currentProductId.value) {
@@ -449,45 +522,45 @@
  }
  let params = {
    productId: currentProductId.value,
  }
  qualityInspectDetailByProductId(params).then(res => {
  };
  qualityInspectDetailByProductId(params).then((res) => {
    // 清空表格数据，等待用户选择指标
    tableData.value = [];
  })
}
  });
};

const getQualityInspectParamList = (id) => {
  qualityInspectParamInfo(id).then(res => {
  qualityInspectParamInfo(id).then((res) => {
    tableData.value = res.data;
  })
}
  });
};
// 关闭弹框
const closeDia = () => {
  proxy.resetForm("formRef");
  tableData.value = [];
  dialogFormVisible.value = false;
  emit('close')
  emit("close");
};

const handleDelete = (id) => {
  if (operationType.value === 'view') return;
  tableData.value = tableData.value.filter(item => item.id !== id);
}
  if (operationType.value === "view") return;
  tableData.value = tableData.value.filter((item) => item.id !== id);
};

const fetchData = (id) => {
  tableLoading.value = true;
  findRawMaterialDetail(id).then(res => {
    form.value = res.data;
    tableData.value = res.data.qualityInspectItem;
  }).finally(() => {
    tableLoading.value = false;
  })
}
  findRawMaterialDetail(id)
    .then((res) => {
      form.value = res.data;
      tableData.value = res.data.qualityInspectItem;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>
<style scoped></style>