修改usecrud。引入commonTabel。质量目标维护模块。

package.json

@@ -101,7 +101,7 @@
     "postcss-html": "^1.6.0",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.2.5",
-    "sass": "^1.71.1",
+    "sass": "1.80.1",
     "stylelint": "^16.2.1",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recess-order": "^4.6.0",

src/common/configs/dictDataUtil.ts

@@ -20,6 +20,7 @@ const DictDataUtil = {
     //映射字段列表
     expand_field_list: "expand_field_list",
     spc_operation: "spc_operation",
+    prodt_category: "prodt_category",
   },
 };
 

src/components/CommonTable/configs/product.ts

@@ -1,23 +0,0 @@
-export const productUrl = "/api/v1/plan/order";
-
-export const productOption = {
-  column: [
-    {
-      label: "这是配置One",
-      prop: "materialCode",
-      search: true,
-    },
-  ],
-};
-
-export const productUrl2 = "22222";
-
-export const productOption2 = {
-  column: [
-    {
-      label: "哈哈哈哈",
-      prop: "materialCode",
-      search: true,
-    },
-  ],
-};

src/components/CommonTable/configs/tableConfig.ts

@@ -0,0 +1,142 @@
+import { useDictionaryStore } from "@/store";
+const { dicts } = useDictionaryStore();
+import dictDataUtil from "@/common/configs/dictDataUtil";
+
+const switchOp = [
+  {
+    label: "",
+    value: 0,
+  },
+  {
+    label: "",
+    value: 1,
+  },
+];
+export const tableConfig = {
+  PROCESS_SELECT: {
+    url: "/api/v1/category/detail/operation",
+    column: [
+      {
+        label: "工序名称",
+        prop: "operationName",
+        span: 12,
+        search: true,
+        rules: [
+          {
+            required: true,
+            message: "工序名称不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+      {
+        label: "工序编码",
+        prop: "operationCode",
+        span: 12,
+        search: true,
+        display: false,
+      },
+
+      {
+        label: "工艺条件",
+        prop: "processAsk",
+        span: 12,
+        minWidth: 300,
+        rules: [
+          {
+            required: true,
+            message: "工艺条件不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+
+      {
+        label: "标准工时(分)",
+        prop: "standardWorktime",
+        type: "number",
+        span: 12,
+        rules: [
+          {
+            required: true,
+            message: "标准工时不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+
+      {
+        label: "目标值(%)",
+        prop: "targetRate",
+        type: "number",
+        max: 100,
+        min: 0,
+        span: 12,
+        rules: [
+          {
+            required: true,
+            message: "目标值不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+
+      {
+        label: "工序标注",
+        prop: "operationLabel",
+        span: 12,
+        rules: [
+          {
+            max: 16,
+            message: "工序标注不能超过16个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+      {
+        label: "方法",
+        prop: "method",
+        span: 12,
+      },
+      {
+        label: "试验规程编号",
+        prop: "testPlanCode",
+        span: 12,
+      },
+      {
+        label: "是否可跳过",
+        prop: "skipped",
+        span: 8,
+        hide: true,
+        type: "switch",
+        dicData: switchOp,
+        value: 0,
+      },
+      {
+        label: "是否关键工序",
+        prop: "keyProcesses",
+        span: 8,
+        type: "switch",
+        dicData: switchOp,
+        value: 0,
+      },
+      {
+        label: "是否特殊工序",
+        prop: "isSpecial",
+        span: 8,
+        type: "switch",
+        dicData: switchOp,
+        value: 0,
+      },
+      {
+        label: "是否禁用",
+        prop: "enabled",
+        hide: true,
+        span: 8,
+        type: "switch",
+        dicData: switchOp,
+        value: 0,
+      },
+    ],
+  },
+};

src/components/CommonTable/index.vue

@@ -4,9 +4,8 @@
     :title="tableTitle"
     width="1200"
     :before-close="handleClose"
+    :append-to-body="true"
   >
-    <div>{{ form }}</div>
-    <div>{{ search }}</div>
     <avue-crud
       ref="crudRef"
       v-model:search="search"
@@ -14,109 +13,219 @@
       :data="data"
       :option="option"
       v-model:page="page"
+      @row-click="rowClick"
       @row-save="createRow"
       @row-update="updateRow"
       @row-del="deleteRow"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @size-change="dataList"
+      @current-change="dataList"
       @selection-change="selectionChange"
-    >
-      <template #menu-left="{ size }">
-        <el-button
-          :disabled="toDeleteIds.length < 1"
-          type="danger"
-          icon="el-icon-delete"
-          :size="size"
-          @click="multipleDelete"
-          >删除</el-button
-        >
-      </template>
-    </avue-crud>
-    <!-- <template #footer>
+    />
+
+    <template #footer>
       <div class="dialog-footer">
-        <el-button @click="dialogVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="dialogVisible = false">
-          Confirm
-        </el-button>
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="onSelected"> 确定 </el-button>
       </div>
-    </template> -->
+    </template>
   </el-dialog>
 </template>
 <script setup>
 import { ref, getCurrentInstance } from "vue";
 import { useCrud } from "@/hooks/userCrud";
-import ButtonPermKeys from "@/common/configs/buttonPermission";
+import { tableConfig } from "./configs/tableConfig";
 
-import {
-  productUrl,
-  productOption,
-  productUrl2,
-  productOption2,
-} from "./configs/product";
+const props = defineProps({
+  tableTitle: {
+    default: "",
+    type: String,
+  },
+  tableType: {
+    default: "",
+    type: String,
+  },
+  multiple: {
+    default: false,
+    type: Boolean,
+  },
+  // 用于多选的返回值
+  multipleKey: {
+    default: "id",
+    type: String,
+  },
+  multipleRow: {
+    default: false,
+    type: Boolean,
+  },
+});
 
-import { useCommonStoreHook } from "@/store";
-const { isShowTable, tableType, tableTitle } = toRefs(useCommonStoreHook());
-// 传入一个url，后面不带/
-const { url, form, data, option, search, page, toDeleteIds, Methords, Utils } =
-  useCrud({
-    src: "/api/v1/plan/order",
+const isShowTable = ref(false);
+const startSelect = async (param) => {
+  if (param) {
+    commonConfig.value.params = param;
+  }
+  dataList();
+  isShowTable.value = true;
+};
+
+/**
+ * propName 要跟字典配置的key一致
+ * dictData 字典数据, 注意props的value和label
+ * */
+const refreshDictData = (propName, dictData, keyName = "value") => {
+  nextTick(() => {
+    if (dictData && dictData.length > 0 && crudRef.value) {
+      crudRef.value.updateDic(propName, dictData);
+      search.value[propName] = dictData[0][keyName];
+    }
   });
-const { dataList, createRow, updateRow, deleteRow } = Methords; //增删改查
+};
+
+/**
+ * op 对象的字段要跟option实际字段一直 才能进行合并操作
+ */
+const mergeOption = (op) => {
+  for (const key of Object.keys(op)) {
+    option.value[key] = op[key];
+  }
+};
+
+// 传入一个url，后面不带/
+const {
+  url,
+  form,
+  data,
+  option,
+  search,
+  page,
+  toDeleteIds,
+  selectedRows,
+  Methords,
+  Utils,
+  commonConfig,
+} = useCrud({
+  src: tableConfig[props.tableType].url,
+  multipleSelectKey: props.multipleKey,
+});
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords; //增删改查
 const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
-const { checkBtnPerm } = Utils; //按钮权限等工具
-// checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
-// const permission = reactive({
-//   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
-//   addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
-//   editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
-//   menu: true,
-// });
 
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
 
-// 设置表格列或者其他自定义的option
-// option.value = Object.assign(option.value, {
-//   selection: true,
-//   column: [
-//     {
-//       label: "产品",
-//       prop: "materialCode",
-//       search: true,
-//     },
-//     {
-//       label: "年龄",
-//       prop: "materialModel",
-//       search: true,
-//     },
-//     {
-//       label: "性别",
-//       prop: "orderCode",
-//       search: true,
-//     },
-//     {
-//       label: "身高",
-//       prop: "projectCode",
-//       search: true,
-//     },
-//   ],
-// });
-// option.value = Object.assign(option.value, {
-//   selection: true,
-// });
+const commonTableEmits = defineEmits(["selectedSure", "selectMultipleSure"]);
+
+const calculateColumnWidth = (column) => {
+  if (!column.label) {
+    return column.minWidth;
+  }
+  // 字宽度
+  const fontSize = 17;
+  let width = fontSize * (column.label.length + 2);
+  // 如果开启过滤
+  if (column.filters) {
+    width += 12;
+  }
+  // 如果开启排序
+  if (column.sortable) {
+    width += 24;
+  }
+  return width;
+};
 
+onMounted(() => {
+  if (props.tableType == "ROUTE_COMMON") {
+    search.value.enabled = "0";
+  }
+  url.value = tableConfig[props.tableType].url;
+  option.value = Object.assign(option.value, {
+    searchEnter: true,
+    menu: false,
+    highlightCurrentRow: true,
+    selection: props.multiple,
+    addBtn: false,
+    height: "500",
+    overHidden: true,
+    indexWidth: "120px",
+    searchLabelWidth: "120px",
+    column: tableConfig[props.tableType].column,
+  });
+  // 列处理
+  if (option.value.column) {
+    for (let col of option.value.column) {
+      col.minWidth = calculateColumnWidth(col);
+    }
+  }
+  // dataList();
+});
 watch(
-  () => tableType.value,
-  (type) => {
-    if (type == 1) {
-      url.value = productUrl;
-      option.value = Object.assign(option.value, productOption);
-    } else {
-      url.value = productUrl2;
-      option.value = Object.assign(option.value, productOption2);
+  () => props.tableType,
+  () => {
+    url.value = tableConfig[props.tableType].url;
+    option.value = Object.assign(option.value, {
+      searchEnter: true,
+      menu: false,
+      highlightCurrentRow: true,
+      selection: props.multiple,
+      addBtn: false,
+      height: "500",
+      overHidden: true,
+      searchLabelWidth: "120px",
+      column: tableConfig[props.tableType].column,
+    });
+    // 列处理
+    if (option.value.column) {
+      for (let col of option.value.column) {
+        col.minWidth = calculateColumnWidth(col);
+      }
     }
-    dataList();
+    //dataList();
   }
 );
 
+const selectRowValue = ref({});
+const rowClick = (row) => {
+  selectRowValue.value = row;
+};
+
 const handleClose = () => {
+  // 在这里可以清空打开的commonTable的搜索条件
+  search.value.bomMaterialCode = "";
+
+  crudRef.value.clearSelection();
+  toDeleteIds.value = [];
+  selectedRows.value = [];
+  selectRowValue.value = {};
   isShowTable.value = false;
+
+  console.log(
+    "关闭弹窗",
+    toDeleteIds.value,
+    selectedRows.value,
+    selectRowValue.value
+  );
 };
+
+const onSelected = () => {
+  if (props.multiple) {
+    if (toDeleteIds.value.length < 1) {
+      ElMessage.warning("未选择任何数据");
+      return;
+    }
+    commonTableEmits("selectMultipleSure", toDeleteIds.value);
+  } else {
+    if (props.multipleRow) {
+      console.log(selectedRows);
+      commonTableEmits("selectedSure", selectedRows.value);
+    } else {
+      commonTableEmits("selectedSure", selectRowValue.value);
+    }
+  }
+
+  handleClose();
+};
+
+defineExpose({ startSelect, refreshDictData, mergeOption });
 </script>

src/hooks/userCrud.ts

@@ -247,6 +247,28 @@ export const useCrud = (config?: UseCrudConfig) => {
       });
     },
 
+    deleteRow2: async (row: any, index: number, done: () => void) => {
+      ElMessageBox.confirm("是否删除所选中数据？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(async () => {
+        try {
+          const res = await request({
+            url: `${url.value}/del`,
+            method: "post",
+            data: row,
+          });
+          Methords.dataList();
+          config?.done && config?.done();
+        } catch (err) {
+          config?.loading && config?.loading();
+        } finally {
+          config?.done && config?.done();
+        }
+      });
+    },
+
     // 设置selection: true,后监听选中改变事件，将Id存入数组
     selectionChange: (rows?: any[]) => {
       toDeleteIds.value = [];
@@ -394,21 +416,6 @@ export const useCrud = (config?: UseCrudConfig) => {
       });
       Utils.downloadFile(response);
     },
-
-    /**
-     * 根据搜索项导出数据
-     */
-    downloadSPCTemplate: async (urlStr: string, filePath: string) => {
-      handleSearchData();
-      const response = await request({
-        url: urlStr,
-        method: "post",
-        data: search.value,
-        params: { filePath: filePath },
-        responseType: "arraybuffer",
-      });
-      Utils.downloadFile(response);
-    },
   };
 
   return {

src/layout/components/AppMain/index.vue

@@ -14,7 +14,6 @@
         </transition>
       </template>
     </router-view>
-    <CommonTable />
   </section>
 </template>
 

src/router/modules/statistic.ts

@@ -55,5 +55,14 @@ export default {
         icon: "Guide",
       },
     },
+    {
+      path: "qualityGoal",
+      component: () => import("@/views/statistic/qualityGoal/index.vue"),
+      name: "qualityGoal",
+      meta: {
+        title: "质量目标维护",
+        icon: "Guide",
+      },
+    },
   ],
 };

src/store/modules/dictionary.ts

@@ -35,6 +35,7 @@ export const useDictionaryStore = defineStore("dictionaryStore", () => {
     "sales_info_type",
     "unqualified_audit_type",
     "spc_control_chart",
+    "prodt_category",
   ];
   const dicts = ref<{ [key: string]: any[] }>({});
 

src/views/statistic/qualityGoal/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="mainContentBox">
+    <avue-crud
+      ref="crudRef"
+      v-model:search="search"
+      v-model="form"
+      :data="data"
+      :option="option"
+      v-model:page="page"
+      @row-save="createRow"
+      @row-update="updateRow"
+      @row-del="deleteRow"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @size-change="dataList"
+      @current-change="dataList"
+      @selection-change="selectionChange"
+    >
+      <template #menu="{ row, index, type }">
+        <el-button type="primary" size="small" @click="showDetail(row)"
+          >工序</el-button
+        ></template
+      >
+      <!--      <template #menu-right="{}">-->
+      <!--        <el-button-->
+      <!--          class="ml-3"-->
+      <!--          @click="exportData('/api/v1/quality/report/export')"-->
+      <!--        >-->
+      <!--          <template #icon> <i-ep-download /> </template>导出-->
+      <!--        </el-button>-->
+      <!--      </template>-->
+    </avue-crud>
+    <ProcessGoal ref="processGoalRef" />
+  </div>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+import reportTemplate from "@/components/ReportView/reportTemplate.vue";
+import ProcessGoal from "./processGoal.vue";
+import dictDataUtil from "@/common/configs/dictDataUtil";
+// 传入一个url，后面不带/
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/categoryTarget",
+  });
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords; //增删改查
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
+const tablesData = ref([]);
+const crudRef = ref(null); //crudRef.value 获取avue-crud对象
+
+onMounted(() => {
+  dataList();
+});
+
+const processGoalRef = ref(null);
+
+const showDetail = (row) => {
+  processGoalRef.value && processGoalRef.value.toShowDrawer(row);
+};
+
+// 设置表格列或者其他自定义的option
+option.value = Object.assign(option.value, {
+  searchEnter: true,
+  viewBtn: false,
+  column: [
+    {
+      label: "产品类型",
+      prop: "prodtCategory",
+      type: "select",
+      dicUrl:
+        dictDataUtil.request_url +
+        dictDataUtil.EXPAND_FIELD_TABLE.prodt_category,
+      props: {
+        label: "dictLabel",
+        value: "dictValue",
+      },
+    },
+    {
+      label: "年份",
+      prop: "year",
+    },
+    {
+      label: "成品率(%)",
+      prop: "yield",
+    },
+    {
+      label: "是否显示",
+      prop: "isShow",
+      type: "radio", //类型为单选框
+      addDisplay: false,
+      dicData: [
+        {
+          label: "否",
+          value: false,
+        },
+        {
+          label: "是",
+          value: true,
+        },
+      ],
+      value: true,
+    },
+  ],
+});
+</script>

src/views/statistic/qualityGoal/processGoal.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref, getCurrentInstance } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+
+import dictDataUtil from "@/common/configs/dictDataUtil";
+// 传入一个url，后面不带/
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/category/detail",
+  });
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords; //增删改查
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
+const tablesData = ref([]);
+const crudRef = ref(null); //crudRef.value 获取avue-crud对象
+
+const startToChooseProcess = () => {
+  commonTableRef.value?.startSelect({ targetId: targetId.value });
+};
+
+// 设置表格列或者其他自定义的option
+option.value = Object.assign(option.value, {
+  viewBtn: false,
+  column: [
+    {
+      label: "工序编码",
+      prop: "operationCode",
+      click: () => {
+        startToChooseProcess();
+      },
+    },
+    {
+      label: "工序名称",
+      prop: "operationName",
+    },
+  ],
+});
+
+const visible = ref(false);
+const targetId = ref(null);
+const toShowDrawer = (row) => {
+  targetId.value = row.id;
+  search.value.targetId = targetId.value;
+  form.value.targetId = targetId.value;
+  visible.value = true;
+  dataList();
+};
+
+defineExpose({
+  toShowDrawer,
+});
+
+const commonTableRef = ref({});
+const commonTableType = ref("PROCESS_SELECT");
+const onSelectedFinish = (row) => {
+  console.log("onSelectedFinish", row);
+  // form.value.operationCode = row.operationCode;
+  form.value = { ...row };
+  form.value.targetId = targetId.value;
+};
+</script>
+
+<template>
+  <div>
+    <el-drawer size="60%" append-to-body v-model="visible">
+      <avue-crud
+        ref="crudRef"
+        v-model:search="search"
+        v-model="form"
+        :data="data"
+        :option="option"
+        v-model:page="page"
+        @row-save="createRow"
+        @row-update="updateRow"
+        @row-del="deleteRow"
+        @search-change="searchChange"
+        @search-reset="resetChange"
+        @size-change="dataList"
+        @current-change="dataList"
+        @selection-change="selectionChange"
+      >
+      </avue-crud>
+    </el-drawer>
+    <CommonTable
+      ref="commonTableRef"
+      tableTitle="选择工序"
+      :tableType="commonTableType"
+      @selected-sure="onSelectedFinish"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss"></style>