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

update data-view page

上级 d59eac36
...@@ -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>
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<h2 class="top-title">数据查看</h2> <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-form-item label="钉钉流程审批单号" prop="number">
<el-input v-model.number="ruleForm.number" size="small" class="input" clearable @input="handleDingNumChange" @clear="handleDingNumClear" 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>
<el-form-item label="数据申请日期" prop="date"> <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">
...@@ -25,7 +25,9 @@ ...@@ -25,7 +25,9 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="Column 1-7" prop="aaa">
<el-form-item label="Column 1-7" prop="aaa" >
<el-select v-model="ruleForm.aaa" size="small" style="width: 150px;" placeholder="请选择活动区域" > <el-select v-model="ruleForm.aaa" size="small" style="width: 150px;" placeholder="请选择活动区域" >
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
...@@ -33,6 +35,11 @@ ...@@ -33,6 +35,11 @@
<el-input v-model="ruleForm.name" size="small" style="width: 150px;"></el-input> <el-input v-model="ruleForm.name" size="small" style="width: 150px;"></el-input>
<i class="add-icon" @click="handleAddClick">+</i> <i class="add-icon" @click="handleAddClick">+</i>
</el-form-item> </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-form-item style="margin-left: 100px;">
<el-button type="primary" @click="handleSend">分发</el-button> <el-button type="primary" @click="handleSend">分发</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">查询</el-button> <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
...@@ -154,7 +161,10 @@ ...@@ -154,7 +161,10 @@
export default { export default {
data() { data() {
var checkNumLength = (rule, value, callback) => { var checkNumLength = (rule, value, callback) => {
if (value && (value+'').length != 21) { console.log('>>>> val ', value)
if (!value) {
return callback(new Error('请输入审批单号'));
}else if (value && (value+'').length != 21) {
callback(new Error('审批单号必须为21位数字值')); callback(new Error('审批单号必须为21位数字值'));
} else { } else {
callback(); callback();
...@@ -167,15 +177,17 @@ ...@@ -167,15 +177,17 @@
sheet: "", sheet: "",
}, },
rules: { rules: {
number: [ number: [{ validator: checkNumLength, trigger: ['blur', 'change'] }],
{ required: true, message: "请输入审批单号", trigger: "blur" },
{ type: 'number', message: '审批单号必须为数字值'},
{ validator: checkNumLength, trigger: 'blur' }
],
date: [{ required: true, message: "请选择数据申请日期", trigger: "change" }], date: [{ required: true, message: "请选择数据申请日期", trigger: "change" }],
sheet: [{ required: true, message: "请选择sheet名", trigger: "change" }], sheet: [{ required: true, message: "请选择sheet名", trigger: "change" }],
}, },
testList: [
{ name: 'aaa' },
{ name: 'bbb' },
],
applyDateList: [], applyDateList: [],
sheetsList: [], sheetsList: [],
sendDialogVisible: false, //分发弹窗 sendDialogVisible: false, //分发弹窗
...@@ -230,12 +242,21 @@ ...@@ -230,12 +242,21 @@
created() {}, created() {},
methods: { methods: {
handleDingNumChange(val) { handleDingNumChange(val) {
console.log('val>>> ', val)
if(val && val.length == 21){ if(val && val.length == 21){
this.getApplyDateList(); this.getApplyDateList();
}else{ }else if(val && val.length > 21){
this.handleDingNumClear(); val = val.slice(0,21);
this.ruleForm.number = val;
}
},
numInputLimit (e) {
let key = e.key
// 不允许输入'e'和'.'
if (key === 'e' || key === '.') {
e.returnValue = false
return false
} }
return true
}, },
getApplyDateList() { //获取 数据申请日期 getApplyDateList() { //获取 数据申请日期
console.log('>>> 获取数据申请日期') console.log('>>> 获取数据申请日期')
...@@ -285,7 +306,10 @@ ...@@ -285,7 +306,10 @@
}); });
}, },
handleAddClick() { handleAddClick() {
console.log('添加column1-7 搜索框') console.log('添加column1-7 搜索框');
this.testList.push({
name: 'ccc'
})
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
this.multipleSelection = val; this.multipleSelection = val;
...@@ -303,6 +327,14 @@ ...@@ -303,6 +327,14 @@
<style lang="less"> <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"]{
-moz-appearance: textfield;
}
ul,li{ list-style: none; } ul,li{ list-style: none; }
.top-title { .top-title {
color: #333333; color: #333333;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册