|
@@ -0,0 +1,295 @@
|
|
|
+<template>
|
|
|
+ <a-card :bordered="false" class="gift-card-wrap">
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <div class="gift-card-search">
|
|
|
+ <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
|
|
|
+ <a-row :gutter="20">
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-form-item label="创建时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
+ <a-range-picker
|
|
|
+ id="gift-card-time"
|
|
|
+ v-model="time"
|
|
|
+ :format="dateFormat"
|
|
|
+ :placeholder="['开始时间','结束时间']"
|
|
|
+ :disabledDate="disabledDate"
|
|
|
+ @change="onChange" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-form-item label="礼品卡内容" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
+ <a-input-number
|
|
|
+ id="gift-card-goldNum"
|
|
|
+ v-model="searchData.goldNum"
|
|
|
+ :min="1"
|
|
|
+ :max="999999"
|
|
|
+ :precision="0"
|
|
|
+ style="width: 70%;margin-right: 5px;"
|
|
|
+ placeholder="请输入礼品卡内容(1~999999)"
|
|
|
+ allowClear /><span>乐豆</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-form-item label="实体卡编号" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
+ <a-input allowClear v-model="searchData.optionalSequence" :maxLength="30" placeholder="请输入实体卡编号" id="gift-card-optionalSequence" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-form-item label="是否已充值" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
+ <v-select
|
|
|
+ ref="booleanState"
|
|
|
+ code="BOOLEAN_STATE"
|
|
|
+ v-model="searchData.state"
|
|
|
+ allowClear
|
|
|
+ placeholder="请选择"
|
|
|
+ id="gift-card-enable-state"></v-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-form-item label="充值时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
+ <a-range-picker
|
|
|
+ id="gift-card-rechargeTime"
|
|
|
+ v-model="rechargeTime"
|
|
|
+ :format="dateFormat"
|
|
|
+ :placeholder="['开始时间','结束时间']"
|
|
|
+ :disabledDate="disabledDate"
|
|
|
+ @change="onRechargeChange" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-form-item label="充值用户" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
+ <a-input allowClear v-model="searchData.customPhone" :maxLength="30" placeholder="请输入充值用户" id="gift-card-customPhone" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-form-item label="充值码" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
|
+ <a-input allowClear v-model="searchData.sequence" :maxLength="30" placeholder="请输入充值码" id="gift-card-sequence" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-button class="handle-btn serach-btn" type="primary" @click="$refs.table.refresh(true)" id="gift-card-refresh" :disabled="disabled">查询</a-button>
|
|
|
+ <a-button class="handle-btn" @click="resetForm" id="gift-card-resetForm" :disabled="disabled">重置</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <div class="add">
|
|
|
+ <a-button
|
|
|
+ type="primary"
|
|
|
+ icon="plus"
|
|
|
+ class="addBtn"
|
|
|
+ @click="handleAdd"
|
|
|
+ id="gift-card-add"
|
|
|
+ :disabled="disabled"
|
|
|
+ v-if="$hasPermissions('B_giftCard_add')">新增礼品卡</a-button>
|
|
|
+ </div>
|
|
|
+ <!-- table列表 -->
|
|
|
+ <s-table
|
|
|
+ ref="table"
|
|
|
+ size="default"
|
|
|
+ :rowKey="(record) => record.id"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ bordered>
|
|
|
+ <!-- 创建人 -->
|
|
|
+ <span slot="creater" slot-scope="text, record">{{ record.name + record.phone }}</span>
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <span slot="action" slot-scope="text, record">
|
|
|
+ <a-button id="gift-card-getCode" class="blue" type="link" v-if="$hasPermissions('B_giftCard_getCode')" @click="getCode(record)">获取充值码</a-button>
|
|
|
+ <a-button id="gift-card-handleEdit" class="green" type="link" v-if="$hasPermissions('B_giftCard_edit')" @click="handleEdit(record)">编辑</a-button>
|
|
|
+ <a-button
|
|
|
+ v-if="record.state==0&&$hasPermissions('B_giftCard_del')"
|
|
|
+ id="gift-card-handleDel"
|
|
|
+ class="red"
|
|
|
+ type="link"
|
|
|
+ @click="handleDel(record)">删除</a-button>
|
|
|
+ </span>
|
|
|
+ </s-table>
|
|
|
+ <!-- 新增礼品卡 -->
|
|
|
+ <add-card-modal :openModal="openAddCardModal" @close="closeModal" @refresh="refreshFun" />
|
|
|
+ <!-- 编辑礼品卡 -->
|
|
|
+ <edit-card-modal :openModal="openEditCardModal" :cardId="cardId" @refresh="refreshFun" @close="closeModal" />
|
|
|
+ <!-- 获取充值码 -->
|
|
|
+ <get-code-modal :openModal="openGetCodeModal" :cardId="cardId" @close="closeModal" />
|
|
|
+ </a-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { STable, VSelect } from '@/components'
|
|
|
+import AddCardModal from './addCardModal.vue'
|
|
|
+import EditCardModal from './editCardModal.vue'
|
|
|
+import GetCodeModal from './getCodeModal.vue'
|
|
|
+import { giftCardQuery, giftCardDel } from '@/api/giftCard.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { STable, VSelect, GetCodeModal, AddCardModal, EditCardModal },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ disabled: true, // 页面初始化之前是否可操作
|
|
|
+ formItemLayout: {
|
|
|
+ labelCol: { span: 9 },
|
|
|
+ wrapperCol: { span: 15 }
|
|
|
+ },
|
|
|
+ searchData: {
|
|
|
+ startTime: null, // 创建时间 开始
|
|
|
+ endTime: null, // 创建时间 结束
|
|
|
+ goldNum: null, // 礼品卡内容
|
|
|
+ optionalSequence: null, // 实体卡编号
|
|
|
+ state: undefined, // 是否已充值
|
|
|
+ useTimeStart: null, // 充值时间 开始
|
|
|
+ useTimeEnd: null, // 充值时间 结束
|
|
|
+ customPhone: null, // 充值用户
|
|
|
+ sequence: null // 充值码
|
|
|
+ },
|
|
|
+ showEditModal: false, // 默认关闭弹窗
|
|
|
+ itemId: null, // 编辑行id
|
|
|
+ time: [], // 创建时间
|
|
|
+ rechargeTime: [], // 充值时间
|
|
|
+ dateFormat: 'YYYY-MM-DD',
|
|
|
+ // 表头
|
|
|
+ columns: [
|
|
|
+ { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
|
|
|
+ { title: '创建时间', dataIndex: 'createDate', width: 100, align: 'center' },
|
|
|
+ { title: '创建人', scopedSlots: { customRender: 'creater' }, width: 100, align: 'center' },
|
|
|
+ { title: '礼品卡内容', dataIndex: 'content', width: 100, align: 'center' },
|
|
|
+ { title: '实体卡编号', dataIndex: 'optionalSequence', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
|
|
|
+ { title: '是否已充值', dataIndex: 'stateDictValue', width: 100, align: 'center' },
|
|
|
+ { title: '充值时间', dataIndex: 'useTime', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
|
|
|
+ { title: '充值用户', dataIndex: 'customPhone', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
|
|
|
+ { title: '备注', dataIndex: 'remarks', width: 100, align: 'center', ellipsis: true, customRender: (text) => { return text || '--' } },
|
|
|
+ { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center', width: 100 }
|
|
|
+ ],
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ loadData: parameter => {
|
|
|
+ return giftCardQuery(Object.assign(parameter, this.searchData)).then(res => {
|
|
|
+ const no = (res.data.pageNo - 1) * res.data.pageSize
|
|
|
+ if (res.status == 200) {
|
|
|
+ for (let i = 0; i < res.data.list.length; i++) {
|
|
|
+ const _item = res.data.list[i]
|
|
|
+ _item.no = no + i + 1
|
|
|
+ }
|
|
|
+ this.disabled = false
|
|
|
+ return res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cardId: null, // 卡id
|
|
|
+ openGetCodeModal: false, // 获取充值码 弹框状态
|
|
|
+ openAddCardModal: false, // 新增礼品卡 弹框状态
|
|
|
+ openEditCardModal: false // 编辑礼品卡 弹框状态
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 不可选日期
|
|
|
+ disabledDate (date, dateStrings) {
|
|
|
+ return date && date.valueOf() > Date.now()
|
|
|
+ },
|
|
|
+ // 创建时间change
|
|
|
+ onChange (dates, dateStrings) {
|
|
|
+ if ((dates, dateStrings)) {
|
|
|
+ this.searchData.startTime = dateStrings[0] || null
|
|
|
+ this.searchData.endTime = dateStrings[1] || null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 充值时间change
|
|
|
+ onRechargeChange (dates, dateStrings) {
|
|
|
+ if (dates, dateStrings) {
|
|
|
+ this.searchData.useTimeStart = dateStrings[0] || null
|
|
|
+ this.searchData.useTimeEnd = dateStrings[1] || null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取充值码
|
|
|
+ getCode (record) {
|
|
|
+ this.cardId = record.id
|
|
|
+ this.openGetCodeModal = true
|
|
|
+ },
|
|
|
+ // 新增
|
|
|
+ handleAdd () {
|
|
|
+ this.cardId = null
|
|
|
+ this.openAddCardModal = true
|
|
|
+ },
|
|
|
+ // 编辑
|
|
|
+ handleEdit (record) {
|
|
|
+ this.cardId = record.id
|
|
|
+ this.openEditCardModal = true
|
|
|
+ },
|
|
|
+ // 关闭弹框
|
|
|
+ closeModal () {
|
|
|
+ this.cardId = null
|
|
|
+ this.openAddCardModal = false
|
|
|
+ this.openEditCardModal = false
|
|
|
+ this.openGetCodeModal = false
|
|
|
+ },
|
|
|
+ // 刷新数据
|
|
|
+ refreshFun (state) {
|
|
|
+ // 新增需刷新第一页数据。编辑为当前页数据
|
|
|
+ this.$refs.table.refresh(state)
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ handleDel (record) {
|
|
|
+ this.$confirm({
|
|
|
+ title: '警告',
|
|
|
+ centered: true,
|
|
|
+ content: '删除后无法恢复,确认删除?',
|
|
|
+ okText: '确定',
|
|
|
+ cancelText: '取消',
|
|
|
+ onOk: () => {
|
|
|
+ giftCardDel({ id: record.id }).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.$message.success(res.message)
|
|
|
+ this.$refs.table.refresh()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ resetForm () {
|
|
|
+ this.time = []
|
|
|
+ this.rechargeTime = []
|
|
|
+ this.searchData.startTime = null
|
|
|
+ this.searchData.endTime = null
|
|
|
+ this.searchData.goldNum = null
|
|
|
+ this.searchData.optionalSequence = null
|
|
|
+ this.searchData.state = null
|
|
|
+ this.searchData.useTimeStart = null
|
|
|
+ this.searchData.useTimeEnd = null
|
|
|
+ this.searchData.customPhone = null
|
|
|
+ this.searchData.sequence = null
|
|
|
+ this.$refs.table.refresh(true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .gift-card-wrap{
|
|
|
+ .gift-card-search{
|
|
|
+ .ant-form-inline .ant-form-item{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ // 搜索框的下间距
|
|
|
+ .ant-form-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .handle-btn{
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ .serach-btn{
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .addBtn {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .blue {
|
|
|
+ color: #1890fe;
|
|
|
+ }
|
|
|
+ .green {
|
|
|
+ color: #16b50e;
|
|
|
+ }
|
|
|
+ .red {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|