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
src/views/sensitive-control/data-view.vue
浏览文件 @ 7c84d810
<template>
<div class="data-view-wrap">
<h2 class="top-title">数据查看</h2>
<el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" class="search-ruleForm" >
<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" type="number" size="small" class="input" clearable @input="handleDingNumChange" @clear="handleDingNumClear" @keydown.native="numInputLimit" 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">
<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>
: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="请选择sheet名" clearable >
<el-select v-model="ruleForm.sheet" size="small" placeholder="请选择" clearable>
<el-option
v-for="item in sheetsList"
:key="item.name"
:label="item.name"
:value="item.name">
</el-option>
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<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>
</el-select>
<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="showAddConditionModal">添加筛选条件</el-button>
<el-button type="primary" @click="handleSend">分发</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
</el-form-item>
......@@ -48,45 +52,22 @@
<el-table
ref="multipleTable"
:data="tableData"
:data="testDataList.outModels"
border
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
align="center"
width="55">
</el-table-column>
<el-table-column
label="日期"
align="center"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
align="center"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
align="center"
label="地址"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="address"
align="center"
label="数据查看人员"
show-overflow-tooltip>
</el-table-column>
<el-table-column
fixed="right"
align="center"
label="操作"
width="200">
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" align="center" width="55"></el-table-column>
<template
v-if="testDataList && testDataList.columnList"
v-for="item in testDataList.columnList"
>
<el-table-column :prop="item.key" align="center" :label="item.value" show-overflow-tooltip></el-table-column>
</template>
<el-table-column fixed="right" align="center" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="handleRemarkClick(scope.row)" type="text" size="small">备注</el-button>
<el-button type="text" size="small">标记处理</el-button>
......@@ -94,6 +75,30 @@
</el-table-column>
</el-table>
<!-- 添加筛选条件 弹窗 -->
<el-dialog
title="添加筛选条件"
class="condition-dialog-wrap"
:visible.sync="addConditioDialogVisible"
width="500px"
center
>
<el-form ref="form" :model="conditionForm" label-width="100px">
<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"></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>
<!-- 分发 弹窗 -->
<el-dialog
title="分发"
......@@ -101,7 +106,8 @@
class="send-modal-box"
:visible.sync="sendDialogVisible"
width="500px"
center>
center
>
<span>被选中的需要分发的数据，此处只显示Column1</span>
<div class="people-choose">
<p class="title">人员选择</p>
......@@ -110,8 +116,8 @@
v-for="item in peopleList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
:value="item.value"
></el-option>
</el-select>
</div>
<span slot="footer" class="dialog-footer">
......@@ -127,7 +133,8 @@
class="remark-modal"
:visible.sync="remarkDialogVisible"
width="500px"
center>
center
>
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>
<el-button type="primary" class="remark-confirm-btn">确 定</el-button>
<ul class="history-list">
......@@ -148,24 +155,21 @@
<p class="text">撇价格拉低价格SD卡解放路开始打发就群殴刚叫我去额炯炯拉开距离开发及 来看电视剧弗兰克离开家大师傅了看见爱上大概是打发埃里克国家考虑过</p>
</li>
</ul>
</el-dialog>
</div>
</template>
<script>
import { openLoading, closeLoading } from "../../common/utils";
export default {
let vm = null;
import { openLoading, closeLoading } from "../../common/utils";
export default {
data() {
var checkNumLength = (rule, value, callback) => {
console.log('>>>> val ', value)
console.log(">>>> val ", value);
if (!value) {
return callback(new Error('请输入审批单号'));
}else if (value && (value+'').length != 21) {
callback(new Error('审批单号必须为21位数字值'));
return callback(new Error("请输入审批单号"));
} else if (value && (value + "").length != 21) {
callback(new Error("审批单号必须为21位数字值"));
} else {
callback();
}
......@@ -173,169 +177,240 @@
return {
ruleForm: {
number: "",
date: '',
sheet: "",
date: "",
sheet: ""
},
rules: {
number: [{ validator: checkNumLength, trigger: ['blur', 'change'] }],
date: [{ required: true, message: "请选择数据申请日期", trigger: "change" }],
sheet: [{ required: true, message: "请选择sheet名", trigger: "change" }],
number: [{ validator: checkNumLength, trigger: ["blur", "change"] }],
date: [
{ required: true, message: "请选择数据申请日期", trigger: "change" }
],
sheet: [{ required: true, message: "请选择sheet名", trigger: "change" }]
},
testList: [
{ name: 'aaa' },
{ name: 'bbb' },
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: "手机"
}
]
},
addConditioDialogVisible: false, // 添加筛选条件
conditionForm: {},
applyDateList: [],
sheetsList: [],
sendDialogVisible: false, //分发弹窗
selectedPeople: [],
peopleList: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}],
peopleList: [
{
value: "选项1",
label: "黄金糕"
},
{
value: "选项2",
label: "双皮奶"
}
],
remarkDialogVisible: false, //备注弹窗
textarea: '',
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: [],
textarea: "",
tableData: [
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-08",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-06",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-07",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
}
],
multipleSelection: []
};
},
created() {},
created() {
vm = this;
},
methods: {
handleDingNumChange(val) {
if(val && val.length == 21){
if (val && val.length == 21) {
this.getApplyDateList();
}else if(val && val.length > 21){
val = val.slice(0,21);
} else if (val && val.length > 21) {
val = val.slice(0, 21);
this.ruleForm.number = val;
}
},
numInputLimit (e) {
let key = e.key
numInputLimit(e) {
let key = e.key;
// 不允许输入'e'和'.'
if (key === 'e' || key === '.') {
e.returnValue = false
return false
if (key === "e" || key === ".") {
e.returnValue = false;
return false;
}
return true
return true;
},
getApplyDateList() { //获取 数据申请日期
console.log('>>> 获取数据申请日期')
getApplyDateList() {
//获取 数据申请日期
console.log(">>> 获取数据申请日期");
this.applyDateList = [
{ date: '2019-05-05' },
{ date: '2019-06-06' },
{ date: '2019-07-07' },
{ date: "2019-05-05" },
{ date: "2019-06-06" },
{ date: "2019-07-07" }
];
},
handleApplyDateChange(val) {
if(val){
if (val) {
this.getSheets();
}
},
handleDingNumClear() {
this.ruleForm.date = '';
this.ruleForm.date = "";
this.applyDateList = [];
this.handleApplyDateClear();
},
handleApplyDateClear() {
this.ruleForm.sheet = '';
this.ruleForm.sheet = "";
this.sheetsList = [];
},
getSheets() { // 获取 Sheets名
console.log('>>> 获取Sheets名')
getSheets() {
// 获取 Sheets名
console.log(">>> 获取Sheets名");
this.sheetsList = [
{ name: 'sheet 1' },
{ name: 'sheet 2' },
{ name: 'sheet 3' },
{ name: "sheet 1" },
{ name: "sheet 2" },
{ name: "sheet 3" }
];
},
showAddConditionModal() {
this.addConditioDialogVisible = true;
},
handleSend() {
console.log('>>> 分发');
console.log(">>> 分发");
this.sendDialogVisible = true;
},
submitForm(formName) {
console.log('>>> 查询')
this.$refs[formName].validate((valid) => {
console.log(">>> 查询");
this.$refs[formName].validate(valid => {
if (valid) {
alert('submit!');
alert("submit!");
// 将添加的筛选条件合并到 查询接口的传参中
let stringData = JSON.stringify(vm.conditionForm);
if (stringData == "{}") {
// console.log('筛选为空')
} else {
console.log('error submit!!');
// console.log('筛选有数据')
let condition = JSON.parse(stringData);
for (let key in condition) {
vm.ruleForm[key] = condition[key];
}
}
// 请求查询接口
} else {
console.log("error submit!!");
return false;
}
});
},
handleAddClick() {
console.log('添加column1-7 搜索框');
this.testList.push({
name: 'ccc'
})
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleRemarkClick(row) {
console.log('handleRemarkClick: ', row);
console.log("handleRemarkClick: ", row);
this.remarkDialogVisible = true;
},
handleConfirmSend() {
console.log('确定分发>>>>');
},
console.log("确定分发>>>>");
}
};
}
};
</script>
<style lang="less">
.data-view-wrap {
.data-view-wrap {
// 处理input type = number的上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
input[type="number"] {
-moz-appearance: textfield;
}
ul,li{ list-style: none; }
ul,
li {
list-style: none;
}
.top-title {
color: #333333;
}
......@@ -355,16 +430,24 @@
}
}
}
.remark-modal{
.el-dialog__body{
.condition-dialog-wrap {
.el-form-item__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.remark-modal {
.el-dialog__body {
overflow: hidden;
.remark-confirm-btn{
float:right; margin-top: 10px;
.remark-confirm-btn {
float: right;
margin-top: 10px;
}
.history-list{
.history-list {
margin-top: 60px;
li{
.text{
li {
.text {
margin: 5px 10px;
line-height: 22px;
}
......@@ -373,19 +456,16 @@
}
}
.send-modal-box{
.people-choose{
.send-modal-box {
.people-choose {
margin-top: 30px;
.title{
.title {
display: inline-block;
}
.people-select-comp{
.people-select-comp {
margin-left: 20px;
}
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或