数据导入，数据修改接口字段联调

src/components/page/createData.vue

 <template>
-  <el-dialog title="数据导入" :visible.sync="showModal" width="700px" @close="close" center>
+  <el-dialog :title="title" :visible.sync="showModal" width="700px" @close="close" center>
     <el-form ref="form" :model="form" label-width="150px" size="medium " :rules="rules">
       <el-form-item label="审批编号" prop="dingdingNumber">
         <el-input style="width:220px" v-model="form.dingdingNumber" placeholder="请输入内容"></el-input>
@@ -72,32 +72,37 @@
           </el-form-item>
         </template>
       </div>
-
-      <el-form-item label="文件上传" prop="fileId">
-        <el-upload
-          v-model="form.fileId"
-          drag
-          multiple
-          :action="baseUrl + '/sensitive/import/file'"
-          :on-success="uploadSuccess"
-          :before-upload="beforeUpload"
-          class="upload-demo"
-        >
-          <i class="el-icon-upload"></i>
-          <div class="el-upload__text">
-            <em>点击上传</em>
-          </div>
-        </el-upload>
-      </el-form-item>
+      
+      <template v-if="handleType=='1'">
+        <el-form-item label="文件上传" prop="fileId">
+          <el-upload
+            v-model="form.fileId"
+            drag
+            multiple
+            :action="baseUrl + '/sensitive/import/file'"
+            :on-success="uploadSuccess"
+            :before-upload="beforeUpload"
+            class="upload-demo"
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">
+              <em>点击上传</em>
+            </div>
+          </el-upload>
+        </el-form-item>
+      </template>
+      <template v-if="handleType=='2'">
+        <el-form-item label="文件上传">
+          <span>{{form.fileName}}</span>
+        </el-form-item>
+      </template>
 
       <el-form-item label="数据有效期" prop="dataTermValidity">
-        <el-date-picker
-          v-model="form.dataTermValidity"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
+        <el-date-picker 
+          v-model="form.dataTermValidity" 
+          value-format="yyyy-MM-dd" 
+          type="date" 
+          placeholder="选择日期"
         ></el-date-picker>
       </el-form-item>
 
