update data-view and date-view-message page

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>敏感数据查看系统</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
     <meta content="" name="description"/>
     <meta content="" name="author"/>
     <link rel="shortcut icon" href="./static/img/index_logoicon.png">

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

 <template>
-  <div class="data-view-message-wrap">
+  <div class="data-view-message-wrap" >
+    <el-row class="button-wrap">
+      <el-button class="each-button" type="primary" @click="showAddConditionModal(true)">添加筛选条件</el-button>
+      <el-button class="each-button" type="primary" @click="hadnleSearch">查询</el-button>
+    </el-row>
     <el-table
       :data="tableData"
+      height="100%"
       border
       style="width: 100%">
       <el-table-column
@@ -41,13 +46,12 @@
         >
       </el-table-column>
       <el-table-column
-        fixed="right"
         align="center"
         label="操作"
         width="100">
         <template slot-scope="scope">
-          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
-          <el-button type="text" size="small">编辑</el-button>
+          <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
+          <el-button type="text">编辑</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -75,6 +79,29 @@
       </span>
     </el-dialog>
 
+    <!-- 添加筛选条件 弹窗 -->
+    <el-dialog
+      :show-close="false"
+      @close="showAddConditionModal(false)"
+      :close-on-click-modal="false"
+      title="添加筛选条件"
+      class="condition-dialog-wrap"
+      :visible="addConditioDialogVisible"
+      width="300px"
+      center>
+      <el-form ref="form" :model="conditionForm" label-width="80px">
+        <template v-if="testDataList && testDataList.columnList" v-for="item in testDataList.columnList">
+          <el-form-item :label="item.value" style="width:400px;">
+            <el-input v-model="conditionForm[item.key]" size="small" style="width: 150px;"></el-input>
+          </el-form-item>
+        </template>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addConditioDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addConditioDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -85,10 +112,64 @@
         console.log(row);
       }
     },
-
+    mounted() {
+      
+    },
     data() {
       return {
-        centerDialogVisible: true,
+        addConditioDialogVisible: false, // 添加筛选条件
+        conditionForm : {},
+        testDataList: {
+        outModels: [
+          {
+            column1: "上海市",
+            column5: "123423",
+            column4: "张三",
+            column3: "浦东新区",
+            column2: "上海市",
+            contentId: 1,
+            userName: "张三,李四",
+            dataUserContentId: 1,
+            status: 2
+          },
+          {
+            column1: "河南省",
+            column5: "123424",
+            column4: "李四",
+            column3: "舞阳县",
+            column2: "漯河市",
+            contentId: 2,
+            userName: "张三",
+            dataUserContentId: 4,
+            status: 2
+          }
+        ],
+        total: 2,
+        columnList: [
+          {
+            key: "column1",
+            value: "省"
+          },
+          {
+            key: "column2",
+            value: "市"
+          },
+          {
+            key: "column3",
+            value: "区县"
+          },
+          {
+            key: "column4",
+            value: "姓名"
+          },
+          {
+            key: "column5",
+            value: "手机"
+          }
+        ]
+      },
+
+        centerDialogVisible: false, // 验证弹窗
         tableData: [{
           date: '2016-05-02',
           name: '王小虎',
@@ -117,12 +198,73 @@
           city: '普陀区',
           address: '上海市普陀区金沙江路 1516 弄',
           zip: 200333
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1516 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1516 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1516 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-03',
+          name: '王小22',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1516 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-03',
+          name: '王小虎333',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1516 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-03',
+          name: '王小虎666',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1516 弄',
+          zip: 200333
         }],
         captchaCode: '',  // 图形验证码
         smsCode: '',      // 短信验证码
 
       }
-    }
+    },
+    methods: {
+      // handleMaskTouch() {
+      //   console.log('>>>> mask .....')
+      //   let grayMask = document.getElementsByClassName('v-modal')[0];
+      //   grayMask.ontouchmove = function(event){
+      //     console.log(123)
+      //     let ev = event || window.event;
+      //     ev.preventDefault();
+      //     ev.stopPropagation();
+      //   }
+      // },
+      showAddConditionModal(status){
+        this.addConditioDialogVisible = status ? true : false;
+      },
+      hadnleSearch() {
+        console.log('查询。。。')
+      },
+
+    },
   }
 </script>
 
@@ -131,6 +273,19 @@
   .sidebar{ width: 0; overflow: hidden; }
   .content{ left: 0 !important;  top: 0 !important; } 
   .data-view-message-wrap {
+    width: 100%;
+    height: 100%;
+    overflow: hidden; 
+    .button-wrap{
+      margin: 20px 0;
+      .each-button{
+        float: right;
+        margin: 0 15px  0 5px;
+      }
+    }
+    .el-table{
+      -webkit-overflow-scrolling:touch;
+    }
     .check-modal-box{
       .el-dialog__header{
         display: none;
@@ -170,6 +325,28 @@
         }
       }
     }
+    // 调整弹框样式，使弹窗只占用自身空间，使其不影响给mask加的事件
+    .condition-dialog-wrap{
+      overflow: hidden;
+      bottom: auto !important;
+      right: auto !important;
+      left: 50%; margin-left: -150px; top: 2vh;
+      .el-dialog--center{
+        margin: 0 !important;
+      }
+      .el-dialog__body{
+        padding: 15px 15px 0 !important;
+        .el-form{
+          -webkit-overflow-scrolling:touch;
+          height: 300px; overflow: hidden; overflow-y: scroll;
+        }
+      }
+      .el-form-item__label{
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
   }
 
 </style>
\ No newline at end of file