You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
259 lines
10 KiB
259 lines
10 KiB
<template>
|
|
<div class="app-container">
|
|
<div>
|
|
<el-form :inline="true" :model="formSearch" ref="ruleForm" class="demo-form-inline">
|
|
<el-form-item label="时间:">
|
|
<el-date-picker
|
|
v-model="formSearch.time"
|
|
size="mini"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="取码单号:">
|
|
<el-input v-model="formSearch.number" size="mini" placeholder="请输入取码单号" clearable maxlength="50"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="mini" icon="el-icon-search" @click="search">查询</el-button>
|
|
</el-form-item>
|
|
<el-form-item class="float-right">
|
|
<el-button type="danger" size="mini" icon="el-icon-circle-plus-outline" @click="addGetDialog()">创建取码单</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<el-table :data="tableData" style="width: 100%" header-row-class-name="">
|
|
<el-table-column prop="fetchId" label="取码单号"></el-table-column>
|
|
<el-table-column prop="fetchTime" label="日期"></el-table-column>
|
|
<!-- <el-table-column prop="summary" label="摘要"></el-table-column> -->
|
|
<el-table-column prop="fetchCount" label="取码数"></el-table-column>
|
|
<el-table-column prop="status" label="取码单状态">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.status == 0" class="color-wait">未生成</span>
|
|
<span v-else-if="scope.row.status == 1" class="color-send">生成中</span>
|
|
<span v-else-if="scope.row.status == 2" class="color-success">已生成</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="fileName" label="防伪码">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" @click="downLoadFile(scope.row.fetchId)">{{scope.row.fileName}}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="250">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="small" @click="addGetDialog(scope.row.fetchId,scope.row.fetchTime)">编辑</el-button>
|
|
<el-button type="text" size="small" @click="confirm(scope.row.fetchId)">生成防伪码印刷文件</el-button>
|
|
<el-button type="text" size="small" @click="showDetail(scope.row.fetchId)">查看</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
background
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:page-size="pageSize"
|
|
layout="total, prev, pager, next, sizes, jumper"
|
|
:total="total">
|
|
</el-pagination>
|
|
<el-dialog title="发码" :visible.sync="dialogDownloadVisible" width="500px" :close-on-click-modal='false'>
|
|
<el-form :model="form" :rules="rules" ref="form">
|
|
<el-form-item label="手机号：" :label-width="formLabelWidth" prop="telPhone" ref="telPhone">
|
|
<el-input v-model.number="form.telPhone" maxlength="11" autocomplete="off" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="短信验证码：" :label-width="formLabelWidth" prop="vCode">
|
|
<el-input v-model.number="form.vCode" autocomplete="off" size="small" style="width:110px;margin-right:5px;"></el-input>
|
|
<el-button type="danger" style="width:100px;" size="small" @click="getSendMessage" :disabled="sendStatus">{{!sendStatus?'获取验证码':timer+'秒'}}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" size="mini" @click="submitForm('form')">保存</el-button>
|
|
<el-button type="info" size="mini" @click="resetForm('form')">取消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getFetchList,generateFetch,sendMessage,getDownloadUrl,downFiles
|
|
} from "@/api/get"
|
|
import {validatePhone} from "@/utils/validate"
|
|
export default {
|
|
name: "getGet",
|
|
data() {
|
|
const checkPhoneNum = (rule, value, callback) => {
|
|
if (!validatePhone(value)) {
|
|
return callback(new Error('请输入正确的手机号码'));
|
|
} else {
|
|
callback()
|
|
}
|
|
};
|
|
return {
|
|
BASE_URL:config.API_URL,
|
|
formSearch: {//模糊搜索
|
|
time: '',
|
|
number: '',
|
|
},
|
|
form:{
|
|
telPhone:'',
|
|
vCode:''
|
|
},
|
|
rules: {
|
|
telPhone: [
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
|
{validator:checkPhoneNum,trigger:"blur"}
|
|
],
|
|
vCode: [
|
|
{ required: true, message: '请输入短信验证码', trigger: 'blur' }
|
|
]
|
|
},
|
|
currentPage: 1, //当前页
|
|
pageSize: 10, //每页条数
|
|
total: 0, //总条数
|
|
tableData: [], //表格数据
|
|
formLabelWidth:'120px',
|
|
dialogDownloadVisible:false,
|
|
sendStatus:false,
|
|
timer:60,
|
|
fetchId:'',
|
|
|
|
};
|
|
},
|
|
mounted() {
|
|
this.initData()
|
|
},
|
|
methods: {
|
|
//搜索查询
|
|
search() {
|
|
this.currentPage = 1
|
|
this.initData()
|
|
},
|
|
//获取用户列表
|
|
initData() {
|
|
|
|
const params = {
|
|
pageNo: this.currentPage,
|
|
pageSize: this.pageSize,
|
|
discardId: this.formSearch.number|| null,
|
|
startTime:this.formSearch.time?this.formSearch.time[0] : null,
|
|
endTime:this.formSearch.time?this.formSearch.time[1] : null
|
|
}
|
|
getFetchList(params).then(res => {
|
|
this.tableData = res.data.list
|
|
this.total = res.data.count
|
|
})
|
|
},
|
|
downLoadFile(id){
|
|
this.dialogDownloadVisible = true
|
|
this.fetchId = id
|
|
},
|
|
getSendMessage(){
|
|
this.$refs['form'].validateField('telPhone',(valid) => {
|
|
if (valid) {
|
|
console.log('telPhone error');
|
|
return false;
|
|
} else {
|
|
sendMessage({phone:this.form.telPhone+''}).then(res => {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'success'
|
|
});
|
|
this.timer = 60
|
|
this.sendStatus = true
|
|
var flag = setInterval(() =>{
|
|
if(this.timer == 0)
|
|
{
|
|
clearInterval(flag)
|
|
this.sendStatus = false
|
|
} else {
|
|
this.timer--
|
|
}
|
|
},1000)
|
|
})
|
|
}
|
|
});
|
|
|
|
},
|
|
submitForm(formName) {
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
const param ={
|
|
fetch_id:this.fetchId,
|
|
phone:this.form.telPhone+'',
|
|
verify_code:this.form.vCode+''
|
|
}
|
|
getDownloadUrl(param).then(res => {
|
|
window.location.href = this.BASE_URL + res.data
|
|
this.dialogDownloadVisible = false
|
|
})
|
|
} else {
|
|
console.log('error submit!!');
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
resetForm(formName) {
|
|
this.$refs[formName].resetFields();
|
|
this.dialogDownloadVisible = false
|
|
},
|
|
confirm(id){
|
|
this.$confirm('此操作将生成防伪码印刷文件, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
generateFetch({fetch_id:id}).then(res => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '操作成功!'
|
|
});
|
|
this.initData()
|
|
}).catch(err => {
|
|
this.$message({
|
|
message: err.msg,
|
|
type: err.code == 200 ? 'success' : 'error'
|
|
});
|
|
})
|
|
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消操作'
|
|
});
|
|
});
|
|
},
|
|
//防伪取码详情
|
|
showDetail(id) {
|
|
this.$router.push({name:'getGetDetail',query:{id:id}})
|
|
},
|
|
//点击创建取码单
|
|
addGetDialog(ids = null,times = null){
|
|
this.$router.push({name:'addGet',query:{ids:ids,times:times}})
|
|
},
|
|
//每页条数变化
|
|
handleSizeChange(val) {
|
|
this.pageSize = val
|
|
this.initData()
|
|
},
|
|
//当前页变化
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val
|
|
this.initData()
|
|
}
|
|
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
.input-with-select {
|
|
float: left;
|
|
top: 10px;
|
|
}
|
|
|
|
.el-input {
|
|
width: 230px;
|
|
}
|
|
</style>
|
|
|