1

MrShi

2025-03-18 a836f03a5d1fbfa81e147d09ffdfa87ba3975c13

 admin/src/views/combo/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,227 @@
<template>
  <div class="main_app">
    <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clear" />
    <div class="table_btns">
      <el-button type="primary" @click="handleEdit()">新增</el-button>
    </div>
    <el-table v-loading="loading" :data="list" stripe border>
      <el-table-column prop="name" label="套餐名称" align="center" min-width="120" show-overflow-tooltip>
        <template v-slot="{ row }">
          <span @click="handleDetail(row)" class="primaryColor pointer">{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="套餐类型" align="center" min-width="100" show-overflow-tooltip>
        <template v-slot="{ row }">
          <span v-if="row.type == 0">期限卡</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="" label="次数" align="center" min-width="100" show-overflow-tooltip /> -->
      <el-table-column prop="useDays" label="有效期" align="center" min-width="90" show-overflow-tooltip>
        <template v-slot="{ row }">
          <span>{{ row.useDays }}天</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="ä»·æ ¼" align="center" min-width="80" show-overflow-tooltip />
      <el-table-column prop="saleLimit" label="总发行数量" align="center" min-width="100" show-overflow-tooltip>
        <template v-slot="{ row }">
          <span>{{ row.saleLimit ? row.saleLimit : '不限额' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="saleNum" label="已售售量" align="center" min-width="100" show-overflow-tooltip />
      <el-table-column prop="" label="销售渠道" align="center" min-width="100" show-overflow-tooltip>
        <template v-slot="{ row }">
          <span v-if="row.channel == 0">小程序</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="销售时段" align="center" min-width="120" show-overflow-tooltip>
        <template v-slot="{ row }">
          <div>起：{{ row.startDate }}</div>
          <div>止：{{ row.endDate }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="" fixed="right" label="状态" align="center" min-width="80" show-overflow-tooltip>
        <template v-slot="{ row }">
          <el-switch @change="changeStatus(row)" v-model="row.status" :active-value="0" :inactive-value="1" />
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" min-width="120" show-overflow-tooltip>
        <template v-slot="{ row }">
          <div>
            <span v-if="row.status == 0" @click="handleEdit(row, 'copy')" class="primaryColor pointer">复制</span>
            <span v-if="row.status == 1" @click="handleEdit(row)" class="primaryColor pointer mr10">编辑</span>
            <span v-if="row.status == 1" @click="handleDel(row)" class="red pointer">删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="table_btns">
      <Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" />
    </div>
    <!--  -->
    <Edit v-if="isShowEdit" @close="isShowEdit = false" @success="getList" ref="EditRef" />
    <ComboDetail v-if="isShowDetail" ref="DetailRef" />
  </div>
</template>

<script>
import BasePageTemp from '@/components/base/BasePageTemp'
import TableLayout from '@/layouts/TableLayout'
import Edit from './components/Edit'
import ComboDetail from './components/ComboDetail.vue'
import { comboListPost, comboUpdatePost, comboDelPost } from '@/api/business/combo.js'
import { Message } from 'element-ui'
export default {
  extends: BasePageTemp,
  components: {
    TableLayout,
    Edit,
    ComboDetail
  },
  data() {
    return {
      loading: false,
      isShowEdit: false,
      isShowDetail: false,
      queryFormConfig: {
        formItems: [
          {
            filed: 'name',
            type: 'input',
            label: '套餐名称',
          },
          {
            filed: 'bikeOrElec',
            type: 'select',
            label: '适用项目',
            labelCode: 'name',
            valueCode: 'id',
            options: [
              { name: '自行车', id: 1 },
              { name: '电动车', id: 2 },
            ]
          },
          {
            filed: 'status',
            type: 'select',
            label: '状态',
            labelCode: 'name',
            valueCode: 'id',
            options: [
              { name: '正常', id: 0 },
              { name: '停用', id: 1 },
            ]
          },
        ],
        online: true
      },
      list: []
    }
  },
  created() {
    this.getList()
    // this.initData()
  },
  methods: {
    handleSub() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert('submit!')
        }
      })
    },
    changeStatus(row) {
      comboUpdatePost({ ...row }).then(res => {
        if (res.code == 200) {
          return Message.success('更新成功')
        }
      })
    },
    handleDel(row) {
      this.$confirm('您确认要删除当前套餐吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        comboDelPost(row.id).then(res => {
          if (res) {
            Message.success('删除成功')
            this.getList()
          }
        })
      })
    },
    handleEdit(row, type = 'edit') {
      this.isShowEdit = true
      this.$nextTick(() => {
        this.$refs.EditRef.isShowModal = true
        if (row && row.id) {
          this.$refs.EditRef.getDetail(row.id, type)
        }
      })
    },
    handleDetail(row) {
      this.isShowDetail = true
      this.$nextTick(() => {
        this.$refs.DetailRef.isShowModal = true
        this.$refs.DetailRef.getDetail(row.id)
      })
    },
    handleEx() {
      this.$dialog.exportConfirm('确认导出吗？')
        .then(() => {
          this.loading = true
          ywOutinboundEx({
            page: this.pagination.page,
            capacity: 1000000,
            model: this.filters
          })
            .then(response => {
              this.download(response)
            })
            .catch(e => {
              this.$tip.apiFailed(e)
            })
            .finally(() => {
              this.loading = false
            })
        })
        .catch(() => { })
    },
    initData() {
      getStoreList({ capacity: 9999, page: 1, model: {} }).then(res => {
        this.queryFormConfig.formItems[1].options = res.records || []
      })
    },
    getList(page) {
      const { pagination, filters } = this
      this.loading = true
      if (page) { pagination.page = page }
      comboListPost({
        model: {
          ...filters
        },
        capacity: pagination.pageSize,
        page: page,
      }).then(res => {
        this.loading = false
        this.list = res.records || []
        this.pagination.total = res.total || 0
      }, () => {
        this.loading = false
      })
    },
    clear() {
      this.filters = { inOut: 0 }
      this.pagination.pageSize = 10
      this.pagination.page = 1
      this.getList()
    },
    handleSizeChange(capacity) {
      this.pagination.pageSize = capacity
      this.getList()
    }
  }
}
</script>

<style></style>