🎈 perf<前端>: 添加备忘录管理模块代码(未联调)

vue-vben-admin/src/components/Markdown/src/Markdown.vue

@@ -99,7 +99,7 @@
       lang: unref(getCurrentLang),
       mode: 'sv',
       fullscreen: {
-        index: 520,
+        index: 1012,
       },
       preview: {
         theme: {

vue-vben-admin/src/views/website/memorandum-management/category/CreateOrEditModal.vue

@@ -0,0 +1,87 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    width="640px"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <Collapse v-model:activeKey="activeKey" ghost expandIconPosition="end">
+      <CollapsePanel key="1" header="基础信息">
+        <BasicForm @register="registerForm" />
+      </CollapsePanel>
+    </Collapse>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { Collapse, CollapsePanel } from 'ant-design-vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { basicFormSchema } from './category.data';
+  import { createUser, updateUser } from '@/api/demo/system';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+
+  const emit = defineEmits(['success', 'register']);
+
+  const isUpdate = ref(true);
+  const rowId = ref('');
+
+  const [registerForm, { setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
+    name: 'memorandum-management-category-modal-form',
+    labelWidth: '80px',
+    baseColProps: { span: 12 },
+    schemas: basicFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: true });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      rowId.value = data.record.id;
+      setFieldsValue({
+        ...data.record,
+      });
+    } else {
+      setFieldsValue({
+        status: 1,
+      })
+    }
+    clearValidate();
+    setModalProps({ confirmLoading: false });
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增分类' : '编辑分类'));
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      let params = {
+        ...values, id: unref(isUpdate) ? rowId.value : undefined
+      }
+      if (unref(isUpdate)) {
+        await updateUser(params)
+        createMessage.success('更新成功')
+      } else {
+        await createUser(params)
+        createMessage.success('新增成功')
+      }
+      
+      closeModal();
+      emit('success', {
+        isUpdate: unref(isUpdate),
+        values: params,
+      });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+  const activeKey = ref(['1', '2']);
+</script>

vue-vben-admin/src/views/website/memorandum-management/category/category.data.ts

@@ -0,0 +1,65 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 160,
+  },
+  {
+    title: '描述',
+    dataIndex: 'remark',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createdAt',
+    width: 180,
+    format: 'date|YYYY-MM-DD HH:mm:ss',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'createDate',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      placeholder: ['开始时间', '结束时间'],
+      showTime: true
+    },
+    colProps: { span: 6 },
+    isAdvanced: true
+  },
+];
+
+export const basicFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    component: 'Input',
+    required: true,
+    componentProps: {
+      showCount: true,
+    }
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+    componentProps: {
+      showCount: true,
+      maxlength: 200,
+      autoSize:{ minRows: 3, maxRows: 3 }
+    },
+    colProps: {
+      span: 24
+    }
+  },
+];
+

vue-vben-admin/src/views/website/memorandum-management/category/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <a-button v-auth="'Page.Website.MemorandumManagement.Category..Add'" type="primary" @click="handleCreate">新增</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                auth: 'Page.Website.MemorandumManagement.Category.Edit',
+                icon: 'clarity:note-edit-line',
+                tooltip: '编辑',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                auth: 'Page.Website.MemorandumManagement.Category.Delete',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                tooltip: '删除',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'bottomRight',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <CreateOrEditModal @register="registerModal" @success="handleSuccess" />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { deleteUser, getAccountList, updatePassword } from '@/api/demo/system';
+  import { PageWrapper } from '@/components/Page';
+  import { useModal } from '@/components/Modal';
+  import CreateOrEditModal from './CreateOrEditModal.vue';
+  import { columns, searchFormSchema } from './category.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { UserType } from '@/enums/userEnum';
+
+  const { createMessage } = useMessage();
+  
+  const [registerModal, { openModal }] = useModal();
+  const searchInfo = reactive<Recordable>({});
+  const [registerTable, { reload, setLoading }] = useTable({
+    title: '列表',
+    api: getAccountList,
+    rowKey: 'id',
+    columns,
+    formConfig: {
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      const { createDate, ...params } = info;
+      return {
+        ...params,
+        startDate: createDate ? createDate[0] : undefined,
+        endDate: createDate ? createDate[1] : undefined,
+      };
+    },
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  async function handleDelete(record: Recordable) {
+    await deleteUser(record.id)
+    createMessage.success('删除成功')
+    reload();
+  }
+
+  function handleSuccess({ isUpdate, values }) {
+    reload();
+  }
+
+  // function handleView(record: Recordable) {
+    // go('/system/account_detail/' + record.id);
+  // }
+
+  async function handleResetPassword(record: Recordable) {
+    setLoading(true)
+    await updatePassword({
+      userId: record.id
+    });
+    setLoading(false)
+    createMessage.success('密码重置成功');
+    reload();
+  }
+</script>

vue-vben-admin/src/views/website/memorandum-management/memorandum/CreateOrEditModal.vue

@@ -0,0 +1,83 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    width="640px"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { Collapse, CollapsePanel } from 'ant-design-vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { basicFormSchema } from './memorandum.data';
+  import { createUser, updateUser } from '@/api/demo/system';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+
+  const emit = defineEmits(['success', 'register']);
+
+  const isUpdate = ref(true);
+  const rowId = ref('');
+
+  const [registerForm, { setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
+    name: 'memorandum-management-category-modal-form',
+    layout: 'vertical',
+    baseColProps: { span: 12 },
+    schemas: basicFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: true });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      rowId.value = data.record.id;
+      setFieldsValue({
+        ...data.record,
+      });
+    } else {
+      setFieldsValue({
+        status: 1,
+      })
+    }
+    clearValidate();
+    setModalProps({ confirmLoading: false });
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑') + '备忘录');
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      let params = {
+        ...values, id: unref(isUpdate) ? rowId.value : undefined
+      }
+      if (unref(isUpdate)) {
+        await updateUser(params)
+        createMessage.success('更新成功')
+      } else {
+        await createUser(params)
+        createMessage.success('新增成功')
+      }
+      
+      closeModal();
+      emit('success', {
+        isUpdate: unref(isUpdate),
+        values: params,
+      });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+  const activeKey = ref(['1', '2']);
+</script>