yg-yygl 0.0.1

package/dist/views/sys/department/index.vue

@@ -0,0 +1,639 @@
+<script setup lang="ts">
+import type {
+  BaseExportParams,
+  BusinessFilterItem,
+  IconActionItem,
+  TableColumn,
+} from '@udp/component-ui';
+
+import type { ColumnConfigType } from '../../../api';
+
+import {
+  computed,
+  h,
+  nextTick,
+  onMounted,
+  ref,
+  unref,
+  watch,
+} from 'vue';
+
+import {
+  BusinessFilterBar,
+  Dialog,
+  Drawer,
+  ExportButton,
+  IconActionGroup,
+  IconButton,
+  Table,
+  useTable,
+} from '@udp/component-ui';
+import { useUserStore } from '@udp/stores';
+
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import { getTableColumns, saveTableColumns } from '../../../api';
+import {
+  deleteDepartment,
+  disableDepartment,
+  enableDepartment,
+  exportDepartment,
+  importDepartment,
+  listDepartment,
+} from '../../../api/department/index';
+import { StatusTag } from '../../../components/custom-tags';
+import { MainContainer } from '../../../components/main-container';
+
+import DepartmentForm from './components/department-form.vue';
+import DepartmentImport from './components/department-import.vue';
+import DepartmentMembers from './components/department-members.vue';
+
+const userStore = useUserStore();
+
+// 表格引用
+const tableRef = ref<InstanceType<typeof Table>>();
+
+// 控制表格组件的显示/隐藏，用于彻底重建表格组件
+const tableShow = ref(true);
+
+// 添加部门查询类型定义
+interface DepartmentSearchParams {
+  departName?: string;
+  status?: number;
+  [key: string]: any;
+}
+
+// 查询
+const searchParams = ref<DepartmentSearchParams>({});
+const filterItems: BusinessFilterItem[] = [
+  {
+    prop: 'departName',
+    type: 'input',
+    width: 240,
+    placeholder: '请输入组织名称',
+  },
+  {
+    prop: 'status',
+    label: '组织状态',
+    type: 'select',
+    options: [
+      { label: '全部', value: -1 },
+      { label: '已启用', value: 1 },
+      { label: '未启用', value: 0 },
+    ],
+  },
+];
+
+const treeProps = {
+  children: 'children',
+  label: 'departName',
+  hasChildren: 'hasChild',
+};
+
+// 列表信息
+const columns = ref<TableColumn[]>([
+  { prop: 'departName', label: '组织名称' },
+  { prop: 'departCode', label: '组织编码' },
+  { prop: 'level', label: '层级' },
+  { prop: 'createTime', label: '创建时间' },
+  { prop: 'treeSort', label: '排序' },
+  {
+    prop: 'status',
+    label: '状态',
+    render: ({ row }: any) =>
+      h(StatusTag, {
+        value: row.status || 0,
+        activeText: '已启用',
+        inactiveText: '未启用',
+      }),
+  },
+]);
+
+const iconActionBtns: IconActionItem[] = [
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    access: ['department.update'],
+    onClick: (row: any) => handleEdit(row, 0),
+  },
+  {
+    key: 'enable',
+    label: '启用',
+    icon: 'hx-line-built-in:checkbox-circle-line',
+    type: 'primary',
+    show: (row: any) => row.status === 0,
+    onClick: (row: any) => handleToggleStatus(row),
+  },
+  {
+    key: 'disable',
+    label: '停用',
+    icon: 'hx-line-built-in:forbid-line',
+    type: 'danger',
+    show: (row: any) => row.status !== 0,
+    disabled: (row: any) => row.level === 1,
+    onClick: (row: any) => handleToggleStatus(row),
+  },
+  {
+    key: 'members',
+    label: '查看成员',
+    icon: 'hx-line-built-in:user-3-line',
+    onClick: (row: any) => handleViewMembers(row),
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    access: ['department.delete'],
+    disabled: (row: any) => row.level === 1,
+    onClick: (row: any) => handleDelete(row),
+  },
+];
+
+// 配置 API
+const api = {
+  list: async (params: any) => {
+    const { model } = unref(params);
+    const finalParams = { ...unref(searchParams), ...model };
+    if (finalParams.status === -1) delete finalParams.status;
+
+    // 获取部门数据
+    const response = await listDepartment(finalParams);
+
+    return response;
+  },
+  delete: (id: string) => deleteDepartment({ id }),
+};
+
+// 使用 Hook
+const {
+  loading,
+  data,
+  refresh: originalRefresh,
+  reset: tableReset,
+  search: originalSearch,
+  handleSelectionChange,
+} = useTable({
+  api,
+  dataTransform: (res: any) => {
+    return {
+      list: res.map((item: any) => {
+        return {
+          ...item,
+          hasChild: +item.hasChild,
+          children: item.children || [],
+        };
+      }),
+      total: 0,
+    };
+  },
+});
+
+// 列设置查询
+const columnConfig = ref<ColumnConfigType>({});
+const getColumnConfig = () => {
+  getTableColumns('department').then((res: any) => {
+    columnConfig.value = res;
+    if (res.accountGridArr && res.accountGridArr.length > 0) {
+      adjustColumns(res.accountGridArr);
+    }
+  });
+};
+const saveColumnConfig = async (
+  newColumns: {
+    hidden: boolean;
+    prop: string;
+    sort: number;
+  }[],
+) => {
+  try {
+    const res = await saveTableColumns({
+      id: columnConfig.value?.id,
+      accountId: userStore.accountInfo!.id,
+      type: 'department',
+      accountGridArr: newColumns,
+    });
+    columnConfig.value = {
+      ...columnConfig.value,
+      id: res.id,
+    };
+    adjustColumns(newColumns);
+    return true;
+  } catch (error) {
+    console.log(error);
+    return false;
+  }
+};
+// 调整列设置
+const adjustColumns = (
+  accountGridArr: {
+    hidden: boolean;
+    prop: string;
+    sort: number;
+  }[],
+) => {
+  const newColumns = columns.value.map((item, index) => {
+    const column = accountGridArr?.find((c: any) => c.prop === item.prop);
+    return {
+      ...item,
+      hidden: column?.hidden || false,
+      sort: column?.sort || (index + 1),
+    };
+  });
+  newColumns.sort((a, b) => (a.sort || 1) - (b.sort || 1));
+  columns.value = newColumns;
+};
+
+// 重写refresh方法，使用老版本懒加载搜索的实现方式
+const refresh = () => {
+  // 解决树型懒加载缓存问题 - 使用简单直接的方式
+  tableShow.value = false;
+  nextTick(() => {
+    tableShow.value = true;
+    originalRefresh();
+  });
+};
+
+// 自定义重置函数
+const reset = () => {
+  // 清空搜索参数
+  searchParams.value = {};
+
+  // 解决树型懒加载缓存问题 - 使用简单直接的方式
+  tableShow.value = false;
+  nextTick(() => {
+    tableShow.value = true;
+    // 调用表格重置
+    tableReset();
+    // 重新获取数据
+    originalRefresh();
+  });
+};
+
+// 自定义搜索函数
+const handleFilterSearch = (params: Record<string, any>) => {
+  searchParams.value = params;
+  // 解决树型懒加载缓存问题 - 使用简单直接的方式
+  tableShow.value = false;
+  nextTick(() => {
+    tableShow.value = true;
+    originalSearch();
+
+    // 如果有搜索条件，模拟点击展开
+    /*
+    if (searchParams.value) {
+      // 延迟一点时间确保数据已加载
+      setTimeout(() => {
+        simulateExpandClick();
+      }, 500);
+    }
+    */
+  });
+};
+
+const handleFilterReset = () => {
+  reset();
+};
+
+const drawerVisible = ref(false);
+const drawerType = ref<'add' | 'edit' | 'view'>('add');
+const drawerTitle = computed(() => {
+  return drawerType.value === 'add'
+    ? '新增组织'
+    : drawerType.value === 'edit'
+      ? '编辑组织'
+      : '查看组织';
+});
+const departmentFormRef = ref<typeof DepartmentForm>();
+
+/** 导入 */
+const importVisible = ref(false);
+const departmentImportRef = ref<InstanceType<typeof DepartmentImport>>();
+
+/** 查看账号 */
+const membersVisible = ref(false);
+const selectedDepartment = ref<any>(null);
+
+const handleAdd = () => {
+  drawerType.value = 'add';
+  drawerVisible.value = true;
+};
+
+const editRow = ref<any>(null);
+
+const handleEdit = (row: any, _index: number) => {
+  drawerType.value = 'edit';
+  editRow.value = row;
+  drawerVisible.value = true;
+};
+
+// 处理启用/禁用状态切换
+const handleToggleStatus = async (row: any) => {
+  const currentStatus = row.status;
+  const newStatus = currentStatus === 1 ? 0 : 1;
+  const statusText = newStatus === 1 ? '启用' : '停用';
+
+  try {
+    await ElMessageBox.confirm(`确定要${statusText}这条数据吗？`, '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+
+    // 调用后端API接口
+    const result = await (newStatus === 1
+      ? enableDepartment({ departId: row.id })
+      : disableDepartment({ departId: row.id }));
+
+    ElMessage.success(result || `${statusText}成功`);
+
+    // 解决树型懒加载缓存问题 - 使用简单直接的方式
+    tableShow.value = false;
+    nextTick(() => {
+      tableShow.value = true;
+      refresh();
+    });
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('状态切换失败:', error);
+    }
+  }
+};
+
+// 自定义删除方法
+const handleDelete = async (row: any) => {
+  try {
+    await ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+    await api.delete(row.id);
+    ElMessage.success('删除成功');
+
+    // 解决树型懒加载缓存问题 - 使用简单直接的方式
+    tableShow.value = false;
+    nextTick(() => {
+      tableShow.value = true;
+      refresh();
+    });
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除失败:', error);
+    }
+  }
+};
+
+const handleAddSuccess = async () => {
+  const flag = await departmentFormRef.value?.handleSubmit();
+  if (flag) {
+    // 先关闭抽屉
+    handleDrawerClosed();
+
+    // 显示加载提示
+    const loadingMsg = ElMessage({
+      type: 'info',
+      message: '正在刷新数据...',
+      duration: 0,
+    });
+
+    // 解决树型懒加载缓存问题 - 使用简单直接的方式
+    tableShow.value = false;
+    nextTick(() => {
+      tableShow.value = true;
+      refresh();
+
+      // 关闭加载提示
+      loadingMsg.close();
+
+      // 成功提示
+      // ElMessage.success(editRow.value ? '编辑成功' : '新增成功');
+    });
+  }
+};
+
+const handleDrawerClosed = () => {
+  drawerVisible.value = false;
+  editRow.value = null;
+};
+
+// 计算导出参数
+const exportParams = computed<BaseExportParams>(() => {
+  const normalizedColumns = tableRef.value?.normalizedColumns || [];
+
+  return {
+    // 查询条件
+    queryCondition: searchParams.value,
+    // 文件名
+    fileName: '组织数据.xlsx',
+    // 选中的字段
+    selectedFields: normalizedColumns
+      .filter((item: any) => !item.hidden)
+      .map((item: any) => item.prop),
+    // 基础字段（保持兼容性）
+    columns: normalizedColumns
+      .filter((item: any) => !item.hidden)
+      .map((item: any) => item.prop),
+    filter: searchParams.value,
+  };
+});
+
+const handleImportConfirm = async () => {
+  // 检查组件引用是否存在
+  if (!departmentImportRef.value) {
+    ElMessage.warning('导入组件未加载');
+    return;
+  }
+
+  // 获取上传的文件
+  const file = departmentImportRef.value.getFile();
+
+  if (!file) {
+    ElMessage.warning('请先选择要导入的文件');
+    return;
+  }
+
+  // 显示加载提示
+  const loadingMessage = ElMessage({
+    type: 'info',
+    message: '正在导入数据，请稍候...',
+    duration: 0,
+  });
+
+  try {
+    // 调用API上传Excel文件
+    await importDepartment(file);
+
+    // 关闭加载提示并显示成功消息
+    loadingMessage.close();
+    ElMessage.success('组织导入成功');
+    importVisible.value = false; // 关闭导入窗口
+
+    // 解决树型懒加载缓存问题 - 使用简单直接的方式
+    tableShow.value = false;
+    nextTick(() => {
+      tableShow.value = true;
+      refresh();
+    });
+  } catch {
+    // 关闭加载提示并显示错误消息
+    loadingMessage.close();
+    // const errorMsg = error?.message || '导入失败，请检查文件格式或网络连接';
+    // ElMessage.error(errorMsg);
+  }
+};
+
+// 当导入对话框打开时，重置内部组件状态
+watch(importVisible, (newVal) => {
+  if (newVal && departmentImportRef.value) {
+    // 对话框打开时，尝试清空之前的文件
+    departmentImportRef.value.clearFile();
+  }
+});
+
+// 清除对话框的取消按钮回调
+const handleImportCancel = () => {
+  importVisible.value = false;
+
+  // 清空已选择的文件
+  if (departmentImportRef.value) {
+    departmentImportRef.value.clearFile();
+  }
+};
+
+// 查看账号
+const handleViewMembers = (row: any) => {
+  selectedDepartment.value = row;
+  membersVisible.value = true;
+};
+
+// 页面加载时获取数据
+onMounted(() => {
+  refresh();
+  getColumnConfig();
+});
+
+/**
+ * 懒加载函数，用于加载子节点数据
+ * @param row 当前行数据
+ * @param treeNode 树节点
+ * @param resolve 解析函数，用于返回子节点数据
+ */
+const lazyLoad = async (
+  row: { [key: string]: any; id: string },
+  _treeNode: unknown,
+  resolve: (data: any[]) => void,
+) => {
+  try {
+    const data = await listDepartment({
+      departId: row.id,
+      level: row.level,
+      departName: searchParams.value.departName,
+      status:
+        searchParams.value.status === -1
+          ? undefined
+          : searchParams.value.status,
+    });
+    resolve(data); // 必须调用 resolve
+  } catch {
+    resolve([]); // 错误时也要调用 resolve
+  }
+};
+</script>
+
+<template>
+  <MainContainer>
+    <div class="flex h-full w-full flex-col overflow-hidden bg-background">
+      <BusinessFilterBar
+        v-model="searchParams"
+        :items="filterItems"
+        :loading="loading"
+        @search="handleFilterSearch"
+        @reset="handleFilterReset"
+      />
+      <Table
+        v-if="tableShow"
+        ref="tableRef"
+        row-key="id"
+        :data="data"
+        :columns="columns"
+        :loading="loading"
+        :tree-props="treeProps"
+        lazy
+        :load="lazyLoad"
+        show-toolbar
+        show-top-actions
+        show-action
+        :show-layout="false"
+        layout-type="table"
+        action-width="160px"
+        :save-column-config="saveColumnConfig"
+        @refresh="refresh"
+        @selection-change="handleSelectionChange"
+      >
+        <template #top-actions>
+          <div class="flex flex-wrap items-center gap-2">
+            <IconButton
+              v-access:code="['department.add']"
+              type="primary"
+              icon-type="add"
+              @click="handleAdd"
+            >
+              新增组织
+            </IconButton>
+            <IconButton icon-type="import" @click="importVisible = true">
+              导入
+            </IconButton>
+            <ExportButton
+              :export-api="exportDepartment"
+              :params="exportParams"
+              text="导出"
+              loading-type="progress"
+              :show-progress="true"
+              :min-loading-time="1200"
+              success-message="组织数据导出成功"
+              error-message="组织数据导出失败，请重试"
+            />
+          </div>
+        </template>
+        <template #action="{ row }">
+          <IconActionGroup :actions="iconActionBtns" :row="row" />
+        </template>
+      </Table>
+    </div>
+    <Drawer
+      v-model="drawerVisible"
+      :title="drawerTitle"
+      :type="drawerType"
+      size="600px"
+      @confirm="handleAddSuccess"
+      @closed="handleDrawerClosed"
+    >
+      <DepartmentForm ref="departmentFormRef" :edit-data="editRow" />
+    </Drawer>
+    <Dialog
+      v-model="importVisible"
+      title="导入组织"
+      type="import"
+      @confirm="handleImportConfirm"
+      @cancel="handleImportCancel"
+    >
+      <DepartmentImport ref="departmentImportRef" />
+    </Dialog>
+    <Dialog
+      v-model="membersVisible"
+      title="查看成员"
+      icon="mdi:user-group"
+      :show-confirm-button="false"
+      cancel-text="关闭"
+    >
+      <DepartmentMembers
+        :department-id="selectedDepartment?.id"
+        :department-name="selectedDepartment?.departName"
+      />
+    </Dialog>
+  </MainContainer>
+</template>
+
+<style scoped lang="scss"></style>

package/dist/views/sys/department/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/sys/dict/custom/dic-form.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    editData?: any;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    handleSubmit: () => Promise<boolean>;
+    handleCancel: () => boolean;
+    resetForm: () => void;
+    initFormData: (data?: any) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;