提交 8b301ca3 编写于 作者: chengxiang.li's avatar chengxiang.li

update

上级 982a25e3
......@@ -6,36 +6,43 @@
style="width: 100%">
<el-table-column
prop="date"
align="center"
label="日期"
>
</el-table-column>
<el-table-column
prop="name"
align="center"
label="姓名"
>
</el-table-column>
<el-table-column
prop="province"
align="center"
label="省份"
>
</el-table-column>
<el-table-column
prop="city"
align="center"
label="市区"
>
</el-table-column>
<el-table-column
prop="address"
align="center"
label="地址"
>
</el-table-column>
<el-table-column
prop="zip"
align="center"
label="邮编"
>
</el-table-column>
<el-table-column
fixed="right"
align="center"
label="操作"
width="100">
<template slot-scope="scope">
......@@ -51,11 +58,16 @@
:close-on-click-modal="false"
class="check-modal-box"
:visible.sync="centerDialogVisible"
width="500px"
width="300px"
center>
<p>该数据的审批单号为********,短信将发送至 156****8970 的手机上,如果手机已停用,请联系管理员。</p>
<div class="captcha">
<el-input v-model="message" placeholder="请输入内容"></el-input>
<div class="captcha-wrap">
<el-input v-model="captchaCode" size="small" placeholder="请输入图形验证码"></el-input>
<img src="" alt="">
</div>
<div class="sms-wrap">
<el-input v-model="smsCode" size="small" placeholder="请输入短信验证码"></el-input>
<div class="button">获取短信验证码</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
......@@ -105,7 +117,10 @@
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}]
}],
captchaCode: '', // 图形验证码
smsCode: '', // 短信验证码
}
}
}
......@@ -120,6 +135,40 @@
.el-dialog__header{
display: none;
}
.el-dialog__body{
padding: 15px 15px 30px !important;
}
.captcha-wrap{
margin-top: 24px;
overflow: hidden;
.el-input{
width: 150px;
float: left;
}
img{
float: left;
display: block; border: none;
width: 100px; height: 32px; margin-left: 10px;
background: pink;
}
}
.sms-wrap{
margin-top: 14px; overflow: hidden;
.el-input{
width: 150px;
float: left;
}
.button{
float: left;
width: 100px; height: 32px; margin-left: 10px;
font-size: 13px;
text-align: center; line-height: 32px;
color: #979899;
&.allow{
color: #409EFF;
}
}
}
}
}
......
......@@ -3,18 +3,26 @@
<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="ruleForm.number" size="small" class="input"></el-input>
<el-input v-model.number="ruleForm.number" size="small" class="input" clearable @input="handleDingNumChange" @clear="handleDingNumClear" maxlength="21"></el-input>
</el-form-item>
<el-form-item label="数据申请日期" prop="date">
<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 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>
</el-select>
</el-form-item>
<el-form-item label="sheet名" prop="sheet">
<el-select v-model="ruleForm.sheet" size="small" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
<el-select v-model="ruleForm.sheet" size="small" placeholder="请选择sheet名" clearable >
<el-option
v-for="item in sheetsList"
:key="item.name"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Column 1-7" prop="aaa">
......@@ -145,18 +153,32 @@
import { openLoading, closeLoading } from "../../common/utils";
export default {
data() {
var checkNumLength = (rule, value, callback) => {
if (value && (value+'').length != 21) {
callback(new Error('审批单号必须为21位数字值'));
} else {
callback();
}
};
return {
ruleForm: {
name: "",
region: ""
number: "",
date: '',
sheet: "",
},
rules: {
number: [{ required: true, message: "请输入审批单号", trigger: "blur" }],
number: [
{ required: true, message: "请输入审批单号", trigger: "blur" },
{ type: 'number', message: '审批单号必须为数字值'},
{ validator: checkNumLength, trigger: 'blur' }
],
date: [{ required: true, message: "请选择数据申请日期", trigger: "change" }],
sheet: [{ required: true, message: "请选择sheet名", trigger: "change" }],
},
sendDialogVisible: true, //分发弹窗
applyDateList: [],
sheetsList: [],
sendDialogVisible: false, //分发弹窗
selectedPeople: [],
peopleList: [{
value: '选项1',
......@@ -207,6 +229,46 @@
},
created() {},
methods: {
handleDingNumChange(val) {
console.log('val>>> ', val)
if(val && val.length == 21){
this.getApplyDateList();
}else{
this.handleDingNumClear();
}
},
getApplyDateList() { //获取 数据申请日期
console.log('>>> 获取数据申请日期')
this.applyDateList = [
{ date: '2019-05-05' },
{ date: '2019-06-06' },
{ date: '2019-07-07' },
];
},
handleApplyDateChange(val) {
if(val){
this.getSheets();
}
},
handleDingNumClear() {
this.ruleForm.date = '';
this.applyDateList = [];
this.handleApplyDateClear();
},
handleApplyDateClear() {
this.ruleForm.sheet = '';
this.sheetsList = [];
},
getSheets() { // 获取 Sheets名
console.log('>>> 获取Sheets名')
this.sheetsList = [
{ name: 'sheet 1' },
{ name: 'sheet 2' },
{ name: 'sheet 3' },
];
},
handleSend() {
console.log('>>> 分发');
this.sendDialogVisible = true;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册