临时提交（使用卡券未完成）

src/api/bst/vipUser.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询用户卡券列表
+export function listVipUser(query) {
+  return request({
+    url: '/bst/vipUser/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询用户卡券详细
+export function getVipUser(id) {
+  return request({
+    url: '/bst/vipUser/' + id,
+    method: 'get'
+  })
+}
+
+// 新增用户卡券
+export function addVipUser(data) {
+  return request({
+    url: '/bst/vipUser',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改用户卡券
+export function updateVipUser(data) {
+  return request({
+    url: '/bst/vipUser',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除用户卡券
+export function delVipUser(id) {
+  return request({
+    url: '/bst/vipUser/' + id,
+    method: 'delete'
+  })
+}

src/views/bst/vipOrder/index.vue

@@ -68,7 +68,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="vipOrderList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
+    <el-table size="mini" v-loading="loading" :data="vipOrderList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
       <el-table-column type="selection" width="55" align="center" />
       <template v-for="column of showColumns">
         <el-table-column
@@ -86,14 +86,34 @@
             <template v-if="column.key === 'id'">
               {{d.row[column.key]}}
             </template>
-            <template v-else-if="column.key === 'status'">
+            <template v-else-if="column.key === 'vipDiscountValue'">
-              <dict-tag :options="dict.type.vip_order_status" :value="d.row[column.key]"/>
+              {{ d.row.vipDiscountValue | dv }} {{ VipType.getUnit(d.row.vipType) }}
             </template>
-            <template v-else-if="column.key === 'vipType'">
+            <template v-else-if="['vipPrice', 'vipMinAmount'].includes(column.key)">
-              <dict-tag :options="dict.type.vip_type" :value="d.row[column.key]"/>
+              {{ d.row[column.key] | fix2 | dv }} 元
             </template>
-            <template v-else-if="column.key === 'vipLimitUnit'">
+            <template v-else-if="column.key === 'vipValidDays'">
-              <dict-tag :options="dict.type.vip_limit_unit" :value="d.row[column.key]"/>
+              {{ d.row.vipValidDays | dv}} 天
+            </template>
+            <template v-else-if="column.key === 'vipAreaName'">
+              <area-link size="mini" :id="d.row.vipAreaId" :text="d.row.vipAreaName" />
+            </template>
+            <template v-else-if="column.key === 'userName'">
+              <user-link size="mini" :id="d.row.userId" :text="d.row.userName" />
+            </template>
+            <template v-else-if="column.key === 'vipName'">
+              {{ d.row.vipName | dv }}
+              <dict-tag :options="dict.type.vip_type" :value="d.row.vipType" size="mini" style="margin-left: 4px"/>
+              <dict-tag :options="dict.type.vip_order_status" :value="d.row.status" size="mini" style="margin-left: 4px"/>
+            </template>
+            <template v-else-if="column.key === 'vipEnableLimit'">
+              {{ d.row.vipLimitTotal }} 次
+              <template v-if="d.row.vipMinAmount">
+                ，使用门槛 {{ d.row.vipMinAmount | fix2 | dv}} 元
+              </template>
+              <template v-if="d.row.vipEnableLimit">
+                ，每 {{ d.row.vipLimitRound }} {{ dictLabel(dict.type.vip_limit_unit, d.row.vipLimitUnit) }} {{ d.row.vipLimitCount }} 次
+              </template>
             </template>
             <template v-else>
               {{d.row[column.key]}}
@@ -101,24 +121,6 @@
           </template>
         </el-table-column>
       </template>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-has-permi="['bst:vipOrder:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-has-permi="['bst:vipOrder:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
     </el-table>
 
     <pagination
@@ -133,8 +135,11 @@
 
 <script>
 import { addVipOrder, delVipOrder, getVipOrder, listVipOrder, updateVipOrder } from "@/api/bst/vipOrder";
+import AreaLink from "@/components/Business/Area/AreaLink.vue";
 import AreaRemoteSelect from '@/components/Business/Area/AreaRemoteSelect.vue';
+import UserLink from "@/components/Business/User/UserLink.vue";
 import FormCol from "@/components/FormCol/index.vue";
+import { VipType } from '@/utils/enums';
 import { $showColumns } from '@/utils/mixins';
 
   // 默认排序字段
@@ -147,33 +152,28 @@ export default {
   name: "VipOrder",
   mixins: [$showColumns],
   dicts: ['vip_type', 'vip_order_status', 'vip_limit_unit'],
-  components: {FormCol, AreaRemoteSelect},
+  components: {FormCol, AreaRemoteSelect, AreaLink, UserLink},
   data() {
     return {
+      VipType,
       span: 24,
       // 字段列表
       columns: [
-        {key: 'id', visible: true, label: '订单ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
-        {key: 'no', visible: true, label: '订单编号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'no', visible: true, label: '订单号', minWidth: null, sortable: true, overflow: false, align: 'center', width: "100"},
-        {key: 'userName', visible: true, label: '下单用户', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'vipName', visible: true, label: '卡券', minWidth: null, sortable: true, overflow: false, align: 'left', width: "250"},
-        {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'userName', visible: true, label: '用户', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'vipAreaName', visible: true, label: '运营区', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'vipName', visible: true, label: '卡券名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'vipType', visible: true, label: '卡券类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'vipPrice', visible: true, label: '售价', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'vipDiscountValue', visible: true, label: '优惠值', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'vipValidDays', visible: true, label: '有效期', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'vipEnableLimit', visible: true, label: '是否限制频率', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'vipEnableLimit', visible: true, label: '频率限制', minWidth: null, sortable: true, overflow: false, align: 'left', width: "150"},
-        {key: 'vipLimitTotal', visible: true, label: '可用次数', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'vipLimitCount', visible: true, label: '限制频率次数', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'vipLimitRound', visible: true, label: '限制频率周期', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'vipLimitUnit', visible: true, label: '限制频率单位', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'vipMinAmount', visible: true, label: '使用门槛', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'payNo', visible: true, label: '支付单号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'cancelTime', visible: true, label: '取消时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: "100"},
+        {key: 'cancelTime', visible: true, label: '取消时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: "90"},
-        {key: 'cancelRemark', visible: true, label: '取消备注', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'cancelRemark', visible: true, label: '取消备注', minWidth: null, sortable: true, overflow: true, align: 'center', width: null},
-        {key: 'payExpireTime', visible: true, label: '支付过期时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: "100"},
+        {key: 'payExpireTime', visible: false, label: '支付过期', minWidth: null, sortable: false, overflow: false, align: 'center', width: "90"},
-        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: "100"},
+        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: "90"},
       ],
       // 排序方式
       orderSorts: ['ascending', 'descending', null],

src/views/bst/vipUser/index.vue

@@ -0,0 +1,368 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="用户" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="运营区" prop="areaId">
+        <area-remote-select v-model="queryParams.areaId" placeholder="请选择运营区" clearable @change="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="卡券名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入卡券名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="卡券类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择卡券类型" clearable @change="handleQuery">
+          <el-option
+            v-for="dict in dict.type.vip_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-has-permi="['bst:vipUser:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="vipUserList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <template v-for="column of showColumns">
+        <el-table-column
+            :key="column.key"
+            :label="column.label"
+            :prop="column.key"
+            :align="column.align"
+            :min-width="column.minWidth"
+            :sort-orders="orderSorts"
+            :sortable="column.sortable"
+            :show-overflow-tooltip="column.overflow"
+            :width="column.width"
+        >
+          <template slot-scope="d">
+            <template v-if="column.key === 'id'">
+              {{d.row[column.key]}}
+            </template>
+            <template v-else-if="column.key === 'name'">
+              {{ d.row.name | dv }}
+              <dict-tag :options="dict.type.vip_type" :value="d.row.type" size="mini" style="margin-left: 4px;"/>
+            </template>
+            <template v-else-if="column.key === 'userName'">
+              <user-link :id="d.row.userId" :text="d.row.userName"/>
+            </template>
+            <template v-else-if="column.key === 'areaName'">
+              <area-link :id="d.row.areaId" :text="d.row.areaName"/>
+            </template>
+            <template v-else-if="column.key === 'surplusTotal'">
+              {{ d.row.surplusTotal | dv}} 次
+            </template>
+            <template v-else-if="column.key === 'startTime'">
+              {{ d.row.startTime | dv }} <br/> {{ d.row.endTime | dv }}
+            </template>
+            <template v-else-if="column.key === 'discount'">
+              {{ d.row.discount | dv }} {{ VipType.getUnit(d.row.type) }}
+            </template>
+            <template v-else-if="column.key === 'enableLimit'">
+              <template v-if="d.row.enableLimit">
+                每 {{ d.row.limitRound }} {{ dictLabel(dict.type.vip_limit_unit, d.row.limitUnit) }} {{ d.row.limitCount }} 次
+                <br/>
+                已使用 {{ d.row.roundCount }} 次
+              </template>
+            </template>
+            <template v-else-if="column.key === 'minAmount'">
+              {{ d.row.minAmount | fix2 | dv }} 元
+            </template>
+            <template v-else-if="column.key === 'limitUnit'">
+              <dict-tag :options="dict.type.vip_limit_unit" :value="d.row[column.key]"/>
+            </template>
+            <template v-else>
+              {{d.row[column.key]}}
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-has-permi="['bst:vipUser:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+  </div>
+</template>
+
+<script>
+import { addVipUser, delVipUser, getVipUser, listVipUser, updateVipUser } from "@/api/bst/vipUser";
+import AreaLink from '@/components/Business/Area/AreaLink.vue';
+import AreaRemoteSelect from "@/components/Business/Area/AreaRemoteSelect.vue";
+import UserLink from '@/components/Business/User/UserLink.vue';
+import FormCol from "@/components/FormCol/index.vue";
+import { VipType } from '@/utils/enums';
+import { $showColumns } from '@/utils/mixins';
+
+  // 默认排序字段
+const defaultSort = {
+  prop: "createTime",
+  order: "descending"
+}
+
+export default {
+  name: "VipUser",
+  mixins: [$showColumns],
+  dicts: ['vip_type', 'vip_limit_unit'],
+  components: {FormCol, UserLink, AreaLink, AreaRemoteSelect},
+  data() {
+    return {
+      VipType,
+      span: 24,
+      // 字段列表
+      columns: [
+        {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
+        {key: 'name', visible: true, label: '卡券', minWidth: null, sortable: true, overflow: false, align: 'left', width: null},
+        {key: 'userName', visible: true, label: '用户', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'areaName', visible: true, label: '运营区', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'discount', visible: true, label: '优惠', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'startTime', visible: true, label: '有效期', minWidth: null, sortable: false, overflow: false, align: 'center', width: "180"},
+        {key: 'surplusTotal', visible: true, label: '剩余次数', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'enableLimit', visible: true, label: '频率限制', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'minAmount', visible: true, label: '使用门槛', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'nextResetTime', visible: true, label: '下次重置', minWidth: null, sortable: false, overflow: false, align: 'center', width: "180"},
+        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: "180"},
+      ],
+      // 排序方式
+      orderSorts: ['ascending', 'descending', null],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户卡券表格数据
+      vipUserList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      defaultSort,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        orderByColumn: defaultSort.prop,
+        isAsc: defaultSort.order,
+        id: null,
+        userId: null,
+        cardId: null,
+        areaId: null,
+        name: null,
+        type: null,
+        startTime: null,
+        endTime: null,
+        enableLimit: null,
+        limitUnit: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        userId: [
+          { required: true, message: "用户ID不能为空", trigger: "blur" }
+        ],
+        cardId: [
+          { required: true, message: "卡券ID不能为空", trigger: "blur" }
+        ],
+        areaId: [
+          { required: true, message: "运营区ID不能为空", trigger: "blur" }
+        ],
+        name: [
+          { required: true, message: "会员卡名称不能为空", trigger: "blur" }
+        ],
+        type: [
+          { required: true, message: "卡类型不能为空", trigger: "change" }
+        ],
+        discount: [
+          { required: true, message: "抵扣金额/折扣率/储值金额不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+        enableLimit: [
+          { required: true, message: "是否有使用限制不能为空", trigger: "blur" }
+        ],
+        surplusTotal: [
+          { required: true, message: "剩余总次数不能为空", trigger: "blur" }
+        ],
+        roundCount: [
+          { required: true, message: "当前周期已使用次数不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 当排序按钮被点击时触发 **/
+    onSortChange(column) {
+      if (column.order == null) {
+        this.queryParams.orderByColumn = defaultSort.prop;
+        this.queryParams.isAsc = defaultSort.order;
+      } else {
+        this.queryParams.orderByColumn = column.prop;
+        this.queryParams.isAsc = column.order;
+      }
+      this.getList();
+    },
+    /** 查询用户卡券列表 */
+    getList() {
+      this.loading = true;
+      listVipUser(this.queryParams).then(response => {
+        this.vipUserList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        userId: null,
+        cardId: null,
+        areaId: null,
+        name: null,
+        type: null,
+        discount: null,
+        createTime: null,
+        startTime: null,
+        endTime: null,
+        enableLimit: null,
+        surplusTotal: null,
+        limitCount: null,
+        limitRound: null,
+        limitUnit: null,
+        nextResetTime: null,
+        roundCount: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加用户卡券";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getVipUser(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改用户卡券";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateVipUser(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addVipUser(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除用户卡券编号为"' + ids + '"的数据项？').then(function() {
+        return delVipUser(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('bst/vipUser/export', {
+        ...this.queryParams
+      }, `vipUser_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>