优惠券列表

src/api/coupon/list.js

+import request from '@/utils/request'
+
+// 查询列表
+export function listCoupon(data) {
+  return request({
+    url: '/xh/coupon/coupon/xhlist',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改状态
+export function editStatus(data) {
+  return request({
+    url: '/xh/coupon/coupon/editStatus',
+    method: 'post',
+    data: data
+  })
+}

src/views/coupon/list/index.vue

+<template>
+  <div class="app-container">
+    <xy-table ref="tableRef" :table="table" :columns="columns">
+      <template #couponType="{ scope }">
+        <dict-tag :options="dict.type.coupon_type" :value="scope.row.couponType"/>
+      </template>
+      <template #expiryType="{ scope }">
+        {{scope.row.expiryType === '1' ? `${scope.row.fixedEffectiveTime} ~ ${scope.row.fixedExpiryTime}` : `领取后${scope.row.expiryDayNum}天内`}}
+      </template>
+      <template #left="{ scope }">
+        {{scope.row.total -  scope.row.used}}
+      </template>
+      <template #state="{ scope }">
+        <!-- <el-switch
+          v-model="scope.row.status"
+          active-value="A"
+          inactive-value="P"
+          @change="handleStatusChange(scope.row)"
+        /> -->
+        {{scope.row.state === 'A' ? '启用' : scope.row.state === 'P' ? '禁用' : ''}}
+      </template>
+
+    </xy-table>
+
+    <!-- 添加或修改岗位对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="分类名称" prop="categoryName">
+          <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
+        </el-form-item>
+        <el-form-item label="是否前端展示" prop="isShow">
+          <el-radio-group v-model="form.isShow">
+            <el-radio
+              v-for="dict in dict.type.classify_isshow"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listCoupon, editStatus } from '@/api/coupon/list'
+
+export default {
+  name: 'CouponList',
+  dicts: ['coupon_type'],
+  data() {
+    return {
+      open: false,
+      title: undefined,
+      form: {
+        id: undefined,
+        categoryName: undefined,
+        isShow: '0'
+      },
+      rules: {
+        categoryName: [
+          { required: true, message: "分类名称不能为空", trigger: "blur" }
+        ]
+      },
+      table: {
+        rowKey: 'couponInfoId',
+        data: [],
+        firstColumn: { type: 'index' },
+        // hiddenLine: true,
+        // 表格内操作列
+        operator: [
+          {
+            text: '编辑',
+            icon: 'el-icon-edit',
+            fun: (row) => this.handleEdit(row)
+          },
+          {
+            text: '启用',
+            icon: 'el-icon-check',
+            show: {key: 'state', val: ['P']},
+            fun: (row) => this.handleStatusChange(row)
+          },
+          {
+            text: '禁用',
+            icon: 'el-icon-close',
+            show: {key: 'state', val: ['A']},
+            fun: (row) => this.handleStatusChange(row)
+          },
+          {
+            text: '数据',
+            icon: 'el-icon-help',
+            fun: (row) => this.handleMoreData(row)
+          }
+        ],
+        // 操作列样式
+        operatorConfig: {
+          width: 180
+        },
+        // 表格外操作
+        toolbar: [
+          // {
+          //   text: '新增分类',
+          //   icon: 'el-icon-plus',
+          //   type: 'primary',
+          //   fun: () => this.handleAdd()
+          // }
+        ],
+        // 分页配置
+        page: {
+          total: 0,
+          pageNum: 1,
+          pageSize: 10
+        },
+        // 搜索表单配置
+        searchForm: {
+          formLabelWidth: '90px',
+          formData: {
+            couponName: undefined,
+            state: undefined,
+            couponType: undefined
+          },
+          fieldList: [
+            { prop: 'couponName', label: '优惠券标题', type: 'input' },
+            { prop: 'state', label: '状态', type: 'select', options: 'stateOptions' },
+            { prop: 'couponType', label: '优惠券类型', type: 'select', options: 'couponTypeOptions' },
+          ],
+          // 相关下拉列表
+          listOptions: {
+            stateOptions: [
+              {value: 'A', label: '启用'},
+              {value: 'P', label: '禁用'},
+            ],
+            couponTypeOptions: []
+          }
+        },
+        // 请求
+        request: listCoupon
+      },
+      columns: [
+        { prop: 'couponName', label: '优惠券标题' },
+        { prop: 'couponType', label: '优惠券类型', slotName: 'couponType' },
+        { prop: 'categoryName', label: '优惠券分类' },
+        { prop: 'expiryType', label: '有效期', slotName: 'expiryType', minWidth: 200},
+        { prop: 'total', label: '总库存' },
+        { label: '剩余库存', slotName: 'left' },
+        { prop: 'used', label: '已发放' },
+        { prop: 'state', label: '状态', slotName: 'state' }
+      ]
+    }
+  },
+  mounted() {
+    this.initOptions()
+  },
+  methods: {
+    initOptions() {
+      this.table.searchForm.listOptions.couponTypeOptions = this.dict.type.coupon_type
+    },
+    /** 查询列表 */
+    getList() {
+      this.$refs.tableRef.getData()
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+
+    },
+    /** 编辑按钮操作 */
+    handleEdit(row) {
+
+    },
+    /** 删除按钮操作 */
+    async handleDelete(row) {
+
+    },
+    handleStatusChange(row) {
+      const text = row.state === 'P' ? '启用' : '禁用'
+      this.$modal.confirm('确认要"' + text + '""' + row.couponName + '"优惠券吗？').then(function() {
+        return editStatus({ id: row.couponInfoId, status: row.state === 'P' ? 'A' : 'P' })
+      }).then(() => {
+        this.$modal.msgSuccess(text + '成功')
+        this.getList()
+      }).catch(function() {
+        // row.status = row.status === 'P' ? 'A' : 'P'
+      })
+    },
+    handleMoreData() {
+
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != undefined) {
+            updateClassify(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addClassify(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        categoryName: undefined,
+        isShow: '0'
+      };
+      this.resetForm("form");
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+  }
+}
+</script>
+
+<style>
+
+</style>