feat(质量管理): 新增检测项目管理功能

buhuazhen

昨天 03e5b550e53a2f629c50df5c5b0000d15355694c

feat(质量管理): 新增检测项目管理功能

添加检测项目列表页面的API接口和Vue组件，支持检测项目的增删改查操作

 src/api/qualityManagement/inspectItem.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,25 @@
import request from "@/utils/request";

export function qualityInspectItemListPage(data) {
  return request({
    url: "/qualityInspectItem/listPage",
    method: "post",
    data,
  });
}

export function qualityInspectItemSave(data) {
  return request({
    url: "/qualityInspectItem/save",
    method: "post",
    data,
  });
}

export function qualityInspectItemDelete(data) {
  return request({
    url: "/qualityInspectItem/delete",
    method: "post",
    data,
  });
}

 src/views/qualityManagement/InspectItem/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,233 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div style="display: flex; flex-direction: row; align-items: center;">
        <span class="search_title">检测项目：</span>
        <el-input
          v-model="searchForm.name"
          style="width: 260px"
          placeholder="请输入检测项目名称"
          clearable
          :prefix-icon="Search"
          @change="handleQuery"
          @clear="handleQuery"
        />
        <el-button type="primary" style="margin-left: 10px" @click="handleQuery">搜索</el-button>
      </div>
      <div>
        <el-button type="primary" @click="openDialog('add')">新增</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :isSelection="true"
        :tableLoading="tableLoading"
        :total="page.total"
        @selection-change="handleSelectionChange"
        @pagination="pagination"
      />
    </div>

    <el-dialog v-model="dialogVisible" :title="operationType === 'add' ? '新增检测项目' : '修改检测项目'" width="520px" @close="closeDialog">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="检测项目" prop="name">
          <el-input v-model="form.name" placeholder="请输入检测项目名称" clearable />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入单位" clearable />
        </el-form-item>
        <el-form-item label="标准值" prop="standardValue">
          <el-input v-model="form.standardValue" placeholder="请输入标准值" clearable />
        </el-form-item>
        <el-form-item label="内控值" prop="internalControl">
          <el-input v-model="form.internalControl" placeholder="请输入内控值" clearable />
        </el-form-item>
        <el-form-item label="化验值" prop="testValue">
          <el-input v-model="form.testValue" placeholder="请输入化验值" clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import { getCurrentInstance, reactive, ref, toRefs } from "vue";
import {
  qualityInspectItemDelete,
  qualityInspectItemListPage,
  qualityInspectItemSave,
} from "@/api/qualityManagement/inspectItem.js";

const { proxy } = getCurrentInstance();

const data = reactive({
  searchForm: {
    name: "",
  },
  form: {
    id: null,
    name: "",
    unit: "",
    standardValue: "",
    internalControl: "",
    testValue: "",
  },
  rules: {
    name: [{ required: true, message: "请输入检测项目名称", trigger: "blur" }],
    unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
  },
});

const { searchForm, form, rules } = toRefs(data);

const tableColumn = ref([
  { label: "检测项目", prop: "name" },
  { label: "单位", prop: "unit", width: 120 },
  { label: "标准值", prop: "standardValue", width: 160 },
  { label: "内控值", prop: "internalControl", width: 160 },
  { label: "化验值", prop: "testValue", width: 160 },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 100,
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => openDialog("edit", row),
      },
    ],
  },
]);

const tableData = ref([]);
const tableLoading = ref(false);
const selectedRows = ref([]);
const dialogVisible = ref(false);
const operationType = ref("add");
const page = reactive({
  current: 1,
  size: 10,
  total: 0,
});

const resetFormData = () => {
  form.value = {
    id: null,
    name: "",
    unit: "",
    standardValue: "",
    internalControl: "",
    testValue: "",
  };
};

const getList = () => {
  tableLoading.value = true;
  const params = {
    name: searchForm.value.name || null,
    current: page.current,
    size: page.size,
  };
  qualityInspectItemListPage(params)
    .then((res) => {
      const records = res?.data?.records || [];
      tableData.value = records;
      page.total = res?.data?.total || 0;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};

const handleQuery = () => {
  page.current = 1;
  getList();
};

const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};

const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

const openDialog = (type, row) => {
  operationType.value = type;
  resetFormData();
  if (type === "edit" && row) {
    form.value = {
      id: row.id || null,
      name: row.name || "",
      unit: row.unit || "",
      standardValue: row.standardValue || "",
      internalControl: row.internalControl || "",
      testValue: row.testValue || "",
    };
  }
  dialogVisible.value = true;
};

const closeDialog = () => {
  proxy.resetForm("formRef");
  resetFormData();
  dialogVisible.value = false;
};

const submitForm = () => {
  proxy.$refs.formRef.validate((valid) => {
    if (!valid) {
      return;
    }
    qualityInspectItemSave(form.value).then(() => {
      proxy.$modal.msgSuccess(operationType.value === "add" ? "新增成功" : "修改成功");
      closeDialog();
      getList();
    });
  });
};

const handleDelete = () => {
  if (!selectedRows.value.length) {
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  const ids = selectedRows.value.map((item) => item.id);
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      qualityInspectItemDelete(ids).then(() => {
        proxy.$modal.msgSuccess("删除成功");
        getList();
      });
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};

getList();
</script>

<style scoped></style>