清单增加适用认证展示编辑 导入 模板下载功能

src/pages/regulatoryRepository/accessStandardsAndRegulations/pages/addEdit.vue

@@ -230,18 +230,30 @@
     <div class="list-entry">
       <el-divider content-position="left">清单条目</el-divider>
       <div class="action-bar">
+        <el-button
+          class="common-button-default export-button"
+          size="mini" @click="addImport"
+          v-btn-permission="''"
+        >导入
+        </el-button>
         <el-button
           class="common-button-default export-button"
           size="mini" @click="exportAccessInfo('apart')"
           v-btn-permission="''"
-        ><i class="iconfont">&#xe6e9;</i>导出
+        >导出
+        </el-button>
+        <el-button
+          class="common-button-default export-button"
+          size="mini" @click="templateDownload"
+          v-btn-permission="''"
+        >模板下载
         </el-button>
         <el-button
           class="common-button-default delete-button"
           size="mini" @click="deleteSelectSarAccessInfo"
           v-if="!disabledFlag"
           v-btn-permission="''"
-        ><i class="iconfont">&#xe61b;</i>删除
+        >批量删除
         </el-button>
       </div>
       <!--   清单条目的列表页   -->
@@ -309,6 +321,12 @@
           width="180px"
           label="能源类型">
         </el-table-column>
+        <el-table-column
+          prop="syrz"
+          align="center"
+          width="180px"
+          label="适用认证">
+        </el-table-column>
         <el-table-column
           prop="ssrq"
           align="center"
@@ -430,6 +448,16 @@
         <el-form-item label="能源类型" prop="nylx">
           <el-input v-model.trim="editRowData.nylx" :disabled="true"/>
         </el-form-item>
+        <el-form-item label="适用认证" prop="syrz" >
+          <el-select v-model="editRowData.syrz" multiple placeholder="请选择适用认证" style="width: 100%">
+            <el-option
+              v-for="item in applyAuthOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.label">
+            </el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="标准实施日期" prop="putTime">
           <el-date-picker
             clearable
@@ -697,6 +725,24 @@
         <el-button type="primary" size="mini" @click="okQueryInfo(1)">确认</el-button>
       </div>
     </el-drawer>
+    <!--导入模态窗-->
+    <el-dialog width="400px" :visible.sync="importModalshowflag" title="导入文件" :footer-hide="true">
+      <el-upload
+        drag
+        :show-file-list="showUploadlist"
+        :on-success="importFileStand"
+        :before-upload="beforeUpload"
+        :action="importExcelUrls"
+        :file-list="defaultFileList"
+        accept=".xls"
+        name="file"
+        ref="importFileAboutStand">
+        <div style="padding: 20px 0">
+          <i class="el-icon-upload" style="color: #3399ff"></i>
+          <p>点击或拖拽上传文件</p>
+        </div>
+      </el-upload>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -722,6 +768,7 @@ import {mapGetters} from "vuex";
 import {dicTypeData, StandardsInfoPage} from "@/api/unqualProcess";
 import {interfaceUrl} from "@/sysConfig";
 import ProcessTitle from '@/pages/processCenter/pages/components/ProcessTitle'
