feat：生产准备模板导入导出

src/views/plan/prepareTemplate/index.vue

@@ -1,87 +1,123 @@
 <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"
+      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 #state="scope">
         <el-switch
-            active-value="1"
-            inactive-value="0"
-            inline-prompt
-            active-text="是"
-            inactive-text="否"
-            v-model="scope.row.state"
-            @click="changeItem($event,scope.row)"
-            class="ml-2"
-            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+          active-value="1"
+          inactive-value="0"
+          inline-prompt
+          active-text="是"
+          inactive-text="否"
+          v-model="scope.row.state"
+          @click="changeItem($event, scope.row)"
+          class="ml-2"
+          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
         />
       </template>
       <template #menu-left="{ size }">
         <el-button
-            type="primary"
-            icon="el-icon-plus"
-            :size="size"
-            @click="openDialog(0, null)"
-        >新增</el-button>
+          type="primary"
+          icon="el-icon-plus"
+          :size="size"
+          @click="openDialog(0, null)"
+          >新增</el-button
+        >
       </template>
 
       <template #menu="{ size, row, index }">
-        <el-button
-            type="primary"
-            link
-            size="small"
-            @click="openDialog(1, row)"
-        ><i-ep-edit />编辑
+        <el-button type="primary" link size="small" @click="openDialog(1, row)"
+          ><i-ep-edit />编辑
         </el-button>
       </template>
+      <template #menu-right="{}">
+        <el-dropdown split-button
+          >准备模板导入
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                @click="downloadTemplate('/api/v1/prepareTemplate/template')"
+              >
+                <i-ep-download />下载模板
+              </el-dropdown-item>
+              <el-dropdown-item @click="importExcelData">
+                <i-ep-top />导入数据
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </template>
     </avue-crud>
     <el-dialog
-        v-model="dialog1.visible"
-        :title="dialog1.title"
-        width="45%"
-        @close="dialog1.visible = false"
+      v-model="dialog1.visible"
+      :title="dialog1.title"
+      width="45%"
+      @close="dialog1.visible = false"
     >
-      <el-form ref="dataFormRef" :model="form" label-width="90px" :rules="rules">
+      <el-form
+        ref="dataFormRef"
+        :model="form"
+        label-width="90px"
+        :rules="rules"
+      >
         <el-row :gutter="24">
           <el-col :span="8">
-          <el-form-item label="物料编码" prop="materialCode">
-            <el-input v-model="form.materialCode" @click="openDialog" readOnly placeholder="请选择物料" />
-          </el-form-item>
+            <el-form-item label="物料编码" prop="materialCode">
+              <el-input
+                v-model="form.materialCode"
+                @click="openDialog"
+                readOnly
+                placeholder="请选择物料"
+              />
+            </el-form-item>
           </el-col>
           <el-col :span="8">
-          <el-form-item label="物料名称" prop="materialName">
-            <el-input v-model="form.materialName" disabled placeholder="请选择物料" />
-          </el-form-item>
+            <el-form-item label="物料名称" prop="materialName">
+              <el-input
+                v-model="form.materialName"
+                disabled
+                placeholder="请选择物料"
+              />
+            </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="物料型号" prop="materialModel">
-              <el-input v-model="form.materialModel" disabled placeholder="请选择物料" />
+              <el-input
+                v-model="form.materialModel"
+                disabled
+                placeholder="请选择物料"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="24">
           <el-col :span="24">
             <el-form-item label="物料模板" prop="template">
-              <el-select v-model="form.template" multiple placeholder="请选择模板" @change="changeTemplate">
+              <el-select
+                v-model="form.template"
+                multiple
+                placeholder="请选择模板"
+                @change="changeTemplate"
+              >
                 <el-option
-                    v-for="item in templates"
-                    :label="item.dictLabel"
-                    :value="item.dictValue"
-                    :key="item.dictLabel"
+                  v-for="item in templates"
+                  :label="item.dictLabel"
+                  :value="item.dictValue"
+                  :key="item.dictLabel"
                 />
               </el-select>
             </el-form-item>
@@ -90,14 +126,17 @@
         <el-row :gutter="24" v-for="item in clickTemplates">
           <el-col :span="24">
             <el-form-item :label="item.name">
-            <el-switch
+              <el-switch
                 class="mb-2"
-                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+                style="
+                  --el-switch-on-color: #13ce66;
+                  --el-switch-off-color: #ff4949;
+                "
                 active-text="完成"
                 inactive-text="未完成"
                 active-value="1"
                 inactive-value="0"
-            />
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -110,13 +149,14 @@
       </template>
     </el-dialog>
     <el-dialog
