新增前端vue

2025-12-16 19:18:09 +08:00
parent 26f4a20b54
commit e5b6f7a2a6
10 changed files with 557 additions and 20 deletions
--- a/web-vue/packages/biz/api/biz/listItem.ts
+++ b/web-vue/packages/biz/api/biz/listItem.ts
@@ -16,12 +16,12 @@ export interface BizListItem extends BasicModel<BizListItem> {
  createTime?: string; // 创建时间
  avatar?: string; // 头像图标
  title: string; // 通知标题
-  titleDelete?: boolean;
+  titleDelete?: string;
  datetime?: string; // 发送时间
  type: string; // 类型标识
-  readFlag?: boolean; // 是否已读
+  readFlag?: string; // 是否已读
  description: string; // 描述信息
-  clickClose?: boolean; // 是否关闭
+  clickClose?: string; // 是否关闭
  extra?: string; // 待办状态
  color?: string; // 颜色值
  updateTime: string; // 更新时间
--- a/web-vue/packages/biz/views/biz/listItem/list.vue
+++ b/web-vue/packages/biz/views/biz/listItem/list.vue
@@ -256,7 +256,7 @@
          confirm: handleDelete.bind(this, record),
        },
        auth: 'biz:listItem:edit',
-		ifShow: record.clickClose == false
+        ifShow: record.clickClose == '9'
      },
    ],
  };
--- a/web-vue/packages/core/layouts/default/header/components/notify/NoticeList.vue
+++ b/web-vue/packages/core/layouts/default/header/components/notify/NoticeList.vue
@@ -1,14 +1,14 @@
 <template>
  <a-list :class="prefixCls" bordered :pagination="getPagination">
    <template v-for="item in getData" :key="item.id">
-      <a-list-item class="list-item" v-if="!item.titleDelete">
+      <a-list-item class="list-item" v-if="item.titleDelete !== '1'">
        <a-list-item-meta @click="handleTitleClick(item)">
          <template #title>
            <div class="title">
              <a-typography-paragraph
                style="width: 100%; margin-bottom: 0 !important"
                :style="{ cursor: isTitleClickable ? 'pointer' : '' }"
-                :delete="!!item.titleDelete"
+                :delete="item.titleDelete === '1'"
                :ellipsis="
                  $props.titleRows && $props.titleRows > 0 ? { rows: $props.titleRows, tooltip: !!item.title } : false
                "
@@ -61,6 +61,10 @@
  import { Icon } from '@jeesite/core/components/Icon';
  import { isNumber } from '@jeesite/core/utils/is';

