1.工艺路线列表。2.公共弹窗。3.完善demo。

README.md

@@ -20,3 +20,4 @@ pnpm run dev
 
 功能示例：
 1. v-debounce:click防抖。2.按钮权限。v-hasPerm或者checkPerm 3.数据字典在dictionary里面添加type。
+4.全局公共选择table的弹窗CommonTable.

src/api/craft/route/index.ts

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export function copyRoute(id: string) {
+  return request({
+    url: "/api/v1/op/route/copyAdd",
+    method: "post",
+    data: { id: id },
+  });
+}

src/common/configs/dictDataUtil.ts

@@ -1,8 +1,7 @@
 // 所有的字典类型typeCode都要在这里面写。
 
 const DictDataUtil = {
-  request_url:
-      import.meta.env.VITE_APP_BASE_API + "/api/v1/sys/dictData/queryByType/",
+  request_url: "/api/v1/sys/dictData/queryByType/",
   TYPE_CODE: {
     //订单类型
     plan_order_type: "plan_order_type",
@@ -18,6 +17,8 @@ const DictDataUtil = {
     device_run_status: "device_run_status",
     //设备维护频率
     device_maintenance_cycle: "device_maintenance_cycle",
+    // 工艺路线类型
+    routing_type: "routing_type",
   },
   EXPAND_FIELD_TABLE: {
     //映射表列表

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,138 @@
+import { useDictionaryStoreHook } from "@/store";
+const { dicts } = useDictionaryStoreHook();
+
+export const tableConfig = {
+  MARTERIAL: {
+    url: "/api/v1/base/material",
+    column: [
+      { label: "客户型号", prop: "customervodel", search: true },
+      { label: "生产厂家", prop: "manufacturer", search: true },
+      { label: "物料编码", prop: "materialCode", search: true },
+      { label: "物料名称", prop: "materialName", search: true },
+      { label: "保质期", prop: "qualityGuaranteePeriod", search: true },
+
+      { label: "筛选规范", prop: "selectionSpec", search: true },
+      { label: "物料规格", prop: "spec", search: true },
+      {
+        label: "适用平台",
+        prop: "applicablePlatformsDictValue",
+        // search: true,
+        // filterable: true,
+        // type: "select",
+        // dataType: "string",
+        // dicData: dicts.applicable_platforms,
+        // props: { label: "dictLabel", value: "dictValue" },
+      },
+      {
+        label: "物料属性",
+        prop: "attributeDictValue",
+        search: true,
+        filterable: true,
+        type: "select",
+        dataType: "string",
+        dicData: dicts.material_properties,
+        props: { label: "dictLabel", value: "dictValue" },
+      },
+      {
+        label: "是否工装",
+        prop: "frock",
+        search: true,
+        filterable: true,
+        type: "radio", //类型为单选框
+        dicData: [
+          {
+            label: "否",
+            value: 0,
+          },
+          {
+            label: "是",
+            value: 1,
+          },
+        ],
+        value: 0,
+      },
+      {
+        label: "质检方案",
+        prop: "inspectDictValue",
+        search: true,
+        filterable: true,
+        type: "select",
+        dataType: "string",
+        dicData: dicts.quality_testing_plan,
+        props: { label: "dictLabel", value: "dictValue" },
+      },
+      {
+        label: "物料级别",
+        prop: "levelDictValue",
+        search: true,
+        filterable: true,
+        type: "select",
+        dataType: "string",
+        dicData: dicts.material_level,
+        props: { label: "dictLabel", value: "dictValue" },
+      },
+      {
+        label: "封装方法",
+        prop: "packageDictValue",
+        search: true,
+        filterable: true,
+        type: "select",
+        dataType: "string",
+        dicData: dicts.packaging_method,
+        props: { label: "dictLabel", value: "dictValue" },
+      },
+      {
+        label: "质量等级",
+        prop: "qualityLevelDictValue",
+        search: true,
+        filterable: true,
+        type: "select",
+        dataType: "string",
+        dicData: dicts.quality_grade,
+        props: { label: "dictLabel", value: "dictValue" },
+      },
+      {
+        label: "选用类型",
+        prop: "selectionDictValue",
+        search: true,
+        filterable: true,
+        type: "select",
+        dataType: "string",
+        dicData: dicts.selection_type,
+        props: { label: "dictLabel", value: "dictValue" },
+      },
+      {
+        label: "阶段",
+        prop: "stageDictValue",
+        search: true,
+        filterable: true,
+        type: "select",
+        dataType: "string",
+        dicData: dicts.stage,
+        props: { label: "dictLabel", value: "dictValue" },
+      },
+      {
+        label: "物料单位",
+        prop: "unitDictValue",
+        search: true,
+        filterable: true,
+        type: "select",
+        dataType: "string",
+        dicData: dicts.danwei_type,
+        props: { label: "dictLabel", value: "dictValue" },
+      },
+      { label: "备注", prop: "remark", type: "textarea", search: true },
+    ],
+  },
+
+  FACTORY: {
+    url: "xxxxxxx",
+    column: [
+      {
+        label: "xxxxxxx",
+        prop: "xxxxxxxx",
+        search: true,
+      },
+    ],
+  },
+};

src/components/CommonTable/index.vue

@@ -5,8 +5,6 @@
     width="1200"
     :before-close="handleClose"
   >
-    <div>{{ form }}</div>
-    <div>{{ search }}</div>
     <avue-crud
       ref="crudRef"
       v-model:search="search"
@@ -14,109 +12,79 @@
       :data="data"
       :option="option"
       v-model:page="page"
+      @row-click="rowClick"
       @row-save="createRow"
       @row-update="updateRow"
       @row-del="deleteRow"
       @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";
+
+const props = defineProps({
+  tableTitle: {
+    default: "",
+    type: String,
+  },
+  tableType: {
+    default: "",
+    type: String,
+  },
+});
+
+const isShowTable = ref(false);
 
-import {
-  productUrl,
-  productOption,
-  productUrl2,
-  productOption2,
-} from "./configs/product";
+const startSelect = () => {
+  isShowTable.value = true;
+};
 
-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",
+    src: tableConfig[props.tableType].url,
   });
 const { dataList, createRow, updateRow, deleteRow } = 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"]);
 
-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);
-    }
-    dataList();
-  }
-);
+watchEffect(async () => {
+  url.value = tableConfig[props.tableType].url;
+  option.value = Object.assign(option.value, {
+    menu: false,
+    highlightCurrentRow: true,
+    addBtn: false,
+    column: tableConfig[props.tableType].column,
+  });
+  dataList();
+});
+
+const selectRowValue = ref({});
+const rowClick = (row) => {
+  selectRowValue.value = row;
+};
 
 const handleClose = () => {
   isShowTable.value = false;
 };
