yg-yygl 0.0.1

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

@@ -0,0 +1,709 @@
+<script setup lang="ts">
+import type {
+  BusinessFilterItem,
+  IconActionItem,
+  TableColumn,
+  UserExportParams,
+} from '@udp/component-ui';
+
+import type { ColumnConfigType } from '../../../api';
+import type { User } from '../../../api/user/types';
+
+import { computed, h, nextTick, onMounted, ref, watch } from 'vue';
+
+import {
+  BusinessFilterBar,
+  Dialog,
+  Drawer,
+  ExportButton,
+  Icon,
+  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 { queryAccountList } from '../../../api/account';
+import {
+  deleteUser,
+  exportUserExcel,
+  getUser,
+  getUserExtendList,
+  getUserList,
+} from '../../../api/user';
+import GenderTag from '../../../components/gender-tag.vue';
+import DepartmentTree from '../../../components/department-tree.vue';
+import MainContainer from '../../../components/main-container.vue';
+
+import UserExtendManage from './components/user-extend-manage.vue';
+import UserForm from './components/user-form.vue';
+import UserImport from './components/user-import.vue';
+import WorkTransfer from './components/work-transfer.vue';
+
+const userStore = useUserStore();
+
+// 组织树
+const selectedDepartmentId = ref<null | string>(null);
+
+// 处理部门选择
+const handleDepartmentSelect = (data: any) => {
+  if (data.id === selectedDepartmentId.value) {
+    selectedDepartmentId.value = '';
+  } else {
+    selectedDepartmentId.value = data.id;
+  }
+  // 重新加载用户列表
+  refresh();
+};
+
+// 查询与业务分组
+const searchParams = ref({});
+const filterItems: BusinessFilterItem[] = [
+  {
+    prop: 'name',
+    type: 'input',
+    width: 240,
+    placeholder: '请输入姓名或手机号',
+  },
+];
+
+// 扩展属性配置
+const extendFields = ref<any[]>([]);
+const tableRef = ref<InstanceType<typeof Table>>();
+
+// 基础列配置
+const baseColumns: TableColumn[] = [
+  {
+    prop: 'name',
+    label: '姓名',
+    minWidth: 100,
+    render: ({ row }) =>
+      h(
+        'span',
+        {
+          class: 'text-primary cursor-pointer',
+          onClick: () => {
+            handleView(row);
+          },
+        },
+        row.name,
+      ),
+  },
+  { prop: 'mobile', label: '手机号', width: 140 },
+  {
+    prop: 'gender',
+    label: '性别',
+    minWidth: 65,
+    render: ({ row }: { row: User }) =>
+      h(GenderTag, { value: row.gender || 0 }),
+  },
+  { prop: 'remark', label: '备注', minWidth: 100 },
+  { prop: 'createTime', label: '创建时间', minWidth: 120 },
+  { prop: 'sort', label: '排序', width: 60 },
+];
+
+// 列设置查询
+const columnConfig = ref<ColumnConfigType>();
+
+// 动态生成列配置
+const columns = computed<TableColumn[]>(() => {
+  const dynamicColumns = [...baseColumns];
+
+  // 添加扩展属性列（只显示isShow为1的）
+  extendFields.value
+    .filter((field) => field.isShow === 1)
+    .forEach((field) => {
+      dynamicColumns.push({
+        prop: `extend_${field.id}`,
+        label: field.fieldName,
+        minWidth: 120,
+        slot: `extend_${field.id}`,
+      });
+    });
+
+  // 按用户列设置配置
+  if (
+    columnConfig.value?.accountGridArr &&
+    columnConfig.value?.accountGridArr.length > 0
+  ) {
+    dynamicColumns.forEach((item, index) => {
+      const column = columnConfig.value?.accountGridArr?.find(
+        (c) => c.prop === item.prop,
+      );
+      item.hidden = column?.hidden || false;
+      item.sort = column?.sort || (index + 1);
+    });
+    dynamicColumns.sort((a, b) => (a.sort || 1) - (b.sort || 1));
+  }
+
+  return dynamicColumns;
+});
+
+// 当列变化时，重新布局表格
+watch(
+  () => columns.value,
+  () => {
+    // 当部门选择变化时，重新获取扩展属性列表
+    nextTick(() => {
+      tableRef.value?.doLayout();
+    });
+  },
+  {
+    immediate: true,
+  },
+);
+
+// 卡片配置
+const cardOptions = ref({
+  title: 'name',
+  columns: [
+    { prop: 'mobile', label: '手机号', className: 'w-full' },
+    {
+      prop: 'departmentNames',
+      label: '所属组织',
+      className: 'w-full truncate',
+      render: ({ row }: { row: User }) =>
+        h('span', {}, row.departmentNames?.join(',') || ''),
+    },
+  ],
+  showActions: true,
+  isEdit: true,
+  isDelete: true,
+  onEdit: (row: any) => handleEdit(row),
+  onDelete: (row: any) => handleDelete(row),
+  onItemClick: (row: any) => handleView(row as User),
+});
+
+// 配置 API
+const api = {
+  list: ({ current, size, model }: any) => {
+    const newParams = {
+      current,
+      size,
+      model: {
+        ...model,
+        departmentId: selectedDepartmentId.value,
+      },
+    };
+    return getUserList(newParams);
+  },
+};
+
+// 使用 Hook
+const {
+  loading,
+  data,
+  pagination,
+  refresh,
+  reset,
+  search,
+  handleSizeChange,
+  handleCurrentPageChange,
+  handleSelectionChange,
+} = useTable({
+  api,
+});
+
+const handleFilterSearch = (params: Record<string, any>) => {
+  search(params);
+};
+
+const handleFilterReset = () => {
+  reset();
+};
+
+const getColumnConfig = () => {
+  getTableColumns('user').then((res) => {
+    columnConfig.value = res;
+  });
+};
+const saveColumnConfig = async (
+  newColumns: {
+    hidden: boolean;
+    prop: string;
+    sort: number;
+  }[],
+) => {
+  try {
+    const res = await saveTableColumns({
+      id: columnConfig.value?.id,
+      accountId: userStore.accountInfo!.id,
+      type: 'user',
+      accountGridArr: newColumns,
+    });
+    columnConfig.value = {
+      ...columnConfig.value,
+      id: res.id,
+    };
+    return true;
+  } catch (error) {
+    console.log(error);
+    return false;
+  }
+};
+
+const drawerVisible = ref(false);
+const userFormRef = ref<typeof UserForm>();
+const drawerType = ref<'add' | 'edit' | 'view'>('add');
+const drawerTitle = computed(() => {
+  return drawerType.value === 'add'
+    ? '新增用户'
+    : drawerType.value === 'edit'
+      ? '编辑用户'
+      : '查看用户';
+});
+
+const handleAdd = () => {
+  drawerType.value = 'add';
+  drawerVisible.value = true;
+};
+
+const editRow = ref<null | User>(null);
+const handleEdit = async (row: User) => {
+  try {
+    // 获取用户详情（包含扩展属性）
+    const res = await getUser('userId', row.id);
+    editRow.value = res;
+    drawerType.value = 'edit';
+    drawerVisible.value = true;
+  } catch {
+    ElMessage.error('获取用户详情失败');
+  }
+};
+const handleView = async (row: User) => {
+  try {
+    // 获取用户详情（包含扩展属性）
+    const res = await getUser('userId', row.id);
+    editRow.value = res;
+    drawerType.value = 'view';
+    drawerVisible.value = true;
+  } catch {
+    ElMessage.error('获取用户详情失败');
+  }
+};
+
+const handleAddSuccess = async () => {
+  const flag = await userFormRef.value?.handleSubmit();
+  if (flag) {
+    handleDrawerClosed();
+    refresh();
+  }
+};
+
+const handleDrawerClosed = () => {
+  drawerVisible.value = false;
+  editRow.value = null;
+};
+
+const handleDelete = async (row: User) => {
+  try {
+    let delAccount = false;
+    await ElMessageBox.confirm(
+      h('div', [
+        h(
+          'p',
+          {
+            style: 'margin-bottom: 16px; color: #606266; line-height: 1.5;',
+          },
+          `删除用户无法找回，确认删除？`,
+        ),
+        h(
+          'div',
+          {
+            style:
+              'display: flex; align-items: center; padding: 12px; background-color: #f5f7fa; border-radius: 4px; border-left: 4px solid #e6a23c; margin-top: 12px;',
+          },
+          [
+            h('input', {
+              type: 'checkbox',
+              id: 'deleteChildrenCheckbox',
+              style: 'margin-right: 8px; transform: scale(1.1);',
+              onChange: (e: Event) => {
+                delAccount = (e.target as HTMLInputElement).checked;
+              },
+            }),
+            h(
+              'label',
+              {
+                for: 'deleteChildrenCheckbox',
+                style: 'cursor: pointer; font-weight: 500; user-select: none;',
+              },
+              '同时删除用户绑定的账号',
+            ),
+          ],
+        ),
+      ]),
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: false,
+        icon: h(Icon, {
+          name: 'fluent-color:warning-32',
+        }),
+      },
+    );
+    await deleteUser({
+      userIds: [row.id],
+      deleteAccount: delAccount,
+    });
+    refresh();
+  } catch {
+    console.error('删除失败');
+  }
+};
+
+const iconActionBtns: IconActionItem[] = [
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    access: ['user.update'],
+    disabled: (row: any) => (row as User).id === '1',
+    onClick: (row: any) => handleEdit(row as User),
+  },
+  {
+    key: 'transfer',
+    label: '工作交接',
+    icon: 'mdi:file-transfer-outline',
+    disabled: (row: any) => (row as User).id === '1',
+    onClick: (row: any) => handleWorkTransfer(row as User),
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    access: ['user.delete'],
+    disabled: (row: any) => (row as User).id === '1',
+    onClick: (row: any) => handleDelete(row as User),
+  },
+];
+
+/** 导入 */
+const importVisible = ref(false);
+const userImportRef = ref<InstanceType<typeof UserImport>>();
+
+// 计算导出参数
+const exportParams = computed<UserExportParams>(() => {
+  // 获取表格当前显示的列
+  const normalizedColumns = tableRef.value?.normalizedColumns || [];
+
+  // 过滤出非隐藏列并获取其属性名
+  // 获取基础字段
+  const baseFields = normalizedColumns
+    .filter((item: any) => !item.hidden && !item.prop.startsWith('extend_'))
+    .map((item: any) => item.prop);
+
+  // 获取扩展属性字段
+  const extendFieldIds = normalizedColumns
+    .filter((item: any) => !item.hidden && item.prop.startsWith('extend_'))
+    .map((item: any) => item.prop.replace('extend_', ''));
+
+  return {
+    fileName: '用户数据.xlsx',
+    filter: searchParams.value, // 加入当前筛选条件
+    columns: baseFields,
+    extendFieldIds, // 添加扩展属性字段ID
+  };
+});
+
+const handleImportConfirm = async () => {
+  // 获取上传的文件
+  const flag = await userImportRef.value?.uploadFile();
+  if (flag) {
+    importVisible.value = false; // 关闭导入窗口
+    refresh(); // 刷新列表
+  }
+};
+
+/* 工作交接 */
+const workTransferRef = ref();
+const workTransferVisible = ref(false);
+const handleWorkTransfer = async (row: User) => {
+  try {
+    const res = await queryAccountList({ userId: row.id });
+    if (res?.length > 0) {
+      editRow.value = row;
+      workTransferVisible.value = true;
+    } else {
+      ElMessage.warning('该用户没有绑定账号，无法进行工作交接');
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+const handleWorkTransferConfirm = async () => {
+  const flag = await workTransferRef.value.handleSubmit();
+  if (flag) {
+    workTransferVisible.value = false;
+    refresh();
+  }
+};
+const handleWorkTransferCancel = () => {
+  workTransferVisible.value = false;
+  editRow.value = null;
+};
+
+// 扩展属性相关
+const extendDrawerVisible = ref(false);
+
+// 扩展属性管理
+const handleExtendManage = () => {
+  extendDrawerVisible.value = true;
+};
+
+// 解析CHECKBOX类型的扩展属性值
+const resolveCheckboxValue = (extendValue: any, options: any[]): string => {
+  try {
+    const valueArray = JSON.parse(extendValue.fieldValue || '[]');
+    if (Array.isArray(valueArray) && valueArray.length > 0) {
+      const labels = valueArray.map(
+        (value) => options.find((opt: any) => opt.value === value)?.label || value,
+      );
+      return labels.join(', ');
+    }
+    return '';
+  } catch {
+    return extendValue.fieldValue;
+  }
+};
+
+// 解析带选项的扩展属性值
+const resolveOptionValue = (extendValue: any): string | undefined => {
+  if (!extendValue.fieldOption) return undefined;
+  try {
+    const options = JSON.parse(extendValue.fieldOption);
+    if (options.length <= 0) return undefined;
+    if (extendValue.fieldType === 'CHECKBOX') {
+      return resolveCheckboxValue(extendValue, options);
+    }
+    return options.find((item: any) => item.value === extendValue.fieldValue)?.label;
+  } catch {
+    return undefined;
+  }
+};
+
+// 获取扩展属性值
+const getExtendValue = (row: any, id: string) => {
+  if (!row.extendValues || !Array.isArray(row.extendValues)) {
+    return '';
+  }
+  // 确保ID匹配时进行字符串比较
+  const extendValue = row.extendValues.find(
+    (item: any) => String(item.fieldsId) === String(id),
+  );
+
+  if (!extendValue) return '';
+
+  return resolveOptionValue(extendValue) ?? extendValue.fieldValue;
+};
+
+// 加载扩展属性配置
+const loadExtendFields = async () => {
+  try {
+    const res = await getUserExtendList();
+    extendFields.value = res || [];
+  } catch (error) {
+    console.error('加载扩展属性配置失败:', error);
+  }
+};
+
+// 刷新扩展属性数据
+const refreshExtendData = async () => {
+  await loadExtendFields();
+  refresh();
+};
+
+onMounted(async () => {
+  await loadExtendFields();
+  getColumnConfig();
+});
+</script>
+
+<template>
+  <MainContainer>
+    <template #side>
+      <div
+        class="flex h-full w-[30vw] max-w-[300px] flex-col border-r border-gray-200 p-4"
+      >
+        <DepartmentTree
+          :need-operator="true"
+          @node-click="handleDepartmentSelect"
+        />
+      </div>
+    </template>
+    <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
+        ref="tableRef"
+        :data="data"
+        :columns="columns"
+        :card-options="cardOptions"
+        :loading="loading"
+        :pagination="pagination"
+        show-toolbar
+        show-top-actions
+        show-pagination
+        show-action
+        layout-type="table"
+        action-width="180px"
+        :save-column-config="saveColumnConfig"
+        @refresh="refresh"
+        @selection-change="handleSelectionChange"
+        @size-change="handleSizeChange"
+        @current-page-change="handleCurrentPageChange"
+      >
+        <template #top-actions>
+          <div class="flex flex-wrap items-center gap-2">
+            <IconButton
+              v-access:code="['user.add']"
+              type="primary"
+              icon-type="add"
+              @click="handleAdd"
+            >
+              新增用户
+            </IconButton>
+            <IconButton icon-type="import" @click="importVisible = true">
+              导入
+            </IconButton>
+            <ExportButton
+              :export-api="exportUserExcel"
+              :params="exportParams"
+              text="导出"
+              loading-type="progress"
+              :show-progress="true"
+              :min-loading-time="1200"
+              success-message="用户数据导出成功"
+              error-message="用户数据导出失败，请重试"
+            />
+            <IconButton icon-type="setting" @click="handleExtendManage">
+              扩展属性管理
+            </IconButton>
+          </div>
+        </template>
+
+        <template #action="{ row }">
+          <IconActionGroup :actions="iconActionBtns" :row="row" />
+        </template>
+
+        <!-- 动态扩展属性模板 -->
+        <template
+          v-for="field in extendFields.filter((f) => f.isShow === 1)"
+          :key="field.id"
+          #[`extend_${field.id}`]="{ row }"
+        >
+          <span>{{ getExtendValue(row, field.id) || '' }}</span>
+        </template>
+
+        <!-- 卡片标题 -->
+        <template #card-title="{ row }">
+          <div class="mb-3 flex items-center gap-3">
+            <div class="text-md font-bold">
+              {{ row.name }}
+            </div>
+            <GenderTag :value="row.gender" :round="true" />
+          </div>
+        </template>
+
+        <!-- 卡片操作 -->
+        <template #card-actions="{ row, isHover }">
+          <div class="flex w-full items-center justify-between">
+            <div class="flex items-center">
+              <IconButton
+                v-access:code="['user.update']"
+                :type="isHover ? 'primary' : 'default'"
+                link
+                @click.stop="handleEdit(row as User)"
+                :disabled="row.id === '1'"
+                icon-type="edit"
+              >
+                编辑
+              </IconButton>
+              <IconButton
+                v-access:code="['user.delete']"
+                :type="isHover ? 'danger' : 'default'"
+                link
+                @click.stop="handleDelete(row as User)"
+                :disabled="row.id === '1'"
+                icon-type="delete"
+              >
+                删除
+              </IconButton>
+              <IconButton
+                :type="isHover ? 'primary' : 'default'"
+                link
+                @click.stop="handleWorkTransfer(row as User)"
+                :disabled="row.id === '1'"
+                icon="mdi:file-transfer-outline"
+              >
+                工作交接
+              </IconButton>
+            </div>
+          </div>
+        </template>
+      </Table>
+    </div>
+    <Drawer
+      v-model="drawerVisible"
+      :title="drawerTitle"
+      :type="drawerType"
+      size="808px"
+      :show-confirm-button="drawerType !== 'view'"
+      :cancel-text="drawerType === 'view' ? '关闭' : '取消'"
+      @confirm="handleAddSuccess"
+      @closed="handleDrawerClosed"
+    >
+      <UserForm
+        ref="userFormRef"
+        :edit-data="editRow"
+        :expand-fields="extendFields"
+        :type="drawerType"
+      />
+    </Drawer>
+    <Dialog
+      v-model="importVisible"
+      title="导入用户"
+      type="import"
+      @confirm="handleImportConfirm"
+      @cancel="importVisible = false"
+    >
+      <UserImport ref="userImportRef" />
+    </Dialog>
+
+    <!-- 工作交接 -->
+    <Dialog
+      v-model="workTransferVisible"
+      title="工作交接"
+      icon="mdi:file-transfer"
+      @confirm="handleWorkTransferConfirm"
+      @cancel="handleWorkTransferCancel"
+    >
+      <WorkTransfer ref="workTransferRef" :user="editRow" />
+    </Dialog>
+
+    <!-- 扩展属性管理抽屉 -->
+    <Drawer
+      v-model="extendDrawerVisible"
+      title="扩展属性管理"
+      icon="mdi:drive-document"
+      size="600px"
+      :show-confirm-button="false"
+    >
+      <UserExtendManage @refresh="refreshExtendData" />
+    </Drawer>
+  </MainContainer>
+</template>
+
+<style scoped lang="scss"></style>

package/dist/views/sys/user/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;