feat: 修改设备类型展示方式

apps/web-antd/src/views/property/equipmentManagement/components/machine-type-tree.vue

@@ -45,7 +45,7 @@ const showTreeSkeleton = ref<boolean>(true);
 async function loadTree() {
   showTreeSkeleton.value = true;
   searchValue.value = '';
-  selectDeptId.value = [];
+  // selectDeptId.value = []; // 移除这行，刷新树时不清空选中
   const ret = await getMachineTypeTree();
   deptTreeArray.value = convertTreeLabel(ret);
   showTreeSkeleton.value = false;
@@ -55,7 +55,9 @@ async function handleReload() {
   await loadTree();
   emit('reload');
 }
-
+defineExpose({
+  handleReload,
+});
 onMounted(loadTree);
 </script>
 

apps/web-antd/src/views/property/equipmentManagement/machineType/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
@@ -18,86 +18,63 @@ import {
 import {
   machineTypeExport,
   machineTypeList,
+  machineTypeInfo,
+  getMachineTypeTree,
   machineTypeRemove,
 } from '#/api/property/machineType';
 import type { MachineTypeForm } from '#/api/property/machineType/model';
 import { commonDownloadExcel } from '#/utils/file/download';
 
 import machineTypeModal from './machineType-modal.vue';
-import { columns, querySchema } from './data';
+import { columns } from './data';
 const selectDeptId = ref<string[]>([]);
 
-const formOptions: VbenFormProps = {
+// 新增：详情数据
-  commonConfig: {
+const detailData = ref<any>(null);
-    labelWidth: 80,
+interface MachineTypeTree {
-    componentProps: {
+  id: number;
-      allowClear: true,
+  /**
-    },
+   * antd组件必须要这个属性 实际是没有这个属性的
-  },
+   */
-  schema: querySchema(),
+  key: string;
-  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  parentId: number;
-  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  label: string;
-  // 不需要直接删除
+  weight: number;
-  // fieldMappingTime: [
+  children?: MachineTypeTree[];
-  //  [
+}
-  //    'createTime',
+interface MachineTypeTreeData {
-  //    ['params[beginTime]', 'params[endTime]'],
+  id: number;
-  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  label: string;
-  //  ],
+  children?: MachineTypeTreeData[];
-  // ],
+}
-    handleReset: async () => {
+async function loadDetail() {
-    selectDeptId.value = [];
+  // 这里假设 selectDeptId 选中后加载详情，否则加载第一个
-
+  let id:any = selectDeptId.value[0];
-    const { formApi, reload } = tableApi;
+  if (!id) {
-    await formApi.resetForm();
+    // 可选：默认加载第一个类型详情
-    const formValues = formApi.form.values;
+    const res:MachineTypeTree[] = await getMachineTypeTree();
-    formApi.setLatestSubmissionValues(formValues);
+    if (res.length > 0 && res[0]) {
-    await reload(formValues);
+      id = res[0].id;
-  },
-};
-
-const gridOptions: VxeGridProps = {
-  checkboxConfig: {
-    // 高亮
-    highlight: true,
-    // 翻页时保留选中状态
-    reserve: true,
-    // 点击行选中
-    // trigger: 'row',
-  },
-  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
-  // columns: columns(),
-  columns,
-  height: 'auto',
-  keepSource: true,
-  pagerConfig: {},
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues = {}) => {
-        if (selectDeptId.value.length === 1) {
-          formValues.parentTypeId = selectDeptId.value[0];
-        } else {
-          Reflect.deleteProperty(formValues, 'parentTypeId');
     }
-        return await machineTypeList({
+  }
-          pageNum: page.currentPage,
+  if (id) {
-          pageSize: page.pageSize,
+    // 获取详情接口
-          ...formValues,
+    const { machineTypeInfo } = await import('#/api/property/machineType');
-        });
+    detailData.value = await machineTypeInfo(id);
-      },
+  } else {
-    },
+    detailData.value = null;
-  },
+  }
-  rowConfig: {
+}
-    keyField: 'id',
-  },
-  // 表格全局唯一表示 保存列配置需要用到
-  id: 'property-machineType-index'
-};
 
-const [BasicTable, tableApi] = useVbenVxeGrid({
+onMounted(loadDetail);
-  formOptions,
+
-  gridOptions,
+watch(selectDeptId, loadDetail);
-});
+
+const treeRef = ref();
+
+function reloadTree() {
+  treeRef.value?.handleReload?.();
+}
 
 const [MachineTypeModal, modalApi] = useVbenModal({
   connectedComponent: machineTypeModal,
@@ -108,33 +85,71 @@ function handleAdd() {
   modalApi.open();
 }
 
-async function handleEdit(row: Required<MachineTypeForm>) {
+async function handleEdit() {
-  modalApi.setData({ id: row.id });
+  if (detailData.value && detailData.value.id) {
+    modalApi.setData({ id: detailData.value.id });
     modalApi.open();
+  }
 }
 
-async function handleDelete(row: Required<MachineTypeForm>) {
+async function handleDelete() {
-  await machineTypeRemove(row.id);
+  if (detailData.value && detailData.value.id) {
-  await tableApi.query();
+    await machineTypeRemove(detailData.value.id);
+    reloadTree();
+    await loadDetail();
+  }
 }
+// async function handleDelete() {
+//   if (detailData.value && detailData.value.id) {
+//     const currentId = detailData.value.id;
+//     // 1. 获取完整树
+//     const tree = await getMachineTypeTree();
 
-function handleMultiDelete() {
+//     // 2. 递归查找当前节点的父节点和同级节点
-  const rows = tableApi.grid.getCheckboxRecords();
+//     function findParentAndSiblings(list:any, targetId:any, parent:any = null) {
-  const ids = rows.map((row: Required<MachineTypeForm>) => row.id);
+//       for (const node of list) {
-  Modal.confirm({
+//         if (node.id === targetId) {
-    title: '提示',
+//           return { parent, siblings: list };
-    okType: 'danger',
+//         }
-    content: `确认删除选中的${ids.length}条记录吗？`,
+//         if (node.children && node.children.length) {
-    onOk: async () => {
+//           const res:any = findParentAndSiblings(node.children, targetId, node);
-      await machineTypeRemove(ids);
+//           if (res) return res;
-      await tableApi.query();
+//         }
-    },
+//       }
-  });
+//       return null;
-}
+//     }
+//     const found = findParentAndSiblings(tree, currentId);
+
+//     // 3. 删除
+//     await machineTypeRemove(currentId);
+
+//     // 4. 选中逻辑
+//     let nextId = null;
+//     if (found) {
+//       // 同级第一个（排除自己）
+//       const sameLevel = found.siblings.filter((n:any) => n.id !== currentId);
+//       if (sameLevel.length > 0) {
+//         nextId = sameLevel[0].id;
+//       } else if (found.parent) {
+//         nextId = found.parent.id;
+//       }
+//     }
+//     // 5. 设置选中
+//     if (nextId) {
+//       selectDeptId.value = [nextId];
+//     } else {
+//       selectDeptId.value = [];
+//     }
+
+//     // 6. 刷新树和详情
+//     reloadTree();
+//     await loadDetail();
+//   }
+// }
 
 function handleDownloadExcel() {
-  commonDownloadExcel(machineTypeExport, '设备类型数据', tableApi.formApi.form.values, {
+  commonDownloadExcel(machineTypeExport, '设备类型数据', {}, {
-    fieldMappingTime: formOptions.fieldMappingTime,
+    fieldMappingTime: [],
   });
 }
 </script>
@@ -143,26 +158,22 @@ function handleDownloadExcel() {
   <Page :auto-content-height="true">
     <div class="flex h-full gap-[8px]">
       <MachineTypeTree
+        ref="treeRef"
         v-model:select-dept-id="selectDeptId"
         class="w-[260px]"
-        @reload="() => tableApi.reload()"
+        @reload="loadDetail"
-        @select="() => tableApi.reload()"
+        @select="loadDetail"
       />
-    <BasicTable table-title="设备类型列表">
+      <div class="flex-1">
-      <template #toolbar-tools>
+        <!-- 顶部操作按钮 -->
-        <Space>
+        <div class="mb-4 flex gap-2">
           <a-button
-            v-access:code="['property:machineType:export']"
-            @click="handleDownloadExcel"
-          >
-            {{ $t('pages.common.export') }}
-          </a-button>
-          <a-button
-            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['property:machineType:remove']"
-            @click="handleMultiDelete">
+            @click="handleDelete"
+            :disabled="!detailData || !detailData.id"
+          >
             {{ $t('pages.common.delete') }}
           </a-button>
           <a-button
@@ -172,34 +183,43 @@ function handleDownloadExcel() {
           >
             {{ $t('pages.common.add') }}
           </a-button>
-        </Space>
+          <a-button
-      </template>
+            v-if="detailData && detailData.id"
-      <template #action="{ row }">
+            type="default"
-        <Space>
-          <ghost-button
             v-access:code="['property:machineType:edit']"
-            @click.stop="handleEdit(row)"
+            @click="handleEdit"
           >
             {{ $t('pages.common.edit') }}
-          </ghost-button>
+          </a-button>
-          <Popconfirm
+        </div>
-            :get-popup-container="getVxePopupContainer"
+        <!-- 详情展示 -->
-            placement="left"
+        <a-card v-if="detailData" :title="detailData.machineTypeName">
-            title="确认删除？"
+          <a-descriptions
-            @confirm="handleDelete(row)"
+            bordered
+            :column="2"
+            size="middle"
+            title="设备类型详情"
+            class="mb-2"
           >
-            <ghost-button
+            <a-descriptions-item label="类型名称">
-              danger
+              {{ detailData.machineTypeName }}
-              v-access:code="['property:machineType:remove']"
+            </a-descriptions-item>
-              @click.stop=""
+            <a-descriptions-item label="类型编号">
-            >
+              {{ detailData.machineTypeCode }}
-              {{ $t('pages.common.delete') }}
+            </a-descriptions-item>
-            </ghost-button>
+            <a-descriptions-item label="是否启用">
-          </Popconfirm>
+              <a-tag :color="detailData.isEnable == '1' ? 'green' : 'red'">
-        </Space>
+                {{ detailData.isEnable == '1' ? '启用' : '禁用' }}
-      </template>
+              </a-tag>
-    </BasicTable>
+            </a-descriptions-item>
-    <MachineTypeModal @reload="tableApi.query()" />
+            <a-descriptions-item label="备注">
+              {{ detailData.remark || '-' }}
+            </a-descriptions-item>
+          </a-descriptions>
+        </a-card>
+        <a-empty v-else description="暂无详情" />
+        <MachineTypeModal @reload="() => { reloadTree(); loadDetail(); }" />
+      </div>
     </div>
   </Page>
 </template>