flat: 邀请码暂存

This commit is contained in:
Apcallover
2024-03-17 20:25:26 +08:00
parent 53d65f9784
commit 054b89f3cf
16 changed files with 312 additions and 657 deletions

View File

@@ -2,597 +2,229 @@
<basic-container>
<avue-crud
ref="crud"
:option="option"
:data="data"
@on-load="onLoad"
:page.sync="page"
:permission="permissionList"
@row-save="rowSave"
@date-change="dateChange"
@current-change="currentChange"
@size-change="sizeChange"
@row-update="rowUpdate"
@refresh-change="refreshChange"
@on-load="onLoad"
:option="option"
:data="inviteCodeList"
:page.sync="page"
@search-change="searchChange"
@refresh-change="refreshChange"
@search-reset="searchReset"
v-model="form"
:table-loading="loading"
>
<template slot="status" slot-scope="{ row }">{{ row.status }}</template>
<template slot="menuLeft">
<el-button
v-if="vaildData(permission.manage_station_inviteCode_upload, false)"
size="small"
@click.stop="handleImport"
@click.stop="distributionCodeDialog = true"
type="primary"
>批量上传</el-button
>
<el-button
size="small"
@click.stop="distributionCode"
type="primary"
>分配邀请码</el-button
>
>新增邀请码</el-button>
</template>
<template v-slot:menu="{ row }">
<el-button
type="text"
size="small"
@click.stop="rowEdit(row)"
v-if="
row.status === '未绑定' &&
vaildData(permission.manage_station_inviteCode_edit, false)
"
>绑定</el-button
>
<template slot="isEnabled" slot-scope="{ row }">
<el-switch
:value="row.isEnabled"
:active-value="1"
:inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949"
@change="changeEnabled(row)">
</el-switch>
</template>
</avue-crud>
<el-dialog
title="批量上传"
append-to-body
:visible.sync="excelBox"
width="555px"
>
<avue-form
:option="excelOption"
v-model="excelForm"
:upload-after="uploadAfter"
:upload-before="beforeAvatarUpload"
:upload-error="uploadError"
>
<template slot="excelTemplate">
<el-button
type="primary"
@click="handleTemplate()"
:loading="templateLoading"
>
点击下载
<i class="el-icon-download el-icon--right"></i>
</el-button>
</template>
</avue-form>
</el-dialog>
<!-- 分配邀请码 -->
<el-dialog
title="分配邀请码"
title="新增邀请码"
:visible.sync="distributionCodeDialog"
append-to-body
width="30%">
<el-form :model="inviteCodeForm" :rules="inviteCodeRules" ref="inviteCode" label-width="100px" class="demo-ruleForm">
<el-form-item label="工作站:" prop="stationId">
<el-select v-model="inviteCodeForm.stationId" placeholder="请选择" @change="inviteCodeName"
>
<el-form :model="inviteCodeForm" :rules="inviteCodeRules" filterable ref="inviteCode" label-width="100px" class="demo-ruleForm">
<el-form-item label="企业:" prop="companyId">
<el-select v-model="inviteCodeForm.inviteCompanyId" placeholder="请选择" style="width: 260px" >
<el-option
v-for="item in stationIdList"
:key="item.stationId"
:label="item.stationName"
:value="item.stationId">
v-for="item in enterpriseList"
:key="item.id"
:label="item.companyName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="分配数量:" prop="strip">
<span class="inviteCodeStrip"
:class="{'inviteCodeStripActive': inviteCodeForm.count === 5}"
style="margin-right: 10px;"
@click="inviteCodeForm.count = 5">5</span>
<span class="inviteCodeStrip"
:class="{'inviteCodeStripActive':
inviteCodeForm.count === 10}"
@click="inviteCodeForm.count = 10">10</span>
<el-form-item label="名称:" prop="realName" >
<el-input style="width: 260px" v-model="inviteCodeForm.realName" placeholder="请输入名称" ></el-input>
</el-form-item>
<el-form-item label="身份证:" prop="idNumber" >
<el-input style="width: 260px" v-model="inviteCodeForm.idNumber" placeholder="请输入身份证" ></el-input>
</el-form-item>
<el-form-item label="手机号:" prop="phone" >
<el-input style="width: 260px" v-model="inviteCodeForm.phone" placeholder="请输入手机号" ></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="inviteCodeClose">取 消</el-button>
<el-button @click="distributionCodeDialog = false"> </el-button>
<el-button type="primary" @click="inviteCodeSubmit"> </el-button>
</span>
</el-dialog>
<el-dialog
title="分配邀请码"
:visible.sync="qRCodeDialog"
append-to-body
width="30%">
<div>
<p>您当前选择了 <span style="color: red;">{{inviteCodeForm.count}}</span> 条邀请码,确定分配给 <span style="color:red;">{{inviteCodeFormName}}</span> 吗?</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="qRCodeDialog = false">取 消</el-button>
<el-button type="primary" :loading="codeLoading" @click="qRCodeDialogOk"> </el-button>
</span>
</el-dialog>
</basic-container>
</template>
<script>
import { mapGetters } from "vuex";
import { getList, add, edit, importInviteCode, inviteAllocation } from "@/api/manage/inviteCode";
import { check18IdCardNo, isExcel, isMobile } from "@/util/validate";
import { getTemplate } from "@/api/resource/template";
import { getStationDic, StationDic } from "@/api/manage/station";
import { excelAccept } from "@/common/accept";
import {
getEnterpriseList,
saveEnterpriseItem,
getInvitationCodeList,
getInvitationStatusUpdate
} from "@/api/manage/station";
import { Message } from "element-ui";
const inviteCodeRules = {
stationId: [
{ required: true, message: '请选择企业', trigger: 'blur' }
],
realName: [
{ required: true, message: '请输入名称', trigger: 'blur'}
],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur', pattern: /^1[3-9]{1}\d{9}/}
],
idNumber: [
{ required: true, message: '请输入身份证', trigger: 'blur', pattern: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dX]$/}
],
}
const curdOptions = {
dateBtn: false,
addBtn: false,
editBtn: false,
delBtn: false,
height: "auto",
menu:false,
searchMenuSpan: 48,
index: true,
indexLabel: "序号",
column: [{
label: '企业名称',
prop: 'companyName',
search: true,
}, {
label: '邀请码',
prop: 'inviteCode',
search: true,
},{
label: '手机号',
prop: 'phone',
search: true,
},{
label: '身份证',
prop: 'idNumber',
search: true,
formatter:(_,value,label) => value
},{
label: '启用状态',
prop: 'isEnabled',
slot: true,
width: 100
}]
}
const page = {
pageSize: 10,
currentPage: 1,
total: 0,
}
export default {
name: "manage_station_inviteCode",
data() {
const validateMobile = (rule, value, callback) => {
if (value == "") {
callback(new Error("请输入手机号"));
} else {
if (isMobile(value)) {
callback();
} else {
callback(new Error("手机号格式不正确"));
}
}
};
const validateIdNum = (rule, value, callback) => {
if (value == "") {
callback(new Error("请输入身份证"));
} else {
if (check18IdCardNo(value)) {
callback();
} else {
callback(new Error("身份证格式不正确"));
}
}
};
data(){
return {
inviteCodeForm: {
count: 5
},
inviteCodeRules: {
stationId: [
{ required: true, message: '请选择工作站', trigger: 'blur' }
],
count: [
{ required: true, message: '请选择数量', trigger: 'blur' }
],
},
stationIdList: [],
distributionCodeDialog: false,
qRCodeDialog: false,
inviteCodeFormName: '',
searchTxt: "",
excelBox: false,
excelForm: {},
query: {},
file: {},
option: {
index: true,
indexLabel: "序号",
idKey: "id",
delBtn: false,
border: true,
editBtn: false,
searchShow: true,
searchMenuSpan: 4,
loading:true,
column: [
{
label: "所属分组",
prop: "groupType",
search: true,
searchSpan: 4,
type: "select",
rules: [
{
required: true,
message: "请选择所属分组",
},
],
dicData: [
{
label: "企嘉云",
value: 0,
},
{
label: "人保",
value: 1,
},
{
label: "灯塔中心",
value: 3,
},
],
},
{
type: "tree",
label: "所属工作站",
prop: "stationId",
//display: false,
search: true,
searchSpan: 4,
searchLabelWidth: 87,
dicUrl: getStationDic(),
props: {
label: "stationName",
value: "stationId",
},
dicFormatter(resp) {
return resp.data;
},
},
{
label: "邀请码",
prop: "inviteCode",
search: true,
searchSpan: 4,
rules: [
{
required: true,
message: "请输入邀请码",
trigger: "blur",
},
],
editDisabled: true,
maxlength:14,
showWordLimit:true,
},
{
label: "姓名",
prop: "realName",
},
{
label: "身份证号",
prop: "idNumber",
rules: [
{
required: true,
validator: validateIdNum,
trigger: "blur",
},
],
},
{
label: "手机号",
prop: "phone",
rules: [
{
required: true,
validator: validateMobile,
trigger: "blur",
},
],
},
{
label: "状态",
prop: "status",
search: true,
searchSpan: 4,
type: "select",
dicData: [
{
label: "已绑定",
value: 1,
},
{
label: "未绑定",
value: 0,
},
],
display: false,
},
{
label: "是否分配",
prop: "isEnabled",
search: true,
searchSpan: 4,
type: "select",
dicData: [
{
label: "已分配",
value: 1,
},
{
label: "未分配",
value: 0,
},
],
display: false,
},
{
label: "备注",
prop: "remarks",
display: false,
hide: true,
},
],
},
data: [],
page: {
currentPage: 1,
pageSize: 10,
total: 0,
},
codeLoading: false
};
inviteCodeRules: Object.assign({}, inviteCodeRules),
enterpriseList: [], // 企业列表
inviteCodeForm: {},
inviteCodeList:[],
option: Object.assign({}, curdOptions),
page: Object.assign({}, page),
searchData: {},
}
},
created() {
StationDic().then(res => {
this.stationIdList = res.data.data
})
this.getList() // 企业
},
computed: {
...mapGetters(["permission"]),
permissionList() {
return {
addBtn: this.vaildData(
this.permission.manage_station_inviteCode_add,
false
),
};
methods:{
async onLoad() {
this.getInvitationCode()
},
excelOption() {
return {
submitBtn: false,
emptyBtn: false,
templateLoading: false,
column: [
{
label: "文件上传",
prop: "excelFile",
type: "upload",
drag: true,
loadText: "文件上传中,请稍等",
span: 24,
propsHttp: {
res: "data",
},
accept: excelAccept,
tip: "请上传 .xls,.xlsx 标准格式文件",
action: importInviteCode(),
},
{
label: "数据覆盖",
prop: "isCovered",
type: "switch",
align: "center",
width: 80,
dicData: [
{
label: "否",
value: 0,
},
{
label: "是",
value: 1,
},
],
value: 0,
slot: true,
rules: [
{
required: true,
message: "请选择是否覆盖",
trigger: "blur",
},
],
},
{
label: "模板下载",
prop: "excelTemplate",
formslot: true,
span: 24,
},
],
};
currentChange(page) {
this.page.currentPage = page
},
},
mounted() {},
watch: {},
methods: {
inviteCodeName (v) {
var inviteCodeFormName = this.stationIdList.find(e => {
return e.stationId === v
})
this.inviteCodeFormName = inviteCodeFormName.stationName
sizeChange(size) {
this.page.pageSize = size
},
qRCodeDialogOk () {
this.codeLoading = true
inviteAllocation(this.inviteCodeForm).then(() => {
this.$message.success('分配成功')
this.refreshChange()
this.codeLoading = false
this.qRCodeDialog = false
this.distributionCodeDialog = false
}).catch(() => {
this.codeLoading = false
})
},
inviteCodeSubmit (){
this.$refs['inviteCode'].validate((valid) => {
if (valid) {
this.qRCodeDialog = true
} else {
return false;
}
});
},
inviteCodeClose(){
this.distributionCodeDialog = false
},
distributionCode(){
this.distributionCodeDialog = true
},
handleImport() {
this.excelBox = true;
},
handleTemplate() {
this.templateLoading = true;
getTemplate("yqm")
.then((rep) => {
this.templateLoading = false;
window.open(rep.data.data);
})
.catch(() => {
this.templateLoading = false;
});
},
beforeAvatarUpload(file, done, loading) {
this.file = file;
if (!isExcel(file)) {
loading();
this.$message.error("上传参保信息只能是 .xls,.xlsx 标准格式文件!");
} else {
done();
async changeEnabled(row) {
const isEnabled = row.isEnabled ? 0 : 1
let params = { id: row.id, isEnabled }
console.log(params)
let resData = await getInvitationStatusUpdate(params)
if(resData.data.code === 200){
this.$message.success('状态修改成功');
this.getInvitationCode()
}
},
uploadAfter(res, done) {
if (!(res instanceof Error)) {
this.excelBox = false;
}
this.refreshChange();
done();
},
uploadError(error) {
if (error) {
this.$message.error(error);
}
},
searchInfo() {
this.onLoad(this.page);
},
rowSave(row, done,loading) {
this.$refs.crud.validate((valid) => {
if (valid) {
add(
row.inviteCode,
row.realName,
row.idNumber,
row.phone,
row.groupType,
row.remarks,
row.stationId
).then(
() => {
this.$message.success('添加成功')
done();
this.onLoad(this.page);
},
(error) => {
window.console.log(error);
loading()
}
);
}
});
},
rowEdit(row) {
this.$refs.crud.rowEdit(row);
},
rowUpdate(row, index, done, loading) {
if (row.status == "已绑定") {
row.status = 1;
} else {
row.status = 0;
}
this.$refs.crud.validate((valid) => {
if (valid) {
edit(
row.id,
row.inviteCode,
row.realName,
row.idNumber,
row.phone,
row.groupType,
row.remarks,
row.status,
row.stationId
).then(
() => {
this.$message.success('绑定成功')
done(row);
this.onLoad(this.page);
},
(error) => {
window.console.log(error);
loading();
}
);
}
});
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
},
refreshChange() {
this.onLoad(this.page);
},
searchChange(params, done) {
this.query = params;
this.page.currentPage = 1;
this.onLoad(this.page, params);
done();
refreshChange(){
this.getInvitationCode('refresh')
},
searchReset() {
this.query = {};
this.onLoad(this.page);
this.searchData = {};
this.getInvitationCode('refresh')
},
onLoad(page, params = {}) {
this.loading=true;
getList(
page.currentPage,
page.pageSize,
Object.assign(this.query, params)
).then((res) => {
const data = res.data.data;
for (const key in data.records) {
if (data.records[key].status == "1") {
data.records[key].status = "已绑定";
} else {
data.records[key].status = "未绑定";
}
searchChange(params, done) {
this.searchData = params;
this.getInvitationCode('refresh').then(() => done())
},
getInvitationCode(type = 'add') {
return new Promise(async (resolve, reject) => {
if(type === 'refresh') {
this.page.currentPage = 1
}
this.data = data.records;
this.page.total = data.total;
this.loading=false;
});
let params = {
...this.searchData,
current: this.page.currentPage,
size: this.page.pageSize,
}
let resData = await getInvitationCodeList(params)
if(resData.data.code === 200){
const { size, records, current, total } = resData.data.data
this.inviteCodeList = records
this.page = { pageSize: size, currentPage: current, total }
resolve()
} else {
reject()
this.$message.error('拉取失败');
}
})
},
},
};
async inviteCodeSubmit() {
const companyName = this.enterpriseList.filter((item) => item.id === this.inviteCodeForm.inviteCompanyId)[0].companyName;
let params = {
...this.inviteCodeForm,
companyName: companyName
}
let resData = await saveEnterpriseItem(params)
if(resData.data.code === 200){
const { code, data } = resData.data
this.distributionCodeDialog = false
this.getInvitationCode('refresh')
this.$message.success('提交成功');
} else {
this.$message.error('创建失败');
}
},
async getList() {
let params = {}
let resData = await getEnterpriseList(params)
if(resData.data.code === 200){
const { code, data } = resData.data
this.enterpriseList = data
}
}
}
}
</script>
<style>
.inviteCodeStrip{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 10px;
border: 1px solid #e3e3e3;
cursor: pointer;
}
.inviteCodeStripActive {
color: #FFFFFF;
background-color: #409EFF;
}
</style>