@@ -127,10 +132,12 @@
   export default{
     props: {
       form: Object,
-      rules: Object
+      rules: Object,
+      handleType: String
     },
     data(){
       return {
+        title: '',// 表单title
         baseUrl,
         disableAdmintype: false,
         needIdsList: [],
@@ -138,6 +145,15 @@
         showModal: true,
       }
     },
+    created(){
+      // 获取数据需求方类型为内部时的需求方姓名列表
+      this.getData('get', `/sensitive/info/employee`, {
+      },(data)=>{
+        this.needIdsList = data.data
+        this.idsList = data.data
+      });
+      this.title = (this.handleType=='1') ? '数据导入' : '数据修改';
+    },
     watch: {
       'form.dataType'(val){
         if(val==2){
@@ -146,22 +162,17 @@
         }else if(val==1){
           this.form.dataRole = '';
           this.disableAdmintype = false;
-          // 获取数据需求方类型为内部时的需求方姓名列表
-          this.getData('get', `/sensitive/info/employee`, {
-          },(data)=>{
-            this.needIdsList = data.data
-          });
         }
       },
-      'form.dataRole'(val){
-        if(val==1){
-          // 获取数据分发人员
-          this.getData('get', `/sensitive/info/employee`, {
-          },(data)=>{
-            this.idsList = data.data
-          });
-        }
-      }
+      // 'form.dataRole'(val){
+      //   if(val==1){
+      //     // 获取数据分发人员
+      //     this.getData('get', `/sensitive/info/employee`, {
+      //     },(data)=>{
+      //       this.idsList = data.data
+      //     });
+      //   }
+      // },
     },
     methods: {
       // 切换数据需求方类型为【内部】【外部】
@@ -189,14 +200,21 @@
       submitForm(formName) {
         this.$refs[formName].validate(valid => {
           if (valid) {
-            // 数据有效期 截取最终日期
-            this.form.dataTermValidity = this.form.dataTermValidity[1];
-            this.getData('post', '/sensitive/import/data', this.form, (data)=>{
-              setTimeout(()=>{
-                this.$emit('saveSuccess');
-                this.$emit('close');
-              },300);
-            });
+            if(this.handleType=='1'){
+              this.getData('post', '/sensitive/import/data', this.form, (data)=>{
+                setTimeout(()=>{
+                  this.$emit('saveSuccess');
+                  this.$emit('close');
+                },300);
+              });
+            }else{
+              this.getData('put', '/sensitive/import/data', this.form, (data)=>{
+                setTimeout(()=>{
+                  this.$emit('saveSuccess');
+                  this.$emit('close');
+                },300);
+              });
+            }
           } else {
             this.$message.error('请正确填写信息');
             return false;

src/views/sensitive-control/data-in.vue

@@ -40,7 +40,7 @@
     </el-form>
 
     <div class="block" style="margin-bottom:20px">
-      <el-button @click="centerDialogVisible=true">数据导入</el-button>
+      <el-button @click="createDataHandle">数据导入</el-button>
       <el-button @click="queryDataList">数据查询</el-button>
     </div>
     <template>
@@ -54,7 +54,7 @@
           <template slot-scope="scope">
             <el-button @click="dataview(scope.row)" type="text" size="small">查看</el-button>
             <template v-if="scope.row.status==1">
-              <el-button @click="reviseDialogVisible=true" type="text" size="small">修改</el-button>
+              <el-button @click="modifyDataHandle(scope.row.id)" type="text" size="small">修改</el-button>
               <el-button @click="notifyDingHandle(scope.row)" type="text" size="small">通知</el-button>
               <el-button @click="closeDingHandle(scope.row.userId)" type="text" size="small">关闭</el-button>
             </template>
@@ -80,16 +80,17 @@
       v-if="centerDialogVisible"
       :form="form" 
       :rules="rules"
+      :handleType="handleType"
       @close="closeCreate"
       @saveSuccess="saveSuccess"
     />
     <!-- 数据修改 page -->
-    <modifyData 
+    <!-- <modifyData 
       v-if="reviseDialogVisible"
       :form="form" 
       :rules="rules"
       @close="closeModify"
-    />
+    /> -->
   </div>
 </template>
 
@@ -115,6 +116,7 @@ export default {
       }
     };
     return {
+      handleType: '1',// 表单操作类型，1.新增 2.修改
       currentPage: 1,
       pageSize: 15,
       total: 50, // 默认分页总数
@@ -129,24 +131,6 @@ export default {
         dingdingDate: '', // 申请日期
         dataSheetName: '',  // sheet名称
       },
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕"
-        },
-        {
-          value: "选项2",
-          label: "双皮奶"
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎"
-        },
-        {
-          value: "选项4",
-          label: "龙须面"
-        }
-      ],
       form: {
         status: 1,
         dingdingNumber: "", // 审批编号
@@ -269,7 +253,6 @@ export default {
     },
     // 选中sheet
     handleSheetchange(val){
-      console.log(`选中sheet===>${val}`)
     },
     // 数据查询
     queryDataList(){
@@ -316,6 +299,44 @@ export default {
       }
       return value;
     },
+    // 新增数据-数据导入
+    createDataHandle(){
+      this.centerDialogVisible=true;
+      this.handleType='1';
+      this.form = {
+        status: 1,
+        dingdingNumber: "", // 审批编号
+        dingdingDate: "", // 申请日期
+        dataSheetName: "",//sheet名称
+        dataType: "",// 数据需求方类型 1.内部 2.外部
+        needIds: [],// 数据需求方id集合  需求方类型选择为       dataType【内部】
+        mobilePhone: '', // 数据需求方类型为【外部】需要传递      dataType【外部】
+        name: '', // 数据需求方类型为【外部】需要传递             dataType【外部】
+        sensitiveDataType: "", // 敏感信息查看权限 1是，2否
+        dataRole: '',//数据需求角色 1管理员，2普通用户
+        ids: [],  // 数据分发人员数组
+        fileId: '', // 文件上传id
+        dataTermValidity: "", // 数据有效期 - 日期
+        dataCount: "",// 数据访问次数限制
+        sensitiveDataColumn: "", // 敏感信息列所在位置
+      };
+    },
+    // 修改数据
+    modifyDataHandle(id){
+      id = 60; // 为了方便测试，这里写一个有效的dev环境的id值!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!切记删除
+      this.centerDialogVisible = true;
+      this.handleType = '2';
+      this.getData('get', `/sensitive/import/data?id=${id}`, {},(data)=>{
+        const form = data.data;
+        if(!form.needIds){
+          form.needIds = []
+        }
+        if(!form.ids){
+          form.ids = []
+        }
+        this.form = form;
+      });
+    },
     // 列表关闭操作
     closeDingHandle(userId){
       this.$confirm('确定关闭？', '提示', {