feat: add web application
This commit is contained in:
richjohnrambo
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="show"
|
||||
preset="card"
|
||||
:title="form.id ? '编辑商品' : '添加商品'"
|
||||
class="edit-modal"
|
||||
>
|
||||
<n-spin :show="loading">
|
||||
<n-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-placement="left"
|
||||
label-width="90"
|
||||
>
|
||||
<n-form-item label="商品名称" path="name">
|
||||
<n-input v-model:value="form.name" />
|
||||
</n-form-item>
|
||||
<n-form-item label="分类" path="categoryId">
|
||||
<n-select
|
||||
v-model:value="form.categoryId"
|
||||
:options="dict.getOptionUnRef('productCategoryOption')"
|
||||
placeholder="请选择"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="店铺名称" path="shopName">
|
||||
<n-input v-model:value="form.shopName" />
|
||||
</n-form-item>
|
||||
<n-form-item label="商品单价" path="price">
|
||||
<n-input v-model:value="form.price" />
|
||||
</n-form-item>
|
||||
<n-form-item label="展示图片" path="coverUrl">
|
||||
<UploadImage v-model:value="form.coverUrl" :max-number="1" />
|
||||
</n-form-item>
|
||||
<n-form-item label="商品详情">
|
||||
<Editor id="product-editor" v-model:value="form.detailHtml" class="editor" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-spin>
|
||||
<template #action>
|
||||
<n-space justify="end">
|
||||
<n-button type="primary" :loading="saving" @click="save">确定</n-button>
|
||||
<n-button @click="show = false">取消</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import Editor from '@/components/Editor/editor.vue';
|
||||
import UploadImage from '@/components/Upload/uploadImage.vue';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { ProductEdit, ProductView } from '@/api/productTask';
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
const message = useMessage();
|
||||
const dict = useDictStore();
|
||||
const show = ref(false);
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const formRef = ref();
|
||||
|
||||
const init = () => ({
|
||||
id: 0,
|
||||
version: 0,
|
||||
categoryId: null,
|
||||
productType: 1,
|
||||
paymentType: 'balance',
|
||||
name: '',
|
||||
shopName: '',
|
||||
price: '0.00',
|
||||
currency: 'CNY',
|
||||
coverAttachmentId: 0,
|
||||
coverUrl: '',
|
||||
detailHtml: '',
|
||||
isRecommended: 2,
|
||||
sort: 0,
|
||||
remark: '',
|
||||
startAt: null,
|
||||
endAt: null,
|
||||
});
|
||||
|
||||
const form = reactive<any>(init());
|
||||
const rules = {
|
||||
name: { required: true, message: '请输入商品名称' },
|
||||
categoryId: { required: true, type: 'number', message: '请选择分类' },
|
||||
shopName: { required: true, message: '请输入店铺名称' },
|
||||
price: { required: true, message: '请输入商品单价' },
|
||||
coverUrl: { required: true, message: '请上传展示图片' },
|
||||
};
|
||||
|
||||
async function open(row?) {
|
||||
Object.assign(form, init());
|
||||
show.value = true;
|
||||
if (!row) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const result: any = await ProductView({ id: row.id });
|
||||
Object.assign(form, result);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
await formRef.value?.validate();
|
||||
saving.value = true;
|
||||
try {
|
||||
await ProductEdit(form);
|
||||
message.success('商品已保存');
|
||||
show.value = false;
|
||||
emit('reload');
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.edit-modal {
|
||||
width: min(760px, 94vw) !important;
|
||||
}
|
||||
|
||||
.edit-modal .editor {
|
||||
height: 180px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicForm ref="searchRef" @register="register" @submit="reload" @keyup.enter="reload" />
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
openChecked
|
||||
:columns="columns"
|
||||
:request="loadTable"
|
||||
:row-key="(row) => row.id"
|
||||
:action-column="actionColumn"
|
||||
:scroll-x="914"
|
||||
:pagination="pagination"
|
||||
:checked-row-keys="checkedIds"
|
||||
@update:checked-row-keys="onCheckedRow"
|
||||
>
|
||||
<template #tableTitle>
|
||||
<n-button
|
||||
v-if="hasPermission(['/product/delete'])"
|
||||
type="error"
|
||||
class="min-left-space"
|
||||
@click="batchRemove"
|
||||
>
|
||||
删除
|
||||
</n-button>
|
||||
<n-button
|
||||
v-if="hasPermission(['/product/edit'])"
|
||||
type="primary"
|
||||
class="min-left-space"
|
||||
@click="editRef.open()"
|
||||
>
|
||||
添加
|
||||
</n-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
<Edit ref="editRef" @reload="reload" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { h, onMounted, reactive, ref } from 'vue';
|
||||
import { useDialog, useMessage } from 'naive-ui';
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
import { BasicTable, TableAction } from '@/components/Table';
|
||||
import { usePermission } from '@/hooks/web/usePermission';
|
||||
import { ProductDelete, ProductList, ProductRecommend } from '@/api/productTask';
|
||||
import { columns, loadOptions, schemas } from './model';
|
||||
import Edit from './edit.vue';
|
||||
|
||||
const { hasPermission } = usePermission();
|
||||
const dialog = useDialog();
|
||||
const message = useMessage();
|
||||
const searchRef = ref();
|
||||
const tableRef = ref();
|
||||
const editRef = ref();
|
||||
const checkedIds = ref<number[]>([]);
|
||||
const pagination = { pageSize: 30, pageSizes: [10, 20, 30, 40, 50, 60, 70, 80, 90] };
|
||||
|
||||
const [register] = useForm({
|
||||
gridProps: { cols: 3 },
|
||||
labelWidth: 80,
|
||||
schemas,
|
||||
showResetButton: false,
|
||||
showAdvancedButton: false,
|
||||
});
|
||||
|
||||
const loadTable = (params) => ProductList({ ...searchRef.value?.formModel, ...params });
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 180,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render: (row) =>
|
||||
h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
auth: ['/product/edit'],
|
||||
onClick: () => editRef.value.open(row),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
auth: ['/product/delete'],
|
||||
onClick: () => remove(row),
|
||||
},
|
||||
{
|
||||
label: row.isRecommended === 1 ? '不推荐' : '推荐',
|
||||
auth: ['/product/recommend'],
|
||||
onClick: () => recommend(row),
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
|
||||
function onCheckedRow(rowKeys: number[]) {
|
||||
checkedIds.value = rowKeys;
|
||||
}
|
||||
|
||||
function reload() {
|
||||
tableRef.value?.reload();
|
||||
}
|
||||
|
||||
async function recommend(row) {
|
||||
const next = row.isRecommended === 1 ? 2 : 1;
|
||||
await ProductRecommend({ id: row.id, version: row.version, isRecommended: next });
|
||||
message.success(next === 1 ? '推荐成功' : '已取消推荐');
|
||||
reload();
|
||||
}
|
||||
|
||||
function remove(row) {
|
||||
dialog.warning({
|
||||
title: '警告',
|
||||
content: row.referenced ? '该商品已被订单引用，只允许下架，不能删除。' : '你确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
positiveButtonProps: { disabled: row.referenced },
|
||||
onPositiveClick: async () => {
|
||||
await ProductDelete({ id: row.id });
|
||||
message.success('删除成功');
|
||||
reload();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function batchRemove() {
|
||||
if (checkedIds.value.length < 1) {
|
||||
message.error('请至少选择一项要删除的数据');
|
||||
return;
|
||||
}
|
||||
dialog.warning({
|
||||
title: '警告',
|
||||
content: '你确定要删除选中的商品？已被订单引用的商品不会被删除。',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
let successCount = 0;
|
||||
let failedCount = 0;
|
||||
for (const id of checkedIds.value) {
|
||||
try {
|
||||
await ProductDelete({ id });
|
||||
successCount++;
|
||||
} catch (_error) {
|
||||
failedCount++;
|
||||
}
|
||||
}
|
||||
checkedIds.value = [];
|
||||
if (successCount > 0) message.success(`成功删除 ${successCount} 个商品`);
|
||||
if (failedCount > 0) message.warning(`${failedCount} 个商品未删除，请检查是否已被订单引用`);
|
||||
reload();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(loadOptions);
|
||||
</script>
|
||||
@@ -0,0 +1,54 @@
|
||||
import { computed, h, ref } from 'vue';
|
||||
import { NImage } from 'naive-ui';
|
||||
import { FormSchema } from '@/components/Form';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
|
||||
const dict = useDictStore();
|
||||
|
||||
export const schemas = ref<FormSchema[]>([
|
||||
{
|
||||
field: 'name',
|
||||
component: 'NInput',
|
||||
label: '商品名称',
|
||||
componentProps: { clearable: true },
|
||||
},
|
||||
{
|
||||
field: 'categoryId',
|
||||
component: 'NSelect',
|
||||
label: '商品分类',
|
||||
componentProps: {
|
||||
options: computed(() => dict.getOptionUnRef('productCategoryOption')),
|
||||
clearable: true,
|
||||
placeholder: '请选择',
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const columns = [
|
||||
{ title: 'ID', key: 'id', width: 50 },
|
||||
{
|
||||
title: '图片',
|
||||
key: 'coverUrl',
|
||||
width: 90,
|
||||
render: (row) =>
|
||||
h(NImage, {
|
||||
src: row.coverUrl,
|
||||
width: 80,
|
||||
height: 70,
|
||||
objectFit: 'cover',
|
||||
lazy: true,
|
||||
}),
|
||||
},
|
||||
{ title: '名称', key: 'name', width: 145, ellipsis: { tooltip: true } },
|
||||
{ title: '商品价格', key: 'price', width: 90 },
|
||||
{ title: '店铺名称', key: 'shopName', width: 100, ellipsis: { tooltip: true } },
|
||||
{ title: '创建时间', key: 'createdAt', width: 125 },
|
||||
{
|
||||
title: '是否推荐',
|
||||
key: 'isRecommended',
|
||||
width: 90,
|
||||
render: (row) => (row.isRecommended === 1 ? '推荐' : '不推荐'),
|
||||
},
|
||||
];
|
||||
|
||||
export const loadOptions = () => dict.loadOptions(['productCategoryOption']);
|
||||
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="n-layout-page-header">
|
||||
<n-card :bordered="false" title="会员任务审核">
|
||||
通过后在同一事务内写入佣金台账；重复审核或重复幂等键不会再次发放佣金。
|
||||
</n-card>
|
||||
</div>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicForm ref="searchRef" @register="register" @submit="reload" @reset="reload" />
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="loadTable"
|
||||
:row-key="(row) => row.id"
|
||||
:action-column="actionColumn"
|
||||
:scroll-x="1500"
|
||||
/>
|
||||
</n-card>
|
||||
|
||||
<n-modal
|
||||
v-model:show="show"
|
||||
preset="card"
|
||||
:title="reviewMode ? '会员任务审核' : '会员任务详情'"
|
||||
class="review-modal"
|
||||
>
|
||||
<n-spin :show="loading">
|
||||
<n-descriptions v-if="detail.id" bordered :column="2">
|
||||
<n-descriptions-item label="任务">{{ detail.taskTitle }}</n-descriptions-item>
|
||||
<n-descriptions-item label="会员">
|
||||
{{ detail.username }} / {{ detail.mobileMask }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="佣金">
|
||||
¥{{ ((detail.commissionAmount || 0) / 100).toFixed(2) }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="成功率">
|
||||
{{ ((detail.successRate || 0) / 100).toFixed(2) }}%
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="证据说明" :span="2">
|
||||
{{ detail.evidenceText || '-' }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="证据附件" :span="2">
|
||||
<n-image-group v-if="evidenceAttachments.length">
|
||||
<n-space>
|
||||
<n-image
|
||||
v-for="(url, index) in evidenceAttachments"
|
||||
:key="`${url}-${index}`"
|
||||
:src="url"
|
||||
width="96"
|
||||
height="96"
|
||||
object-fit="cover"
|
||||
/>
|
||||
</n-space>
|
||||
</n-image-group>
|
||||
<n-empty v-else description="暂无证据附件" size="small" />
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item v-if="!reviewMode" label="审核状态">
|
||||
{{ statusLabel }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item v-if="!reviewMode" label="审核意见">
|
||||
{{ detail.reviewReason || '-' }}
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
|
||||
<template v-if="reviewMode">
|
||||
<n-alert type="warning" :show-icon="false">
|
||||
审核通过将立即发放佣金；驳回会保留本次提交证据。
|
||||
</n-alert>
|
||||
<n-form label-placement="left" label-width="100">
|
||||
<n-form-item label="审核结论">
|
||||
<n-radio-group v-model:value="form.decision" @update:value="onDecisionChange">
|
||||
<n-radio :value="1">通过并结算</n-radio>
|
||||
<n-radio :value="2">驳回</n-radio>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
<n-form-item v-if="form.decision === 2" label="标准驳回原因">
|
||||
<n-select
|
||||
v-model:value="form.reasonCode"
|
||||
:options="dict.getOptionUnRef('task_reject_reason')"
|
||||
placeholder="请选择标准驳回原因"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item :label="form.decision === 2 ? '补充说明' : '审核意见'">
|
||||
<n-input
|
||||
v-model:value="form.reasonText"
|
||||
type="textarea"
|
||||
:placeholder="form.decision === 2 ? '请输入补充说明' : '请输入审核意见'"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item v-if="form.decision === 2" label="允许重提">
|
||||
<n-radio-group v-model:value="form.allowResubmit">
|
||||
<n-radio :value="1">允许</n-radio>
|
||||
<n-radio :value="2">不允许</n-radio>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</template>
|
||||
</n-spin>
|
||||
|
||||
<template #action>
|
||||
<n-space justify="end">
|
||||
<n-button @click="show = false">{{ reviewMode ? '取消' : '关闭' }}</n-button>
|
||||
<n-button v-if="reviewMode" type="primary" :loading="saving" @click="submit">
|
||||
确认审核
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, h, onMounted, reactive, ref } from 'vue';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
import { BasicTable, TableAction } from '@/components/Table';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { SubmissionList, SubmissionReview, SubmissionView } from '@/api/productTask';
|
||||
import { columns, loadOptions, schemas } from './model';
|
||||
|
||||
const message = useMessage();
|
||||
const dict = useDictStore();
|
||||
const searchRef = ref();
|
||||
const tableRef = ref();
|
||||
const show = ref(false);
|
||||
const reviewMode = ref(false);
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const detail = reactive<any>({});
|
||||
const form = reactive<any>({});
|
||||
|
||||
const statusLabel = computed(
|
||||
() => dict.getLabel('taskSubmissionStatus', detail.submissionStatus) || '-'
|
||||
);
|
||||
const evidenceAttachments = computed<string[]>(() => {
|
||||
const value = detail.evidenceAttachmentIds;
|
||||
if (!value) return [];
|
||||
if (Array.isArray(value)) return value.map(String).filter(Boolean);
|
||||
if (typeof value === 'string') {
|
||||
try {
|
||||
const parsed = JSON.parse(value);
|
||||
return Array.isArray(parsed) ? parsed.map(String).filter(Boolean) : [value];
|
||||
} catch {
|
||||
return [value];
|
||||
}
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
const [register] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:4' },
|
||||
labelWidth: 80,
|
||||
schemas,
|
||||
});
|
||||
|
||||
const loadTable = (params) => SubmissionList({ ...searchRef.value?.formModel, ...params });
|
||||
|
||||
function reload() {
|
||||
tableRef.value?.reload();
|
||||
}
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 150,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render: (row) => {
|
||||
const pending = row.submissionStatus === 1;
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: pending ? '审核' : '详情',
|
||||
type: pending ? 'warning' : 'primary',
|
||||
auth: [pending ? '/taskSubmission/review' : '/taskSubmission/view'],
|
||||
onClick: () => open(row, pending),
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
async function open(row, pending: boolean) {
|
||||
Object.keys(detail).forEach((key) => delete detail[key]);
|
||||
reviewMode.value = pending;
|
||||
Object.assign(form, {
|
||||
id: row.id,
|
||||
decision: 1,
|
||||
reasonCode: 'evidence_checked',
|
||||
reasonText: '证据核验通过',
|
||||
allowResubmit: 2,
|
||||
idempotencyKey: `task:${row.id}:${crypto.randomUUID()}`,
|
||||
});
|
||||
show.value = true;
|
||||
loading.value = true;
|
||||
try {
|
||||
Object.assign(detail, await SubmissionView({ id: row.id }));
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (form.decision === 2 && !form.reasonCode) {
|
||||
message.warning('请选择标准驳回原因');
|
||||
return;
|
||||
}
|
||||
if (!form.reasonText?.trim()) {
|
||||
message.warning(form.decision === 2 ? '请填写补充说明' : '请填写审核意见');
|
||||
return;
|
||||
}
|
||||
if (form.decision === 1) form.reasonCode = 'evidence_checked';
|
||||
saving.value = true;
|
||||
try {
|
||||
await SubmissionReview(form);
|
||||
message.success(form.decision === 1 ? '审核通过，佣金已结算' : '任务提交已驳回');
|
||||
show.value = false;
|
||||
reload();
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onDecisionChange(decision: number) {
|
||||
form.reasonCode = decision === 2 ? '' : 'evidence_checked';
|
||||
form.reasonText = decision === 2 ? '' : '证据核验通过';
|
||||
form.allowResubmit = decision === 2 ? 1 : 2;
|
||||
}
|
||||
|
||||
onMounted(loadOptions);
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.review-modal {
|
||||
width: min(720px, 92vw) !important;
|
||||
height: 88vh;
|
||||
}
|
||||
|
||||
.review-modal .n-card-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.review-modal .n-card__action {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
import { computed, h, ref } from 'vue';
|
||||
import { NProgress, NTag } from 'naive-ui';
|
||||
import { FormSchema } from '@/components/Form';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||
const dict = useDictStore();
|
||||
export const schemas = ref<FormSchema[]>([
|
||||
{ field: 'username', component: 'NInput', label: '用户名', componentProps: { clearable: true } },
|
||||
{
|
||||
field: 'mobile',
|
||||
component: 'NInput',
|
||||
label: '手机号',
|
||||
componentProps: { placeholder: '精确查询', clearable: true },
|
||||
},
|
||||
{
|
||||
field: 'submissionStatus',
|
||||
component: 'NSelect',
|
||||
label: '状态',
|
||||
componentProps: {
|
||||
options: computed(() => dict.getOptionUnRef('taskSubmissionStatus')),
|
||||
clearable: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'createdAt',
|
||||
component: 'NDatePicker',
|
||||
label: '提交时间',
|
||||
componentProps: { type: 'datetimerange', shortcuts: defRangeShortcuts(), clearable: true },
|
||||
},
|
||||
]);
|
||||
const tag = (k, v) =>
|
||||
h(NTag, { type: dict.getType(k, v), bordered: false }, () => dict.getLabel(k, v) || '-');
|
||||
export const columns = [
|
||||
{ title: '记录ID', key: 'id', width: 90 },
|
||||
{ title: '用户名', key: 'username', width: 130 },
|
||||
{ title: '手机号', key: 'mobileMask', width: 130 },
|
||||
{ title: '任务标题', key: 'taskTitle', width: 180 },
|
||||
{ title: '等级', key: 'levelName', width: 110 },
|
||||
{
|
||||
title: '佣金',
|
||||
key: 'commissionAmount',
|
||||
width: 100,
|
||||
render: (r) => `¥${((r.commissionAmount || 0) / 100).toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '成功率',
|
||||
key: 'successRate',
|
||||
width: 130,
|
||||
render: (r) =>
|
||||
h(NProgress, { type: 'line', percentage: (r.successRate || 0) / 100, showIndicator: true }),
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'submissionStatus',
|
||||
width: 100,
|
||||
render: (r) => tag('taskSubmissionStatus', r.submissionStatus),
|
||||
},
|
||||
{ title: '备注', key: 'reviewReason', width: 180, ellipsis: { tooltip: true } },
|
||||
{ title: '创建时间', key: 'createdAt', width: 180 },
|
||||
];
|
||||
export const loadOptions = () => dict.loadOptions(['taskSubmissionStatus', 'task_reject_reason']);
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="show"
|
||||
preset="card"
|
||||
:title="form.id ? '编辑任务' : '新增任务'"
|
||||
class="edit-modal"
|
||||
><n-spin :show="loading"
|
||||
><n-form ref="formRef" :model="form" :rules="rules" label-placement="left" label-width="110"
|
||||
><n-grid cols="1 m:2" responsive="screen" :x-gap="16"
|
||||
><n-form-item-gi label="任务标题" path="title"
|
||||
><n-input v-model:value="form.title" /></n-form-item-gi
|
||||
><n-form-item-gi label="任务大厅" path="hallId"
|
||||
><n-select
|
||||
v-model:value="form.hallId"
|
||||
:options="dict.getOptionUnRef('taskHallOption')" /></n-form-item-gi
|
||||
><n-form-item-gi label="会员等级" :span="2" path="levelIds"
|
||||
><n-select
|
||||
v-model:value="form.levelIds"
|
||||
multiple
|
||||
:options="dict.getOptionUnRef('memberLevelOption')" /></n-form-item-gi
|
||||
><n-form-item-gi label="固定佣金（元）" path="commission"
|
||||
><n-input v-model:value="form.commission" /></n-form-item-gi
|
||||
><n-form-item-gi label="比例佣金（%）"
|
||||
><n-input-number
|
||||
v-model:value="commissionPercent"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:precision="2" /></n-form-item-gi
|
||||
><n-form-item-gi label="每日总量"
|
||||
><n-input-number v-model:value="form.dailyLimit" :min="0" /></n-form-item-gi
|
||||
><n-form-item-gi label="单会员限制"
|
||||
><n-input-number v-model:value="form.perMemberLimit" :min="1" /></n-form-item-gi
|
||||
><n-form-item-gi label="任务周期" :span="2"
|
||||
><n-date-picker
|
||||
v-model:value="dateRange"
|
||||
type="datetimerange"
|
||||
clearable /></n-form-item-gi
|
||||
><n-form-item-gi label="任务封面" :span="2" path="coverUrl"
|
||||
><UploadImage v-model:value="form.coverUrl" :max-number="1" /></n-form-item-gi
|
||||
><n-form-item-gi label="任务描述" :span="2" path="description"
|
||||
><n-input v-model:value="form.description" type="textarea" /></n-form-item-gi
|
||||
><n-form-item-gi label="任务详情" :span="2"
|
||||
><Editor
|
||||
id="task-editor"
|
||||
v-model:value="form.detailHtml"
|
||||
class="editor" /></n-form-item-gi
|
||||
><n-form-item-gi label="排序"><n-input-number v-model:value="form.sort" /></n-form-item-gi
|
||||
><n-form-item-gi label="备注"
|
||||
><n-input v-model:value="form.remark" /></n-form-item-gi></n-grid></n-form></n-spin
|
||||
><template #action
|
||||
><n-space justify="end"
|
||||
><n-button @click="show = false">取消</n-button
|
||||
><n-button type="primary" :loading="saving" @click="save">保存</n-button></n-space
|
||||
></template
|
||||
></n-modal
|
||||
>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import Editor from '@/components/Editor/editor.vue';
|
||||
import UploadImage from '@/components/Upload/uploadImage.vue';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { TaskEdit, TaskView } from '@/api/productTask';
|
||||
const emit = defineEmits(['reload']),
|
||||
message = useMessage(),
|
||||
dict = useDictStore(),
|
||||
show = ref(false),
|
||||
loading = ref(false),
|
||||
saving = ref(false),
|
||||
formRef = ref(),
|
||||
dateRange = ref<any>(),
|
||||
commissionPercent = ref(0);
|
||||
const init = () => ({
|
||||
id: 0,
|
||||
version: 0,
|
||||
title: '',
|
||||
description: '',
|
||||
detailHtml: '',
|
||||
coverAttachmentId: 0,
|
||||
coverUrl: '',
|
||||
hallId: null,
|
||||
levelIds: [],
|
||||
commission: '0.00',
|
||||
dailyLimit: 0,
|
||||
perMemberLimit: 1,
|
||||
sort: 0,
|
||||
remark: '',
|
||||
});
|
||||
const form = reactive<any>(init());
|
||||
const rules = {
|
||||
title: { required: true, message: '请输入任务标题' },
|
||||
description: { required: true, message: '请输入任务描述' },
|
||||
coverUrl: { required: true, message: '请上传任务封面' },
|
||||
hallId: { required: true, type: 'number', message: '请选择任务大厅' },
|
||||
levelIds: { required: true, type: 'array', min: 1, message: '请选择会员等级' },
|
||||
commission: { required: true, message: '请输入固定佣金' },
|
||||
};
|
||||
async function open(row?) {
|
||||
Object.assign(form, init());
|
||||
commissionPercent.value = 0;
|
||||
dateRange.value = null;
|
||||
show.value = true;
|
||||
if (row) {
|
||||
loading.value = true;
|
||||
try {
|
||||
const r: any = await TaskView({ id: row.id });
|
||||
Object.assign(form, r, { commission: ((r.commissionAmount || 0) / 100).toFixed(2) });
|
||||
commissionPercent.value = (r.commissionRate || 0) / 100;
|
||||
if (r.startAt && r.endAt)
|
||||
dateRange.value = [new Date(r.startAt).getTime(), new Date(r.endAt).getTime()];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
async function save() {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
try {
|
||||
await TaskEdit({
|
||||
...form,
|
||||
commissionRate: Math.round(commissionPercent.value * 100),
|
||||
startAt: dateRange.value?.[0] || null,
|
||||
endAt: dateRange.value?.[1] || null,
|
||||
});
|
||||
message.success('任务已保存');
|
||||
show.value = false;
|
||||
emit('reload');
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.edit-modal) {
|
||||
width: min(960px, 94vw);
|
||||
}
|
||||
.editor {
|
||||
height: 340px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,2 @@
|
||||
<template><div><div class="n-layout-page-header"><n-card :bordered="false" title="任务列表">任务按会员等级投放，佣金金额按分存储、佣金比例按万分比存储。</n-card></div><n-card :bordered="false" class="proCard"><BasicForm ref="searchRef" @register="register" @submit="reload" @reset="reload"/><BasicTable ref="tableRef" :columns="columns" :request="loadTable" :row-key="r=>r.id" :action-column="actionColumn" :scroll-x="1750"><template #tableTitle><n-button v-if="hasPermission(['/task/edit'])" type="primary" @click="editRef.open()">新增任务</n-button></template></BasicTable></n-card><Edit ref="editRef" @reload="reload"/></div></template>
|
||||
<script setup lang="ts">import{h,onMounted,reactive,ref}from'vue';import{useDialog,useMessage}from'naive-ui';import{BasicForm,useForm}from'@/components/Form';import{BasicTable,TableAction}from'@/components/Table';import{usePermission}from'@/hooks/web/usePermission';import{TaskDelete,TaskList,TaskStatus}from'@/api/productTask';import{columns,schemas,loadOptions}from'./model';import Edit from'./edit.vue';const{hasPermission}=usePermission(),dialog=useDialog(),message=useMessage(),searchRef=ref(),tableRef=ref(),editRef=ref();const[register]=useForm({gridProps:{cols:'1 s:1 m:2 l:4'},labelWidth:80,schemas});const loadTable=p=>TaskList({...searchRef.value?.formModel,...p});const reload=()=>tableRef.value?.reload();const actionColumn=reactive({width:230,title:'操作',key:'action',fixed:'right',render:row=>h(TableAction as any,{style:'button',actions:[{label:'编辑',auth:['/task/edit'],onClick:()=>editRef.value.open(row)},{label:row.publishStatus===3?'下线':'发布',auth:['/task/status'],onClick:()=>status(row)},{label:'删除',auth:['/task/delete'],onClick:()=>remove(row)}]})});function status(row){const next=row.publishStatus===3?4:3;dialog.warning({title:next===3?'发布任务':'下线任务',content:next===3?'发布后符合等级的会员可领取任务。':'下线后不影响已经领取和提交的任务。',positiveText:'确认',negativeText:'取消',onPositiveClick:async()=>{await TaskStatus({id:row.id,version:row.version,publishStatus:next});message.success('状态已更新');reload()}})}function remove(row){dialog.warning({title:'删除任务',content:row.referenced?'任务已被订单引用，本次操作只会下线。':'确认删除该任务？',positiveText:'确认',negativeText:'取消',onPositiveClick:async()=>{try{await TaskDelete({id:row.id});message.success('操作成功')}finally{reload()}}})}onMounted(loadOptions);</script>
|
||||
@@ -0,0 +1 @@
|
||||
import{computed,h,ref}from'vue';import{NImage,NTag}from'naive-ui';import{FormSchema}from'@/components/Form';import{useDictStore}from'@/store/modules/dict';const dict=useDictStore();export const schemas=ref<FormSchema[]>([{field:'title',component:'NInput',label:'任务标题',componentProps:{clearable:true}},{field:'levelId',component:'NSelect',label:'会员类型',componentProps:{options:computed(()=>dict.getOptionUnRef('memberLevelOption')),clearable:true}},{field:'hallId',component:'NSelect',label:'任务大厅',componentProps:{options:computed(()=>dict.getOptionUnRef('taskHallOption')),clearable:true}},{field:'publishStatus',component:'NSelect',label:'状态',componentProps:{options:computed(()=>dict.getOptionUnRef('bizPublishStatus')),clearable:true}}]);const tag=(k,v)=>h(NTag,{type:dict.getType(k,v),bordered:false},()=>dict.getLabel(k,v)||'-');export const columns=[{title:'任务编号',key:'taskNo',width:180},{title:'封面',key:'coverUrl',width:100,render:r=>h(NImage,{src:r.coverUrl,width:64,height:64,objectFit:'cover'})},{title:'标题',key:'title',width:180},{title:'描述',key:'description',width:220,ellipsis:{tooltip:true}},{title:'任务大厅',key:'hallName',width:130},{title:'会员等级',key:'levelNames',width:180,render:r=>(r.levelNames||[]).join('、')},{title:'固定佣金',key:'commissionAmount',width:100,render:r=>`¥${((r.commissionAmount||0)/100).toFixed(2)}`},{title:'比例佣金',key:'commissionRate',width:100,render:r=>`${((r.commissionRate||0)/100).toFixed(2)}%`},{title:'状态',key:'publishStatus',width:100,render:r=>tag('bizPublishStatus',r.publishStatus)},{title:'创建时间',key:'createdAt',width:180}];export const loadOptions=()=>dict.loadOptions(['memberLevelOption','taskHallOption','bizPublishStatus']);
|
||||
Reference in New Issue
Block a user