+import { downloadStatus } from "api/process";
 
 export default {
   name: "ListOfStandardsAndRegulationsDetails",
@@ -753,6 +800,9 @@ export default {
       countryAreaMap: {},
       // 编辑抽屉状态
       drawerEdit: false,
+      importModalshowflag: false,
+      defaultFileList: [], // 默认显示
+      showUploadlist: true, // 导入过程中新增数据时，如果数据错误，不出现导入列表
       // 编辑框数据
       editRowData: {
         id: '',
@@ -812,6 +862,7 @@ export default {
       /** ****************************/
       zrbmOptions: [], // 责任部门
       categoryOptions: [], // 能源类型
+      applyAuthOptions: [], // 适用认证
       energyKindOptions: [], // 能源种类list
       CycxOptions: [],
       sycpxOptions: [], // 适用产品线
@@ -896,6 +947,7 @@ export default {
       exportTestItemNameFlag: false, // 导出模态框
       exportName: '', // 导出名称
       importExcelUrl: '/api/lawss/sarSarAccessInfo/importSarAccessInfo?accessId=', // 导入接口
+      importExcelUrls: '/api/sarLawsDetailedList/sar-laws-detailed-list/importData', // 导入接口
       // 新增标准法规 验证
       addEntryFormRules: {
         code: [
@@ -963,6 +1015,87 @@ export default {
     }
   },
   methods: {
+    //模板下载
+    templateDownload(){
+      downloadStatus().then(res => {
+        let blob = new Blob([res], { type: 'application/vnd.ms-excel' }); //以xls文件为例
+        //浏览器兼容，Google和火狐支持a标签的download，IE不支持
+        if (window.navigator && window.navigator.msSaveBlob) {
+          //IE浏览器、微软浏览器
+          /* 经过测试，微软浏览器Microsoft Edge下载文件时必须要重命名文件才可以打开，
+            IE可不重命名，以防万一，所以都写上比较好 */
+          window.navigator.msSaveBlob(blob, '清单下载模板.xls');
+        } else {
+          //其他浏览器
+          let link = document.createElement('a'); // 创建a标签
+          link.style.display = 'none';
+          let objectUrl = URL.createObjectURL(blob);
+          link.href = objectUrl;
+          link.download = '清单下载模板.xls';
+          link.click();
+          URL.revokeObjectURL(objectUrl);
+        }
+      })
+    },
+    //导入
+    addImport(){
+      this.importModalshowflag = true
+    },
+    // 导入标准数据成功后执行
+    importFileStand (res, file, fileList) {
+      let files = {}
+      if (res.ok) {
+        files.attId = res.data.attId
+        files.fileName = res.data.name
+        if (res.data.standNum != null && res.data.standNum !== '') {
+          files.standNumSplit = res.data.standNum
+        }
+        if (res.data.standName != null && res.data.standName !== '') {
+          files.standNameSplit = res.data.standName
+        }
+        this.defaultFileList.push(file)
+        const _formData = new FormData()
+        _formData.append('standNumSplit', files.standNumSplit)
+        _formData.append('standNameSplit', files.standNameSplit)
+        _formData.append('fileType', files.fileType)
+        _formData.append('file', file.raw)
+        this.$http.postData('importWkExcel/importData', _formData,{
+          _this: this
+        }, res => {
+          console.log(res);
+          if(res.ok){
+            if(res.data.length){
+              this.qblx_pageData.qblxData = res.data
+              this.$message.success('文件上传成功')
+            }else{
+              this.$message.warning('请勿上传为空的文件')
+            }
+          }else{
+            const arr = res.data.split('；')
+            let newDatas = [],h = this.$createElement;
+            for (const i in arr) {
+              newDatas.push(h('p', null, arr[i]))
+            }
+            this.$confirm(h('div', null, newDatas), "提示", {
+              confirmButtonText: "确认",
+              confirmButtonClass: "common-button-primary",
+              dangerouslyUseHTMLString: true,
+              cancelButtonText: "取消",
+              type: "warning"
+            }).then(() => {
+            }).catch(() => {
+            });
+          }
+        })
+        this.importModalshowflag = false
+        this.$nextTick(() => {
+          this.$refs.importFileAboutStand.clearFiles()
+        })
+      } else {
+        this.defaultFileList = []
+        this.$message.error(res.message)
+      }
+    },
     // 高级检索
     selectMoreBtn() {
       this.sarAccessInfo.standNumber = ''
@@ -1236,6 +1369,19 @@ export default {
               if (item.attrInfoCaseMap !== undefined) {
                 this.$set(item, "typeApplicable", item.attrInfoCaseMap.cllx);
                 this.$set(item, "nylx", item.attrInfoCaseMap.nylx);
+                this.$set(item, "syrz", item.attrInfoCaseMap.syrz);
+              }
+              // 适用认证转换
+              if (item.syrz !== null) {
+                let k = (item.syrz || "").split(",");
+                for (let i in this.applyAuthOptions) {
+                  for (let m = 0; m < k.length; m++) {
+                    if (this.applyAuthOptions[i].value === k[m]) {
+                      k[m] = this.applyAuthOptions[i].label;
+                    }
+                    item.syrz = k.join(",");
+                  }
+                }
               }
               // 能源类型转换
               if (item.nylx !== null) {
@@ -1318,6 +1464,11 @@ export default {
 
       this.rowList = row;
       this.editRowData = this.rowList;
+      if(this.editRowData.syrz === '-'){
+        this.editRowData.ssrq = "";
+      }else if(this.editRowData.syrz){
+        this.editRowData.syrz = this.editRowData.syrz.split(',')
+      }
       if (this.editRowData.ssrq === "-") {
         this.editRowData.ssrq = "";
       } else if (this.editRowData.ssrq !== null && this.editRowData.ssrq !== "-" && this.editRowData.ssrq !== "") {
@@ -1339,12 +1490,16 @@ export default {
     cancelInfo() {
       let Item = JSON.parse(localStorage.getItem('obj'))
       this.editRowData.ssrq = Item.ssrq
+      this.editRowData.syrz = Item.syrz
       this.editRowData.xcxssrqgj = Item.xcxssrqgj
       this.editRowData.zccssrqgj = Item.zccssrqgj
       this.drawerEdit = false
     },
     // 抽屉提交按钮
     saveInfo() {
+      if(this.editRowData.syrz){
+        this.editRowData.syrz = this.editRowData.syrz.join(',')
+      }
       if (this.editRowData.ssrq !== '' && this.editRowData.ssrq !== null) {
         this.editRowData.ssrq = this.editRowData.ssrq.join(',')
       }
@@ -1420,6 +1575,7 @@ export default {
           let rowlist1 = []
           let rowlist2 = []
           let rowlist3 = []
+          let rowlist4 = []
           for (let i = 0; i < this.sarAccessInfoList.length; i++) {
             rowlist.push(this.sarAccessInfoList[i].id)
             if (this.sarAccessInfoList[i].ssrq === null || this.sarAccessInfoList[i].ssrq === undefined) {
@@ -1437,17 +1593,24 @@ export default {
             } else {
               rowlist2.push(this.sarAccessInfoList[i].zccssrqgj)
             }
+            if(this.sarAccessInfoList[i].syrz === null || this.sarAccessInfoList[i].syrz === undefined) {
+              rowlist4.push(this.sarAccessInfoList[i].syrz = '-')
+            }else {
+              rowlist4.push(this.sarAccessInfoList[i].syrz)
+            }
           }
           rowlist = rowlist.join(',')
           rowlist1 = rowlist1.join(';')
           rowlist2 = rowlist2.join(';')
           rowlist3 = rowlist3.join(';')
+          rowlist4 = rowlist4.join(';')
           let sarAccessEO = JSON.parse(JSON.stringify(this.sarAccessEO))
           sarAccessEO.reNewPeople = this.$store.getters.userInfo.userId
           sarAccessEO.inforlist = rowlist
           sarAccessEO.inforlist1 = rowlist1
           sarAccessEO.inforlist2 = rowlist2
           sarAccessEO.inforlist3 = rowlist3
+          sarAccessEO.inforlist4 = rowlist4
           sarAccessEO.countryArea = sarAccessEO.countryArea.join(',')
           // sarAccessEO.applicationScope = sarAccessEO.applicationScope.join(',')
           // 判断是否有附件
@@ -2169,6 +2332,7 @@ export default {
         // 能源类型数据字典
         this.CycxOptions = res.data.CLLX
         this.categoryOptions = res.data.NYLXCLASS // 能源类型
+        this.applyAuthOptions = res.data.SYRZCLASS // 能源类型
         // 适用车型数据字典
         this.applyArcticOptions = res.data.PRODUCTTYPE
         // 适用产品线数据字典
@@ -2184,6 +2348,7 @@ export default {
         this.setMap(this.textStatusOptions)
         this.setMap(this.drawerCountryOptions)
         this.setMap(this.categoryOptions)
+        this.setMap(this.applyAuthOptions)
         this.getGzzOption()
       }
     })