Skip to content

P
pica-risk-admin
提交 7c84d810 编写于 作者: chengxiang.li's avatar chengxiang.li
浏览文件
操作

update data-view and date-view-message page

上级 e8693d46
展开全部 显示空白字符变更
内嵌 并排
正在显示 包含 538 行增加 和 281 行删除
index.html
浏览文件 @ 7c84d810
......@@ -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
浏览文件 @ 7c84d810
<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
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或