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.
535 lines
19 KiB
535 lines
19 KiB
<template>
|
|
<div>
|
|
<el-card>
|
|
<div class="publiccss">会员卡登记</div>
|
|
<div style="display: flex;margin-top:20px">
|
|
<div :style="'display: block; width:' + (window.pageWidth - 120 - 80) + 'px;'">
|
|
<div style="display: flex; flex-wrap: wrap; height:70px;">
|
|
<div class="query">
|
|
<el-select v-model="query.dateType" placeholder="请选择" filterable size="small"
|
|
style="width: 90px">
|
|
<el-option label="登记日期" value="createDate" />
|
|
<el-option label="有效日期" value="expiryDate" />
|
|
</el-select>
|
|
<el-date-picker v-model="query.startDate" type="date" placeholder="起始日期" size="small" style="width: 100px" />
|
|
<span>--</span>
|
|
<el-date-picker v-model="query.endDate" type="date" placeholder="截止日期" size="small" style="width: 100px"/>
|
|
</div>
|
|
<div class="query">
|
|
<span>卡类别：</span>
|
|
<el-select v-model="query.cardTypeId" placeholder="请选择" clearable size="small"
|
|
style="width: 80px">
|
|
<el-option v-for="item in dict.cardType" :key="item.id" :label="item.displayName" :value="item.id" />
|
|
</el-select>
|
|
</div>
|
|
<div class="query">
|
|
<span>卡状态：</span>
|
|
<!--
|
|
<el-radio-group v-model="query.cardFlag">
|
|
<el-radio :label="1">启用</el-radio>
|
|
<el-radio :label="0">停用</el-radio>
|
|
</el-radio-group>
|
|
-->
|
|
<el-select v-model="query.cardFlag" placeholder="请选择" clearable size="small"
|
|
style="width: 80px">
|
|
<el-option label="启用" value="1" />
|
|
<el-option label="停用" value="0" />
|
|
</el-select>
|
|
</div>
|
|
<div class="query">
|
|
<span>卡号：</span>
|
|
<el-input placeholder="卡号" v-model="query.cardNo" size="small" clearable style="width: 120px" />
|
|
</div>
|
|
<div class="query">
|
|
<span>卡主姓名：</span>
|
|
<el-input placeholder="卡主姓名" v-model="query.customerName" size="small" clearable style="width: 80px" />
|
|
</div>
|
|
<div class="query">
|
|
<span>身份证号：</span>
|
|
<el-input placeholder="身份证号" v-model="query.idNo" size="small" clearable style="width: 180px" />
|
|
</div>
|
|
<div class="query">
|
|
<span>电话：</span>
|
|
<el-input placeholder="手机号/电话" v-model="query.mobileTelephone" size="small" clearable style="width: 120px" />
|
|
</div>
|
|
</div>
|
|
<el-table :data="dataList" border width="100%" :height="window.pageHeight < 600 ? 160 : window.pageHeight - 440"
|
|
row-key="id" size="small" highlight-current-row ref="dataList" @selection-change="handleSelectionChange"
|
|
@row-click="rowClick">
|
|
<el-table-column prop="cardTypeId" label="卡类别" width="100">
|
|
<template slot-scope="scope">
|
|
<div>{{ dddw(dict.cardType, "id", scope.row.cardTypeId, "displayName") }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="cardNo" label="会员卡号" width="150" />
|
|
<el-table-column prop="discount" label="折扣率" width="80" />
|
|
<el-table-column prop="expiryDate" label="有效期限" width="120">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.expiryDate">
|
|
{{ moment(scope.row.expiryDate).format("yyyy-MM-DD") }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="customerName" label="卡主姓名" width="80" />
|
|
<el-table-column prop="idNo" label="卡主身份证号" width="200" />
|
|
<el-table-column prop="telephone" label="卡主电话" width="150" />
|
|
<el-table-column prop="mobileTelephone" label="卡主手机号" width="150" />
|
|
<el-table-column prop="cardFlag" label="启用" width="80">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row.cardFlag == '0' ? '否' : '是' }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="remark" label="备注" width="200" />
|
|
<el-table-column prop="creatorName" label="创建人员" width="100" />
|
|
<el-table-column prop="creationTime" label="创建日期" width="150">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.creationTime">
|
|
{{ moment(scope.row.creationTime).format("yyyy-MM-DD") }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="lastModifierName" label="修改人员" width="100" />
|
|
<el-table-column prop="lastModificationTime" label="修改日期" width="150">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.lastModificationTime">
|
|
{{ moment(scope.row.lastModificationTime).format("yyyy-MM-DD") }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-table :data="cardBillList" border width="100%" height="170" row-key="id" size="small" highlight-current-row
|
|
ref="dataList" @selection-change="handleSelectionChange" @row-click="rowClick">
|
|
<el-table-column prop="cardNo" label="会员卡号" width="150" />
|
|
<el-table-column prop="customerName" label="卡主姓名" width="80" />
|
|
<el-table-column prop="mobileTelephone" label="手机号" width="150" />
|
|
<el-table-column prop="payModeId" label="支付方式" width="100">
|
|
<template slot-scope="scope">
|
|
<div>{{ dddw(dict.payMode, "id", scope.row.payModeId, "displayName") }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="billMoney" label="记账金额" width="80" />
|
|
<el-table-column prop="billFlag" label="记账标志" width="100">
|
|
<template slot-scope="scope">
|
|
<div>{{ dddw(dict.billFlag, "id", scope.row.billFlag, "displayName") }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="creatorName" label="创建人员" width="100" />
|
|
<el-table-column prop="creationTime" label="创建日期" width="150">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.creationTime">
|
|
{{ moment(scope.row.creationTime).format("yyyy-MM-DD") }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="lastModifierName" label="修改人员" width="100" />
|
|
<el-table-column prop="lastModificationTime" label="修改日期" width="150">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.lastModificationTime">
|
|
{{ moment(scope.row.lastModificationTime).format("yyyy-MM-DD") }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div style=" margin-left: 10px;width:110px;">
|
|
<div class="listBtn">
|
|
<el-button class="btnClass" @click="btnQuery">查询</el-button>
|
|
</div>
|
|
<div class="listBtn">
|
|
<el-button type="success" class="btnClass" @click="add">新增</el-button>
|
|
</div>
|
|
<div class="listBtn">
|
|
<el-button type="primary" class="btnClass" @click="edit">编辑</el-button>
|
|
</div>
|
|
<div class="listBtn">
|
|
<el-button type="danger" class="btnClass" @click="edit">删除</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false">
|
|
<el-form ref="form" :model="form" label-width="100px" :rules="rules" size="small">
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="卡类别" prop="cardTypeId">
|
|
<el-select v-model="form.cardTypeId" placeholder="请选择" filterable>
|
|
<el-option v-for="item in dict.cardType" :key="item.id" :label="item.displayName" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="会员卡号" prop="cardNo">
|
|
<el-input v-model="form.cardNo" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="折扣率" prop="discount">
|
|
<el-input type="number" v-model="form.discount" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="有效期限" prop="expiryDate">
|
|
<el-input type="date" v-model="form.expiryDate" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="卡主姓名" prop="customerName">
|
|
<el-input v-model="form.customerName" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="卡主身份证" prop="idNo">
|
|
<el-input v-model="form.idNo" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="卡主电话" prop="telephone">
|
|
<el-input type="tel" v-model="form.telephone" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="卡主手机号" prop="mobileTelephone">
|
|
<el-input type="tel" v-model="form.mobileTelephone" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="启用" prop="cardFlag">
|
|
<el-radio v-model="form.cardFlag" label="1">是</el-radio>
|
|
<el-radio v-model="form.cardFlag" label="0">否</el-radio>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input v-model="form.remark" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<el-form-item label="创建人员" label-width="80px">
|
|
<el-input v-model="form.creatorId" disabled></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="创建时间" label-width="80px">
|
|
<el-input :value="form.creationTime ? moment(form.creationTime).format('yyyy-MM-DD') : ''"
|
|
disabled></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="修改人员" label-width="80px">
|
|
<el-input v-model="form.lastModifierId" disabled></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="修改时间" label-width="80px">
|
|
<el-input :value="form.lastModificationTime
|
|
? moment(form.lastModificationTime).format('yyyy-MM-DD') : ''" disabled></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="onSubmit('form')">确定</el-button>
|
|
<el-button @click="dialogVisible = false">关闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import moment from "moment";
|
|
import { mapState, mapActions } from "vuex";
|
|
import { getapi, postapi, putapi, deletapi } from "@/api/api";
|
|
import { dddw, objCopy, arrayReduce, arrayExistObj,deepCopy } from "@/utlis/proFunc";
|
|
|
|
|
|
export default {
|
|
components: {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
query: {
|
|
dateType: 'createDate',
|
|
cardModeId: '',
|
|
cardTypeId:null,
|
|
cardNo:'',
|
|
customerName:'',
|
|
cardFlag:'',
|
|
startDate:'',
|
|
endDate:'',
|
|
mobileTelephone:'',
|
|
}, //查询条件
|
|
|
|
|
|
dataList: [], //列表数据
|
|
cardBillList: [], //卡记账数据
|
|
multipleSelection: [], //选中的数据列表
|
|
dialogVisible: false,
|
|
form: {
|
|
id: null,
|
|
cardTypeId: null,
|
|
cardNo: '',
|
|
discount: 100,
|
|
expiryDate: null,
|
|
customerName: '',
|
|
idNo: '',
|
|
telephone: '',
|
|
mobileTelephone: '',
|
|
cardFlag: '0',
|
|
remark: '',
|
|
},
|
|
|
|
formInit: {},
|
|
|
|
rules: {
|
|
cardTypeId: [
|
|
{ required: true, message: "请填写卡类别", trigger: "blur" },
|
|
],
|
|
cardNo: [
|
|
{ required: true, message: "请填写卡号", trigger: "blur" },
|
|
],
|
|
discount: [
|
|
{ required: true, message: "请填写卡折扣", trigger: "blur" },
|
|
],
|
|
expiryDate: [
|
|
{ required: true, message: "请填写卡有效期", trigger: "blur" },
|
|
],
|
|
customerName: [
|
|
{ required: true, message: "请填写卡主姓名", trigger: "blur" },
|
|
],
|
|
idNo: [
|
|
{ required: true, message: "请填写卡主身份证", trigger: "blur" },
|
|
],
|
|
mobileTelephone: [
|
|
{ required: true, message: "请填写卡主身份证", trigger: "blur" },
|
|
],
|
|
cardFlag: [
|
|
{ required: true, message: "请填写卡启用状态", trigger: "blur" },
|
|
]
|
|
},
|
|
|
|
curChoosedRow: {}, //当前选择的行数据
|
|
curChoosedId:'', //当前选择的行ID
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.query.startDate = new Date();
|
|
this.query.endDate = this.query.startDate;
|
|
this.formInit = deepCopy(this.form);
|
|
},
|
|
|
|
//挂载完成
|
|
mounted() {
|
|
this.dictInit();
|
|
this.btnQuery();
|
|
},
|
|
computed: {
|
|
...mapState(["window", "dict"]),
|
|
},
|
|
methods: {
|
|
...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]),
|
|
dddw, moment,
|
|
|
|
//初始化字典数据
|
|
dictInit(){
|
|
//获取卡类别
|
|
getapi('/api/app/cardtype/getcardtypelist')
|
|
.then((res) => {
|
|
if(res.code != -1){
|
|
this.dict.cardType = res.data;
|
|
}
|
|
});
|
|
},
|
|
|
|
handleSelectionChange(val) {
|
|
this.multipleSelection = val;
|
|
},
|
|
|
|
rowClick(row) {
|
|
this.curChoosedRow = row;
|
|
this.curChoosedId = row.id;
|
|
},
|
|
|
|
add() {
|
|
this.form = deepCopy(this.formInit);
|
|
this.dialogVisible = true;
|
|
},
|
|
|
|
edit() {
|
|
if (!this.curChoosedId) {
|
|
this.$message.warning("请先选择要操作的数据！");
|
|
return;
|
|
}
|
|
objCopy(this.curChoosedRow,this.form);
|
|
console.log('this.form',this.form);
|
|
this.dialogVisible = true;
|
|
},
|
|
|
|
del() {
|
|
let lfind = -1;
|
|
if (!this.curChoosedId) {
|
|
this.$message.warning("请先选择要操作的数据！");
|
|
return;
|
|
}
|
|
//执行删除操作
|
|
lfind = arrayExistObj(this.dataList, 'id', this.curChoosedRow.id);
|
|
if (lfind > - 1) this.dataList.splice(lfind, 1);
|
|
this.curChoosedRow.id = null;
|
|
},
|
|
|
|
|
|
|
|
//提交
|
|
onSubmit(formName) {
|
|
this.$refs[formName].validate((valid, fields) => {
|
|
if (!valid) {
|
|
//console.log('fields',fields,Object.keys(fields));
|
|
this.$message.error(fields[Object.keys(fields)[0]][0].message);
|
|
return;
|
|
}
|
|
// {
|
|
// "organizationUnitId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
|
|
// "cardTypeId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
|
|
// "cardNo": "string",
|
|
// "cardPassword": "string",
|
|
// "discount": 0,
|
|
// "expiryDate": "string",
|
|
// "customerName": "string",
|
|
// "idNo": "string",
|
|
// "telephone": "string",
|
|
// "mobileTelephone": "string",
|
|
// "cardFlag": "string",
|
|
// "remark": "string"
|
|
// }
|
|
|
|
//编辑
|
|
if (this.form.id) {
|
|
postapi(`/api/app/cardregister/update?id=${this.form.id}`,body).then(res =>{
|
|
if(res.code != -1){
|
|
this.$message.success("操作成功！");
|
|
lfind = arrayExistObj(this.dataList,'id',this.form.id);
|
|
if(lfind > -1) objCopy(this.form,this.dataList[lfind]);
|
|
}
|
|
});
|
|
} else {
|
|
//新增
|
|
postapi('/api/app/cardregister/create',body).then(res =>{
|
|
if(res.code != - 1){
|
|
this.$message.success("操作成功！");
|
|
objCopy(res.data,this.form);
|
|
this.dataList.push(deepCopy(this.form));
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
|
|
//查询
|
|
btnQuery(queryType) {
|
|
let body = {}
|
|
|
|
console.log('this.query',this.query);
|
|
|
|
switch (queryType) {
|
|
case 'idNo':
|
|
if(!this.query.idNo) return;
|
|
body = { idNo: this.query.idNo };
|
|
break;
|
|
case 'cardNo':
|
|
if(!this.query.cardNo) return;
|
|
body = { cardNo: this.query.cardNo };
|
|
break;
|
|
default:
|
|
if(this.query.idNo){
|
|
body = { idNo: this.query.idNo };
|
|
}else if(this.query.cardNo){
|
|
body = { cardNo: this.query.cardNo };
|
|
}else{
|
|
// if(!this.query.startDate) this.query.startDate = moment(new Date()).format('yyyy-MM-DD');
|
|
// if(!this.query.endDate) this.query.endDate = moment(new Date()).format('yyyy-MM-DD');
|
|
if(this.query.startDate > this.query.endDate){
|
|
this.$message.error("数据不合法，起始日期不能大于截止日期！");
|
|
return;
|
|
}
|
|
body.startDate = moment(this.query.startDate).format('yyyy-MM-DD');
|
|
body.endDate = moment(this.query.endDate).format('yyyy-MM-DD');
|
|
|
|
if(this.query.cardModeId) body.cardModeId = this.query.cardModeId;
|
|
if(this.query.cardTypeId) body.cardTypeId = this.query.cardTypeId;
|
|
if(this.query.customerName) body.customerName = this.query.customerName;
|
|
if(this.query.cardFlag) body.cardFlag = this.query.cardFlag;
|
|
if(this.query.mobileTelephone) body.mobileTelephone = this.query.mobileTelephone;
|
|
}
|
|
break;
|
|
}
|
|
// {
|
|
// "cardModeId": "string",
|
|
// "cardTypeId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
|
|
// "cardNo": "string",
|
|
// "customerName": "string",
|
|
// "idNo": "string",
|
|
// "cardFlag": "string",
|
|
// "startDate": "string",
|
|
// "endDate": "string"
|
|
// }
|
|
|
|
console.log('/api/app/cardregister/getcardregisterlist', body)
|
|
postapi('/api/app/cardregister/getcardregisterlist', body)
|
|
.then((res) => {
|
|
if (res.code != -1) {
|
|
this.dataList = res.data;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
|
|
//监听事件
|
|
watch: {
|
|
//触发查询事件
|
|
"patientRegister.query.times"(newVal, oldVal) {
|
|
if (newVal != oldVal) {
|
|
//alert('触发查询事件')
|
|
this.query();
|
|
}
|
|
},
|
|
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
::v-deep .el-input__inner {
|
|
/*text-align: center;*/
|
|
padding-left: 5px;
|
|
padding-right: 25px;
|
|
}
|
|
::v-deep .el-icon-date:before {
|
|
content: ""
|
|
}
|
|
|
|
.query {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.listBtn {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.btnClass {
|
|
width: 110px;
|
|
text-align: center;
|
|
}
|
|
|
|
.btnClass {
|
|
width: 110px;
|
|
}
|
|
</style>
|