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

update date-view page

上级 33d7ddee
......@@ -7,7 +7,7 @@ module.exports = {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/meddic/', // 上线前改为相应的路径名称
assetsPublicPath: '/sensitive/', // 上线前改为相应的路径名称
productionSourceMap: false,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
......
......@@ -64,18 +64,18 @@
:visible.sync="centerDialogVisible"
width="300px"
center>
<p>该数据的审批单号为********,短信将发送至 156****8970 的手机上,如果手机已停用,请联系管理员。</p>
<p style="word-break: break-all">该数据的审批单号为 {{dingdingNum}},短信将发送至 {{mobilePhone}} 的手机上,如果手机已停用,请联系管理员。</p>
<div class="captcha-wrap">
<el-input v-model="captchaCode" size="small" placeholder="请输入图形验证码"></el-input>
<img src="" alt="">
<img :src="captchaImg" alt="" @click="handleImgClick">
</div>
<div class="sms-wrap">
<el-input v-model="smsCode" size="small" placeholder="请输入短信验证码"></el-input>
<div class="button">获取短信验证码</div>
<div :class="getSMSClass" @click="getSMSCode">{{SMSTips}}</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
<el-button type="primary" @click="handleCheckConfirm">确 定</el-button>
</span>
</el-dialog>
......@@ -106,17 +106,54 @@
</template>
<script>
let vm = null;
import { openLoading, closeLoading } from "../../common/utils";
export default {
computed: {
getSMSClass() {
if( vm.countDownNum == 6 ){
return 'button';
}else{
return 'button gray';
}
}
},
methods: {
handleClick(row) {
console.log(row);
}
},
created() {
vm = this;
// url的?后面有参数,则可调接口获取手机号及审批单号;
let params = window.location.href.split('?');
if(params && params.length > 1){
vm.afterParam = params[1];
console.log('afterParam: ', vm.afterParam)
this.getPhoneNum();
}else{
alert('访问的网页地址无效!')
}
// 获取图片验证码
this.getCaptcha();
},
mounted() {
},
data() {
return {
SMSTips: '获取短信验证码',
countDownNum: 6, // 倒计时
timer: null, // 倒计时定时器
afterParam: '',
dingdingNum: '',
mobilePhone: '',
captchaImg: '', // 图片验证码 url
captchaToken: '', // 图片验证码 token
addConditioDialogVisible: false, // 添加筛选条件
conditionForm : {},
testDataList: {
......@@ -169,7 +206,7 @@
]
},
centerDialogVisible: false, // 验证弹窗
centerDialogVisible: true, // 验证弹窗
tableData: [{
date: '2016-05-02',
name: '王小虎',
......@@ -257,6 +294,142 @@
// ev.stopPropagation();
// }
// },
// 获取编号和手机号
getPhoneNum() {
// 请求查询接口
let data = {
parame: vm.afterParam,
};
openLoading(this);
vm.$axios.post(localStorage.getItem("lectureUrl") + '/sensitive/mobileCheck/num/mobile', data )
.then((res) => {
// closeLoading(vm);
// debugger;
res = res.data;
if(res.code == '000000'){
vm.dingdingNum = res.data.dingdingNum;
vm.mobilePhone = res.data.mobilePhone;
}else{
vm.$message.error(res.message);
}
}).catch((error) => {
this.$message.error('网络出现点问题')
})
},
// 获取图形验证码
getCaptcha() {
openLoading(this);
this.$axios.get(localStorage.getItem("lectureUrl") + '/account/account/captcha', {} )
.then((res) => {
closeLoading(this);
if(res.status && res.status === 200) {
res = res.data;
}
if(res.code==='000000'){
vm.captchaImg = `data:image/png;base64,${res.data.content}`
vm.captchaToken = res.data.token
}else{
vm.$message.error(res.message);
}
}).catch((error) => {
vm.$message.error('网络出现点问题')
})
},
// 图片验证码点击
handleImgClick() {
this.getCaptcha();
},
// 获取短信验证码
getSMSCode() {
// 倒计时过程中不可点
if( this.countDownNum != 6){
console.log('现在倒计时过程中...不可点击')
return;
}
if( this.captchaCode == '' ){
vm.$message.error('请输入图形验证码');
return;
}
// 获取短信验证码
let data = {
parame: vm.afterParam,
pictureCode: vm.captchaCode,
captchaToken: vm.captchaToken,
};
openLoading(this);
this.$axios.post(localStorage.getItem("lectureUrl") + '/sensitive/mobileCheck/check/picturecode', data )
.then((res) => {
closeLoading(this);
res = res.data;
if(res.code == '000000'){
vm.timeCount();
}else{
vm.$message.error(res.message);
this.getCaptcha();
}
}).catch((error) => {
this.$message.error('网络出现点问题')
})
},
timeCount() {
clearInterval(vm.timer);
vm.timer = setInterval(function(){
vm.countDownNum -= 1;
vm.SMSTips = `${vm.countDownNum}秒后重试`;
if(vm.countDownNum == 0){
vm.SMSTips = '获取短信验证码';
clearInterval(vm.timer);
vm.countDownNum = 6;
}
}, 1000)
},
handleCheckConfirm() {
if( vm.captchaCode == '' ){
vm.$message.error('请输入图形验证码');
return;
}
if( vm.smsCode == '' ){
vm.$message.error('请输入短信验证码');
return;
}
// 调用 /mobileCheck/check/mobilecode 接口
// 获取短信验证码
let data = {
parame: vm.afterParam,
mobileCode: vm.smsCode,
};
openLoading(this);
this.$axios.post(localStorage.getItem("lectureUrl") + '/sensitive/mobileCheck/check/mobilecode', data )
.then((res) => {
closeLoading(this);
debugger
res = res.data;
if(res.code == '000000'){
// vm.timeCount();
vm.getTableList();
}else{
vm.$message.error(res.message);
}
}).catch((error) => {
this.$message.error('网络出现点问题')
})
},
getTableList() {
},
showAddConditionModal(status){
this.addConditioDialogVisible = status ? true : false;
},
......@@ -272,10 +445,16 @@
.header{ height: 0 !important; overflow: hidden; left:0 !important;}
.sidebar{ width: 0; overflow: hidden; }
.content{ left: 0 !important; top: 0 !important; }
.el-message{
min-width: 310px !important;
width: 310px !important;
max-width: 310px !important;
}
.data-view-message-wrap {
width: 100%;
height: 100%;
overflow: hidden;
.button-wrap{
margin: 20px 0;
.each-button{
......@@ -304,7 +483,7 @@
float: left;
display: block; border: none;
width: 100px; height: 32px; margin-left: 10px;
background: pink;
background: #fff;
}
}
.sms-wrap{
......@@ -318,35 +497,35 @@
width: 100px; height: 32px; margin-left: 10px;
font-size: 13px;
text-align: center; line-height: 32px;
color: #979899;
&.allow{
color: #409EFF;
color: #409EFF;
&.gray{
color: #606266;
}
}
}
}
// 调整弹框样式,使弹窗只占用自身空间,使其不影响给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;
}
}
// .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
......@@ -2,9 +2,9 @@
<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-item label="钉钉流程审批单号" prop="number">
<el-form-item label="钉钉流程审批单号" prop="dingdingNumber">
<el-input
v-model="ruleForm.number"
v-model="ruleForm.dingdingNumber"
type="number"
size="small"
class="input"
......@@ -15,9 +15,9 @@
maxlength="21"
></el-input>
</el-form-item>
<el-form-item label="数据申请日期" prop="date">
<el-form-item label="数据申请日期" prop="dingdingDate">
<el-select
v-model="ruleForm.date"
v-model="ruleForm.dingdingDate"
size="small"
placeholder="请选择"
clearable
......@@ -26,9 +26,9 @@
>
<el-option
v-for="item in applyDateList"
:key="item.date"
:label="item.date"
:value="item.date"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select>
</el-form-item>
......@@ -36,9 +36,9 @@
<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"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select>
</el-form-item>
......@@ -176,15 +176,16 @@ export default {
};
return {
ruleForm: {
number: "",
date: "",
dingdingNumber: "",
dingdingDate: "",
sheet: ""
},
rules: {
number: [{ validator: checkNumLength, trigger: ["blur", "change"] }],
date: [
{ required: true, message: "请选择数据申请日期", trigger: "change" }
dingdingNumber: [
{ required: true, message: "请输入审批单号", trigger: "blur" },
{ validator: checkNumLength, trigger: ["blur", "change"]}
],
dingdingDate: [{ required: true, message: "请选择数据申请日期", trigger: "change" }],
sheet: [{ required: true, message: "请选择sheet名", trigger: "change" }]
},
......@@ -308,7 +309,7 @@ export default {
this.getApplyDateList();
} else if (val && val.length > 21) {
val = val.slice(0, 21);
this.ruleForm.number = val;
this.ruleForm.dingdingNumber = val;
}
},
numInputLimit(e) {
......@@ -323,11 +324,29 @@ export default {
getApplyDateList() {
//获取 数据申请日期
console.log(">>> 获取数据申请日期");
this.applyDateList = [
{ date: "2019-05-05" },
{ date: "2019-06-06" },
{ date: "2019-07-07" }
];
let params = {
dingdingNumber: this.ruleForm.dingdingNumber
};
openLoading(this);
this.$axios.get(localStorage.getItem("lectureUrl") + '/sensitive/visit/date', { params } )
.then((res) => {
closeLoading(this);
res = res.data ? res.data : null;
if(res.code == "000000") {
if(res.data && res.data.length > 0){
vm.applyDateList = res.data;
}else{
vm.applyDateList = [];
}
}else {
vm.$message.error(res.message);
}
}).catch((error) => {
vm.$message.error('网络出现点问题')
})
},
handleApplyDateChange(val) {
if (val) {
......@@ -335,7 +354,7 @@ export default {
}
},
handleDingNumClear() {
this.ruleForm.date = "";
this.ruleForm.dingdingDate = "";
this.applyDateList = [];
this.handleApplyDateClear();
},
......@@ -346,11 +365,33 @@ export default {
getSheets() {
// 获取 Sheets名
console.log(">>> 获取Sheets名");
this.sheetsList = [
{ name: "sheet 1" },
{ name: "sheet 2" },
{ name: "sheet 3" }
];
let params = {
dingdingNumber: this.ruleForm.dingdingNumber,
dingdingDate: this.ruleForm.dingdingDate,
};
openLoading(this);
this.$axios.get(localStorage.getItem("lectureUrl") + '/sensitive/visit/sheet', { params } )
.then((res) => {
closeLoading(this);
// debugger;
res = res.data ? res.data : null;
if(res.code == "000000") {
if(res.data && res.data.length > 0){
vm.sheetsList = res.data;
}else{
vm.sheetsList = [];
}
}else {
vm.$message.error(res.message);
}
}).catch((error) => {
vm.$message.error('网络出现点问题')
})
},
showAddConditionModal() {
this.addConditioDialogVisible = true;
......@@ -358,25 +399,65 @@ export default {
handleSend() {
console.log(">>> 分发");
this.sendDialogVisible = true;
this.getUserList();
},
getUserList() {
// /dataSearch/searchUserDis
// 查询分发人员列表
let data = {
dingdingNum: vm.ruleForm.dingdingNumber,
dingdingDate: vm.ruleForm.dingdingDate,
dataSheetName: vm.ruleForm.sheet,
// pageNo: 1,
// pageSize: 15,
};
openLoading(this);
this.$axios.post(localStorage.getItem("lectureUrl") + '/sensitive/dataSearch/searchUserDis', data )
.then((res) => {
closeLoading(this);
debugger;
// if(res.data.code == '000000'){
// }
}).catch((error) => {
this.$message.error('网络出现点问题')
})
},
submitForm(formName) {
console.log(">>> 查询");
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
// 将添加的筛选条件合并到 查询接口的传参中
// 如果添加了筛选条件,则将其合并到 查询接口的传参中
let stringData = JSON.stringify(vm.conditionForm);
if (stringData == "{}") {
// console.log('筛选为空')
} else {
// console.log('筛选有数据')
if (stringData != "{}") {
let condition = JSON.parse(stringData);
for (let key in condition) {
vm.ruleForm[key] = condition[key];
}
};
}
// 请求查询接口
// 请求查询接口
let data = {
dingdingNum: vm.ruleForm.dingdingNumber,
dingdingDate: vm.ruleForm.dingdingDate,
dataSheetName: vm.ruleForm.sheet,
pageNo: 1,
pageSize: 15,
};
openLoading(this);
this.$axios.post(localStorage.getItem("lectureUrl") + '/sensitive/dataSearch/search', data )
.then((res) => {
closeLoading(this);
debugger;
// if(res.data.code == '000000'){
// }
}).catch((error) => {
this.$message.error('网络出现点问题')
})
} else {
console.log("error submit!!");
return false;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册