教育培训文件上传组件 获取文件名方法抽取

src/mixins/tableList.js

@@ -26,5 +26,11 @@ export default {
       this.$refs.tree.setCurrentKey(null);
       this.handleQuery();
     },
+    getKUploadFileList() {
+      //循环获取this.$refs.upload.fileList中的name和url，放到 this.form.fileList中去
+      this.form.fileList = this.$refs.upload.fileList.map(file => {
+        return JSON.stringify({ name: file.name, url: file.url });
+      });
+    },
   }
 }

src/views/core/edu/plan/index.vue

@@ -96,21 +96,21 @@
           >删除
           </el-button>
         </el-col>
-<!--        <el-col :span="1.5">
-          <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['core:plan:export']"
-          >导出
-          </el-button>
-        </el-col>-->
+        <!--        <el-col :span="1.5">
+                  <el-button
+                    type="warning"
+                    plain
+                    icon="el-icon-download"
+                    size="mini"
+                    @click="handleExport"
+                    v-hasPermi="['core:plan:export']"
+                  >导出
+                  </el-button>
+                </el-col>-->
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
       </el-row>
 
-      <el-table  :data="planList"
+      <el-table :data="planList"
                 @selection-change="handleSelectionChange"
                 row-key="id"
                 :tree-props="{ children: 'children'}">
@@ -191,7 +191,7 @@
       />
     </el-col>
     <!-- 添加或修改教育培训计划对话框 -->
-      <el-dialog :title="title" :visible.sync="open" width="800px" height="800px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="800px" height="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="12">
@@ -299,9 +299,9 @@
             </el-form-item>
           </el-col>
         </el-row>
-          <el-form-item label="上传文件" prop="fileList">
-            <K-file-upload  ref="upload" v-model="form.fileList" @input="getFileList"/>
-          </el-form-item>
+        <el-form-item label="上传文件" prop="fileList">
+          <K-file-upload ref="upload" v-model="form.fileList" @input="getKUploadFileList"/>
+        </el-form-item>
       </el-form>
 
       <div slot="footer" class="dialog-footer">
@@ -323,14 +323,16 @@ import {
   roleList,
   publishPlan
 } from "@/api/core/edu/plan";
+import tableList from "@/mixins/tableList";
 import OrgTree from "@/components/orgTree";
 import {deptTreeSelect} from "@/api/system/public";
-import KFileUpload  from "@/components/K-FileUpload/index.vue";
+import KFileUpload from "@/components/K-FileUpload/index.vue";
 
 export default {
   name: "Plan",
   dicts: ['plan_cycle', 'sys_org_type', 'plan_status', 'edu_plan_cycle'],
-  components: {OrgTree,KFileUpload},
+  components: {OrgTree, KFileUpload},
+  mixins: [tableList],
   data() {
     return {
       // 遮罩层
@@ -369,22 +371,22 @@ export default {
       // 表单校验
       rules: {
         planName: [
-          { required: true, message: "计划名称不能为空", trigger: "blur" }
+          {required: true, message: "计划名称不能为空", trigger: "blur"}
         ],
         planCycle: [
-          { required: true, message: "计划周期不能为空", trigger: "blur" }
+          {required: true, message: "计划周期不能为空", trigger: "blur"}
         ],
         execTimes: [
-          { required: true, message: "培训次数不能为空", trigger: "blur" }
+          {required: true, message: "培训次数不能为空", trigger: "blur"}
         ],
         planStatus: [
-          { required: true, message: "计划状态不能为空", trigger: "blur" }
+          {required: true, message: "计划状态不能为空", trigger: "blur"}
         ],
         execOrgType: [
-          { required: true, message: "培训机构类型不能为空", trigger: "blur" }
+          {required: true, message: "培训机构类型不能为空", trigger: "blur"}
         ],
         planRoleId: [
-          { required: true, message: "培训角色不能为空", trigger: "blur" }
+          {required: true, message: "培训角色不能为空", trigger: "blur"}
         ],
       },
       planRoleList: [],
@@ -417,12 +419,6 @@ export default {
         this.loading = false;
       });
     },
-    getFileList() {
-      //循环获取this.$refs.upload.fileList中的name和url，放到 this.form.fileList中去
-      this.form.fileList = this.$refs.upload.fileList.map(file => {
-        return JSON.stringify({ name: file.name, url: file.url });
-      });
-    },
     //初始化与计划相关的角色信息
     initPlanRoleList() {
       listPlanRole({}).then(response => {
@@ -431,7 +427,7 @@ export default {
     },
     //初始化所有角色数据
     initRoleList(query) {
-      this.form.planRoleId=[];
+      this.form.planRoleId = [];
       roleList(query).then(response => {
         this.roleList = response.data;
       });

src/views/core/materials/index.vue

@@ -179,7 +179,7 @@
           <el-input v-model="form.remark" placeholder="请输入备注"  maxlength="200" show-word-limit/>
         </el-form-item>
         <el-form-item label="附件" prop="fileList">
-          <K-file-upload ref="upload" @input="getFileList" v-model="form.fileList"/>
+          <K-file-upload ref="upload" @input="getKUploadFileList" v-model="form.fileList"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -205,9 +205,11 @@ import {queryKnowledgeList} from "@/api/core/edu/knowledge";
 import OrgTree from "@/components/orgTree/index.vue";
 import kOrgTree from "@/components/k-orgTree/index.vue";
 import KFileUpload  from "@/components/K-FileUpload/index.vue";
+import tableList from "@/mixins/tableList";
 export default {
   name: "Materials",
   components: {OrgTree, kOrgTree,KFileUpload},
+  mixins: [tableList],
   data() {
     return {
       // 遮罩层
@@ -304,12 +306,7 @@ export default {
         this.deptOptions = response.data;
       });
     },
-    getFileList() {
-      //循环获取this.$refs.upload.fileList中的name和url，放到 this.form.fileList中去
-      this.form.fileList = this.$refs.upload.fileList.map(file => {
-        return JSON.stringify({ name: file.name, url: file.url });
-      });
-    },
+
     checkCanEditOrDel(row) {
       return row.createId == this.$store.getters.userId && row.isOpen == 0;
     },