数据上传模板添加字段文件名称（CN）

src/views/dictionary/attachment/components/UploadTemplate/TemplateForm.vue

@@ -3,7 +3,7 @@
     ref="sysTemplateFrom"
     v-loading="loading"
     :model="form"
-    label-width="90px"
+    label-width="140px"
     size="small"
     :rules="rules"
     class="upload-temporary-file"
@@ -15,7 +15,7 @@
       <el-form-item label="业务场景: " prop="BusinessScenarioEnum">
         <el-select
           v-model="form.BusinessScenarioEnum"
-          style="width:100%;"
+          style="width: 100%"
           size="small"
           filterable
         >
@@ -44,12 +44,14 @@
             :on-exceed="handleExceed"
             :disabled="!form.FileTypeEnum || !form.BusinessScenarioEnum"
           >
-            <el-button size="small" type="primary" :disabled="!form.FileTypeEnum || !form.BusinessScenarioEnum" :loading="btnLoading">Select</el-button>
+            <el-button
-            <span
+              size="small"
-              slot="tip"
+              type="primary"
-              style="margin-left:10px;"
+              :disabled="!form.FileTypeEnum || !form.BusinessScenarioEnum"
-              class="el-upload__tip"
+              :loading="btnLoading"
+              >Select</el-button
             >
+            <span slot="tip" style="margin-left: 10px" class="el-upload__tip">
               (must be in xlsx/xls/doc/docx format)
             </span>
           </el-upload>
@@ -58,37 +60,61 @@
       <el-form-item label="文件名" prop="Name">
         <el-input v-model="form.Name" />
       </el-form-item>
+      <el-form-item
+        :label="$t('dictionary:attachment:export:form:nameCN')"
+        prop="NameCN"
+      >
+        <el-input v-model="form.NameCN" />
+      </el-form-item>
       <el-form-item v-if="form.Id !== ''" label="是否废除: ">
         <el-radio-group v-model="form.IsDeleted">
-          <el-radio v-for="item of $d.YesOrNo" :label="item.value">{{item.label}}</el-radio>
+          <el-radio
+            v-for="item of $d.YesOrNo"
+            :label="item.value"
+            :key="item.id"
+            >{{ item.label }}</el-radio
+          >
         </el-radio-group>
       </el-form-item>
       <el-form-item label="描述">
         <el-input
           v-model="form.Description"
           type="textarea"
-          :autosize="{ minRows: 2, maxRows: 4}"
+          :autosize="{ minRows: 2, maxRows: 4 }"
           placeholder="请输入内容"
         />
       </el-form-item>
     </div>
-    <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
+    <div class="base-dialog-footer" style="text-align: right; margin-top: 10px">
-      <el-form-item style="text-align:right;">
+      <el-form-item style="text-align: right">
-        <el-button size="small" type="primary" :disabled="!form.FileTypeEnum || !form.BusinessScenarioEnum" :loading="saveBtnLoading" @click="handleSave">Save</el-button>
+        <el-button
+          size="small"
+          type="primary"
+          :disabled="!form.FileTypeEnum || !form.BusinessScenarioEnum"
+          :loading="saveBtnLoading"
+          @click="handleSave"
+          >Save</el-button
+        >
       </el-form-item>
     </div>
   </el-form>
 </template>
 <script>