-        v-model="dialog.visible"
-        :title="dialog.title"
-        width="80%"
-        @close="dialog.visible = false"
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="80%"
+      @close="dialog.visible = false"
     >
       <choice-item-page @material-info="materialInfo" />
     </el-dialog>
+    <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
   </div>
 </template>
 
@@ -133,7 +173,8 @@ const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
     src: "/api/v1/prepareTemplate",
   });
-const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords; //增删改查
 const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
 const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
 const dataFormRef = ref(ElForm);
@@ -146,54 +187,70 @@ const dialog1 = reactive({
   title: "模板保存",
   visible: false,
 });
+const uploadRef = ref(null);
+const importExcelData = () => {
+  if (uploadRef.value) {
+    uploadRef.value.show("/api/v1/prepareTemplate/importExcel");
+  }
+};
+const uploadFinished = () => {
+  // 上传完成后的刷新操作
+  page.currentPage = 1;
+  dataList();
+};
 const openDialog = (type, row) => {
-  if(type === 0 ){
+  if (type === 0) {
     form.value.materialCode = "";
-    form.value.materialName = ""
-    form.value.materialModel = ""
-    form.value.template = []
-    clickTemplates.value = []
+    form.value.materialName = "";
+    form.value.materialModel = "";
+    form.value.template = [];
+    clickTemplates.value = [];
     dialog1.visible = true;
-  }else if(type === 1){
-    form.value = row
-    if(!Array.isArray(row.template)){
-      form.value.template = eval("(" +row.template + ")")
+  } else if (type === 1) {
+    form.value = row;
+    if (!Array.isArray(row.template)) {
+      form.value.template = eval("(" + row.template + ")");
     }
     //form.value.templateList = row.template.split(",")
-    changeTemplate()
+    changeTemplate();
     dialog1.visible = true;
-  }else{
+  } else {
     dialog.visible = true;
   }
 };
-const changeItem =(obj,row) => {
-  form.value = {id: row.id,state: row.state}
-  updateRow()
-  form.value = null
-}
-const templates = ref([])
-const clickTemplates = ref([])
-const changeTemplate = ()=>{
-  clickTemplates.value = []
-  if(form.value.template){
-    for(let i = 0 ; i< form.value.template.length; i ++){
-      clickTemplates.value.push({value: form.value.template[i],name: templates.value.find(option => option.dictValue === form.value.template[i]).dictLabel});
+const changeItem = (obj, row) => {
+  form.value = { id: row.id, state: row.state };
+  updateRow();
+  form.value = null;
+};
+const templates = ref([]);
+const clickTemplates = ref([]);
+const changeTemplate = () => {
+  clickTemplates.value = [];
+  if (form.value.template) {
+    for (let i = 0; i < form.value.template.length; i++) {
+      clickTemplates.value.push({
+        value: form.value.template[i],
+        name: templates.value.find(
+          (option) => option.dictValue === form.value.template[i]
+        ).dictLabel,
+      });
     }
   }
-}
-const onSubmit = (done,loading) => {
+};
+const onSubmit = (done, loading) => {
   dataFormRef.value.validate((isValid) => {
     if (isValid) {
-      if(!form.value.id){
-        createRow(done,loading)
-      }else{
-        updateRow(done,loading)
+      if (!form.value.id) {
+        createRow(done, loading);
+      } else {
+        updateRow(done, loading);
       }
-      dialog1.visible = false
+      dialog1.visible = false;
     }
   });
-  console.log('submit!')
-}
+  console.log("submit!");
+};
 const materialInfo = (value) => {
   form.value.materialCode = value.materialCode;
   form.value.materialName = value.materialName;
@@ -209,7 +266,7 @@ option.value = Object.assign(option.value, {
   menuBtn: true,
   menuWidth: 150,
   addBtn: false,
-  dialogWidth: '45%', // 设置编辑弹窗的宽度为50%
+  dialogWidth: "45%", // 设置编辑弹窗的宽度为50%
   column: [
     {
       label: "物料编码",
@@ -265,13 +322,13 @@ option.value = Object.assign(option.value, {
       label: "创建时间",
       prop: "created",
       width: 200,
-      display: false
+      display: false,
     },
     {
       label: "创建人",
       width: 200,
       prop: "creator",
-      display: false
+      display: false,
     },
   ],
 });
@@ -282,11 +339,10 @@ const rules = reactive({
 
 onMounted(() => {
   dataList();
-  queryDictDataByType("prepare_template").then((res)=>{
-    templates.value = res.data
-  })
+  queryDictDataByType("prepare_template").then((res) => {
+    templates.value = res.data;
+  });
 });
-
 </script>
 <style scoped>
 :deep(.el-progress-bar__innerText) {