|
@@ -0,0 +1,197 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <BasicTable @register="registerTable">
|
|
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
|
|
+ <template v-if="column.key === 'disable'">
|
|
|
|
|
+ <Tag :color="formatDictColor(disableOptions, record.disable)">
|
|
|
|
|
+ {{ formatDictValue(disableOptions, record.disable) }}
|
|
|
|
|
+ </Tag>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template v-if="column.key === 'action'">
|
|
|
|
|
+ <TableAction
|
|
|
|
|
+ :actions="[
|
|
|
|
|
+ {
|
|
|
|
|
+ auth: 'constant:constant:query',
|
|
|
|
|
+ icon: 'icon-eye|iconfont',
|
|
|
|
|
+ tooltip: '查看',
|
|
|
|
|
+ label: '查看',
|
|
|
|
|
+ onClick: handleView.bind(null, record),
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ auth: 'constant:constant:edit',
|
|
|
|
|
+ icon: 'icon-edit|iconfont',
|
|
|
|
|
+ tooltip: '编辑',
|
|
|
|
|
+ label: '编辑',
|
|
|
|
|
+ onClick: handleEdit.bind(null, record),
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ auth: 'constant:constant:remove',
|
|
|
|
|
+ icon: 'icon-delete|iconfont',
|
|
|
|
|
+ tooltip: '删除',
|
|
|
|
|
+ label: '删除',
|
|
|
|
|
+ color: 'error',
|
|
|
|
|
+ popConfirm: {
|
|
|
|
|
+ title: '是否确认删除',
|
|
|
|
|
+ placement: 'left',
|
|
|
|
|
+ confirm: handleDelete.bind(null, record),
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ ]"
|
|
|
|
|
+ />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template #toolbar>
|
|
|
|
|
+ <Button
|
|
|
|
|
+ v-auth="['constant:constantmenu:add']"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ @click="handleCreate"
|
|
|
|
|
+ preIcon="icon-plus|iconfont"
|
|
|
|
|
+ >
|
|
|
|
|
+ 新增
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ <Button
|
|
|
|
|
+ v-auth="['constant:constantmenu:remove']"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ danger
|
|
|
|
|
+ @click="handleDelete(null)"
|
|
|
|
|
+ preIcon="icon-delete|iconfont"
|
|
|
|
|
+ >
|
|
|
|
|
+ 批量删除
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </BasicTable>
|
|
|
|
|
+ <FormDrawer @register="registerDrawer" @success="handleSuccess" />
|
|
|
|
|
+ <ViewDrawer @register="registerDrawerView" @success="handleSuccess" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+<script lang="ts" setup>
|
|
|
|
|
+ import { onBeforeMount, ref } from 'vue';
|
|
|
|
|
+ import { Tag } from 'ant-design-vue';
|
|
|
|
|
+ import { Button } from '/@/components/Button';
|
|
|
|
|
+
|
|
|
|
|
+ import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
|
|
|
|
+
|
|
|
|
|
+ // import { useModal } from '/@/components/Modal';
|
|
|
|
|
+ import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
|
|
+ import FormDrawer from './formDrawer.vue';
|
|
|
|
|
+ import ViewDrawer from './viewDrawer.vue';
|
|
|
|
|
+ import { columns, searchFormSchema } from './data';
|
|
|
|
|
+
|
|
|
|
|
+ import { sysConstantQueryPage, sysConstantRemove } from '/@/api/sys/sysConstantMenuApi';
|
|
|
|
|
+ import { listDictModel } from '/@/api/common';
|
|
|
|
|
+ import { formatDictColor, formatDictValue } from '/@/utils';
|
|
|
|
|
+ import { useDrawer } from '/@/components/Drawer';
|
|
|
|
|
+
|
|
|
|
|
+ const disableOptions = ref();
|
|
|
|
|
+ onBeforeMount(async () => {
|
|
|
|
|
+ disableOptions.value = await listDictModel({ dictCode: 'sys_disable_type' });
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const { createConfirm, createMessage } = useMessage();
|
|
|
|
|
+ // const [registerModal, { openModal }] = useModal();
|
|
|
|
|
+ const [registerDrawer, { openDrawer }] = useDrawer();
|
|
|
|
|
+ const [registerDrawerView, { openDrawer: openDrawerView }] = useDrawer();
|
|
|
|
|
+
|
|
|
|
|
+ const tableSort = ref([
|
|
|
|
|
+ {
|
|
|
|
|
+ field: 'create_time',
|
|
|
|
|
+ direction: 'DESC',
|
|
|
|
|
+ },
|
|
|
|
|
+ ]) as any;
|
|
|
|
|
+
|
|
|
|
|
+ const [registerTable, { reload, getSelectRowKeys }] = useTable({
|
|
|
|
|
+ title: '常量菜单列表 ',
|
|
|
|
|
+ api: sysConstantQueryPage,
|
|
|
|
|
+ rowKey: 'id',
|
|
|
|
|
+ columns,
|
|
|
|
|
+ showIndexColumn: true,
|
|
|
|
|
+ rowSelection: { type: 'checkbox' },
|
|
|
|
|
+ formConfig: {
|
|
|
|
|
+ labelWidth: 120,
|
|
|
|
|
+ schemas: searchFormSchema,
|
|
|
|
|
+ autoSubmitOnEnter: true,
|
|
|
|
|
+ baseColProps: { xs: 24, sm: 12, md: 12, lg: 8 },
|
|
|
|
|
+ resetButtonOptions: {
|
|
|
|
|
+ preIcon: 'icon-delete|iconfont',
|
|
|
|
|
+ },
|
|
|
|
|
+ submitButtonOptions: {
|
|
|
|
|
+ preIcon: 'icon-search|iconfont',
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ useSearchForm: true,
|
|
|
|
|
+ bordered: true,
|
|
|
|
|
+ actionColumn: {
|
|
|
|
|
+ width: 200,
|
|
|
|
|
+ title: '操作',
|
|
|
|
|
+ dataIndex: 'action',
|
|
|
|
|
+ },
|
|
|
|
|
+ beforeFetch: handleBeforeFetch,
|
|
|
|
|
+ sortFn: handleSortFn,
|
|
|
|
|
+ });
|
|
|
|
|
+ // 详情按钮事件
|
|
|
|
|
+ function handleView(record: Recordable) {
|
|
|
|
|
+ console.log(record);
|
|
|
|
|
+ openDrawerView(true, {
|
|
|
|
|
+ record,
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 新增按钮事件
|
|
|
|
|
+ function handleCreate() {
|
|
|
|
|
+ openDrawer(true, {
|
|
|
|
|
+ isUpdate: false,
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 编辑按钮事件
|
|
|
|
|
+ function handleEdit(record: Recordable) {
|
|
|
|
|
+ openDrawer(true, {
|
|
|
|
|
+ record,
|
|
|
|
|
+ isUpdate: true,
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 删除按钮事件
|
|
|
|
|
+ async function handleDelete(record: Recordable) {
|
|
|
|
|
+ if (record) {
|
|
|
|
|
+ await sysConstantRemove([record.id]);
|
|
|
|
|
+ createMessage.success('删除成功!');
|
|
|
|
|
+ await reload();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ createConfirm({
|
|
|
|
|
+ content: '你确定要删除?',
|
|
|
|
|
+ iconType: 'warning',
|
|
|
|
|
+ onOk: async () => {
|
|
|
|
|
+ const keys = getSelectRowKeys();
|
|
|
|
|
+ await sysConstantRemove(keys);
|
|
|
|
|
+ createMessage.success('删除成功!');
|
|
|
|
|
+ await reload();
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ // 表格点击字段排序
|
|
|
|
|
+ function handleSortFn(sortInfo) {
|
|
|
|
|
+ if (sortInfo?.order && sortInfo?.columnKey) {
|
|
|
|
|
+ // 默认单列排序
|
|
|
|
|
+ tableSort.value = [
|
|
|
|
|
+ {
|
|
|
|
|
+ field: sortInfo.columnKey,
|
|
|
|
|
+ direction: sortInfo.order.replace(/(\w+)(end)/g, '$1').toUpperCase(),
|
|
|
|
|
+ },
|
|
|
|
|
+ ];
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 表格请求之前,对参数进行处理, 添加默认 排序
|
|
|
|
|
+ function handleBeforeFetch(params) {
|
|
|
|
|
+ return { ...params, orders: tableSort.value };
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 弹窗回调事件
|
|
|
|
|
+ async function handleSuccess({ isUpdate, values }) {
|
|
|
|
|
+ console.log(isUpdate);
|
|
|
|
|
+ console.log(values);
|
|
|
|
|
+ await reload();
|
|
|
|
|
+ }
|
|
|
|
|
+</script>
|