update data-view page

e8693d46 · chengxiang.li · d59eac36 · e8693d46 · e8693d46
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
-    <!-- <link rel="shortcut icon" href="./static/img/index_logoicon.png"> -->
+    <link rel="shortcut icon" href="./static/img/index_logoicon.png">
 </head>
 <body>
 <div id="app"></div>

--- a/src/views/sensitive-control/data-view.vue
+++ b/src/views/sensitive-control/data-view.vue
@@ -3,7 +3,7 @@
    <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.number="ruleForm.number" size="small" class="input" clearable @input="handleDingNumChange" @clear="handleDingNumClear" maxlength="21"></el-input>
+        <el-input v-model="ruleForm.number" type="number" size="small" class="input" clearable @input="handleDingNumChange" @clear="handleDingNumClear" @keydown.native="numInputLimit" maxlength="21"></el-input>
      </el-form-item>
      <el-form-item label="数据申请日期" prop="date">
        <el-select v-model="ruleForm.date" size="small" placeholder="请选择申请日期" clearable @change="handleApplyDateChange" @clear="handleApplyDateClear">
@@ -25,7 +25,9 @@
          </el-option>
        </el-select>
      </el-form-item>
-      <el-form-item label="Column 1-7" prop="aaa">
+      
+      
+      <el-form-item label="Column 1-7" prop="aaa" >
        <el-select v-model="ruleForm.aaa" size="small" style="width: 150px;" placeholder="请选择活动区域" >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
@@ -33,6 +35,11 @@
        <el-input v-model="ruleForm.name" size="small" style="width: 150px;"></el-input>
        <i class="add-icon" @click="handleAddClick">+</i>
      </el-form-item>
+
+      <el-form-item v-for="item in testList">
+        <el-button type="primary">{{item.name}}</el-button>
+      </el-form-item>
+
      <el-form-item style="margin-left: 100px;">
        <el-button type="primary" @click="handleSend">分发</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
@@ -154,7 +161,10 @@
  export default {
    data() {
      var checkNumLength = (rule, value, callback) => {
-        if (value && (value+'').length != 21) {
+        console.log('>>>> val ', value)
+        if (!value) {
+          return callback(new Error('请输入审批单号'));
+        }else if (value && (value+'').length != 21) {
          callback(new Error('审批单号必须为21位数字值'));
        } else {
          callback();
@@ -167,15 +177,17 @@
          sheet: "",
        },
        rules: {
-          number: [
-            { required: true, message: "请输入审批单号", trigger: "blur" },
-            { type: 'number', message: '审批单号必须为数字值'},
-            { validator: checkNumLength, trigger: 'blur' }
-          ],
+          number: [{ validator: checkNumLength, trigger: ['blur', 'change'] }],
          date: [{ required: true, message: "请选择数据申请日期", trigger: "change" }],
          sheet: [{ required: true, message: "请选择sheet名", trigger: "change" }],
        },

+        testList: [
+          { name: 'aaa' },
+          { name: 'bbb' },
+
+        ],
+
        applyDateList: [],
        sheetsList: [],
        sendDialogVisible: false,  //分发弹窗
@@ -230,12 +242,21 @@
    created() {},
    methods: {
      handleDingNumChange(val) {
-        console.log('val>>> ', val)
        if(val && val.length == 21){
          this.getApplyDateList();  
-        }else{
-          this.handleDingNumClear();
+        }else if(val && val.length > 21){
+          val = val.slice(0,21);
+          this.ruleForm.number = val;
+        }
+      },
+      numInputLimit (e) {
+        let key = e.key
+        // 不允许输入'e'和'.'
+        if (key === 'e' || key === '.') {
+          e.returnValue = false
+          return false
        }
+        return true
      },
      getApplyDateList() {  //获取 数据申请日期
        console.log('>>> 获取数据申请日期')
@@ -285,7 +306,10 @@
        });
      },
      handleAddClick() {
-        console.log('添加column1-7 搜索框')
+        console.log('添加column1-7 搜索框');
+        this.testList.push({
+          name: 'ccc'
+        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
@@ -303,6 +327,14 @@

 <style lang="less">
  .data-view-wrap {
+     // 处理input type = number的上下箭头
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+    }
+    input[type="number"]{
+      -moz-appearance: textfield;
+    }
    ul,li{ list-style: none; }
    .top-title {
      color: #333333;