update

src/views/sensitive-control/data-view-message.vue

@@ -6,36 +6,43 @@
       style="width: 100%">
       <el-table-column
         prop="date"
+        align="center"
         label="日期"
         >
       </el-table-column>
       <el-table-column
         prop="name"
+        align="center"
         label="姓名"
         >
       </el-table-column>
       <el-table-column
         prop="province"
+        align="center"
         label="省份"
         >
       </el-table-column>
       <el-table-column
         prop="city"
+        align="center"
         label="市区"
         >
       </el-table-column>
       <el-table-column
         prop="address"
+        align="center"
         label="地址"
         >
       </el-table-column>
       <el-table-column
         prop="zip"
+        align="center"
         label="邮编"
         >
       </el-table-column>
       <el-table-column
         fixed="right"
+        align="center"
         label="操作"
         width="100">
         <template slot-scope="scope">
@@ -51,11 +58,16 @@
       :close-on-click-modal="false"
       class="check-modal-box"
       :visible.sync="centerDialogVisible"
-      width="500px"
+      width="300px"
       center>
       <p>该数据的审批单号为********，短信将发送至 156****8970 的手机上，如果手机已停用，请联系管理员。</p>
-      <div class="captcha">
-        <el-input v-model="message" placeholder="请输入内容"></el-input>
+      <div class="captcha-wrap">
+        <el-input v-model="captchaCode" size="small" placeholder="请输入图形验证码"></el-input>
+        <img src="" alt="">
+      </div>
+      <div class="sms-wrap">
+        <el-input v-model="smsCode" size="small" placeholder="请输入短信验证码"></el-input>
+        <div class="button">获取短信验证码</div>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="centerDialogVisible = false">取 消</el-button>
@@ -105,7 +117,10 @@
           city: '普陀区',
           address: '上海市普陀区金沙江路 1516 弄',
           zip: 200333
-        }]
+        }],
+        captchaCode: '',  // 图形验证码
+        smsCode: '',      // 短信验证码
+
       }
     }
   }
@@ -120,6 +135,40 @@
       .el-dialog__header{
         display: none;
       }
+      .el-dialog__body{
+        padding: 15px 15px 30px !important;
+      }
+      .captcha-wrap{
+        margin-top: 24px;
+        overflow: hidden;
+        .el-input{
+          width: 150px;
+          float: left;
+        }
+        img{
+          float: left;
+          display: block; border: none;
+          width: 100px; height: 32px; margin-left: 10px;
+          background: pink;
+        }
+      }
+      .sms-wrap{
+        margin-top: 14px; overflow: hidden;
+        .el-input{
+          width: 150px;
+          float: left;
+        }
+        .button{
+          float: left;
+          width: 100px; height: 32px; margin-left: 10px;
+          font-size: 13px;
+          text-align: center; line-height: 32px;
+          color: #979899;
+          &.allow{
+            color: #409EFF;
+          }
+        }
+      }
     }
   }
 

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

@@ -3,18 +3,26 @@
     <h2 class="top-title">数据查看</h2>
     <el-form :inline="true" :model="ruleForm" :rules="rules"  ref="ruleForm" class="search-ruleForm" >
       <el-form-item label="钉钉流程审批单号" prop="number">
-        <el-input v-model="ruleForm.number" size="small" class="input"></el-input>
+        <el-input v-model.number="ruleForm.number" size="small" class="input" clearable @input="handleDingNumChange" @clear="handleDingNumClear" maxlength="21"></el-input>
       </el-form-item>
       <el-form-item label="数据申请日期" prop="date">
-        <el-select v-model="ruleForm.date" size="small" placeholder="请选择活动区域">
-          <el-option label="区域一" value="shanghai"></el-option>
-          <el-option label="区域二" value="beijing"></el-option>
+        <el-select v-model="ruleForm.date" size="small" placeholder="请选择申请日期" clearable @change="handleApplyDateChange" @clear="handleApplyDateClear">
+          <el-option
+            v-for="item in applyDateList"
+            :key="item.date"
+            :label="item.date"
+            :value="item.date">
+          </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="sheet名" prop="sheet">
-        <el-select v-model="ruleForm.sheet" size="small" placeholder="请选择活动区域">
-          <el-option label="区域一" value="shanghai"></el-option>
-          <el-option label="区域二" value="beijing"></el-option>
+        <el-select v-model="ruleForm.sheet" size="small" placeholder="请选择sheet名" clearable >
+          <el-option
+            v-for="item in sheetsList"
+            :key="item.name"
+            :label="item.name"
+            :value="item.name">
+          </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="Column 1-7" prop="aaa">
@@ -145,18 +153,32 @@
   import { openLoading, closeLoading } from "../../common/utils";
   export default {
     data() {
+      var checkNumLength = (rule, value, callback) => {
+        if (value && (value+'').length != 21) {
+          callback(new Error('审批单号必须为21位数字值'));
+        } else {
+          callback();
+        }
+      };
       return {
         ruleForm: {
-          name: "",
-          region: ""
+          number: "",
+          date: '',
+          sheet: "",
         },
         rules: {
-          number: [{ required: true, message: "请输入审批单号", trigger: "blur" }],
+          number: [
+            { required: true, message: "请输入审批单号", trigger: "blur" },
+            { type: 'number', message: '审批单号必须为数字值'},
+            { validator: checkNumLength, trigger: 'blur' }
+          ],
           date: [{ required: true, message: "请选择数据申请日期", trigger: "change" }],
           sheet: [{ required: true, message: "请选择sheet名", trigger: "change" }],
         },
 
-        sendDialogVisible: true,  //分发弹窗
+        applyDateList: [],
+        sheetsList: [],
+        sendDialogVisible: false,  //分发弹窗
         selectedPeople: [],
         peopleList:  [{
           value: '选项1',
@@ -207,6 +229,46 @@
     },
     created() {},
     methods: {
+      handleDingNumChange(val) {
+        console.log('val>>> ', val)
+        if(val && val.length == 21){
+          this.getApplyDateList();  
+        }else{
+          this.handleDingNumClear();
+        }
+      },
+      getApplyDateList() {  //获取 数据申请日期
+        console.log('>>> 获取数据申请日期')
+        this.applyDateList = [
+          { date: '2019-05-05' },
+          { date: '2019-06-06' },
+          { date: '2019-07-07' },
+        ];
+
+      },
+      handleApplyDateChange(val) {
+        if(val){
+          this.getSheets();
+        }
+      },
+      handleDingNumClear() {
+        this.ruleForm.date = '';
+        this.applyDateList = [];
+        this.handleApplyDateClear();
+      },
+      handleApplyDateClear() {
+        this.ruleForm.sheet = '';
+        this.sheetsList = [];
+      },
+      getSheets() {  // 获取 Sheets名
+        console.log('>>> 获取Sheets名')
+        this.sheetsList = [
+          { name: 'sheet 1' },
+          { name: 'sheet 2' },
+          { name: 'sheet 3' },
+        ];
+
+      },
       handleSend() {
         console.log('>>> 分发');
         this.sendDialogVisible = true;