yg-yygl 0.0.1

package/src/views/sys/dict/tree/item-index.vue

@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import type {
+  BusinessFilterItem,
+  IconActionItem,
+} from '@udp/component-ui';
+
+import { computed, nextTick, ref } from 'vue';
+
+import {
+  BusinessFilterBar,
+  Dialog,
+  ExportButton,
+  IconActionGroup,
+  IconButton,
+  Table,
+  useTable,
+} from '@udp/component-ui';
+
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import {
+  deleteDicItem,
+  deleteDicItemBatch,
+  exportTreeItemExcel,
+  getDicItemList,
+  listDicItem,
+} from '../../../../api/dic';
+
+import dayjs from 'dayjs';
+
+import ItemImport from './components/item-import.vue';
+import ItemForm from './item-form.vue';
+
+const props = defineProps<{
+  dictData?: any;
+}>();
+
+interface TreeItemSearchParams {
+  itemCode?: string;
+}
+
+// 控制表格组件的显示/隐藏，用于彻底重建表格组件
+const tableShow = ref(true);
+const addChildFlag = ref(false);
+// 查询
+const searchParams = ref<TreeItemSearchParams>({});
+const filterItems: BusinessFilterItem[] = [
+  {
+    prop: 'itemCode',
+    type: 'input',
+    width: 240,
+    placeholder: '输入字典项编码',
+  },
+];
+
+const treeProps = {
+  children: 'children',
+  label: 'itemCode',
+  hasChildren: 'hasChild',
+};
+
+// 列表信息
+const columns = [
+  { prop: 'itemCode', label: '字典项编码', minWidth: 120 },
+  { prop: 'itemValue', label: '字典值', minWidth: 120 },
+  { prop: 'itemSort', label: '排序', width: 90 },
+  { prop: 'itemDescription', label: '字典项描述', minWidth: 120 },
+];
+
+// 配置 API
+const api = {
+  list: (params: any) => {
+    params.model.dicId = props.dictData?.id;
+    params.model.treeDicFlag = '1';
+    return getDicItemList(params);
+  },
+  delete: (id: string) => deleteDicItem(id),
+  batchDelete: (ids: string[]) => deleteDicItemBatch(ids),
+};
+
+// 重写refresh方法，使用老版本懒加载搜索的实现方式
+const refresh = () => {
+  // 解决树型懒加载缓存问题 - 使用简单直接的方式
+  tableShow.value = false;
+  nextTick(() => {
+    tableShow.value = true;
+    dicItemRefresh();
+  });
+};
+
+// 自定义重置函数
+const reset = () => {
+  // 清空搜索参数
+  searchParams.value = {};
+
+  // 解决树型懒加载缓存问题 - 使用简单直接的方式
+  tableShow.value = false;
+  nextTick(() => {
+    tableShow.value = true;
+    // 调用表格重置
+    tableReset();
+    // 重新获取数据
+    dicItemRefresh();
+  });
+};
+
+// 自定义搜索函数
+const handleFilterSearch = (params: Record<string, any>) => {
+  // 解决树型懒加载缓存问题 - 使用简单直接的方式
+  tableShow.value = false;
+  nextTick(() => {
+    tableShow.value = true;
+    dicItemSearch(params);
+
+    // 如果有搜索条件，模拟点击展开
+    /*
+    if (searchParams.value) {
+      // 延迟一点时间确保数据已加载
+      setTimeout(() => {
+        simulateExpandClick();
+      }, 500);
+    }
+    */
+  });
+};
+
+const handleFilterReset = () => {
+  reset();
+};
+
+// 使用 Hook
+const {
+  loading,
+  data,
+  refresh: dicItemRefresh,
+  reset: tableReset,
+  search: dicItemSearch,
+  batchDelete,
+  handleSelectionChange,
+} = useTable({
+  api,
+  dataTransform: (res: any) => {
+    return {
+      list: res.records.map((item: any) => {
+        return {
+          ...item,
+          hasChild: +item.hasChild,
+          children: item.children || [],
+        };
+      }),
+      total: 0,
+    };
+  },
+});
+
+const drawerVisible = ref(false);
+const itemFormRef = ref<typeof ItemForm>();
+const addFlag = ref(true);
+
+const handleAdd = () => {
+  drawerVisible.value = true;
+  addChildFlag.value = false;
+  addFlag.value = true;
+};
+
+const addChild = (row: any) => {
+  editRow.value = row;
+  drawerVisible.value = true;
+  addChildFlag.value = true;
+};
+
+const editRow = ref<any>(null);
+const handleEdit = (row: any) => {
+  editRow.value = row;
+  drawerVisible.value = true;
+  addChildFlag.value = false;
+  addFlag.value = false;
+};
+
+const handleAddSuccess = async () => {
+  const flag = await itemFormRef.value?.handleSubmit();
+  if (flag) {
+    handleDrawerClosed();
+    // 显示加载提示
+    const loadingMsg = ElMessage({
+      type: 'info',
+      message: '正在刷新数据...',
+      duration: 0,
+    });
+
+    // 解决树型懒加载缓存问题 - 使用简单直接的方式
+    nextTick(() => {
+      refresh();
+      // 关闭加载提示
+      loadingMsg.close();
+      // 成功提示
+      // ElMessage.success(editRow.value ? '编辑成功' : '新增成功');
+    });
+  }
+};
+
+// 自定义删除方法
+const handleDelete = async (row: any) => {
+  if (row.hasChild) {
+    ElMessage.error('字典项存在子节点，不可删除！');
+    return;
+  }
+  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);
+      ElMessage.error('删除失败');
+    }
+  }
+};
+
+const handleDrawerClosed = () => {
+  drawerVisible.value = false;
+  editRow.value = null;
+};
+
+const lazyLoad = async (
+  row: { id: any },
+  _treeNode: any,
+  resolve: (arg0: never[]) => void,
+) => {
+  try {
+    const data = await listDicItem({
+      itemParentId: row.id,
+      itemCode: searchParams.value?.itemCode,
+    } as any);
+    resolve(data); // 必须调用 resolve
+  } catch {
+    resolve([]); // 错误时也要调用 resolve
+  }
+};
+
+const importVisible = ref(false);
+const itemImportRef = ref();
+const handleImportConfirm = async () => {
+  // 获取上传的文件
+  const flag = await itemImportRef.value?.uploadFile();
+  if (flag) {
+    importVisible.value = false; // 关闭导入窗口
+    refresh(); // 刷新列表
+  }
+};
+
+const tableRef = ref();
+// 计算导出参数
+const exportParams = computed(() => {
+  // 获取表格当前显示的列
+  const normalizedColumns = tableRef.value?.normalizedColumns || [];
+
+  return {
+    fileName: `${props.dictData?.treeDicCode}_${props.dictData?.treeDicName}_字典项_${dayjs().format('YYYYMMDDHHmmss')}.xlsx`,
+    filter: searchParams.value?.itemCode?? '', // 加入当前筛选条件
+    columns: normalizedColumns
+      .filter((item: any) => !item.hidden)
+      .map((item: any) => item.prop),
+    dicId: props.dictData?.id,
+  };
+});
+
+const iconActionBtns: IconActionItem[] = [
+  {
+    key: 'add-child',
+    label: '新增子项',
+    icon: 'hx-line-built-in:add-line',
+    onClick: (row: any) => addChild(row),
+  },
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    onClick: (row: any) => handleEdit(row),
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    onClick: (row: any) => handleDelete(row),
+  },
+];
+</script>
+<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
+      v-if="tableShow"
+      class="w-full flex-1"
+      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"
+      @refresh="refresh"
+      @selection-change="handleSelectionChange"
+      :on-batch-delete="batchDelete"
+    >
+      <template #top-actions>
+        <div class="flex flex-wrap items-center gap-2">
+          <IconButton type="primary" icon-type="add" @click="handleAdd">
+            新增字典项
+          </IconButton>
+          <IconButton icon-type="import" @click="importVisible = true">
+            导入
+          </IconButton>
+          <ExportButton
+            :export-api="exportTreeItemExcel"
+            :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>
+    <Dialog
+      v-model="drawerVisible"
+      :title="addFlag ? '新增字典项' : '编辑字典项'"
+      :type="addFlag ? 'add' : 'edit'"
+      @confirm="handleAddSuccess"
+      @closed="handleDrawerClosed"
+    >
+      <ItemForm
+        ref="itemFormRef"
+        :edit-data="editRow"
+        :dic-id="dictData?.id"
+        :add-child-flag="addChildFlag"
+      />
+    </Dialog>
+
+    <Dialog
+      v-model="importVisible"
+      title="导入字典项"
+      type="import"
+      @confirm="handleImportConfirm"
+      @cancel="importVisible = false"
+    >
+      <ItemImport ref="itemImportRef" :dic-id="dictData?.id" />
+    </Dialog>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/src/views/sys/icon/icon-library/icon-library-form.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import type { HxIconLib } from '../../../../api/icon/types'
+import { Form, type FormItemConfig } from '@udp/component-ui';
+import { reactive, ref } from "vue";
+import {checkIconLibCode, checkIconLibName} from '../../../../api/icon';
+
+const props = defineProps<{
+  editData: HxIconLib | null
+}>()
+
+const defaultFromValues = reactive<HxIconLib>(props.editData || {
+  libCode: '',
+  libName: '',
+  libDesc: '',
+})
+
+const formRef = ref();
+
+const formItem = reactive<FormItemConfig[]>([
+  {
+    prop: 'libName',
+    label: '图标库名称',
+    type: 'input',
+    required: true,
+    trim: true,
+    placeholder: '请输入图标库名称',
+    rules: [
+      { required: true, message: '请输入图标库名称', trigger: ['blur', 'input'] },
+      {
+        min: 2,
+        max: 20,
+        message: '图标库名称长度应在 2-20 个字符',
+        trigger: ['blur', 'input'],
+      },
+      {
+        validator: (_rule, value, callback) => {
+          checkIconLibName({ libName: value, id: props.editData?.id || '' })
+            .then(res => {
+              console.log('res', res)
+              callback()
+            })
+            .catch(err => {
+              console.log('err', err)
+              callback(err.msg)
+            })
+        },
+        trigger: ['blur', 'input']
+      }
+    ],
+  },
+  {
+    prop: 'libCode',
+    label: '图标库编码',
+    tooltip: 'IconifyJSON中的Prefix，即图标集前缀',
+    type: 'input',
+    required: true,
+    trim: true,
+    placeholder: '请输入图标库编码',
+    rules: [
+      { required: true, message: '请输入图标库编码', trigger: ['blur', 'input'] },
+      {
+        min: 1,
+        max: 20,
+        message: '图标库编码长度应在 2-20 个字符',
+        trigger: ['blur', 'input'],
+      },
+      {
+        pattern: /^[a-z][a-z0-9-]*$/,
+        message: '图标库编码只能英文小写字母开头，包含英文、数字、短横杠（-）',
+        trigger: ['blur', 'input'],
+      },
+      {
+        validator: (_rule, value, callback) => {
+          checkIconLibCode({ libCode: value, id: props.editData?.id || '' })
+            .then(res => {
+              console.log('res', res)
+              callback()
+            })
+            .catch(err => {
+              console.log('err', err)
+              callback(err.msg)
+            })
+        },
+        trigger: ['blur', 'input']
+      }
+    ],
+    props: {
+      disabled: !!props.editData?.id,
+    }
+  },
+  // {
+  //   prop: 'libType',
+  //   label: '图标库类型',
+  //   type: 'select',
+  //   placeholder: '请选择图标库类型',
+  //   options: [
+  //     { label: '线性图标', value: '1' },
+  //     { label: '面性图标', value: '2' },
+  //   ],
+  // },
+  {
+    prop: 'libDesc',
+    label: '图标库描述',
+    type: 'textarea',
+    placeholder: '请输入图标库描述',
+    props: {
+      rows: 3,
+      maxlength: 100,
+      showWordLimit: true,
+    },
+  },
+]);
+
+const submit = async () => {
+  try {
+    const valid = await formRef.value?.validate();
+    console.log('表单校验结果：', valid);
+    if (!valid) return;
+    return formRef.value?.getValues();
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+defineExpose({
+  submit
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    :items="formItem"
+    :initial-values="defaultFromValues"
+    :show-actions="false"
+    label-width="auto"
+  />
+</template>
+
+<style scoped>
+
+</style>