+
+const onSelected = () => {
+  commonTableEmits("selectedSure", selectRowValue.value);
+  isShowTable.value = false;
+};
+
+defineExpose({ startSelect });
 </script>

src/hooks/userCrud.ts

@@ -29,7 +29,7 @@ export const useCrud = (config?: UseCrudConfig) => {
     searchIcon: true,
     searchIndex: 3, //searchIcon是否启用功能按钮, searchIndex配置收缩展示的个数,默认为2个
     index: true, //是否显示第几项
-    indexLabel: '序号',
+    indexLabel: "序号",
     indexWidth: "55px",
     refreshBtn: false,
     border: true,
@@ -42,7 +42,7 @@ export const useCrud = (config?: UseCrudConfig) => {
 
   /** 表格的分页数据 v-model */
   const page = ref<PageOption>({
-    total: 12220,
+    total: 0,
     currentPage: 1,
     pageSize: 10,
   });

src/layout/components/AppMain/index.vue

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

src/store/modules/common.ts

@@ -4,8 +4,7 @@ import { defineStore } from "pinia";
 export const useCommonStore = defineStore("commonStore", {
   state: () => ({
     // 弹出公共Table的弹窗
-    isShowTable: false,
-    tableType: 1,
+    tableType: "MARTERIAL", //改变可以展示不同的数据
     tableTitle: "",
   }),
 });

src/views/base/craftManagement/defectMana/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>缺陷</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>

src/views/base/craftManagement/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>

src/views/base/craftManagement/process/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>工序</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>

src/views/base/craftManagement/route/index.vue

@@ -0,0 +1,299 @@
+<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 #used="{ row }">
+        <el-tag v-if="row.used == '1'" type="success">已绑定</el-tag>
+        <el-tag v-else type="info">未绑定</el-tag>
+      </template>
+
+      <template #menu="{ row }">
+        <el-button
+          link
+          icon="el-icon-copy-document"
+          :disabled="row.usable == '1' ? false : true"
+          @click="copyRow(row)"
+          >复制</el-button
+        >
+        <el-button
+          link
+          icon="el-icon-copy-document"
+          :disabled="row.usable == '1' ? false : true"
+          @click="bindProcess(row)"
+          >绑定</el-button
+        >
+      </template>
+    </avue-crud>
+    <CommonTable
+      ref="ctableRef"
+      tableTitle="测试title"
+      tableType="MARTERIAL"
+      @selected-sure="onSelectedFinish"
+    />
+    <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
+  </div>
+</template>
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+import ButtonPermKeys from "@/common/configs/buttonPermission";
+import dictDataUtil from "@/common/configs/dictDataUtil";
+import { useDictionaryStoreHook } from "@/store";
+import { copyRoute } from "@/api/craft/route/index";
+
+// 数据字典相关
+const { dicts } = useDictionaryStoreHook();
+
+const testDebunce = () => {
+  console.log("执行了事件");
+};
+
+// 传入一个url，后面不带/
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/op/route",
+  });
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords; //增删改查
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate, exportData } = 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对象
+
+onMounted(() => {
+  // console.log("crudRef", crudRef)
+  dataList();
+});
+
+/**
+ * 上传excel相关
+ */
+const uploadRef = ref(null);
+const uploadFinished = () => {
+  // 上传完成后的刷新操作
+  page.currentPage = 1;
+  dataList();
+};
+const importExcelData = () => {
+  if (uploadRef.value) {
+    uploadRef.value.show("/api/v1/plan/order/import");
+  }
+};
+
+// 选择产品相关
+const ctableRef = ref(null);
+
+const onSelectedFinish = (selectedValue) => {
+  search.value.prodtName = selectedValue.materialName;
+  form.value.prodtName = selectedValue.materialName;
+  form.value.prodtCode = selectedValue.materialCode;
+  form.value.prodtModel = selectedValue.spec;
+};
+const startChooseProduct = () => {
+  if (ctableRef.value) {
+    ctableRef.value.startSelect();
+  }
+};
+
+// 已经绑定了工序的可以复制，跟后端HT商量只传id即可。
+const copyRow = (row) => {
+  copyRoute(row.id).then(() => {
+    page.currentPage = 1;
+    dataList();
+  });
+};
+
+// 绑定工序
+const bindProcess = (row) => {};
+
+// 设置表格列或者其他自定义的option
+option.value = Object.assign(option.value, {
+  selection: true,
+  labelWidth: 110,
+  searchLabelWidth: 110,
+  column: [
+    {
+      label: "工艺路线编号",
+      prop: "processRouteCode",
+      search: true,
+      width: 150,
+      addDisplay: false,
+      editDisabled: true,
+      overHidden: true,
+    },
+    {
+      label: "工艺路线名称",
+      prop: "processRouteName",
+      width: 150,
+      search: true,
+      overHidden: true,
+      rules: [
+        {
+          required: true,
+          message: "工艺路线名称不能为空",
+          trigger: "blur",
+        },
+      ],
+    },
+    {
+      label: "工艺路线类型",
+      prop: "processRouteType",
+      minWidth: 200,
+      search: true,
+      overHidden: true,
+      rules: [
+        {
+          required: true,
+          message: "工艺路线类型不能为空",
+          trigger: "change",
+        },
+      ],
+      type: "select",
+      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.routing_type,
+      props: {
+        label: "dictLabel",
+        value: "dictValue",
+      },
+    },
+    {
+      label: "产品名称",
+      prop: "prodtName",
+      overHidden: true,
+      width: 150,
+      search: true,
+      rules: [
+        {
+          required: true,
+          message: "请选择产品",
+          trigger: "blur",
+        },
+      ],
+      readOnly: true,
+      click: () => {
+        startChooseProduct();
+      },
+    },
+    {
+      label: "产品编号",
+      prop: "prodtCode",
+      overHidden: true,
+      search: true,
+      width: 150,
+      disabled: true,
+    },
+    {
+      label: "产品型号",
+      prop: "prodtModel",
+      overHidden: true,
+      search: true,
+      minWidth: 200,
+      disabled: true,
+    },
+    // 在产品那边绑定了工艺路线才是已绑定
+    {
+      label: "路线状态",
+      prop: "used",
+      addDisplay: false,
+      editDisplay: false,
+      slot: true,
+      width: 100,
+      type: "radio",
+      dicData: [
+        {
+          label: "已绑定",
+          value: 1,
+        },
+        {
+          label: "未绑定",
+          value: 0,
+        },
+      ],
+    },
+    {
+      label: "启用状态",
+      prop: "enabled",
+      addDisplay: false,
+      // editDisplay: false,
+      slot: true,
+      width: 100,
+      type: "radio",
+      dicData: [
+        {
+          label: "未启用",
+          value: 1,
+        },
+        {
+          label: "启用",
+          value: 0,
+        },
+      ],
+      value: 0,
+    },
+    // 只有绑定了工序才可以复制。
+    {
+      label: "是否可复制",
+      prop: "usable",
+      slot: true,
+      width: 100,
+      search: false,
+      filterable: true,
+      addDisplay: false,
+      editDisplay: false,
+      type: "radio",
+      dicData: [
+        {
+          label: "否",
+          value: 0,
+        },
+        {
+          label: "是",
+          value: 1,
+        },
+      ],
+      value: 0,
+    },
+    {
+      label: "版本",
+      prop: "processRouteVersion",
+      addDisplay: false,
+      editDisplay: false,
+    },
+    {
+      label: "创建人",
+      prop: "createBy",
+      addDisplay: false,
+      editDisplay: false,
+      overHidden: true,
+    },
+    {
+      label: "创建时间",
+      prop: "createWhen",
+      addDisplay: false,
+      editDisplay: false,
+      width: 150,
+      overHidden: true,
+    },
+  ],
+});
+</script>

