248 lines
7.0 KiB
Vue
248 lines
7.0 KiB
Vue
<template>
|
|
<div>
|
|
<n-card :bordered="false" class="proCard">
|
|
<BasicTable
|
|
ref="tableRef"
|
|
openChecked
|
|
:columns="columns"
|
|
:request="loadTable"
|
|
:row-key="(row) => row.id"
|
|
:action-column="actionColumn"
|
|
:scroll-x="scrollX"
|
|
:pagination="pagination"
|
|
:checked-row-keys="checkedIds"
|
|
@update:checked-row-keys="onCheckedRow"
|
|
>
|
|
<template #tableTitle>
|
|
<n-button v-if="hasPermission(['/taskHall/delete'])" type="primary" @click="batchRemove">
|
|
删除
|
|
</n-button>
|
|
<n-button
|
|
v-if="hasPermission(['/taskHall/edit'])"
|
|
type="primary"
|
|
class="min-left-space"
|
|
@click="openEdit()"
|
|
>
|
|
添加
|
|
</n-button>
|
|
</template>
|
|
</BasicTable>
|
|
</n-card>
|
|
|
|
<n-modal
|
|
v-model:show="showEdit"
|
|
preset="card"
|
|
:title="form.id ? '编辑大厅任务' : '添加大厅任务'"
|
|
class="hall-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" placeholder="请输入名称" />
|
|
</n-form-item>
|
|
<n-form-item label="会员等级" path="levelId">
|
|
<n-select
|
|
v-model:value="form.levelId"
|
|
:options="dict.getOptionUnRef('memberLevelOption')"
|
|
placeholder="请选择会员等级"
|
|
/>
|
|
</n-form-item>
|
|
<n-form-item label="比例">
|
|
<n-input value="以会员为主" readonly />
|
|
</n-form-item>
|
|
<n-form-item label="简介" path="summary">
|
|
<n-input v-model:value="form.summary" placeholder="请输入简介" />
|
|
</n-form-item>
|
|
<n-form-item label="图标" path="iconUrl">
|
|
<UploadImage v-model:value="form.iconUrl" :max-number="1" />
|
|
</n-form-item>
|
|
</n-form>
|
|
</n-spin>
|
|
<template #action>
|
|
<n-space justify="end">
|
|
<n-button @click="showEdit = false">取消</n-button>
|
|
<n-button type="primary" :loading="saving" @click="saveHall">确定</n-button>
|
|
</n-space>
|
|
</template>
|
|
</n-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, h, onMounted, reactive, ref } from 'vue';
|
|
import { useDialog, useMessage } from 'naive-ui';
|
|
import { BasicTable, TableAction } from '@/components/Table';
|
|
import UploadImage from '@/components/Upload/uploadImage.vue';
|
|
import { usePermission } from '@/hooks/web/usePermission';
|
|
import { useDictStore } from '@/store/modules/dict';
|
|
import { adaTableScrollX } from '@/utils/hotgo';
|
|
import { Delete, Edit, List, View } from '@/api/taskHall';
|
|
import { columns, loadOptions } from './model';
|
|
|
|
const message = useMessage();
|
|
const dialog = useDialog();
|
|
const dict = useDictStore();
|
|
const { hasPermission } = usePermission();
|
|
const tableRef = ref();
|
|
const formRef = ref();
|
|
const checkedIds = ref<number[]>([]);
|
|
const showEdit = ref(false);
|
|
const loading = ref(false);
|
|
const saving = ref(false);
|
|
const form = reactive<any>({});
|
|
const pagination = { pageSize: 30, pageSizes: [10, 20, 30, 40, 50, 60] };
|
|
|
|
const rules = {
|
|
name: { required: true, message: '请输入名称', trigger: ['input', 'blur'] },
|
|
levelId: { required: true, type: 'number', message: '请选择会员等级', trigger: 'change' },
|
|
summary: { required: true, message: '请输入简介', trigger: ['input', 'blur'] },
|
|
iconUrl: { required: true, message: '请上传图标', trigger: 'change' },
|
|
};
|
|
|
|
const actionColumn = reactive({
|
|
width: 180,
|
|
title: '操作',
|
|
key: 'action',
|
|
fixed: 'right',
|
|
render: (row) =>
|
|
h(TableAction as any, {
|
|
style: 'button',
|
|
actions: [
|
|
{
|
|
label: '编辑',
|
|
type: 'primary',
|
|
auth: ['/taskHall/view'],
|
|
onClick: () => openEdit(row),
|
|
},
|
|
{
|
|
label: '删除',
|
|
type: 'error',
|
|
auth: ['/taskHall/delete'],
|
|
onClick: () => remove(row),
|
|
},
|
|
],
|
|
}),
|
|
});
|
|
const scrollX = computed(() => adaTableScrollX(columns, actionColumn.width));
|
|
|
|
function emptyForm() {
|
|
return {
|
|
id: 0,
|
|
version: 0,
|
|
hallCode: '',
|
|
name: '',
|
|
levelId: null,
|
|
iconAttachmentId: 0,
|
|
iconUrl: '',
|
|
summary: '',
|
|
commissionRate: 0,
|
|
clientRoute: '',
|
|
sort: 0,
|
|
remark: '',
|
|
};
|
|
}
|
|
|
|
function resetForm(value) {
|
|
Object.keys(form).forEach((key) => delete form[key]);
|
|
Object.assign(form, value);
|
|
}
|
|
|
|
const loadTable = (params) => List(params);
|
|
|
|
function onCheckedRow(rowKeys: number[]) {
|
|
checkedIds.value = rowKeys;
|
|
}
|
|
|
|
function reload() {
|
|
checkedIds.value = [];
|
|
tableRef.value?.reload();
|
|
}
|
|
|
|
async function openEdit(row?) {
|
|
resetForm(emptyForm());
|
|
showEdit.value = true;
|
|
if (!row) return;
|
|
loading.value = true;
|
|
try {
|
|
const result: any = await View({ id: row.id });
|
|
Object.assign(form, result, { levelId: result.levelIds?.[0] ?? null });
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
async function saveHall() {
|
|
try {
|
|
await formRef.value?.validate();
|
|
} catch {
|
|
return;
|
|
}
|
|
saving.value = true;
|
|
try {
|
|
const hallCode = form.hallCode || `HALL_${Date.now()}`;
|
|
await Edit({
|
|
...form,
|
|
hallCode,
|
|
clientRoute: form.clientRoute || `/task-hall/${hallCode.toLowerCase()}`,
|
|
levelIds: [form.levelId],
|
|
});
|
|
message.success(form.id ? '编辑成功' : '添加成功');
|
|
showEdit.value = false;
|
|
reload();
|
|
dict.loadOptions(['taskHallOption']);
|
|
} finally {
|
|
saving.value = false;
|
|
}
|
|
}
|
|
|
|
function remove(row) {
|
|
dialog.warning({
|
|
title: '提示',
|
|
content: '确定删除此记录吗？',
|
|
positiveText: '确定',
|
|
negativeText: '取消',
|
|
onPositiveClick: async () => {
|
|
await Delete({ id: row.id, reason: '后台删除任务大厅' });
|
|
message.success('删除成功');
|
|
reload();
|
|
},
|
|
});
|
|
}
|
|
|
|
function batchRemove() {
|
|
if (checkedIds.value.length === 0) {
|
|
message.warning('请选择数据');
|
|
return;
|
|
}
|
|
dialog.warning({
|
|
title: '提示',
|
|
content: '确定删除吗？',
|
|
positiveText: '确定',
|
|
negativeText: '取消',
|
|
onPositiveClick: async () => {
|
|
let successCount = 0;
|
|
let failedCount = 0;
|
|
for (const id of checkedIds.value) {
|
|
try {
|
|
await Delete({ id, reason: '后台批量删除任务大厅' });
|
|
successCount++;
|
|
} catch {
|
|
failedCount++;
|
|
}
|
|
}
|
|
if (successCount > 0) message.success(`成功删除 ${successCount} 条数据`);
|
|
if (failedCount > 0) message.warning(`${failedCount} 条数据删除失败`);
|
|
reload();
|
|
},
|
|
});
|
|
}
|
|
|
|
onMounted(loadOptions);
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
:deep(.hall-modal) {
|
|
width: min(750px, 94vw);
|
|
}
|
|
</style>
|