|
@@ -4,90 +4,57 @@
|
|
@onSubmit="onSubmit">
|
|
@onSubmit="onSubmit">
|
|
<template v-slot:btn>
|
|
<template v-slot:btn>
|
|
<div style="display: flex; justify-content: flex-end">
|
|
<div style="display: flex; justify-content: flex-end">
|
|
- <el-button type="primary" @click="add"
|
|
|
|
- ><el-icon><plus /></el-icon> 添加</el-button>
|
|
|
|
|
|
+ <!-- <el-button type="primary" @click="add"
|
|
|
|
+ ><el-icon><plus /></el-icon> 添加</el-button> -->
|
|
<el-button type="danger" @click="batchDelete"><el-icon>
|
|
<el-button type="danger" @click="batchDelete"><el-icon>
|
|
<delete />
|
|
<delete />
|
|
- </el-icon>删除</el-button>
|
|
|
|
|
|
+ </el-icon>批量删除</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<template v-slot:codeType="scope">{{getStateLabel(scope.row.codeType)}}</template>
|
|
<template v-slot:codeType="scope">{{getStateLabel(scope.row.codeType)}}</template>
|
|
|
|
+ <template v-slot:giftItems="scope">{{getItemsLabel(scope.row.giftItems) }}</template>
|
|
<template v-slot:operation="scope">
|
|
<template v-slot:operation="scope">
|
|
- <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
|
|
|
|
|
|
+ <!-- <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
|
|
编辑
|
|
编辑
|
|
- </el-button>
|
|
|
|
|
|
+ </el-button> -->
|
|
<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
|
|
<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
|
|
删除
|
|
删除
|
|
</el-button>
|
|
</el-button>
|
|
|
|
+ <el-button @click="groupDelete(scope.row)" type="danger" size="small" icon="Delete">
|
|
|
|
+ 分组删除
|
|
|
|
+ </el-button>
|
|
</template>
|
|
</template>
|
|
</PropTable>
|
|
</PropTable>
|
|
-
|
|
|
|
- <el-dialog v-model="dialogVisible" :title='title' width="50%">
|
|
|
|
- <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
|
|
|
|
- :size="formSize">
|
|
|
|
- <el-form-item label="礼包码" prop="code">
|
|
|
|
- <el-input readonly :value="ruleForm.code" />
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="礼包类型" prop="codeType">
|
|
|
|
- <el-select v-model="ruleForm.codeType" placeholder="礼包类型">
|
|
|
|
- <el-option label="一次性" value="0" />
|
|
|
|
- <el-option label="通用" value="1" />
|
|
|
|
- </el-select>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="礼包道具" prop="itemInfo">
|
|
|
|
- <el-input v-model="ruleForm.itemInfo" />
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="礼包生效时间" required>
|
|
|
|
- <el-col :span="11">
|
|
|
|
- <el-form-item prop="validTime">
|
|
|
|
- <el-date-picker
|
|
|
|
- v-model="ruleForm.validTime"
|
|
|
|
- type="datetime"
|
|
|
|
- placeholder="选择开始时间"
|
|
|
|
- style="width: 100%"
|
|
|
|
- />
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col class="text-center" :span="2" style="text-align: center">
|
|
|
|
- <span class="text-gray-500">-</span>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :span="11">
|
|
|
|
- <el-form-item prop="invalidTime">
|
|
|
|
- <el-date-picker v-model="ruleForm.invalidTime" type="datetime" placeholder="选择结束时间" style="width: 100%" />
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-col>
|
|
|
|
- </el-form-item>
|
|
|
|
-
|
|
|
|
- </el-form>
|
|
|
|
- <template #footer>
|
|
|
|
- <span class="dialog-footer">
|
|
|
|
- <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
|
- <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
|
|
|
|
- </span>
|
|
|
|
- </template>
|
|
|
|
- </el-dialog>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script lang="ts" setup name="comprehensive">
|
|
<script lang="ts" setup name="comprehensive">
|
|
-import { ref, reactive, onMounted, nextTick } from 'vue'
|
|
|
|
-import * as dayjs from 'dayjs'
|
|
|
|
|
|
+import { ref, reactive, onMounted, nextTick, onBeforeMount } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
-import type { FormInstance } from 'element-plus'
|
|
|
|
import PropTable from '@/components/Table/PropTable/index.vue'
|
|
import PropTable from '@/components/Table/PropTable/index.vue'
|
|
|
|
+import giftCodeApi from '@/api/giftCode'
|
|
|
|
|
|
const loading = ref(true)
|
|
const loading = ref(true)
|
|
const appContainer = ref(null)
|
|
const appContainer = ref(null)
|
|
-const data = []
|
|
|
|
-for (let i = 0; i < 100; i++) {
|
|
|
|
- data.push({
|
|
|
|
- code: 'Code_' + i,
|
|
|
|
- codeType: i % 2,
|
|
|
|
- itemInfo:'1001-100,1002-200',
|
|
|
|
- validTime: '2023-8-18 10:00:00',
|
|
|
|
- invalidTime: '2023-9-18 10:00:00',
|
|
|
|
- usePlayer: '1000001',
|
|
|
|
|
|
+
|
|
|
|
+const data = ref([])
|
|
|
|
+let currPageNum = 1;
|
|
|
|
+const pageSize = 1000;
|
|
|
|
+onBeforeMount(() => {
|
|
|
|
+ loadGiftCodeInfo()
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+const loadGiftCodeInfo = () => {
|
|
|
|
+ let queryParams = reactive({
|
|
|
|
+ pageNum: currPageNum,
|
|
|
|
+ pageSize: pageSize,
|
|
|
|
+ condition: {"codeType": 1}
|
|
|
|
+ })
|
|
|
|
+ giftCodeApi.query(queryParams).then(res => {
|
|
|
|
+ data.value = res.data.result;
|
|
|
|
+ console.log(data)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
+
|
|
const column = [
|
|
const column = [
|
|
{ type: 'selection', width: 60, fixed: 'left' },
|
|
{ type: 'selection', width: 60, fixed: 'left' },
|
|
{ name: 'code', label: '礼包码', inSearch: true, valueType: 'input', width: 80 },
|
|
{ name: 'code', label: '礼包码', inSearch: true, valueType: 'input', width: 80 },
|
|
@@ -108,10 +75,11 @@ const column = [
|
|
],
|
|
],
|
|
valueType: 'select',
|
|
valueType: 'select',
|
|
},
|
|
},
|
|
- { name: 'itemInfo', label: '礼包道具'},
|
|
|
|
|
|
+ { name: 'codeGroup', label: '礼包分组', inSearch: true, valueType: 'input'},
|
|
|
|
+ { name: 'giftItems', slot: true, label: '礼包道具'},
|
|
{ name: 'validTime', label: '礼包生效时间'},
|
|
{ name: 'validTime', label: '礼包生效时间'},
|
|
{ name: 'invalidTime', label: '礼包失效时间'},
|
|
{ name: 'invalidTime', label: '礼包失效时间'},
|
|
- { name: 'usePlayer', label: '使用的玩家', inSearch: true, valueType: 'input'},
|
|
|
|
|
|
+ { name: 'usePlayer', label: '使用的玩家'},
|
|
{ name: 'operation', slot: true, fixed: 'right', width: 200, label: '操作' },
|
|
{ name: 'operation', slot: true, fixed: 'right', width: 200, label: '操作' },
|
|
]
|
|
]
|
|
|
|
|
|
@@ -123,82 +91,51 @@ const getStateLabel = (val) => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-const list = ref(data)
|
|
|
|
-
|
|
|
|
-const formSize = ref('default')
|
|
|
|
-const ruleFormRef = ref<FormInstance>()
|
|
|
|
-const ruleForm = reactive({
|
|
|
|
- weight: 0,
|
|
|
|
- state: null,
|
|
|
|
- openTime: null
|
|
|
|
-})
|
|
|
|
-
|
|
|
|
-const rules = reactive({
|
|
|
|
- code: [
|
|
|
|
- {
|
|
|
|
- required: true,
|
|
|
|
- message: '请输入礼包码',
|
|
|
|
- trigger: 'change',
|
|
|
|
- }
|
|
|
|
- ],
|
|
|
|
- codeType: [
|
|
|
|
- {
|
|
|
|
- required: true,
|
|
|
|
- message: '请选择礼包类型',
|
|
|
|
- trigger: 'change',
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- itemInfo: [
|
|
|
|
- {
|
|
|
|
- required: true,
|
|
|
|
- message: '请输入礼包道具',
|
|
|
|
- trigger: 'change',
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- validTime : [
|
|
|
|
- {
|
|
|
|
- required: true,
|
|
|
|
- type: 'date',
|
|
|
|
- message: '请选择礼包生效时间',
|
|
|
|
- trigger: 'change',
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- invalidTime: [
|
|
|
|
- {
|
|
|
|
- required: true,
|
|
|
|
- type: 'date',
|
|
|
|
- message: '请选择礼包失效时间',
|
|
|
|
- trigger: 'change',
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
-})
|
|
|
|
|
|
+const getItemsLabel = (val) => {
|
|
|
|
+ console.log("val:", val)
|
|
|
|
+ if (val != null) {
|
|
|
|
+ let label = ""
|
|
|
|
+ val.forEach((v, i) => {
|
|
|
|
+ label += v["itId"] + '-' + v["itCnt"]
|
|
|
|
+ if (i < val.length - 1) {
|
|
|
|
+ label += ","
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ return label;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
|
|
-const dialogVisible = ref(false)
|
|
|
|
-const rowObj = ref({})
|
|
|
|
-const selectObj = ref([])
|
|
|
|
-const title = ref('编辑')
|
|
|
|
|
|
+const list = ref(data)
|
|
|
|
|
|
-const handleClose = async (done: () => void) => {
|
|
|
|
- await ruleFormRef.value.validate((valid, fields) => {
|
|
|
|
- if (valid) {
|
|
|
|
- list.value.forEach((item) => {
|
|
|
|
- if (item.id === rowObj.value.id) {
|
|
|
|
- item.weight = ruleForm.weight
|
|
|
|
- item.state = ruleForm.state
|
|
|
|
- item.openTime = ruleForm.openTime
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- dialogVisible.value = false
|
|
|
|
- console.log('submit!', ruleForm.weight, ruleForm.state)
|
|
|
|
- } else {
|
|
|
|
- console.log('error submit!', fields)
|
|
|
|
- }
|
|
|
|
|
|
+const del = (row) => {
|
|
|
|
+ console.log('row==', row)
|
|
|
|
+ ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ type: 'warning',
|
|
|
|
+ draggable: true,
|
|
})
|
|
})
|
|
|
|
+ .then(() => {
|
|
|
|
+ let deleteParams = reactive({
|
|
|
|
+ code: row.code
|
|
|
|
+ })
|
|
|
|
+ giftCodeApi.delete(deleteParams).then(res => {
|
|
|
|
+ // loadGiftCodeInfo()
|
|
|
|
+ list.value = list.value.filter((item) => item.id !== row.id)
|
|
|
|
+ ElMessage.success('删除成功')
|
|
|
|
+ })
|
|
|
|
+ loading.value = true
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ loading.value = false
|
|
|
|
+ }, 500)
|
|
|
|
+ })
|
|
|
|
+ .catch(() => { })
|
|
}
|
|
}
|
|
|
|
|
|
-const add = () => {
|
|
|
|
- title.value = '新增'
|
|
|
|
- dialogVisible.value = true
|
|
|
|
|
|
+const selectObj = ref([])
|
|
|
|
+
|
|
|
|
+const selectionChange = (val) => {
|
|
|
|
+ selectObj.value = val
|
|
}
|
|
}
|
|
|
|
|
|
const batchDelete = () => {
|
|
const batchDelete = () => {
|
|
@@ -212,35 +149,39 @@ const batchDelete = () => {
|
|
draggable: true,
|
|
draggable: true,
|
|
})
|
|
})
|
|
.then(() => {
|
|
.then(() => {
|
|
- ElMessage.success('模拟删除成功')
|
|
|
|
|
|
+ let giftCodeIds = reactive([])
|
|
|
|
+ for (let value of selectObj.value) {
|
|
|
|
+ giftCodeIds.push(value.code)
|
|
|
|
+ }
|
|
|
|
+ let deleteParams = reactive({
|
|
|
|
+ codes: giftCodeIds
|
|
|
|
+ })
|
|
|
|
+ giftCodeApi.deleteBatch(deleteParams).then(res => {
|
|
|
|
+ // loadGiftCodeInfo()
|
|
|
|
+ list.value = list.value.filter((item) => giftCodeIds.includes(item.id))
|
|
|
|
+ ElMessage.success('批量删除成功')
|
|
|
|
+ })
|
|
|
|
+
|
|
list.value = list.value.concat([])
|
|
list.value = list.value.concat([])
|
|
})
|
|
})
|
|
.catch(() => { })
|
|
.catch(() => { })
|
|
}
|
|
}
|
|
-const selectionChange = (val) => {
|
|
|
|
- selectObj.value = val
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-const edit = (row) => {
|
|
|
|
- rowObj.value = row
|
|
|
|
- dialogVisible.value = true
|
|
|
|
- ruleForm.id = row.id
|
|
|
|
- ruleForm.weight = row.weight
|
|
|
|
- ruleForm.state = row.state
|
|
|
|
- ruleForm.openTime = row.openTime
|
|
|
|
-}
|
|
|
|
|
|
|
|
-const del = (row) => {
|
|
|
|
- console.log('row==', row)
|
|
|
|
- ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
|
|
|
|
|
|
+const groupDelete = (row) => {
|
|
|
|
+ ElMessageBox.confirm('你确定要删除整个分组的礼包码吗?', '温馨提示', {
|
|
confirmButtonText: '确定',
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
type: 'warning',
|
|
draggable: true,
|
|
draggable: true,
|
|
})
|
|
})
|
|
- .then(() => {
|
|
|
|
- list.value = list.value.filter((item) => item.id !== row.id)
|
|
|
|
- ElMessage.success('删除成功')
|
|
|
|
|
|
+ .then(() => {
|
|
|
|
+ let deleteParams = reactive({
|
|
|
|
+ codeGroup: row.codeGroup
|
|
|
|
+ })
|
|
|
|
+ giftCodeApi.deleteGroup(deleteParams).then(res => {
|
|
|
|
+ loadGiftCodeInfo()
|
|
|
|
+ ElMessage.success('分组删除成功')
|
|
|
|
+ })
|
|
loading.value = true
|
|
loading.value = true
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
loading.value = false
|
|
@@ -258,27 +199,25 @@ const reset = () => {
|
|
}
|
|
}
|
|
|
|
|
|
const onSubmit = (val) => {
|
|
const onSubmit = (val) => {
|
|
- console.log('val===', val)
|
|
|
|
- ElMessage.success('触发查询方法')
|
|
|
|
- loading.value = true
|
|
|
|
- setTimeout(() => {
|
|
|
|
- loading.value = false
|
|
|
|
- }, 500)
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-const onUpdate = (val) => {
|
|
|
|
- console.log('val===', val)
|
|
|
|
- ElMessage.success('触发修改方法')
|
|
|
|
|
|
+ if ((val.code == null || val.code == "") && val.codeType == null && (val.codeGroup == null || val.codeGroup == "")) {
|
|
|
|
+ ElMessage.warning('请输入查询条件')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ let queryParams = reactive({
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: pageSize,
|
|
|
|
+ condition: val
|
|
|
|
+ })
|
|
|
|
+ giftCodeApi.query(queryParams).then(res => {
|
|
|
|
+ data.value = res.data.result;
|
|
|
|
+ console.log(data.value)
|
|
|
|
+ })
|
|
loading.value = true
|
|
loading.value = true
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
loading.value = false
|
|
}, 500)
|
|
}, 500)
|
|
}
|
|
}
|
|
|
|
|
|
-const getHeight = () => {
|
|
|
|
-
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
// let data = appContainer.value.
|
|
// let data = appContainer.value.
|
|
@@ -290,9 +229,6 @@ onMounted(() => {
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
-.edit-input {
|
|
|
|
- padding-right: 100px;
|
|
|
|
-}
|
|
|
|
|
|
|
|
.app-container {
|
|
.app-container {
|
|
flex: 1;
|
|
flex: 1;
|
|
@@ -302,9 +238,4 @@ onMounted(() => {
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
|
|
-.cancel-btn {
|
|
|
|
- position: absolute;
|
|
|
|
- right: 15px;
|
|
|
|
- top: 10px;
|
|
|
|
-}
|
|
|
|
</style>
|
|
</style>
|