401 lines
11 KiB
Vue
401 lines
11 KiB
Vue
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue';
|
|
|
|
import { Page } from '@vben/common-ui';
|
|
import { useAccessStore } from '@vben/stores';
|
|
|
|
import type { LegacyProductConfigItem } from '#/api/legacy/app-system';
|
|
import {
|
|
addProductConfig,
|
|
listProductConfigs,
|
|
updateProductConfig,
|
|
} from '#/api/legacy/app-system';
|
|
import { regionConfigTable } from '#/api/legacy/system';
|
|
import InlineFilterField from '#/views/_shared/inline-filter-field.vue';
|
|
import InlineFilterToolbar from '#/views/_shared/inline-filter-toolbar.vue';
|
|
import {
|
|
PLATFORM_ORIGINS_V2,
|
|
PRODUCT_SHOWCASE_OPTIONS,
|
|
formatDate,
|
|
getAllowedSysOrigins,
|
|
} from '#/views/system/shared';
|
|
|
|
import {
|
|
Button,
|
|
Card,
|
|
Modal,
|
|
Select,
|
|
Table,
|
|
message,
|
|
} from 'antdv-next';
|
|
|
|
defineOptions({ name: 'AppSystemProductConfigV2' });
|
|
|
|
const accessStore = useAccessStore();
|
|
|
|
const loading = ref(false);
|
|
const regionLoading = ref(false);
|
|
const submitLoading = ref(false);
|
|
const formOpen = ref(false);
|
|
const list = ref<LegacyProductConfigItem[]>([]);
|
|
const regions = ref<Array<Record<string, any>>>([]);
|
|
const modalTitle = ref('新增内购产品');
|
|
|
|
const sysOriginOptions = getAllowedSysOrigins(accessStore.accessCodes || []);
|
|
|
|
const query = reactive({
|
|
platform: 'AppStore',
|
|
region: '',
|
|
showcase: true,
|
|
sysOrigin: sysOriginOptions[0]?.value ?? 'LIKEI',
|
|
});
|
|
|
|
const form = reactive<Record<string, any>>({
|
|
description: '',
|
|
id: '',
|
|
obtainCandy: '',
|
|
platform: '',
|
|
productPackage: '',
|
|
regionList: [],
|
|
rewardCandy: '',
|
|
showcase: '',
|
|
sort: '',
|
|
sysOrigin: '',
|
|
unitPrice: '',
|
|
});
|
|
|
|
const columns = [
|
|
{ dataIndex: 'sysOrigin', key: 'sysOrigin', title: '系统', width: 100 },
|
|
{ dataIndex: 'productPackage', key: 'productPackage', title: '包名', width: 260 },
|
|
{ dataIndex: 'unitPrice', key: 'unitPrice', title: '产品单价', width: 120 },
|
|
{ dataIndex: 'obtainCandy', key: 'obtainCandy', title: '获得糖果数量', width: 140 },
|
|
{ dataIndex: 'rewardCandy', key: 'rewardCandy', title: '奖励糖果', width: 120 },
|
|
{ dataIndex: 'platform', key: 'platform', title: '平台', width: 120 },
|
|
{ dataIndex: 'regionNameStr', key: 'regionNameStr', title: '区域', width: 180 },
|
|
{ dataIndex: 'description', key: 'description', title: '描述', width: 180 },
|
|
{ dataIndex: 'sort', key: 'sort', title: '序号', width: 100 },
|
|
{ dataIndex: 'createTime', key: 'createTime', title: '创建时间', width: 180 },
|
|
{ dataIndex: 'actions', key: 'actions', title: '操作', width: 100 },
|
|
];
|
|
|
|
function createFormState() {
|
|
return {
|
|
description: '',
|
|
id: '',
|
|
obtainCandy: '',
|
|
platform: '',
|
|
productPackage: '',
|
|
regionList: [],
|
|
rewardCandy: '',
|
|
showcase: '',
|
|
sort: '',
|
|
sysOrigin: '',
|
|
unitPrice: '',
|
|
};
|
|
}
|
|
|
|
function resetForm() {
|
|
Object.assign(form, createFormState());
|
|
}
|
|
|
|
async function loadRegions() {
|
|
regionLoading.value = true;
|
|
try {
|
|
regions.value = await regionConfigTable({ sysOrigin: query.sysOrigin });
|
|
} finally {
|
|
regionLoading.value = false;
|
|
}
|
|
}
|
|
|
|
async function loadData() {
|
|
loading.value = true;
|
|
try {
|
|
list.value = await listProductConfigs({ ...query });
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
function handleSearch() {
|
|
loadData();
|
|
}
|
|
|
|
function handleSysOriginChange() {
|
|
query.region = '';
|
|
loadRegions();
|
|
loadData();
|
|
}
|
|
|
|
function openCreate() {
|
|
modalTitle.value = '新增内购产品';
|
|
resetForm();
|
|
formOpen.value = true;
|
|
}
|
|
|
|
function openUpdate(record: LegacyProductConfigItem) {
|
|
modalTitle.value = '修改内购产品';
|
|
resetForm();
|
|
form.description = record.description ?? '';
|
|
form.id = record.id ?? '';
|
|
form.obtainCandy = record.obtainCandy ?? '';
|
|
form.platform = record.platform ?? '';
|
|
form.productPackage = record.productPackage ?? '';
|
|
form.regionList = Array.isArray(record.regionList) ? [...record.regionList] : [];
|
|
form.rewardCandy = record.rewardCandy ?? '';
|
|
form.showcase = record.showcase ?? true;
|
|
form.sort = record.sort ?? '';
|
|
form.sysOrigin = record.sysOrigin ?? '';
|
|
form.unitPrice = record.unitPrice ?? '';
|
|
formOpen.value = true;
|
|
}
|
|
|
|
function validateForm() {
|
|
if (!form.platform) {
|
|
message.warning('请选择支付平台');
|
|
return false;
|
|
}
|
|
if (!Array.isArray(form.regionList) || form.regionList.length === 0) {
|
|
message.warning('请选择区域');
|
|
return false;
|
|
}
|
|
if (form.showcase === '' || form.showcase === null || form.showcase === undefined) {
|
|
message.warning('请选择状态');
|
|
return false;
|
|
}
|
|
if (!String(form.productPackage || '').trim()) {
|
|
message.warning('请输入包名');
|
|
return false;
|
|
}
|
|
if (!String(form.unitPrice || '').trim()) {
|
|
message.warning('请输入单价');
|
|
return false;
|
|
}
|
|
if (!String(form.obtainCandy || '').trim()) {
|
|
message.warning('请输入获得糖果数');
|
|
return false;
|
|
}
|
|
if (!String(form.sort || '').trim()) {
|
|
message.warning('请输入序号');
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
async function handleSubmit() {
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
submitLoading.value = true;
|
|
try {
|
|
const payload = {
|
|
...form,
|
|
description: String(form.description || '').trim(),
|
|
obtainCandy: form.obtainCandy,
|
|
productPackage: String(form.productPackage || '').trim(),
|
|
rewardCandy: form.rewardCandy,
|
|
sort: form.sort,
|
|
sysOrigin: query.sysOrigin,
|
|
unitPrice: form.unitPrice,
|
|
};
|
|
if (!form.id) {
|
|
await addProductConfig(payload);
|
|
} else {
|
|
await updateProductConfig(payload);
|
|
}
|
|
message.success('保存成功');
|
|
formOpen.value = false;
|
|
resetForm();
|
|
await loadData();
|
|
} finally {
|
|
submitLoading.value = false;
|
|
}
|
|
}
|
|
|
|
loadRegions();
|
|
loadData();
|
|
</script>
|
|
|
|
<template>
|
|
<Page title="内购产品配置V2">
|
|
<Card>
|
|
<InlineFilterToolbar class="toolbar">
|
|
<InlineFilterField label="系统">
|
|
<SysOriginSelect
|
|
v-model:value="query.sysOrigin"
|
|
style="width: 140px"
|
|
@change="handleSysOriginChange"
|
|
|
|
:options="sysOriginOptions"
|
|
></SysOriginSelect>
|
|
</InlineFilterField>
|
|
<InlineFilterField label="平台">
|
|
<Select
|
|
v-model:value="query.platform"
|
|
option-label-prop="label"
|
|
style="width: 140px"
|
|
@change="handleSearch"
|
|
|
|
:options="PLATFORM_ORIGINS_V2.map((item) => ({ label: `${item.name}`, value: item.value as any }))"
|
|
/>
|
|
</InlineFilterField>
|
|
<InlineFilterField label="状态">
|
|
<Select
|
|
v-model:value="query.showcase"
|
|
option-label-prop="label"
|
|
style="width: 140px"
|
|
@change="handleSearch"
|
|
|
|
:options="PRODUCT_SHOWCASE_OPTIONS.map((item) => ({ label: `${item.name}`, value: item.value as any }))"
|
|
/>
|
|
</InlineFilterField>
|
|
<InlineFilterField label="区域">
|
|
<Select
|
|
v-model:value="query.region"
|
|
:loading="regionLoading"
|
|
allow-clear
|
|
option-label-prop="label"
|
|
placeholder="区域"
|
|
style="width: 160px"
|
|
@change="handleSearch"
|
|
|
|
:options="regions.map((item) => ({ label: `${item.regionName}`, value: item.id as any }))"
|
|
/>
|
|
</InlineFilterField>
|
|
<Button :loading="loading" type="primary" @click="handleSearch">
|
|
搜索
|
|
</Button>
|
|
<Button @click="openCreate">添加</Button>
|
|
</InlineFilterToolbar>
|
|
|
|
<Table
|
|
:columns="columns"
|
|
:data-source="list"
|
|
:loading="loading"
|
|
:pagination="false"
|
|
row-key="id"
|
|
:scroll="{ x: 1540 }"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'createTime'">
|
|
{{ formatDate(record.createTime) }}
|
|
</template>
|
|
<template v-else-if="column.key === 'actions'">
|
|
<Button size="small" type="link" @click="openUpdate(record)">
|
|
修改
|
|
</Button>
|
|
</template>
|
|
</template>
|
|
</Table>
|
|
</Card>
|
|
|
|
<Modal
|
|
:confirm-loading="submitLoading"
|
|
:open="formOpen"
|
|
destroy-on-close
|
|
ok-text="保存"
|
|
:title="modalTitle"
|
|
width="720"
|
|
@cancel="formOpen = false"
|
|
@ok="handleSubmit"
|
|
>
|
|
<div class="form-grid">
|
|
<div class="form-item">
|
|
<label class="form-label">平台</label>
|
|
<Select
|
|
option-label-prop="label"
|
|
v-model:value="form.platform"
|
|
:options="PLATFORM_ORIGINS_V2.map((item) => ({ label: item.name, value: item.value }))"
|
|
placeholder="支付平台"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label class="form-label">区域</label>
|
|
<Select
|
|
option-label-prop="label"
|
|
v-model:value="form.regionList"
|
|
:loading="regionLoading"
|
|
:options="regions.map((item) => ({ label: item.regionName, value: item.id }))"
|
|
mode="multiple"
|
|
placeholder="请选择区域"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label class="form-label">状态</label>
|
|
<Select
|
|
option-label-prop="label"
|
|
v-model:value="form.showcase"
|
|
:options="PRODUCT_SHOWCASE_OPTIONS.map((item) => ({ label: item.name, value: item.value as any }))"
|
|
placeholder="状态"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label class="form-label">包名</label>
|
|
<input v-model="form.productPackage" class="input-control" placeholder="请输入包名">
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label class="form-label">产品单价</label>
|
|
<input v-model="form.unitPrice" class="input-control" placeholder="请输入单价" type="number">
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label class="form-label">获得糖果数量</label>
|
|
<input v-model="form.obtainCandy" class="input-control" placeholder="请输入获得糖果数量">
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label class="form-label">奖励糖果</label>
|
|
<input v-model="form.rewardCandy" class="input-control" placeholder="请输入奖励糖果">
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label class="form-label">描述</label>
|
|
<input v-model="form.description" class="input-control" placeholder="请输入描述">
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label class="form-label">顺序</label>
|
|
<input
|
|
v-model="form.sort"
|
|
class="input-control"
|
|
placeholder="数字越小越靠前(升序排列)"
|
|
type="number"
|
|
>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</Page>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.toolbar {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.form-item {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.form-label {
|
|
color: #334155;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.input-control {
|
|
background: #fff;
|
|
border: 1px solid #d9e0ea;
|
|
border-radius: 8px;
|
|
min-height: 32px;
|
|
padding: 0 11px;
|
|
}
|
|
</style>
|