|
|
<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>
|
