Skip to content

P
pica-sensitive-admin
提交 982a25e3 编写于 作者: chengxiang.li's avatar chengxiang.li
浏览文件
操作

update data-view

上级 453c290b
隐藏空白字符变更
内嵌 并排
正在显示 包含 347 行增加 和 306 行删除
index.html
浏览文件 @ 982a25e3
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<meta content="width=device-width, initial-scale=1.0" name="viewport"/> <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta content="" name="description"/> <meta content="" name="description"/>
<meta content="" name="author"/> <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> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
src/views/sensitive-control/data-view-message.vue
浏览文件 @ 982a25e3
<template> <template>
<div class="data-view-message-wrap"> <div class="data-view-message-wrap">
<el-table <el-table
:data="tableData" :data="tableData"
border border
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
prop="date" prop="date"
label="日期" label="日期"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="name" prop="name"
label="姓名" label="姓名"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="province" prop="province"
label="省份" label="省份"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="city" prop="city"
label="市区" label="市区"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="address" prop="address"
label="地址" label="地址"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="zip" prop="zip"
label="邮编" label="邮编"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
fixed="right" fixed="right"
label="操作" label="操作"
width="100"> width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button> <el-button type="text" size="small">编辑</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 验证弹窗 -->
<el-dialog
title=""
:close-on-click-modal="false"
class="check-modal-box"
:visible.sync="centerDialogVisible"
width="500px"
center>
<p>该数据的审批单号为********，短信将发送至 156****8970 的手机上，如果手机已停用，请联系管理员。</p>
<div class="captcha">
<el-input v-model="message" placeholder="请输入内容"></el-input>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
...@@ -57,6 +76,7 @@ ...@@ -57,6 +76,7 @@
data() { data() {
return { return {
centerDialogVisible: true,
tableData: [{ tableData: [{
date: '2016-05-02', date: '2016-05-02',
name: '王小虎', name: '王小虎',
...@@ -95,6 +115,12 @@ ...@@ -95,6 +115,12 @@
.header{ height: 0 !important; overflow: hidden; left:0 !important;} .header{ height: 0 !important; overflow: hidden; left:0 !important;}
.sidebar{ width: 0; overflow: hidden; } .sidebar{ width: 0; overflow: hidden; }
.content{ left: 0 !important; top: 0 !important; } .content{ left: 0 !important; top: 0 !important; }
.data-view-message-wrap {
.check-modal-box{
.el-dialog__header{
display: none;
}
}
}
</style> </style>
\ No newline at end of file
src/views/sensitive-control/data-view.vue
浏览文件 @ 982a25e3
<template> <template>
<section> <div class="data-view-wrap">
<el-form ref="form" :model="form" label-width="100px" :inline="true"> <h2 class="top-title">数据查看</h2>
<el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" class="search-ruleForm" >
<div class="block"> <el-form-item label="钉钉流程审批单号" prop="number">
<el-form-item label="审批编号" :inline="true"> <el-input v-model="ruleForm.number" size="small" class="input"></el-input>
</el-form-item>
<el-input v-model="form.id_input" style="width:220px" placeholder="审批编号查询"></el-input> <el-form-item label="数据申请日期" prop="date">
</el-form-item> <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>
<el-form-item label="申请日期" :inline="true"> </el-form-item>
<el-form-item label="sheet名" prop="sheet">
<el-select v-model="ruleForm.sheet" size="small" placeholder="请选择活动区域">
<el-date-picker v-model="form.value1" type="date" placeholder="选择日期"></el-date-picker> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-form-item> </el-select>
</el-form-item>
<el-form-item label="Column 1-7" prop="aaa">
<el-form-item label="sheet名称"> <el-select v-model="ruleForm.aaa" size="small" style="width: 150px;" placeholder="请选择活动区域" >
<el-option label="区域一" value="shanghai"></el-option>
<el-select v-model="form.value" placeholder="请选择"> <el-option label="区域二" value="beijing"></el-option>
<el-option </el-select>
v-for="item in form.options" <el-input v-model="ruleForm.name" size="small" style="width: 150px;"></el-input>
:key="item.value" <i class="add-icon" @click="handleAddClick">+</i>
:label="item.label" </el-form-item>
:value="item.value" <el-form-item style="margin-left: 100px;">
></el-option> <el-button type="primary" @click="handleSend">分发</el-button>
</el-select> <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
</el-form-item> </el-form-item>
</div>
<el-form-item label="Column 1-7:">
<el-select v-model="form.value1" placeholder="请选择">
<el-option
v-for="item in form.optionss"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<!-- <div class="block">
<el-form-item label="Column 1-7:下拉菜">
<span>Column 1-7:&nbsp;&nbsp;&nbsp;</span>
<el-select v-model="form.value1" placeholder="请选择">
<el-option
v-for="item in form.optionss"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</div> -->
<div class="block" style="margin-bottom:20px">
<el-form-item label="空白">
<el-input style="width:200px;" v-model="form.input" placeholder></el-input>
</el-form-item>
<span>+</span>
<el-button @click="msgsendDialogVisible = true">分发</el-button>
<el-button>查询</el-button>
</div>
</el-form> </el-form>
<el-table :data="tableData" border style="width: 100%"> <el-table
<el-table-column fixed prop="date" label="日期" width="150"></el-table-column> ref="multipleTable"
<el-table-column prop="name" label="姓名" width="120"></el-table-column> :data="tableData"
<el-table-column prop="province" label="省份" width="120"></el-table-column> border
<el-table-column prop="city" label="市区" width="120"></el-table-column> tooltip-effect="dark"
<el-table-column prop="address" label="地址" width="300"></el-table-column> style="width: 100%"
<el-table-column prop="zip" label="邮编" width="120"></el-table-column> @selection-change="handleSelectionChange">
<el-table-column prop="zip" label="数据查看人员" width="120"></el-table-column> <el-table-column
<el-table-column fixed="right" label="操作" width="100"> 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">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <el-button @click="handleClick(scope.row)" type="text" size="small" >备注</el-button> --> <el-button @click="handleRemarkClick(scope.row)" type="text" size="small">备注</el-button>
<el-button @click="remarksDialogVisible=true" type="text" size="small">备注</el-button> <el-button type="text" size="small">标记处理</el-button>
<el-button type="text" size="small">标记</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 分发弹窗 --> <!-- 分发 弹窗 -->
<el-dialog title="提示" :visible.sync="msgsendDialogVisible" width="30%" center> <el-dialog
<span>被选中的需要分发的数据，此处只显示colum1</span> title="分发"
<el-select v-model="value5" multiple placeholder="请选择"> :close-on-click-modal="false"
<el-option class="send-modal-box"
v-for="item in options" :visible.sync="sendDialogVisible"
:key="item.value" width="500px"
:label="item.label" center>
:value="item.value" <span>被选中的需要分发的数据，此处只显示Column1</span>
></el-option> <div class="people-choose">
</el-select> <p class="title">人员选择</p>
<el-select v-model="selectedPeople" placeholder="请选择" class="people-select-comp">
<el-option
v-for="item in peopleList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="msgsendDialogVisible = false">取 消</el-button> <el-button @click="sendDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="msgsendDialogVisible = false">确 定</el-button> <el-button type="primary" @click="handleConfirmSend">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
<!-- 备注弹窗 --> <!-- 备注 弹窗 -->
<el-dialog title="备注" :visible.sync="remarksDialogVisible" width="30%" center> <el-dialog
<el-input title="备注"
type="textarea" :close-on-click-modal="false"
:autosize="{ minRows: 2, maxRows: 4}" class="remark-modal"
placeholder="请输入备注信息" :visible.sync="remarkDialogVisible"
v-model="textarea" width="500px"
></el-input> center>
<div> <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>
2019-11-10 <el-button type="primary" class="remark-confirm-btn">确 定</el-button>
联系不上 <ul class="history-list">
2019-11-09 <li>
用户拒绝 <p class="date">2019-11-09</p>
</div> <p class="text">撇价格拉低价格SD卡解放路开始打发就群殴刚叫我去额炯炯拉开距离开发及 来看电视剧弗兰克离开家大师傅了看见爱上大概是打发埃里克国家考虑过</p>
<span slot="footer" class="dialog-footer"> </li>
<el-button @click="remarksDialogVisible = false">取 消</el-button> <li>
<el-button type="primary" @click="remarksDialogVisible = false">确 定</el-button> <p class="date">2019-11-09</p>
</span> <p class="text">撇价格拉低价格SD卡解放路开始打发就群殴刚叫我去额炯炯拉开距离开发及 来看电视剧弗兰克离开家大师傅了看见爱上大概是打发埃里克国家考虑过</p>
</li>
<li>
<p class="date">2019-11-09</p>
<p class="text">撇价格拉低价格SD卡解放路开始打发就群殴刚叫我去额炯炯拉开距离开发及 来看电视剧弗兰克离开家大师傅了看见爱上大概是打发埃里克国家考虑过</p>
</li>
<li>
<p class="date">2019-11-09</p>
<p class="text">撇价格拉低价格SD卡解放路开始打发就群殴刚叫我去额炯炯拉开距离开发及 来看电视剧弗兰克离开家大师傅了看见爱上大概是打发埃里克国家考虑过</p>
</li>
</ul>
</el-dialog> </el-dialog>
<router-view></router-view>
</section>
</template>
</div>
</template>
<script> <script>
export default { import { openLoading, closeLoading } from "../../common/utils";
methods: { export default {
handleClick(row) { data() {
console.log(row); return {
/** 表格方法**/ ruleForm: {
} name: "",
}, region: ""
data() {
return {
input: "",
msgsendDialogVisible: false,
remarksDialogVisible: false,
textarea: "",
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}, },
shortcuts: [ rules: {
{ number: [{ required: true, message: "请输入审批单号", trigger: "blur" }],
text: "今天", date: [{ required: true, message: "请选择数据申请日期", trigger: "change" }],
onClick(picker) { sheet: [{ required: true, message: "请选择sheet名", trigger: "change" }],
picker.$emit("pick", new Date()); },
}
}, sendDialogVisible: true, //分发弹窗
{ selectedPeople: [],
text: "昨天", peopleList: [{
onClick(picker) { value: '选项1',
const date = new Date(); label: '黄金糕'
date.setTime(date.getTime() - 3600 * 1000 * 24); }, {
picker.$emit("pick", date); value: '选项2',
} label: '双皮奶'
}, }],
{
text: "一周前", remarkDialogVisible: false, //备注弹窗
onClick(picker) { textarea: '',
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); tableData: [{
picker.$emit("pick", date); 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() {},
methods: {
handleSend() {
console.log('>>> 分发');
this.sendDialogVisible = true;
}, },
value1: "", submitForm(formName) {
form: { console.log('>>> 查询')
date1: "", this.$refs[formName].validate((valid) => {
date2: "", if (valid) {
type: [], alert('submit!');
id_input: "", } else {
sum_input: "", console.log('error submit!!');
waringmsg_input: "", return false;
usertype_radio: "0",
warning_radio: "0",
value1: "",
value2: "",
value: "",
options: [
{
value: "选项1",
label: "黄金糕"
},
{
value: "选项2",
label: "北京烤鸭"
}
],
optionss: [
{
value: "选项3",
label: "111"
},
{
value: "选项4",
label: "222"
} }
] });
}, },
options: [ handleAddClick() {
{ console.log('添加column1-7 搜索框')
value: "选项1", },
label: "黄金糕" handleSelectionChange(val) {
}, this.multipleSelection = val;
{ },
value: "选项2", handleRemarkClick(row) {
label: "北京烤鸭" console.log('handleRemarkClick: ', row);
this.remarkDialogVisible = true;
},
handleConfirmSend() {
console.log('确定分发>>>>');
},
}
};
</script>
<style lang="less">
.data-view-wrap {
ul,li{ list-style: none; }
.top-title {
color: #333333;
}
.search-ruleForm {
margin-top: 20px;
.input {
width: 215px;
}
.add-icon {
font-size: 40px;
font-weight: 700;
color: #606266;
vertical-align: middle;
margin-left: 10px;
&:hover {
cursor: pointer;
} }
], }
value5: "", }
tableData: [ .remark-modal{
{ .el-dialog__body{
date: "2016-05-02", overflow: hidden;
name: "王小虎", .remark-confirm-btn{
province: "上海", float:right; margin-top: 10px;
city: "普陀区", }
address: "上海市普陀区金沙江路 1518 弄", .history-list{
zip: 200333 margin-top: 60px;
}, li{
{ .text{
date: "2016-05-04", margin: 5px 10px;
name: "王小虎", line-height: 22px;
province: "上海", }
city: "普陀区", }
address: "上海市普陀区金沙江路 1517 弄",
zip: 200333
},
{
date: "2016-05-01",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1519 弄",
zip: 200333
},
{
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1516 弄",
zip: 200333
} }
], }
// options: [{ }
// value: '选项1',
// label: '黄金糕' .send-modal-box{
// }, { .people-choose{
// value: '选项2', margin-top: 30px;
// label: '北京烤鸭' .title{
// }], display: inline-block;
// optionss: [{ }
// value: '选项3', .people-select-comp{
// label: '111' margin-left: 20px;
// }, { }
// value: '选项4',
// label: '222'
// }], }
value: "" }
};
} }
};
</script>
<style scoped>
section {
width: 900px;
}
.top {
height: 50px;
}
.column {
float: left;
}
.block {
margin-top: 20px;
}
</style> </style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或