src/views/demo/hooksDemo.vue

@@ -54,21 +54,34 @@
         </el-button>
       </template>
     </avue-crud>
+    <CommonTable
+      ref="ctableRef"
+      tableTitle="测试title"
+      tableType="MARTERIAL"
+      @selected-sure="onSelectedFinish"
+    />
     <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
   </div>
 </template>
 <script setup>
 import { ref, getCurrentInstance } from "vue";
 import { useCrud } from "@/hooks/userCrud";
+import dictDataUtil from "@/common/configs/dictDataUtil";
 import ButtonPermKeys from "@/common/configs/buttonPermission";
 import { useCommonStoreHook, useDictionaryStoreHook } from "@/store";
-const { isShowTable, tableType } = toRefs(useCommonStoreHook());
+
 // 数据字典相关
 const { dicts } = useDictionaryStoreHook();
 
+// 公共弹窗相关
+const ctableRef = ref(null);
 const test = () => {
-  isShowTable.value = true;
-  tableType.value = tableType.value == 1 ? 2 : 1;
+  if (ctableRef.value) {
+    ctableRef.value.startSelect();
+  }
+};
+const onSelectedFinish = (selectedValue) => {
+  console.log("onSelectedFinish", selectedValue);
 };
 
 const testDebunce = () => {
@@ -137,6 +150,16 @@ option.value = Object.assign(option.value, {
       label: "网络字典",
       prop: "province",
       type: "select",
+      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.routing_type,
+      props: {
+        label: "dictLabel",
+        value: "dictValue",
+      },
+    },
+    {
+      label: "全局字典",
+      prop: "province",
+      type: "select",
       dicData: dicts.station_operate_type,
       props: {
         label: "dictLabel",
@@ -148,6 +171,24 @@ option.value = Object.assign(option.value, {
       prop: "projectCode",
       search: true,
     },
+    {
+      label: "是否xxxx",
+      prop: "xxxxx",
+      search: false,
+      filterable: true,
+      type: "radio", //类型为单选框
+      dicData: [
+        {
+          label: "否",
+          value: 0,
+        },
+        {
+          label: "是",
+          value: 1,
+        },
+      ],
+      value: 0,
+    },
   ],
 });
 </script>