lanan-system-vue/src/views/base/customer/ReceiveCouponForm.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>