235 lines
7.2 KiB
Vue
235 lines
7.2 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 对话框(添加 / 修改) -->
|
||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
|
||
<span v-if="formData.isPack == '0'" style="color: red">请选择充值类型：</span>
|
||
<el-select v-if="formData.isPack == '0'" v-model="accountType" class="item__input" >
|
||
<el-option v-for="item in getDictDatas(DICT_TYPE.REPAIR_PAY_TYPE)" :key="item.value" :label="item.label"
|
||
:value="item.value"/>
|
||
</el-select>
|
||
<el-collapse v-model="activeNames">
|
||
<!-- 供应商基本信息 -->
|
||
<el-collapse-item name="1">
|
||
<template slot="title">
|
||
<div style="font-weight: bold">活动内容</div>
|
||
</template>
|
||
<el-descriptions class="margin-top" :column="2" border>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
活动名称
|
||
</template>
|
||
{{ formData.name }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
活动类型
|
||
</template>
|
||
<dict-tag :type="DICT_TYPE.MEMBER_ACTIVE" :value="formData.type"/>
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
开始时间
|
||
</template>
|
||
{{ parseTime(formData.beginTime) }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
结束时间
|
||
</template>
|
||
{{ parseTime(formData.endTime) }}
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item>
|
||
<template slot="label">
|
||
活动内容
|
||
</template>
|
||
{{ formData.remark }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-collapse-item>
|
||
|
||
<el-collapse-item title="关联卡券" name="2">
|
||
<template slot="title">
|
||
<div style="font-weight: bold">关联卡券</div>
|
||
</template>
|
||
<el-table
|
||
ref="multipleTable"
|
||
show-overflow-tooltip
|
||
@select="selectRow"
|
||
@select-all="handleSelectAll"
|
||
height="250" :data="formData.couponList" border size="small" style="width: 100%">
|
||
<el-table-column
|
||
v-if="formData.isPack == '0'"
|
||
type="selection"
|
||
width="55">
|
||
</el-table-column>
|
||
<el-table-column label="卡券名称" width="250" align="left" prop="name"/>
|
||
<el-table-column label="卡券类型" width="80" align="left" prop="type">
|
||
<template v-slot="scope">
|
||
<dict-tag :type="DICT_TYPE.MEMBER_COUPON_TYPE" :value="scope.row.type"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="开始有效期" align="center" prop="beginTime" width="150">
|
||
<template v-slot="scope">
|
||
<span>{{ parseTime(scope.row.beginTime) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="结束有效期" align="center" prop="endTime" width="150">
|
||
<template v-slot="scope">
|
||
<span>{{ parseTime(scope.row.endTime) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="面额" width="100" align="right" prop="amount"/>
|
||
<el-table-column label="备注" show-overflow-tooltip align="left" prop="remark"/>
|
||
</el-table>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm" :disabled="formLoading">领 取</el-button>
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as ActiveMainApi from '@/api/member/active';
|
||
export default {
|
||
name: "ActiveRuleCouponForm",
|
||
components: {},
|
||
data() {
|
||
return {
|
||
// 弹出层标题
|
||
dialogTitle: "",
|
||
// 是否显示弹出层
|
||
dialogVisible: false,
|
||
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||
formLoading: false,
|
||
//折叠面板默认展开
|
||
activeNames: ['1', '2'],
|
||
accountType: '01',
|
||
// 表单参数
|
||
formData: {
|
||
id: undefined,
|
||
name: undefined,
|
||
type: undefined,
|
||
beginTime: undefined,
|
||
endTime: undefined,
|
||
remark: undefined,
|
||
couponList: []
|
||
},
|
||
// 表单校验
|
||
formRules: {},
|
||
//客户数据
|
||
cusRow:{},
|
||
//全选
|
||
multipleSelection:[]
|
||
};
|
||
},
|
||
methods: {
|
||
/** 打开弹窗 */
|
||
async open(id,cusRow) {
|
||
this.dialogVisible = true;
|
||
this.cusRow = cusRow
|
||
this.reset();
|
||
// 修改时，设置数据
|
||
if (id) {
|
||
this.formLoading = true;
|
||
try {
|
||
const res = await ActiveMainApi.getActiveMain(id);
|
||
this.formData = res.data;
|
||
this.title = "参加活动";
|
||
} finally {
|
||
this.formLoading = false;
|
||
}
|
||
}
|
||
this.title = "参加活动";
|
||
},
|
||
|
||
/**选中*/
|
||
selectRow(val,row){
|
||
//当前点击是否勾选
|
||
let selectBool = val.length && val.indexOf(row) !== -1
|
||
if(!selectBool){
|
||
//取消勾选
|
||
this.multipleSelection.forEach((item,i) => {
|
||
if(item.id == row.id){
|
||
this.multipleSelection.splice(i,1)
|
||
}
|
||
})
|
||
}else{
|
||
//选中
|
||
this.multipleSelection.push(row)
|
||
}
|
||
},
|
||
|
||
/**全选*/
|
||
handleSelectAll(val){
|
||
if(val.length == this.list.length){ //全选
|
||
this.multipleSelection = this.multipleSelection.concat(val)
|
||
//去重
|
||
let obj = {}
|
||
let result = []
|
||
this.multipleSelection.forEach(item => {
|
||
if(!obj[item.id]){
|
||
result.push(item)
|
||
obj[item.id] = true
|
||
}
|
||
})
|
||
this.multipleSelection = result
|
||
}else{ //取消全选
|
||
this.list.forEach(item => {
|
||
this.multipleSelection.forEach((multItem,i) => {
|
||
if(item.id == multItem.id){
|
||
this.multipleSelection.splice(i,1)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
},
|
||
|
||
/** 提交按钮 */
|
||
async submitForm() {
|
||
// 校验主表
|
||
this.formLoading = true;
|
||
try {
|
||
const data = {
|
||
cusId:this.cusRow.id,
|
||
activeId:this.formData.id,
|
||
selectCoupon:this.multipleSelection,
|
||
accountType: this.accountType
|
||
}
|
||
await ActiveMainApi.attendActiveOrder(data);
|
||
if (this.formData.isPack == '0'){
|
||
this.$modal.msgSuccess("已生成订单，请客户尽快支付");
|
||
} else {
|
||
this.$modal.msgSuccess("参与成功");
|
||
}
|
||
this.dialogVisible = false
|
||
this.$emit('success');
|
||
} finally {
|
||
this.formLoading = false;
|
||
}
|
||
},
|
||
|
||
|
||
/** 表单重置 */
|
||
reset() {
|
||
this.accountType = '01'
|
||
this.formData = {
|
||
id: undefined,
|
||
name: undefined,
|
||
type: undefined,
|
||
beginTime: undefined,
|
||
endTime: undefined,
|
||
remark: undefined,
|
||
couponList: []
|
||
};
|
||
}
|
||
}
|
||
};
|
||
</script>
|