1

MrShi

2025-03-18 a836f03a5d1fbfa81e147d09ffdfa87ba3975c13

 admin/src/views/combo/record.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,390 @@
<template>
  <div class="main_app">
    <Breadcrumb />
    <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clearQueryForm">
    </QueryForm>
    <div class="table_btns">
      <el-button plain type="primary" @click="handleEx">导出</el-button>
      <el-button plain type="danger" @click="openModal('zuofei')">作废</el-button>
      <el-button plain @click="openModal('tiaozheng')">套餐调整</el-button>
    </div>
    <el-table v-loading="loading" :data="list" stripe border @selection-change="handleSelectionChange">
      <el-table-column fixed="left" align="center" type="selection" :selectable="handleDisable" width="55" />
      <el-table-column align="center" label="套餐票号" min-width="160" show-overflow-tooltip>
        <template v-slot="scope">
          <span class="primaryColor pointer" @click="comboDetail(scope.row)">{{
            scope.row.code
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="套餐类型" min-width="80">
        <template v-slot="scope">
          <span v-if="scope.row.type == '0'">期限卡</span>
          <span v-if="scope.row.type == '1'">次卡</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="套餐名称" show-overflow-tooltip min-width="100" prop="name" />
      <el-table-column align="center" label="用户信息" min-width="100" prop="openid" show-overflow-tooltip />
      <el-table-column align="center" label="使用次数" min-width="80" prop="useTimes">
      </el-table-column>
      <el-table-column align="center" label="有效日期" min-width="200" prop="remainCount">
        <template v-slot="scope">
          <span>{{ scope.row.useStartDate }}至{{ scope.row.useEndDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="套餐状态" min-width="80">
        <template v-slot="scope">
          <span v-if="scope.row.status == '0'" class="text_success">正常</span>
          <span v-if="scope.row.status == '1'" class="text_warning">作废</span>
          <span v-if="scope.row.status == '2'" class="text-danger">待支付</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right" min-width="150">
        <template v-slot="scope">
          <template>
            <el-button v-if="scope.row.status == '0'" type="text" @click="openCan(scope.row)">作废</el-button>
            <span v-else>-</span>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="table_btns">
      <Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" />
    </div>

    <el-dialog title="套餐调整" :visible.sync="isShowAdjust" width="500px">
      <div class="adjust_modal">
        <div style="margin-top: -30px; margin-bottom: 10px;">
          <el-radio v-model="adjustData.flag" label="0">已选{{ selList.length }}条数据</el-radio>
        </div>
        <div style="margin-bottom: 16px;">
          <el-radio v-model="adjustData.flag" label="1">选现有筛选条件下全部的{{ pagination.total }}条数据</el-radio>
        </div>
        <div class="df_ac mb5">
          <span class="key">有效期增加：</span>
          <el-input v-model="adjustData.addNum" oninput="value=value.replace(/[^\d]/g,'')" class="flex1 mr10" />
          <span>天</span>
        </div>
        <div class="df_ac mb20">
          <span class="key" />
          <span class="text_warning">修改后套餐有效期增加以上天数</span>
        </div>
        <div class="df_ac mt20">
          <span class="key">调整备注：</span>
          <el-input v-model="ModelRemark" style="width: 356px" placeholder="请按要求输入备注说明，非必填" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowAdjust = false">取消</el-button>
        <el-button type="primary" :loading="subLoading" @click="handleModelEnter">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="套餐作废" :visible.sync="isShowCan" width="500px">
      <div class="adjust_modal" style="margin-top: -30px;">
        <div class="red" style="font-size: 16px;">确定作废选中套餐吗？作废后，套餐不可使用</div>
        <div class="df_ac mt10">
          <el-input type="textarea" v-model="remarkCan" placeholder="请按要求输入备注说明，非必填" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowCan = false">取消</el-button>
        <el-button type="primary" :loading="subLoading" @click="handleCan">确定</el-button>
      </span>
    </el-dialog>

    <Refund v-if="isShowRefund" ref="RefundRef" @close="isShowRefund = false" @success="refundSuccess" />
    <Detail v-if="isShowDetail" ref="detailRef" />
    <Detail ref="DetailRef" />
  </div>
</template>

<script>
import BasePageTemp from '@/components/base/BasePageTemp'
import Breadcrumb from '@/layouts/Breadcrumb'
import Detail from './components/SaleDetail.vue'
import { Message } from 'element-ui'
import {
  comboSalePage,
  comboSaleEx,
  comboSaleCancel,
  comboSaleAdjust,
} from '@/api/business/combo.js'
export default {
  name: 'SalesRecord',
  extends: BasePageTemp,
  components: { Breadcrumb, Detail },
  data() {
    return {
      exportLoading: false,
      isShowDetail: false,
      isShowRefund: false,
      queryFormConfig: {
        formItems: [{
          filed: 'code',
          type: 'input',
          label: '套餐票号',
          placeholder: '请输入套餐号',
          clearable: true
        }, {
          filed: 'name',
          type: 'input',
          label: '套餐名称',
          placeholder: '请输入套餐名称',
          clearable: true
        }, {
          filed: 'openid',
          type: 'input',
          label: '用户信息',
          clearable: true
        }, {
          filed: 'status',
          type: 'select',
          label: '状态',
          placeholder: '请选择状态',
          clearable: true,
          options: [
            { value: '0', label: '正常' },
            { value: '1', label: '作废' },
            // { value: '2', label: '待支付' }
          ]
        }],
        online: true
      },
      querys: {
        id: '',
        mealsName: '',
        memberSearchValue: '',
        status: '',
        indate: []
      },

      saleRecordList: [],
      saleRecordTotal: 0,
      selList: [],
      saleRecordLoading: false,
      subLoading: false,

      isShowCan: false,
      ModalTitle: '',
      ModalText: '',
      ModelRemark: '',
      remarkCan: '',
      // â¬‡ï¸adjust调整相关
      isShowAdjust: false,
      isShowCan: false,
      canList: [],
      adjustData: {
        flag: 0,
        addNum: '',
        addTime: ''
      },
      serviceChargePrice: '',
      serviceChargeId: ''
    }
  },
  created() {
    // this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  methods: {
    rowClickRefund(row) {
      this.isShowRefund = true
      this.$nextTick(() => {
        this.$refs.RefundRef.getPrice(row)
        this.$refs.RefundRef.isShow = true
      })
    },
    refundSuccess() {
      this.isShowRefund = false
      this.getList()
    },
    handleEx() {
      const { pagination, filters } = this
      this.$dialog.exportConfirm('确认导出吗？')
        .then(() => {
          this.loading = true
          comboSaleEx({
            page: 1,
            capacity: 1000000,
            model: filters
          })
            .then(response => {
              this.download(response)
            })
            .catch(e => {
              this.$tip.apiFailed(e)
            })
            .finally(() => {
              this.loading = false
            })
        })
        .catch(() => { })
    },
    openCan(row) {
      this.isShowCan = true
      this.canList = [row]
    },
    handleDisable(row) {
      // return row.status == 0
      return true
    },
    // æŸ¥è¯¢è¡¨æ ¼æ•°æ®
    getList(page) {
      const { pagination, filters } = this
      this.loading = true
      if (page) { pagination.page = page }
      comboSalePage({
        model: {
          ...filters
        },
        capacity: pagination.pageSize,
        page: pagination.page,
      }).then(res => {
        this.loading = false
        this.list = res.records || []
        this.pagination.total = res.total || 0
      }, () => {
        this.loading = false
      })
    },
    clearQueryForm() {
      // eslint-disable-next-line no-unused-vars
      this.filters = {}
      this.getList(1)
    },
    // æ‰“å¼€modal å†»ç»“ è§£å†» ä½œåºŸ
    openModal(type) {
      const { selList } = this
      this.ModelRemark = ''
      this.adjustData.addNum = ''
      this.adjustData.addTime = ''
      switch (type) {
        case 'zuofei':
          this.ModalTitle = '套餐作废'
          this.ModalText = '确定作废选中套餐吗？作废后，套餐不可使用'
          break
        case 'tiaozheng':
          this.ModalTitle = '套餐调整'
          break
        default:
          break
      }
      if (selList.length === 0 && type == 'zuofei') {
        return Message.warning(`请先选择要${this.ModalTitle.slice(2)}的套餐`)
      }
      if (this.ModalTitle === '套餐调整') {
        this.isShowAdjust = true
        this.adjustData = {
          flag: '0'
        }
      } else {
        this.isShowCan = true
      }
    },
    // ç¡®å®š å†»ç»“ è§£å†» ä½œåºŸ
    handleModelEnter() {
      switch (this.ModalTitle) {
        case '套餐作废':
          this.cancellation()
          break
        case '套餐调整':
          this.handleAdjust()
          break
        default:
          break
      }
    },
    // è°ƒæ•´
    async handleAdjust() {
      if (!this.adjustData.addNum && !this.adjustData.addTime) {
        return Message.warning('请输入要调整的有效期天数或者余量次数')
      }
      const data = {
        info: this.ModelRemark,
        addDays: this.adjustData.addNum || 0,
        choseIdList: this.adjustData.flag == 0 ? this.selList.map(i => i.id) : [],
        ...this.filters
      }

      this.subLoading = true
      const res = await comboSaleAdjust({ ...data }).catch(() => {
        this.subLoading = false
        this.isShowCan = false
      })
      this.subLoading = false
      this.isShowCan = false
      if (res) {
        Message.success('套餐调整成功')
        this.getList()
        this.isShowAdjust = false
      }
    },
    // ä½œåºŸ
    async cancellation() {
      const data = {
        handleRemake: this.remarkCan,
        choseIdList: this.selList.map(i => i.id)
      }
      this.subLoading = true
      const res = await comboSaleCancel({ ...data }).catch(() => {
        this.subLoading = false
        this.isShowCan = false
      })
      this.subLoading = false
      this.isShowCan = false
      if (res) {
        Message.success('作废成功')
        this.getList()
      }
    },
    async handleCan() {
      const data = {
        handleRemake: this.remarkCan,
        choseIdList: this.canList.map(i => i.id)
      }
      this.subLoading = true
      const res = await comboSaleCancel({ ...data }).catch(() => {
        this.subLoading = false
        this.isShowCan = false
      })
      this.subLoading = false
      this.isShowCan = false
      if (res) {
        Message.success('作废成功')
        this.getList()
      }
    },
    handleSelectionChange(val) {
      this.selList = val
    },
    comboDetail(item) {
      this.$nextTick(() => {
        this.$refs.DetailRef.isShowModal = true
        this.$refs.DetailRef.getDetail(item)
      })
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    }

  }
}
</script>

<style lang="scss" scoped>
.adjust_modal {
  .df_ac {
    .key {
      width: 92px;
      text-align: right;
    }
  }

  .el-dialog__body {}

  .text_warning {
    color: #e89e42;
  }
}
</style>