feat: add web application
This commit is contained in:
richjohnrambo
@@ -0,0 +1,247 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user