初始版本提交

src/views/system/subSystem/components/systemModal.vue

@@ -0,0 +1,140 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    destroyOnClose
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="40%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" :style="{ 'margin-right': '10px' }" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { usePermissionStore } from '/@/store/modules/permission';
+  import { addSubSystem, updateSubSystem } from '/@/api/system/subSystem';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  const { t } = useI18n();
+  export const formSchema: FormSchema[] = [
+    {
+      field: 'name',
+      label: t('名称'),
+      component: 'Input',
+      required: true,
+      colProps: { lg: 24, md: 24 },
+    },
+
+    {
+      field: 'code',
+      label: t('编码'),
+      component: 'Input',
+      required: true,
+      colProps: { lg: 24, md: 24 },
+    },
+    {
+      field: 'icon',
+      label: t('图标'),
+      component: 'IconPicker',
+      required: true,
+      colProps: { lg: 24, md: 24 },
+    },
+    {
+      field: 'description',
+      label: t('描述'),
+      component: 'InputTextArea',
+      colProps: { lg: 24, md: 24 },
+    },
+    {
+      field: 'sortCode',
+      label: t('排序'),
+      component: 'InputNumber',
+      required: true,
+      colProps: { lg: 24, md: 24 },
+    },
+  ];
+
+  export default defineComponent({
+    name: 'MenuDrawer',
+    components: {
+      BasicModal,
+      BasicForm,
+    },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+      const { notification } = useMessage();
+      const rowId = ref('');
+      const permissionStore = usePermissionStore();
+      const { t } = useI18n();
+      const { getShowTopMenu } = useMenuSetting();
+      const { getIsMobile } = useAppInject();
+      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+        labelWidth: 100,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+        baseColProps: { lg: 12, md: 24 },
+      });
+
+      const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => {
+        resetFields();
+        setModalProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+
+        if (unref(isUpdate)) {
+          rowId.value = data.record.id;
+
+          setFieldsValue({
+            ...data.record,
+          });
+        }
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? t('新增子系统') : t('编辑子系统')));
+
+      async function handleSubmit() {
+        try {
+          const values = await validate();
+
+          setModalProps({ confirmLoading: true });
+          // TODO custom api
+          if (!unref(isUpdate)) {
+            //false 新增
+            await addSubSystem(values);
+            notification.success({
+              message: t('操作'),
+              description: t('新增成功'),
+            }); //提示消息
+          } else {
+            values.id = rowId.value;
+            await updateSubSystem(values);
+            notification.success({
+              message: t('操作'),
+              description: t('编辑成功'),
+            }); //提示消息
+          }
+          await permissionStore.changeSubsystem(getShowTopMenu.value, getIsMobile.value);
+          closeModal();
+          emit('success');
+        } catch (error) {
+          setModalProps({ confirmLoading: false });
+        }
+      }
+
+      return {
+        registerDrawer,
+        registerForm,
+        getTitle,
+        handleSubmit,
+        t,
+      };
+    },
+  });
+</script>
+<style scoped></style>

src/views/system/subSystem/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <PageWrapper dense fixedHeight contentFullHeight>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> {{ t('新增') }} </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex == 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                ifShow: record.code !== 'chinese',
+                popConfirm: {
+                  title: t('是否确认删除？'),
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <LgTypeDrawer @register="registerDrawer" @success="handleSuccess" />
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
+
+  import { useModal } from '/@/components/Modal';
+  import LgTypeDrawer from './components/systemModal.vue';
+
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { usePermissionStore } from '/@/store/modules/permission';
+
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { PageWrapper } from '/@/components/Page';
+  import { getSubSystemPage, deleteSubSystem } from '/@/api/system/subSystem';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  const { t } = useI18n();
+  export const columns: BasicColumn[] = [
+    {
+      title: t('名称'),
+      dataIndex: 'name',
+      align: 'left',
+    },
+    {
+      title: t('编码'),
+      dataIndex: 'code',
+      align: 'left',
+    },
+    {
+      title: t('描述'),
+      dataIndex: 'description',
+      align: 'left',
+    },
+    {
+      title: t('排序'),
+      dataIndex: 'sortCode',
+    },
+  ];
+
+  export const searchFormSchema: FormSchema[] = [
+    {
+      field: 'keyword',
+      label: t('关键字'),
+      component: 'Input',
+      colProps: { span: 8 },
+      componentProps: {
+        placeholder: t('请输入名称或编码'),
+      },
+    },
+  ];
+
+  export default defineComponent({
+    name: 'SubSystemManagement',
+    components: { BasicTable, LgTypeDrawer, TableAction, PageWrapper },
+    setup() {
+      const { notification } = useMessage();
+      const { getShowTopMenu } = useMenuSetting();
+      const { getIsMobile } = useAppInject();
+      const [registerDrawer, { openModal }] = useModal();
+
+      const [registerTable, { reload }] = useTable({
+        title: t('子系统列表'),
+        api: getSubSystemPage,
+        columns,
+        formConfig: {
+          rowProps: {
+            gutter: 16,
+          },
+          schemas: searchFormSchema,
+          showResetButton: false,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        striped: false,
+        actionColumn: {
+          width: 80,
+          title: t('操作'),
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+        tableSetting: {
+          size: false,
+          setting: false,
+        },
+      });
+
+      function handleCreate() {
+        openModal(true, {
+          isUpdate: false,
+        });
+      }
+
+      function handleEdit(record: Recordable) {
+        openModal(true, {
+          record,
+          isUpdate: true,
+        });
+      }
+
+      function handleDelete(record: Recordable) {
+        const permissionStore = usePermissionStore();
+
+        deleteSubSystem([record.id]).then(async (_) => {
+          await permissionStore.changeSubsystem(getShowTopMenu.value, getIsMobile.value);
+          reload();
+          notification.success({
+            message: t('提示'),
+            description: t('删除成功'),
+          }); //提示消息
+        });
+      }
+
+      function handleSuccess() {
+        reload();
+      }
+
+      return {
+        registerTable,
+        registerDrawer,
+        handleCreate,
+        handleEdit,
+        handleDelete,
+        handleSuccess,
+        t,
+      };
+    },
+  });
+</script>