+  interface ExtendedBizListItem extends BizListItem {
+    titleDelete?: '0' | '1' | string;
+  }
+
  export default defineComponent({
    components: {
      [Avatar.name as string]: Avatar,
@@ -73,7 +77,8 @@
    },
    props: {
      list: {
-        type: Array as PropType<BizListItem[]>,
+        // 更新列表项类型为扩展后的字符串版本
+        type: Array as PropType<ExtendedBizListItem[]>,
        default: () => [],
      },
      pageSize: {
@@ -100,19 +105,23 @@
    setup(props, { emit }) {
      const { prefixCls } = useDesign('header-notify-list');
      const current = ref(props.currentPage || 1);
-      const getData = computed<BizListItem[]>(() => {
+      
+      const getData = computed<ExtendedBizListItem[]>(() => {
        const { pageSize, list } = props;
        if (pageSize === false) return [];
        let size = isNumber(pageSize) ? pageSize : 5;
        return list.slice(size * (unref(current) - 1), size * unref(current));
      });
+      
      watch(
        () => props.currentPage,
        (v) => {
          current.value = v;
        },
      );
+      
      const isTitleClickable = computed(() => !!props.onTitleClick);
+      
      const getPagination = computed(() => {
        const { list, pageSize } = props;
        if ((pageSize as number) > 0 && list && list.length > (pageSize as number)) {
@@ -121,7 +130,7 @@
            pageSize,
            size: 'small',
            current: unref(current),
-            onChange(page) {
+            onChange(page: number) {
              current.value = page;
              emit('update:currentPage', page);
            },
@@ -131,7 +140,8 @@
        }
      });

-      function handleTitleClick(item: BizListItem) {
+      // 更新函数参数类型
+      function handleTitleClick(item: ExtendedBizListItem) {
        props.onTitleClick && props.onTitleClick(item);
      }

--- a/web-vue/packages/core/layouts/default/header/components/notify/index.vue
+++ b/web-vue/packages/core/layouts/default/header/components/notify/index.vue
@@ -12,7 +12,7 @@
                {{ item.name }}
                <span v-if="item.list.length !== 0">({{ item.list.length }})</span>
              </template>
-			  <NoticeList :list="item.list" v-if="item.list.length > 0" @click="openModal(true, item.list)" />
+			       <NoticeList :list="item.list" v-if="item.list.length > 0" @click="openModal(true, item.list)" />
            </TabPane>
          </template>
        </Tabs>
@@ -65,10 +65,10 @@
        prefixCls,
        listData,
        count,
-		register,
-		openModal,
+        register,
+        openModal,
        numberStyle: {},
-		getDataList,
+        getDataList,
      };
    },
  });
--- a/web-vue/packages/core/layouts/views/desktop/workbench/components/listItem/form.vue
+++ b/web-vue/packages/core/layouts/views/desktop/workbench/components/listItem/form.vue
@@ -0,0 +1,146 @@
+<!--
+ * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
+ * No deletion without permission, or be held responsible to law.
+ * @author gaoxq
+-->
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    :showFooter="true"
+    :okAuth="'biz:listItem:edit'"
+    @register="registerModal"
+    @ok="handleSubmit"
+    width="60%"
+  >
+    <template #title>
+      <Icon :icon="getTitle.icon" class="m-1 pr-1" />
+      <span> {{ getTitle.value }} </span>
+    </template>
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup name="ViewsBizListItemForm">
+  import { ref, unref, computed } from 'vue';
+  import { useI18n } from '@jeesite/core/hooks/web/useI18n';
+  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
+  import { router } from '@jeesite/core/router';
+  import { Icon } from '@jeesite/core/components/Icon';
+  import { BasicForm, FormSchema, useForm } from '@jeesite/core/components/Form';
+  import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
+  import { BizListItem, bizListItemSave, bizListItemForm } from '@jeesite/biz/api/biz/listItem';
+  
+  import { useUserStore } from '@jeesite/core/store/modules/user';
+  
+  const userStore = useUserStore();
+  const userinfo = computed(() => userStore.getUserInfo);
+
+  const emit = defineEmits(['success', 'register']);
+
+  const { t } = useI18n('biz.listItem');
+  const { showMessage } = useMessage();
+  const { meta } = unref(router.currentRoute);
+  
+  const record = ref<BizListItem>({} as BizListItem);
+
+  const getTitle = computed(() => ({
+    icon: meta.icon || 'i-ant-design:book-outlined',
+    value: record.value.isNewRecord ? t('新增通知信息') : t('编辑通知信息'),
+  }));
+
+  const inputFormSchemas: FormSchema<BizListItem>[] = [
+    {
+      label: t('待办标题'),
+      field: 'title',
+      component: 'Input',
+      componentProps: {
+        maxlength: 512,
+      },
+      required: true,
+      dynamicDisabled: true,
+      colProps: { md: 24, lg: 24 },
+    },
+    {
+      label: t('待办状态'),
+      field: 'extra',
+      component: 'Input',
+      componentProps: {
+        maxlength: 8,
+      },
+      required: true,
+      colProps: { md: 24, lg: 24 },
+    },
+    {
+      label: t('是否关闭'),
+      field: 'clickClose',
+      component: 'Select',
+      componentProps: {
+        dictType: 'is_open',
+        allowClear: true,
+      },
+      required: true,
+    },
+    {
+      label: t('是否删除'),
+      field: 'titleDelete',
+      component: 'Select',
+      componentProps: {
+        dictType: 'is_open',
+        allowClear: true,
+      },
+      required: true,
+    },
+    {
+      label: t('内容信息'),
+      field: 'description',
+      component: 'InputTextArea',
+      required: true,
+      colProps: { md: 24, lg: 24 },
+    },
+  ];
+
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm<BizListItem>({
+    labelWidth: 120,
+    schemas: inputFormSchemas,
+    baseColProps: { md: 24, lg: 12 },
+  });
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ loading: true });
+    await resetFields();
+    const res = await bizListItemForm(data);
+    record.value = (res.bizListItem || {}) as BizListItem;
+    record.value.__t = new Date().getTime();
+    await setFieldsValue(record.value);
+    setModalProps({ loading: false });
+  });
+
+  async function handleSubmit() {
+    try {
+      const data = await validate();
+      setModalProps({ confirmLoading: true });
+      const params: any = {
+        isNewRecord: record.value.isNewRecord,
+        id: record.value.id || data.id,
+      };
+      const editData = {
+        ... data ,
+        type: '3',
+        loginUser: userinfo.value.loginCode ,
+      }
+      
+      console.log(data)
+      // console.log('submit', params, data, record);
+      const res = await bizListItemSave(params, editData);
+      showMessage(res.message);
+      setTimeout(closeModal);
+      emit('success', data);
+    } catch (error: any) {
+      if (error && error.errorFields) {
+        showMessage(error.message || t('common.validateError'));
+      }
+      console.log('error', error);
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
--- a/web-vue/packages/core/layouts/views/desktop/workbench/components/listItem/formImport.vue
+++ b/web-vue/packages/core/layouts/views/desktop/workbench/components/listItem/formImport.vue
@@ -0,0 +1,103 @@
+<!--
+ * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
+ * No deletion without permission, or be held responsible to law.
+ * @author gaoxq
+-->
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    :title="t('导入通知列表项表')"
+    :okText="t('导入')"
+    @register="registerModal"
+    @ok="handleSubmit"
+    :minHeight="120"
+    :width="400"
+  >
+    <Upload accept=".xls,.xlsx" :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove">
+      <a-button> <Icon icon="ant-design:upload-outlined" /> {{ t('选择文件') }} </a-button>
+      <span class="ml-4">{{ uploadInfo }}</span>
+    </Upload>
+    <div class="ml-4 mt-4">
+      {{ t('提示：仅允许导入“xls”或“xlsx”格式文件！') }}
+    </div>
+    <div class="mt-4">
+      <a-button @click="handleDownloadTemplate()" type="text">
+        <Icon icon="i-fa:file-excel-o" />
+        {{ t('下载模板') }}
+      </a-button>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Upload } from 'ant-design-vue';
+  import { useI18n } from '@jeesite/core/hooks/web/useI18n';
+  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
+  import { useGlobSetting } from '@jeesite/core/hooks/setting';
+  import { downloadByUrl } from '@jeesite/core/utils/file/download';
+  import { Icon } from '@jeesite/core/components/Icon';
+  import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
+  import { bizListItemImportData } from '@jeesite/biz/api/biz/listItem';
+  import { FileType } from 'ant-design-vue/es/upload/interface';
+  import { AxiosProgressEvent } from 'axios';
+
+  const emit = defineEmits(['success', 'register']);
+
+  const { t } = useI18n('biz.listItem');
+  const { showMessage, showMessageModal } = useMessage();
+
+  const fileList = ref<FileType[]>([]);
+  const uploadInfo = ref('');
+
+  const beforeUpload = (file: FileType) => {
+    fileList.value = [file];
+    return false;
+  };
+
+  const handleRemove = () => {
+    fileList.value = [];
+  };
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(() => {
+    fileList.value = [];
+    uploadInfo.value = '';
+  });
+
+  async function handleDownloadTemplate() {
+    const { ctxAdminPath } = useGlobSetting();
+    downloadByUrl({ url: ctxAdminPath + '/biz/listItem/importTemplate' });
+  }
+
+  function onUploadProgress(progressEvent: AxiosProgressEvent) {
+    const complete = ((progressEvent.loaded / (progressEvent.total || 1)) * 100) | 0;
+    if (complete != 100) {
+      uploadInfo.value = t('正在导入，请稍候') + ' ' + complete + '%...';
+    } else {
+      uploadInfo.value = '';
+    }
+  }
+
+  async function handleSubmit() {
+    try {
+      if (fileList.value.length == 0) {
+        showMessage(t('请选择要导入的数据文件'));
+        return;
+      }
+      setModalProps({ confirmLoading: true });
+      const params = {
+        file: fileList.value[0],
+      };
+      const { data } = await bizListItemImportData(params, onUploadProgress);
+      showMessageModal({ content: data.message });
+      setTimeout(closeModal);
+      emit('success');
+    } catch (error: any) {
+      if (error && error.errorFields) {
+        showMessage(error.message || t('common.validateError'));
+      }
+      console.log('error', error);
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
--- a/web-vue/packages/core/layouts/views/desktop/workbench/components/listItem/list.vue
+++ b/web-vue/packages/core/layouts/views/desktop/workbench/components/listItem/list.vue
@@ -0,0 +1,273 @@
+<!--
+ * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
+ * No deletion without permission, or be held responsible to law.
+ * @author gaoxq
+-->
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="default" :loading="loading" @click="handleExport()">
+          <Icon icon="i-ant-design:download-outlined" /> {{ t('导出') }}
+        </a-button>
+      </template>
+      <template #slotBizKey="{ record }">
+        <a @click="handleForm({ id: record.id })" :title="record.title">
+          {{ record.title }}
+        </a>
+      </template>
+    </BasicTable>
+    <InputForm @register="registerModal" @success="handleSuccess" />
+    <FormImport @register="registerImportModal" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts" setup name="ViewsBizListItemList">
+  import { onMounted, computed, ref, unref } from 'vue';
+  import { useI18n } from '@jeesite/core/hooks/web/useI18n';
+  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
+  import { useGlobSetting } from '@jeesite/core/hooks/setting';
+  import { downloadByUrl } from '@jeesite/core/utils/file/download';
+  import { router } from '@jeesite/core/router';
+  import { Icon } from '@jeesite/core/components/Icon';
+  import { BasicTable, BasicColumn, useTable } from '@jeesite/core/components/Table';
+  import { BizListItem, bizListItemList } from '@jeesite/biz/api/biz/listItem';
+  import { bizListItemDelete, bizListItemListData } from '@jeesite/biz/api/biz/listItem';
+  import { useModal } from '@jeesite/core/components/Modal';
+  import { FormProps } from '@jeesite/core/components/Form';
+  import InputForm from './form.vue';
+  import FormImport from './formImport.vue';
+  import { useUserStore } from '@jeesite/core/store/modules/user';
+
+  const userStore = useUserStore();
+  const userinfo = computed(() => userStore.getUserInfo);
+  const { t } = useI18n('biz.listItem');
+  const { showMessage } = useMessage();
+  const { meta } = unref(router.currentRoute);
+  const record = ref<BizListItem>({} as BizListItem);
+  const loading = ref(false);
+
+  const searchForm: FormProps<BizListItem> = {
+    baseColProps: { md: 8, lg: 6 },
+    labelWidth: 90,
+    schemas: [
+      {
+        label: t('记录时间起'),
+        field: 'createTime_gte',
+        component: 'DatePicker',
+        componentProps: {
+          format: 'YYYY-MM-DD HH:mm',
+          showTime: { format: 'HH:mm' },
+        },
+      },
+      {
+        label: t('记录时间止'),
+        field: 'createTime_lte',
+        component: 'DatePicker',
+        componentProps: {
+          format: 'YYYY-MM-DD HH:mm',
+          showTime: { format: 'HH:mm' },
+        },
+      },
+      {
+        label: t('待办标题'),
+        field: 'title',
+        component: 'Input',
+      },
+      {
+        label: t('待办状态'),
+        field: 'extra',
+        component: 'Input',
+      },
+      {
+        label: t('是否已读'),
+        field: 'readFlag',
+        component: 'Select',
+        componentProps: {
+          dictType: 'is_open',
+          allowClear: true,
+        },
+      },
+      {
+        label: t('是否关闭'),
+        field: 'clickClose',
+        component: 'Select',
+        componentProps: {
+          dictType: 'is_open',
+          allowClear: true,
+        },
+      },
+      {
+        label: t('是否删除'),
+        field: 'titleDelete',
+        component: 'Select',
+        componentProps: {
+          dictType: 'is_open',
+          allowClear: true,
+        },
+      },
+    ],
+  };
+
+  const tableColumns: BasicColumn<BizListItem>[] = [
+    {
+      title: t('记录时间'),
+      dataIndex: 'createTime',
+      key: 'a.create_time',
+      sorter: true,
+      width: 180,
+      align: 'left',
+	  fixed: 'left',
+    },
+    {
+      title: t('待办标题'),
+      dataIndex: 'title',
+      key: 'a.title',
+      sorter: true,
+      width: 200,
+      align: 'left',
+	  slot: 'slotBizKey',
+    },
+    {
+      title: t('是否删除'),
+      dataIndex: 'titleDelete',
+      key: 'a.title_delete',
+      sorter: true,
+      width: 130,
+      align: 'left',
+      dictType: 'is_open',
+    },
+    {
+      title: t('到期时间'),
+      dataIndex: 'datetime',
+      key: 'a.datetime',
+      sorter: true,
+      width: 180,
+      align: 'left',
+    },
+    {
+      title: t('是否已读'),
+      dataIndex: 'readFlag',
+      key: 'a.read_flag',
+      sorter: true,
+      width: 130,
+      align: 'left',
+      dictType: 'is_open',
+    },
+    {
+      title: t('内容信息'),
+      dataIndex: 'description',
+      key: 'a.description',
+      sorter: true,
+      width: 225,
+      align: 'left',
+    },
+    {
+      title: t('是否关闭'),
+      dataIndex: 'clickClose',
+      key: 'a.click_close',
+      sorter: true,
+      width: 130,
+      align: 'left',
+      dictType: 'is_open',
+    },
+    {
+      title: t('待办状态'),
+      dataIndex: 'extra',
+      key: 'a.extra',
+      sorter: true,
+      width: 130,
+      align: 'left',
+    },
+    {
+      title: t('更新时间'),
+      dataIndex: 'updateTime',
+      key: 'a.update_time',
+      sorter: true,
+      width: 180,
+      align: 'center',
+    },
+  ];
+
+  const actionColumn: BasicColumn<BizListItem> = {
+    width: 160,
+    align: 'center',
+    actions: (record: BizListItem) => [
+      {
+        icon: 'i-clarity:note-edit-line',
+        title: t('编辑'),
+        onClick: handleForm.bind(this, { id: record.id }),
+        auth: 'biz:listItem:edit',
+      },
+      {
+        icon: 'i-ant-design:delete-outlined',
+        color: 'error',
+        title: t('删除'),
+        popConfirm: {
+          title: t('是否确认删除待办信息?'),
+          confirm: handleDelete.bind(this, record),
+        },
+        auth: 'biz:listItem:edit',
+		    ifShow: record.clickClose == '9'
+      },
+    ],
+  };
+
+  const [registerTable, { reload, getForm }] = useTable<BizListItem>({
+    api: bizListItemListData,
+    beforeFetch: (params) => {
+      return {
+        ...params,
+        type : '3',
+        loginUser : userinfo.value.loginCode ,
+	    };
+    },
+    columns: tableColumns,
+    actionColumn: actionColumn,
+    formConfig: searchForm,
+    showTableSetting: true,
+    useSearchForm: true,
+    canResize: true,
+  });
+
+  onMounted(async () => {
+    const res = await bizListItemList();
+    record.value = (res.bizListItem || {}) as BizListItem;
+    await getForm().setFieldsValue(record.value);
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  function handleForm(record: Recordable) {
+    openModal(true, record);
+  }
+
+  async function handleExport() {
+    loading.value = true;
+    const { ctxAdminPath } = useGlobSetting();
+    await downloadByUrl({
+      url: ctxAdminPath + '/biz/listItem/exportData',
+      params: {
+        ... getForm().getFieldsValue(),
+        createUser: userinfo.value.loginCode ,
+      }
+    });
+    loading.value = false;
+  }
+
+  const [registerImportModal, { openModal: importModal }] = useModal();
+
+  function handleImport() {
+    importModal(true, {});
+  }
+
+  async function handleDelete(record: Recordable) {
+    const params = { id: record.id };
+    const res = await bizListItemDelete(params);
+    showMessage(res.message);
+    await handleSuccess(record);
+  }
+
+  async function handleSuccess(record: Recordable) {
+    await reload({ record });
+  }
+</script>
--- a/web-vue/packages/core/layouts/views/desktop/workbench/index.vue
+++ b/web-vue/packages/core/layouts/views/desktop/workbench/index.vue
@@ -5,7 +5,10 @@
 			<TabPane key="1" tab="日程管理">
 				<Calendar />
 			</TabPane>
-			<TabPane key="2" tab="字典管理">
+      <TabPane key="2" tab="我的待办">
+      	<ItemsInfo />
+      </TabPane>
+			<TabPane key="3" tab="字典管理">
 				<TableInfo />
 			</TabPane>
 		</Tabs>
@@ -18,6 +21,7 @@
  import MySchedule from './components/MySchedule.vue';
  import Calendar from './components/calendar/list.vue';
  import TableInfo from './components/tableInfo/list.vue';
+  import ItemsInfo from './components/listItem/list.vue';
  
  const activeKey = ref('1');
 </script>