-import { addOrUpdateCommonDocument, uploadCommonDoc, Upload } from '@/api/dictionary'
+import {
+  addOrUpdateCommonDocument,
+  uploadCommonDoc,
+  Upload,
+} from '@/api/dictionary'
 import { getBasicDataSelects } from '@/api/dictionary/dictionary'
 export default {
   name: 'TemplateForm',
   props: {
     data: {
       type: Object,
-      default() { return {} }
+      default() {
-    }
+        return {}
+      },
+    },
   },
 
   data() {
@@ -99,20 +125,30 @@ export default {
         FileTypeEnum: null,
         BusinessScenarioEnum: null,
         Name: '',
+        NameCN: '',
         Path: '',
         Description: '',
-        IsDeleted: false
+        IsDeleted: false,
       },
       rules: {
-        Code: [{ required: true, message: 'Please specify', trigger: ['blur'] }],
+        Code: [
-        Name: [{ required: true, message: 'Please specify', trigger: ['blur'] }],
+          { required: true, message: 'Please specify', trigger: ['blur'] },
-        BusinessScenarioEnum: [{ required: true, message: 'Please select', trigger: ['blur'] }]
+        ],
+        Name: [
+          { required: true, message: 'Please specify', trigger: ['blur'] },
+        ],
+        NameCN: [
+          { required: true, message: 'Please specify', trigger: ['blur'] },
+        ],
+        BusinessScenarioEnum: [
+          { required: true, message: 'Please select', trigger: ['blur'] },
+        ],
       },
       fileList: [],
       btnLoading: false,
       saveBtnLoading: false,
       loading: false,
-      dictionaryList: {}
+      dictionaryList: {},
     }
   },
   mounted() {
@@ -128,8 +164,8 @@ export default {
               name: this.data.Name,
               path: this.data.Path,
               url: this.data.Path,
-              type: this.data.Type
+              type: this.data.Type,
-            }
+            },
           ]
         }
         for (const k in this.form) {
@@ -142,12 +178,14 @@ export default {
     // 获取文件类型下拉框
     getDicData() {
       this.loading = true
-      getBasicDataSelects(['Common_File_ModuleType', 'Common_File_Type']).then(res => {
+      getBasicDataSelects(['Common_File_ModuleType', 'Common_File_Type'])
-        this.dictionaryList = { ...res.Result }
+        .then((res) => {
-        this.loading = false
+          this.dictionaryList = { ...res.Result }
-      }).catch(() => {
+          this.loading = false
-        this.loading = false
+        })
-      })
+        .catch(() => {
+          this.loading = false
+        })
     },
     beforeUpload(file) {
       // 检测文件类型是否符合要求
@@ -165,35 +203,43 @@ export default {
       const formData = new FormData()
       formData.append('file', param.file)
       this.form.FileName = param.file.name
-      Upload(formData, 1).then(res => {
+      Upload(formData, 1).then((res) => {
-        this.fileList.push({ name: param.file.name, path: res.Result.FilePath, fullPath: res.Result.FullFilePath, url: res.Result.FilePath })
+        this.fileList.push({
+          name: param.file.name,
+          path: res.Result.FilePath,
+          fullPath: res.Result.FullFilePath,
+          url: res.Result.FilePath,
+        })
         this.form.Path = res.Result.FilePath
-        this.form.Name = param.file.name
+        this.form.NameCN = param.file.name
         this.loading = false
         this.btnLoading = false
       })
     },
     handleSave() {
-      this.$refs.sysTemplateFrom.validate(valid => {
+      this.$refs.sysTemplateFrom.validate((valid) => {
         if (!valid) return
         if (!this.form.Name) {
           this.$alert('Please select file.')
           return
         }
         this.saveBtnLoading = true
-        addOrUpdateCommonDocument(this.form).then(res => {
+        addOrUpdateCommonDocument(this.form)
-          this.saveBtnLoading = false
+          .then((res) => {
-          this.$emit('closeDialog')
+            this.saveBtnLoading = false
-          this.$emit('getList')
+            this.$emit('closeDialog')
-          this.$message.success('Uploaded successfully')
+            this.$emit('getList')
-        }).catch(() => {
+            this.$message.success('Uploaded successfully')
-          this.saveBtnLoading = false
+          })
-        })
+          .catch(() => {
+            this.saveBtnLoading = false
+          })
       })
     },
     handleRemoveFile() {
       this.fileList = []
       this.form.Path = ''
+      this.form.NameCN = ''
       this.form.Name = ''
     },
     handlePreview(file) {
@@ -206,19 +252,21 @@ export default {
     },
     checkFileSuffix(fileName) {
       var typeArr = ['xls', 'xlsx', 'doc', 'docx']
-      var extendName = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
+      var extendName = fileName
+        .substring(fileName.lastIndexOf('.') + 1)
+        .toLocaleLowerCase()
       if (typeArr.indexOf(extendName) !== -1) {
         return true
       } else {
         return false
       }
-    }
+    },
-  }
+  },
 }
 </script>
 
 <style lang="scss">
-.upload-temporary-file{
+.upload-temporary-file {
   .upload-container .el-upload--text {
     border: none;
     width: 80px;
@@ -231,8 +279,8 @@ export default {
     color: #428bca;
     font-size: 13px;
   }
-  .account_item_clear{
+  .account_item_clear {
-    .el-tag__close{
+    .el-tag__close {
       display: none !important;
     }
   }

src/views/dictionary/attachment/components/UploadTemplate/index.vue

@@ -5,7 +5,7 @@
         <el-form-item label="业务场景">
           <el-select
             v-model="searchData.BusinessScenarioEnum"
-            style="width:150px;"
+            style="width: 150px"
           >
             <el-option
               v-for="item of $d.Common_File_BusinessScenario"
@@ -13,15 +13,10 @@
               :label="item.label"
               :value="item.value"
             />
-
           </el-select>
         </el-form-item>
         <el-form-item label="文件名称">
-          <el-input
+          <el-input v-model="searchData.Name" style="width: 130px" clearable />
-            v-model="searchData.Name"
-            style="width:130px;"
-            clearable
-          />
         </el-form-item>
 
         <el-form-item>
@@ -30,24 +25,28 @@
             {{ $t('common:button:search') }}
           </el-button>
           <!-- 重置 -->
-          <el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
+          <el-button
+            type="primary"
+            icon="el-icon-refresh-left"
+            @click="handleReset"
+          >
             {{ $t('common:button:reset') }}
           </el-button>
         </el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          style="float: right"
+          size="small"
+          @click="handleAdd"
+        >
+          {{ $t('common:button:new') }}
+        </el-button>
       </el-form>
-      <el-button
-        type="primary"
-        icon="el-icon-plus"
-        style="margin-left:auto;"
-        size="small"
-        @click="handleAdd"
-      >
-        {{ $t('common:button:new') }}
-      </el-button>
     </template>
     <template slot="main-container">
       <el-table
-        v-adaptive="{bottomOffset:60}"
+        v-adaptive="{ bottomOffset: 60 }"
         v-loading="loading"
         :data="list"
         stripe
@@ -69,9 +68,13 @@
           sortable="custom"
         >
           <template slot-scope="scope">
-            {{ $fd('Common_File_BusinessScenario',scope.row.BusinessScenarioEnum) }}
+            {{
+              $fd(
+                'Common_File_BusinessScenario',
+                scope.row.BusinessScenarioEnum
+              )
+            }}
           </template>
-
         </el-table-column>
 
         <el-table-column
@@ -80,6 +83,12 @@
           show-overflow-tooltip
           sortable="custom"
         />
+        <el-table-column
+          prop="NameCN"
+          :label="$t('dictionary:attachment:upload:table:nameCN')"
+          show-overflow-tooltip
+          sortable="custom"
+        />
         <el-table-column
           prop="Description"
           label="描述"
@@ -92,8 +101,12 @@
           sortable="custom"
         >
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.IsDeleted" type="danger">{{ $fd('YesOrNo', scope.row.IsDeleted) }}</el-tag>
+            <el-tag v-if="scope.row.IsDeleted" type="danger">{{
-            <el-tag v-else type="primary">{{ $fd('YesOrNo', scope.row.IsDeleted) }}</el-tag>
+              $fd('YesOrNo', scope.row.IsDeleted)
+            }}</el-tag>
+            <el-tag v-else type="primary">{{
+              $fd('YesOrNo', scope.row.IsDeleted)
+            }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column
@@ -105,29 +118,26 @@
 
         <el-table-column label="Action">
           <template slot-scope="scope">
-            <el-button
+            <el-button type="text" @click="handleDownload(scope.row)">
-              type="text"
-              @click="handleDownload(scope.row)"
-            >
               下载
             </el-button>
-            <el-button
+            <el-button type="text" @click="handleEdit(scope.row)">
-              type="text"
-              @click="handleEdit(scope.row)"
-            >
               编辑
             </el-button>
-            <el-button
+            <el-button type="text" @click="handleDelete(scope.row)">
-              type="text"
-              @click="handleDelete(scope.row)"
-            >
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
       <!-- 分页组件 -->
-      <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
+      <pagination
+        class="page"
+        :total="total"
+        :page.sync="searchData.PageIndex"
+        :limit.sync="searchData.PageSize"
+        @pagination="getList"
+      />
 
       <!-- 新增/编辑 -->
       <el-dialog
@@ -138,13 +148,21 @@
         width="600px"
         custom-class="base-dialog-wrapper"
       >
-        <TemplateForm :data="currentRow" @closeDialog="closeDialog" @getList="getList" />
+        <TemplateForm
+          :data="currentRow"
+          @closeDialog="closeDialog"
+          @getList="getList"
+        />
       </el-dialog>
     </template>
   </BaseContainer>
 </template>
 <script>
-import { getCommonDocumentList, DownloadCommonDoc, deleteCommonDocument } from '@/api/dictionary'
+import {
+  getCommonDocumentList,
+  DownloadCommonDoc,
+  deleteCommonDocument,
+} from '@/api/dictionary'
 import BaseContainer from '@/components/BaseContainer'
 import Pagination from '@/components/Pagination'
 import TemplateForm from './TemplateForm'
@@ -155,7 +173,7 @@ const searchDataDefault = () => {
     BusinessScenarioEnum: null,
     Name: '',
     PageIndex: 1,
-    PageSize: 20
+    PageSize: 20,
   }
 }
 export default {
@@ -168,7 +186,7 @@ export default {
       total: 0,
       currentRow: {},
       editDialog: { title: '', visible: false },
-      loading: false
+      loading: false,
     }
   },
   mounted() {
@@ -185,13 +203,15 @@ export default {
     },
     getList() {
       this.loading = true
-      getCommonDocumentList(this.searchData).then(res => {
+      getCommonDocumentList(this.searchData)
-        this.loading = false
+        .then((res) => {
-        this.list = res.Result.CurrentPageData
+          this.loading = false
-        this.total = res.Result.TotalCount
+          this.list = res.Result.CurrentPageData
-      }).catch(() => {
+          this.total = res.Result.TotalCount
-        this.loading = false
+        })
-      })
+        .catch(() => {
+          this.loading = false
+        })
     },
     // 新增
     handleAdd() {
@@ -202,9 +222,13 @@ export default {
     // 下载
     handleDownload(row) {
       this.loading = true
-      DownloadCommonDoc(row.Code).then(data => {
+      DownloadCommonDoc(row.Code)
-        this.loading = false
+        .then((data) => {
-      }).catch(() => { this.loading = false })
+          this.loading = false
+        })
+        .catch(() => {
+          this.loading = false
+        })
     },
     // 编辑
     handleEdit(row) {
@@ -233,7 +257,12 @@ export default {
       this.searchData.SortField = column.prop
       this.searchData.PageIndex = 1
       this.getList()
-    }
+    },
-  }
+  },
 }
 </script>
+<style lang="scss" scoped>
+::v-deep .search {
+  display: block;
+}
+</style>