Merge remote-tracking branch 'origin/dev_NEW_pro' into dev_NEW_pro

云

2026-04-30 6faf65a6a7e72b7ecff52355f798fd00a516ba77

Merge remote-tracking branch 'origin/dev_NEW_pro' into dev_NEW_pro

 FILE_UPLOAD_README.md

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,480 @@
# æœ¬åœ°æ–‡ä»¶ä¸Šä¼  README

本文档基于以下实现整理：

- `src/components/AttachmentUpload/file/index.vue`
- `src/components/AttachmentUpload/image/index.vue`
- `src/components/AttachmentPreview/image/index.vue`
- `src/components/Dialog/FileList.vue`
- `src/api/basicData/common.js`
- `src/api/publicApi/commonFile.js`

相关组件已在 `src/main.js` ä¸­æ³¨å†Œä¸ºå…¨å±€ç»„件，可直接在页面中使用：

- `FileUpload`
- `ImageUpload`
- `ImagePreview`
- `FileListDialog`

## 1. åŠŸèƒ½æ¦‚览

当前这套上传能力主要分为 4 éƒ¨åˆ†ï¼š

1. `FileUpload`：普通文件上传，支持拖拽、批量上传、预览、删除
2. `ImageUpload`：图片上传，支持图片墙展示、预览、删除
3. `ImagePreview`：图片列表预览展示
4. `FileListDialog`：业务附件弹窗，支持查询、上传、删除、下载

上传底层统一走接口：

- `POST /common/upload`

对应方法在 `src/api/basicData/common.js`：

```js
uploadFile(data)
```

## 2. ä¸Šä¼ æŽ¥å£è¯´æ˜Ž

### 2.1 é€šç”¨ä¸Šä¼ æŽ¥å£

文件上传组件和图片上传组件都调用了：

```js
import { uploadFile } from '@/api/basicData/common'
```

接口特征：

- è¯·æ±‚方式：`POST`
- åœ°å€ï¼š`/common/upload`
- è¯·æ±‚类型：`multipart/form-data`
- æ”¯æŒ `FormData` æ‰¹é‡ä¸Šä¼ 
- é»˜è®¤å­—段名：`files`

组件内部会这样组装参数：

```js
const formData = new FormData()
validFiles.forEach((file) => {
  formData.append(props.uploadFieldName, file.raw)
})
```

### 2.2 ä¸Šä¼ è¿”回值要求

上传成功后，组件会尝试从以下结构中提取数组：

- `response`
- `response.data`
- `response.data.data`
- `response.payload`
- `response.payload.data`
- `response.rows`
- `response.result`

因此后端返回数组时，上面任意一种结构都可以被识别。

组件展示时常用到的字段有：

- æ–‡ä»¶åï¼š`name` / `originalFilename` / `fileName` / `uidFilename`
- æ–‡ä»¶åœ°å€ï¼š`url` / `downloadURL`
- å›¾ç‰‡åœ°å€ï¼š`url` / `previewURL` / `previewUrl`
- ä¸»é”®ï¼š`id`

建议上传接口返回的单项对象尽量包含：

```js
{
  id: 1,
  originalFilename: 'demo.pdf',
  downloadURL: 'https://xxx/demo.pdf',
  previewURL: 'https://xxx/demo.png'
}
```

## 3. FileUpload æ–‡ä»¶ä¸Šä¼ ç»„件

组件路径：

`src/components/AttachmentUpload/file/index.vue`

### 3.1 åŸºç¡€ç”¨æ³•

```vue
<template>
  <FileUpload v-model:file-list="fileList" />
</template>

<script setup>
import { ref } from 'vue'

const fileList = ref([])
</script>
```

### 3.2 å¸¸ç”¨å±žæ€§

| å±žæ€§ | è¯´æ˜Ž | ç±»åž‹ | é»˜è®¤å€¼ |
| --- | --- | --- | --- |
| `fileList` | ç»‘定文件列表 | `Array` | `[]` |
| `limit` | æœ€å¤§ä¸Šä¼ æ•°é‡ | `Number` | `10` |
| `fileSize` | å•ä¸ªæ–‡ä»¶å¤§å°é™åˆ¶ï¼Œå•ä½ MB | `Number` | `50` |
| `fileType` | å…è®¸ä¸Šä¼ çš„文件类型，如 `['pdf', 'docx']` | `Array` | `[]` |
| `buttonText` | ä¸Šä¼ æç¤ºæ–‡æ¡ˆ | `String` | `单击选择文件` |
| `disabled` | æ˜¯å¦ç¦ç”¨ | `Boolean` | `false` |
| `uploadFieldName` | `FormData` å­—段名 | `String` | `files` |
| `index` | è¡¨æ ¼/列表行模式下的当前行索引 | `Number` | `-1` |
| `childrenKey` | è¡Œå†…挂载字段名 | `String` | `files` |

### 3.3 äº‹ä»¶

| äº‹ä»¶ | è¯´æ˜Ž |
| --- | --- |
| `update:fileList` | æ–‡ä»¶åˆ—表变化时触发 |
| `change` | æ–‡ä»¶åˆ—表变化时触发，返回最新列表 |

### 3.4 é™åˆ¶è§„则

组件内已实现：

- æ–‡ä»¶æ•°é‡é™åˆ¶
- æ–‡ä»¶å¤§å°é™åˆ¶
- æ–‡ä»¶ç±»åž‹æ ¡éªŒ
- ä¸Šä¼ ä¸­çŠ¶æ€é”å®š
- å¤±è´¥åŽè‡ªåŠ¨æ¸…空当前选择队列

例如限制 PDF/Word：

```vue
<FileUpload
  v-model:file-list="fileList"
  :limit="5"
  :file-size="20"
  :file-type="['pdf', 'doc', 'docx']"
/>
```

### 3.5 è¿”回数据格式建议

`FileUpload` æ›´é€‚合接收这样的列表：

```js
[
  {
    id: 1,
    originalFilename: '合同.pdf',
    downloadURL: 'https://xxx/contract.pdf'
  }
]
```

因为组件打开文件时会优先读取：

```js
url || downloadURL || previewURL || previewUrl
```

### 3.6 è¡Œå†…嵌套模式

如果上传组件放在表格某一行中，可配合 `index` å’Œ `childrenKey` ä½¿ç”¨ï¼š

```vue
<FileUpload
  v-model:file-list="tableData"
  :index="scope.$index"
  children-key="files"
/>
```

此时组件会自动读写：

```js
tableData[scope.$index].files
```

## 4. ImageUpload å›¾ç‰‡ä¸Šä¼ ç»„件

组件路径：

`src/components/AttachmentUpload/image/index.vue`

### 4.1 åŸºç¡€ç”¨æ³•

```vue
<template>
  <ImageUpload v-model:file-list="imageList" />
</template>

<script setup>
import { ref } from 'vue'

const imageList = ref([])
</script>
```

### 4.2 é»˜è®¤è¡Œä¸º

图片上传组件默认：

- æœ€å¤šä¸Šä¼  `10` å¼ 
- å•å¼ ä¸è¶…过 `10MB`
- é»˜è®¤æ”¯æŒæ ¼å¼ï¼š`png / jpg / jpeg / webp`
- ä½¿ç”¨ `picture-card` é£Žæ ¼å±•ç¤º
- ç‚¹å‡»ç¼©ç•¥å›¾å¯é¢„览大图

### 4.3 å¸¸ç”¨ç¤ºä¾‹

```vue
<ImageUpload
  v-model:file-list="imageList"
  :limit="9"
  :file-size="5"
  :file-type="['png', 'jpg', 'jpeg']"
  button-text="上传图片"
/>
```

### 4.4 è¿”回数据格式建议

`ImageUpload` å±•ç¤ºå›¾ç‰‡æ—¶ä¼˜å…ˆè¯»å–：

```js
url || previewURL || previewUrl
```

建议后端返回：

```js
[
  {
    id: 1,
    originalFilename: '现场图片.jpg',
    previewURL: 'https://xxx/image.jpg'
  }
]
```

### 4.5 è¡Œå†…嵌套模式

图片组件同样支持行内字段写回：

```vue
<ImageUpload
  v-model:file-list="tableData"
  :index="scope.$index"
  children-key="images"
/>
```

默认写回字段为 `images`。

## 5. ImagePreview å›¾ç‰‡é¢„览组件

组件路径：

`src/components/AttachmentPreview/image/index.vue`

### 5.1 åŸºç¡€ç”¨æ³•

```vue
<ImagePreview :file-list="imageList" />
```

### 5.2 å¯é…ç½®é¡¹

| å±žæ€§ | è¯´æ˜Ž | ç±»åž‹ | é»˜è®¤å€¼ |
| --- | --- | --- | --- |
| `fileList` | å›¾ç‰‡åˆ—表 | `Array` | `[]` |
| `thumbSize` | ç¼©ç•¥å›¾å¤§å° | `Number` | `72` |
| `gap` | ç¼©ç•¥å›¾é—´è· | `Number` | `10` |

### 5.3 æ•°æ®è¦æ±‚

组件会过滤没有 `previewURL` çš„项，因此如果要正常显示，建议至少包含：

```js
[
  {
    previewURL: 'https://xxx/image.jpg',
    originalFilename: '图片1.jpg'
  }
]
```

如果列表为空，组件显示“暂无图片”。

## 6. FileListDialog é™„件弹窗组件

组件路径：

`src/components/Dialog/FileList.vue`

这个组件适合业务表单或详情页里的“附件管理”场景，能力包括：

- æ ¹æ®ä¸šåŠ¡ä¸»é”®æŸ¥è¯¢é™„件列表
- æ‰“开弹窗查看附件
- åœ¨å¼¹çª—中继续上传附件
- åˆ é™¤é™„件
- ä¸‹è½½é™„件

### 6.1 ç»„件属性

| å±žæ€§ | è¯´æ˜Ž | ç±»åž‹ | é»˜è®¤å€¼ |
| --- | --- | --- | --- |
| `visible` | æ˜¯å¦æ˜¾ç¤ºå¼¹çª— | `Boolean` | å¿…ä¼  |
| `recordType` | ä¸šåŠ¡ç±»åž‹ | `String` | `''` |
| `recordId` | ä¸šåŠ¡ä¸»é”® | `Number` | `0` |
| `title` | å¼¹çª—标题 | `String` | `附件` |
| `width` | å¼¹çª—宽度 | `String` | `50%` |
| `showActions` | æ˜¯å¦æ˜¾ç¤ºä¸‹è½½/删除操作列 | `Boolean` | `true` |

### 6.2 åŸºç¡€ç”¨æ³•

```vue
<template>
  <el-button @click="visible = true">查看附件</el-button>

  <FileListDialog
    v-model:visible="visible"
    record-type="salesLedger"
    :record-id="rowId"
    title="附件列表"
  />
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const rowId = ref(1001)
</script>
```

### 6.3 ç»„件内部依赖的接口

`FileListDialog` æœ¬èº«ä¸ç›´æŽ¥è°ƒç”¨ `commonFile.js`，而是依赖：

- `attachmentList`
- `createAttachment`
- `deleteAttachment`

处理逻辑为：

1. æ‰“开弹窗后根据 `recordType + recordId` æŸ¥è¯¢é™„件
2. ç‚¹å‡»â€œä¸Šä¼ é™„件”后，内部使用 `AttachmentUpload/file` å…ˆä¸Šä¼ åˆ° `/common/upload`
3. ä¸Šä¼ æˆåŠŸåŽï¼Œå°†è¿”回的文件对象和已有列表一起提交给 `createAttachment`
4. åˆ é™¤æ—¶è°ƒç”¨ `deleteAttachment`
5. ä¸‹è½½æ—¶ç›´æŽ¥ `window.open(downloadURL, '_blank')`

因此这里要特别注意：

- `recordType` å’Œ `recordId` å¿…须是有效业务标识
- ä¸Šä¼ æˆåŠŸè¿”回的数据，需要能被 `createAttachment` ç›´æŽ¥æŽ¥æ”¶
- åˆ—表中的下载地址字段应为 `downloadURL`

## 7. commonFile.js è¯´æ˜Ž

文件路径：

`src/api/publicApi/commonFile.js`

当前文件提供的是公共文件删除接口：

```js
delCommonFile(ids)
delCommonFileInvoiceLedger(ids)
```

对应接口：

- `/commonFile/delCommonFile`
- `/invoiceLedger/delFile`

这两个方法更适合已经和具体业务绑定后的“删除已保存附件”场景，不负责上传文件本身。

示例：

```js
import { delCommonFile } from '@/api/publicApi/commonFile'

await delCommonFile([1, 2, 3])
```

## 8. æŽ¨èä½¿ç”¨æ–¹å¼

### 8.1 æ™®é€šä¸šåŠ¡è¡¨å•ä¸Šä¼ é™„件

```vue
<FileUpload v-model:file-list="form.storageBlobDTOs" />
```

提交表单时直接带上：

```js
{
  ...form,
  storageBlobDTOs: form.storageBlobDTOs
}
```

### 8.2 å›¾ç‰‡ç±»ä¸šåŠ¡

```vue
<ImageUpload v-model:file-list="form.images" />
<ImagePreview :file-list="form.images" />
```

### 8.3 å·²è½åº“附件管理

```vue
<FileListDialog
  v-model:visible="dialogVisible"
  :record-type="recordType"
  :record-id="recordId"
/>
```

适合详情页、审批页、台账页这类“查看并维护当前业务附件”的场景。

## 9. æ³¨æ„äº‹é¡¹

1. `FileUpload` å’Œ `ImageUpload` åªæ˜¯è´Ÿè´£æŠŠæ–‡ä»¶å…ˆä¼ åˆ° `/common/upload`，不等于已经和业务数据绑定。
2. å¦‚果业务需要持久化附件关系，仍需要在保存表单时把返回的文件对象提交给业务接口。
3. `ImagePreview` å½“前只识别 `previewURL`，如果后端只返回 `url`，预览组件将不会展示，最好统一补齐 `previewURL`。
4. `FileListDialog` ä¾èµ– `recordType`、`recordId` æŸ¥è¯¢å’Œä¿å­˜é™„件关系，新增业务时要先确认后端关联接口可用。
5. åˆ é™¤æœ¬åœ°åˆ—表项和删除已保存附件是两件事：
   - ä¸Šä¼ ç»„件里的删除：只会从当前前端绑定数组中移除
   - `commonFile.js` / `deleteAttachment`：才是真正调用后端删除

## 10. ä¸€å¥—最常见的页面写法

```vue
<template>
  <el-form :model="form">
    <el-form-item label="附件">
      <FileUpload v-model:file-list="form.storageBlobDTOs" :limit="5" />
    </el-form-item>

    <el-form-item label="现场图片">
      <ImageUpload v-model:file-list="form.images" :limit="9" />
    </el-form-item>

    <el-form-item label="图片预览">
      <ImagePreview :file-list="form.images" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({
  storageBlobDTOs: [],
  images: [],
})
</script>
```

如果你的目标是“先上传，再跟业务一起保存”，这套写法可以直接作为基础模板使用。

 jsconfig.json

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "~/*": ["./*"]
    }
  },
  "include": ["src/**/*.js", "src/**/*.vue", "vite.config.js"]
}

 src/api/basicData/productProcess.js

@@ -1,10 +1,10 @@
import request from '@/utils/request'
import request from "@/utils/request";

// å·¥åºåˆ—表分页查询
export function productProcessListPage(query) {
  return request({
    url: '/productProcess/listPage',
    method: 'get',
    params: query
  })
    url: "/technologyOperation/listPage",
    method: "get",
    params: query,
  });
}

 src/api/productionManagement/productionOrder.js

@@ -45,6 +45,15 @@
  });
}

// ç”Ÿäº§è®¢å•-修改
export function updateProductOrder(data) {
  return request({
    url: "/productionOrder/updateOrder",
    method: "post",
    data: data,
  });
}

export function delProductOrder(ids) {
  return request({
    url: `/productionOrder/delete`,

 src/api/productionManagement/productionProcess.js

@@ -4,7 +4,7 @@
// åˆ†é¡µæŸ¥è¯¢
export function listPage(query) {
  return request({
    url: "/productProcess/listPage",
    url: "/technologyOperation/listPage",
    method: "get",
    params: query,
  });
@@ -53,7 +53,7 @@
// å¯¼å…¥æ•°æ®
export function importData(data) {
  return request({
    url: "/productProcess/importData",
    url: "/technologyOperation/importData",
    method: "post",
    data: data,
  });
@@ -62,7 +62,7 @@
// ä¸‹è½½æ¨¡æ¿
export function downloadTemplate() {
  return request({
    url: "/productProcess/downloadTemplate",
    url: "/technologyOperation/downloadTemplate",
    method: "post",
    responseType: "blob",
  });

 src/components/Dialog/FileList.vue

@@ -5,7 +5,8 @@
             @close="handleClose"
             class="attachment-dialog">
    <!-- å·¥å…·æ  -->
    <div class="toolbar">
    <div v-if="editable"
         class="toolbar">
      <el-button type="primary"
                 size="small"
                 @click="handleUpload">
@@ -16,10 +17,11 @@
    <el-dialog v-model="uploadDialogVisible"
               title="上传附件"
               width="50%"
               @close="handleUploadClose">
               @close="closeUpload">
      <AttachmentUpload v-model:file-list="newFileList" />
      <template #footer>
        <el-button @click="handleUploadClose">关闭</el-button>
        <el-button @click="saveUpload">保存</el-button>
        <el-button @click="closeUpload">关闭</el-button>
      </template>
    </el-dialog>
    <!-- æ–‡ä»¶åˆ—表表格 -->
@@ -40,11 +42,12 @@
            <el-button link
                       type="primary"
                       size="small"
                       :href="scope.row.downloadURL"
                       class="download-link">
                       class="download-link"
                       @click="downloadFile(scope.row.downloadURL)">
              ä¸‹è½½
            </el-button>
            <el-button link
            <el-button v-if="editable"
                       link
                       type="danger"
                       size="small"
                       @click="handleDelete(scope.row)">
@@ -93,6 +96,10 @@
      type: Boolean,
      default: true,
    },
    editable: {
      type: Boolean,
      default: true,
    },
  });

  const emit = defineEmits(["close", "download", "upload", "delete"]);
@@ -119,7 +126,7 @@
    uploadDialogVisible.value = true;
  };

  const handleUploadClose = async () => {
  const saveUpload = async () => {
    // æ£€æŸ¥æ˜¯å¦æœ‰æ–°ä¸Šä¼ çš„文件
    if (newFileList.value.length > 0) {
      try {
@@ -136,6 +143,11 @@
        proxy?.$modal?.msgError("上传失败");
      }
    }
    uploadDialogVisible.value = false;
  };

  const closeUpload = () => {
    newFileList.value = [];
    uploadDialogVisible.value = false;
  };

@@ -160,6 +172,9 @@
    });
  };

  const downloadFile = url => {
    window.open(url, "_blank");
  };
  onMounted(() => {
    setList();
  });

 src/components/PIMTable/PIMTable.vue

@@ -21,6 +21,7 @@
            class="lims-table">
    <el-table-column align="center"
                     type="selection"
                     :selectable="selectable"
                     width="55"
                     v-if="isSelection" />
    <el-table-column align="center"
@@ -258,6 +259,10 @@
      type: Boolean,
      default: false,
    },
    selectable: {
      type: Function,
      default: () => true,
    },
    isShowPagination: {
      type: Boolean,
      default: true,

 src/layout/components/Sidebar/index.vue

@@ -1,142 +1,142 @@
<template>
  <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
    <logo v-if="showLogo" :collapse="isCollapse" />
  <div :class="{ 'has-logo': showLogo }"
       class="sidebar-container">
    <logo v-if="showLogo"
          :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="getMenuBackground"
        :text-color="getMenuTextColor"
        :unique-opened="true"
        :active-text-color="theme"
        :collapse-transition="false"
        mode="vertical"
        :class="sideTheme"
      >
        <sidebar-item
          v-for="(route, index) in sidebarRouters"
          :key="route.path + index"
          :item="route"
          :base-path="route.path"
        />
      <el-menu :default-active="activeMenu"
               :collapse="isCollapse"
               :background-color="getMenuBackground"
               :text-color="getMenuTextColor"
               :unique-opened="true"
               :active-text-color="theme"
               :collapse-transition="false"
               mode="vertical"
               :class="sideTheme">
        <sidebar-item v-for="(route, index) in sidebarRouters"
                      :key="route.path + index"
                      :item="route"
                      :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
  import Logo from "./Logo";
  import SidebarItem from "./SidebarItem";
  import variables from "@/assets/styles/variables.module.scss";
  import useAppStore from "@/store/modules/app";
  import useSettingsStore from "@/store/modules/settings";
  import usePermissionStore from "@/store/modules/permission";

const route = useRoute()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
  const route = useRoute();
  const appStore = useAppStore();
  const settingsStore = useSettingsStore();
  const permissionStore = usePermissionStore();

const sidebarRouters = computed(() => permissionStore.sidebarRouters)
const showLogo = computed(() => settingsStore.sidebarLogo)
const sideTheme = computed(() => settingsStore.sideTheme)
const theme = computed(() => settingsStore.theme)
const isCollapse = computed(() => !appStore.sidebar.opened)
  const sidebarRouters = computed(() => permissionStore.sidebarRouters);
  const showLogo = computed(() => settingsStore.sidebarLogo);
  const sideTheme = computed(() => settingsStore.sideTheme);
  const theme = computed(() => settingsStore.theme);
  const isCollapse = computed(() => !appStore.sidebar.opened);

const getMenuBackground = computed(() => 'var(--sidebar-bg)')
  const getMenuBackground = computed(() => "var(--sidebar-bg)");

const getMenuTextColor = computed(() => {
  if (settingsStore.isDark) {
    return 'var(--sidebar-text)'
  }
  return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText
})
  const getMenuTextColor = computed(() => {
    if (settingsStore.isDark) {
      return "var(--sidebar-text)";
    }
    return sideTheme.value === "theme-dark"
      ? variables.menuText
      : variables.menuLightText;
  });

const activeMenu = computed(() => {
  const { meta, path } = route
  if (meta.activeMenu) {
    return meta.activeMenu
  }
  return path
})
  const activeMenu = computed(() => {
    const { meta, path } = route;
    if (meta.activeMenu) {
      return meta.activeMenu;
    }
    return path;
  });
</script>

<style lang="scss" scoped>
.sidebar-container {
  background-color: v-bind(getMenuBackground);
  border-radius: 22px;
  overflow: hidden;

  .scrollbar-wrapper {
  .sidebar-container {
    background-color: v-bind(getMenuBackground);
  }

  .el-menu {
    border: none;
    height: 100%;
    width: 100% !important;
    border-radius: 22px;
    overflow: hidden;

    .el-menu-item,
    .el-sub-menu__title {
      margin-bottom: 6px;
      border-radius: 14px;
      color: v-bind(getMenuTextColor);
    .scrollbar-wrapper {
      background-color: v-bind(getMenuBackground);
    }

      &:hover {
        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
      border-radius: 22px;

      .el-menu-item,
      .el-sub-menu__title {
        margin-bottom: 6px;
        border-radius: 14px;
        color: v-bind(getMenuTextColor);

        &:hover {
          background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
          border-radius: 14px;
        }
      }

      .el-menu-item {
        &.is-active {
          color: v-bind(theme);
          background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
          font-weight: 600;
        }
      }

      .el-sub-menu__title {
        color: v-bind(getMenuTextColor);
      }

      :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
        color: v-bind(theme) !important;
        font-weight: 600;
        background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
        border-radius: 14px;
        margin: 0 10px 6px !important;
        // width: calc(100% - 20px) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box;
        overflow: hidden;
        background-clip: padding-box;
      }

      :deep(.el-menu-item.is-active) {
        margin: 0 10px 6px !important;
        width: calc(100% - 20px) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box;
        overflow: hidden;
        background-clip: padding-box;
        border-radius: 14px;
      }

      :deep(.el-sub-menu.is-active > .el-sub-menu__title .menu-title),
      :deep(.el-sub-menu.is-active > .el-sub-menu__title .svg-icon),
      :deep(.el-menu-item.is-active .menu-title),
      :deep(.el-menu-item.is-active .svg-icon) {
        color: v-bind(theme) !important;
      }

      :deep(.el-sub-menu__title:hover),
      :deep(.el-menu-item:hover) {
        border-radius: 14px;
      }
    }

    .el-menu-item {
      &.is-active {
        color: v-bind(theme);
        background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
        font-weight: 600;
      }
    }

    .el-sub-menu__title {
      color: v-bind(getMenuTextColor);
    }

    :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
      color: v-bind(theme) !important;
      font-weight: 600;
      background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
      border-radius: 14px;
      margin: 0 10px 6px !important;
      width: calc(100% - 20px) !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
      box-sizing: border-box;
      overflow: hidden;
      background-clip: padding-box;
    }

    :deep(.el-menu-item.is-active) {
      margin: 0 10px 6px !important;
      width: calc(100% - 20px) !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
      box-sizing: border-box;
      overflow: hidden;
      background-clip: padding-box;
      border-radius: 14px;
    }

    :deep(.el-sub-menu.is-active > .el-sub-menu__title .menu-title),
    :deep(.el-sub-menu.is-active > .el-sub-menu__title .svg-icon),
    :deep(.el-menu-item.is-active .menu-title),
    :deep(.el-menu-item.is-active .svg-icon) {
      color: v-bind(theme) !important;
    }

    :deep(.el-sub-menu__title:hover),
    :deep(.el-menu-item:hover) {
      border-radius: 14px;
    }
  }
}
</style>

 src/main.js

@@ -48,6 +48,8 @@
import ImageUpload from "@/components/AttachmentUpload/image";
// å›¾ç‰‡é¢„览组件
import ImagePreview from "@/components/AttachmentPreview/image";
// é™„件弹窗组件
import FileListDialog from "@/components/Dialog/FileList.vue";
// å­—典标签组件
import DictTag from "@/components/DictTag";
// è¡¨æ ¼ç»„件
@@ -92,6 +94,7 @@
app.component("FileUpload", FileUpload);
app.component("ImageUpload", ImageUpload);
app.component("ImagePreview", ImagePreview);
app.component("FileListDialog", FileListDialog);
app.component("RightToolbar", RightToolbar);
app.component("Editor", Editor);
app.component("PIMTable", PIMTable);

 src/router/index.js

@@ -146,106 +146,106 @@
        path: "general-ledger",
        component: () => import("@/views/financialManagement/generalLedger/index.vue"),
        name: "GeneralLedger",
        meta: { title: "总帐科目" }
        meta: { title: "总帐科目" },
      },
      {
        path: "sales-out",
        component: () => import("@/views/financialManagement/receivable/salesOut.vue"),
        name: "SalesOut",
        meta: { title: "销售出库" }
        meta: { title: "销售出库" },
      },
      {
        path: "sales-return",
        component: () => import("@/views/financialManagement/receivable/salesReturn.vue"),
        name: "SalesReturn",
        meta: { title: "销售退货" }
        meta: { title: "销售退货" },
      },
      {
        path: "receivable-reconciliation",
        component: () => import("@/views/financialManagement/receivable/reconciliation.vue"),
        name: "ReceivableReconciliation",
        meta: { title: "应收对账" }
        meta: { title: "应收对账" },
      },
      {
        path: "invoice-apply",
        component: () => import("@/views/financialManagement/receivable/invoiceApply.vue"),
        name: "InvoiceApply",
        meta: { title: "开票申请" }
        meta: { title: "开票申请" },
      },
      {
        path: "output-invoice",
        component: () => import("@/views/financialManagement/receivable/outputInvoice.vue"),
        name: "OutputInvoice",
        meta: { title: "销项发票" }
        meta: { title: "销项发票" },
      },
      {
        path: "receipt",
        component: () => import("@/views/financialManagement/receivable/receipt.vue"),
        name: "Receipt",
        meta: { title: "收款单" }
        meta: { title: "收款单" },
      },
      {
        path: "purchase-in",
        component: () => import("@/views/financialManagement/payable/purchaseIn.vue"),
        name: "PurchaseIn",
        meta: { title: "采购入库" }
        meta: { title: "采购入库" },
      },
      {
        path: "payable-reconciliation",
        component: () => import("@/views/financialManagement/payable/reconciliation.vue"),
        name: "PayableReconciliation",
        meta: { title: "应付对账" }
        meta: { title: "应付对账" },
      },
      {
        path: "input-invoice",
        component: () => import("@/views/financialManagement/payable/input-invoice.vue"),
        name: "InputInvoice",
        meta: { title: "进项发票" }
        meta: { title: "进项发票" },
      },
      {
        path: "payment-apply",
        component: () => import("@/views/financialManagement/payable/paymentApply.vue"),
        name: "PaymentApply",
        meta: { title: "付款申请" }
        meta: { title: "付款申请" },
      },
      {
        path: "payment",
        component: () => import("@/views/financialManagement/payable/payment.vue"),
        name: "Payment",
        meta: { title: "付款单" }
        meta: { title: "付款单" },
      },
      {
        path: "fixed-assets",
        component: () => import("@/views/financialManagement/assets/fixedAssets.vue"),
        name: "FixedAssets",
        meta: { title: "固定资产" }
        meta: { title: "固定资产" },
      },
      {
        path: "intangible-assets",
        component: () => import("@/views/financialManagement/assets/intangibleAssets.vue"),
        name: "IntangibleAssets",
        meta: { title: "无形资产" }
        meta: { title: "无形资产" },
      },
      {
        path: "voucher",
        component: () => import("@/views/financialManagement/voucher/index.vue"),
        name: "Voucher",
        meta: { title: "凭证" }
        meta: { title: "凭证" },
      },
      {
        path: "voucher-general-ledger",
        component: () => import("@/views/financialManagement/voucher/generalLedger.vue"),
        name: "VoucherGeneralLedger",
        meta: { title: "科目总帐" }
        meta: { title: "科目总帐" },
      },
      {
        path: "voucher-detail-ledger",
        component: () => import("@/views/financialManagement/voucher/detailLedger.vue"),
        name: "VoucherDetailLedger",
        meta: { title: "科目明细帐" }
      }
    ]
  }
        meta: { title: "科目明细帐" },
      },
    ],
  },
];

// åŠ¨æ€è·¯ç”±ï¼ŒåŸºäºŽç”¨æˆ·æƒé™åŠ¨æ€åŽ»åŠ è½½

 src/views/basicData/product/index.vue

@@ -2,41 +2,34 @@
  <div class="app-container product-view">
    <div class="left">
      <div>
        <el-input
          v-model="search"
          style="width: 210px"
          placeholder="输入关键字进行搜索"
          @change="searchFilter"
          @clear="searchFilter"
          clearable
          prefix-icon="Search"
        />
        <el-button
          v-if="false"
          type="primary"
          @click="openProDia('addOne')"
          style="margin-left: 10px"
          >新增产品大类</el-button
        >
        <el-input v-model="search"
                  style="width: 210px"
                  placeholder="输入关键字进行搜索"
                  @change="searchFilter"
                  @clear="searchFilter"
                  clearable
                  prefix-icon="Search" />
        <el-button v-if="false"
                   type="primary"
                   @click="openProDia('addOne')"
                   style="margin-left: 10px">新增产品大类</el-button>
      </div>
      <div ref="containerRef">
        <el-tree
          ref="tree"
          v-loading="treeLoad"
          :data="list"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          @node-expand="handleNodeExpand"
          @node-collapse="handleNodeCollapse"
          :key="treeKey"
          :default-expanded-keys="expandedKeys"
          :filter-node-method="filterNode"
          :props="{ children: 'children', label: 'label' }"
          highlight-current
          node-key="id"
          class="product-tree-scroll"
          style="height: calc(100vh - 190px); overflow-y: auto"
        >
        <el-tree ref="tree"
                 v-loading="treeLoad"
                 :data="list"
                 @node-click="handleNodeClick"
                 :expand-on-click-node="false"
                 @node-expand="handleNodeExpand"
                 @node-collapse="handleNodeCollapse"
                 :key="treeKey"
                 :default-expanded-keys="expandedKeys"
                 :filter-node-method="filterNode"
                 :props="{ children: 'children', label: 'label' }"
                 highlight-current
                 node-key="id"
                 class="product-tree-scroll"
                 style="height: calc(100vh - 190px); overflow-y: auto">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <span class="tree-node-content">
@@ -47,25 +40,23 @@
                <span class="tree-node-label">{{ data.label }}</span>
              </span>
              <div>
                <el-button
                  type="primary"
                  link
                  :disabled="isTopLevelNode(data, node)"
                  @click="openProDia('edit', data)"
                >
                <el-button type="primary"
                           link
                           :disabled="isTopLevelNode(data, node)"
                           @click="openProDia('edit', data)">
                  ç¼–辑
                </el-button>
                <el-button type="primary" link @click="openProDia('add', data)">
                <el-button type="primary"
                           link
                           @click="openProDia('add', data)">
                  æ·»åŠ äº§å“
                </el-button>
                <el-button
                  v-if="!node.childNodes.length"
                  style="margin-left: 4px"
                  type="danger"
                  link
                  :disabled="isTopLevelNode(data, node)"
                  @click="remove(node, data)"
                >
                <el-button v-if="!node.childNodes.length"
                           style="margin-left: 4px"
                           type="danger"
                           link
                           :disabled="isTopLevelNode(data, node)"
                           @click="remove(node, data)">
                  åˆ é™¤
                </el-button>
              </div>
@@ -75,103 +66,109 @@
      </div>
    </div>
    <div class="right">
      <div style="margin-bottom: 10px" v-if="isShowButton">
        <el-button type="primary" @click="openModelDia('add')">
      <div style="margin-bottom: 10px"
           v-if="isShowButton">
        <el-button type="primary"
                   @click="openModelDia('add')">
          æ–°å¢žè§„格型号
        </el-button>
        <ImportExcel :product-id="currentId" @uploadSuccess="getModelList" />
        <el-button
          type="danger"
          @click="handleDelete"
          style="margin-left: 10px"
          plain
        >
        <ImportExcel :product-id="currentId"
                     @uploadSuccess="getModelList" />
        <el-button type="danger"
                   @click="handleDelete"
                   style="margin-left: 10px"
                   plain>
          åˆ é™¤
        </el-button>
      </div>
      <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :isSelection="true"
        @selection-change="handleSelectionChange"
        :tableLoading="tableLoading"
        @pagination="pagination"
      ></PIMTable>
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"></PIMTable>
    </div>
    <el-dialog v-model="productDia" title="产品" width="400px" @keydown.enter.prevent>
      <el-form
        :model="form"
        label-width="140px"
        label-position="top"
        :rules="rules"
        ref="formRef"
      >
    <el-dialog v-model="productDia"
               title="产品"
               width="400px"
               @keydown.enter.prevent>
      <el-form :model="form"
               label-width="140px"
               label-position="top"
               :rules="rules"
               ref="formRef">
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="产品名称：" prop="productName">
              <el-input
                v-model="form.productName"
                placeholder="请输入产品名称"
                maxlength="20"
                show-word-limit
                clearable
                @keydown.enter.prevent
              />
            <el-form-item label="产品名称："
                          prop="productName">
              <el-input v-model="form.productName"
                        placeholder="请输入产品名称"
                        maxlength="20"
                        show-word-limit
                        clearable
                        @keydown.enter.prevent />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button type="primary"
                     @click="submitForm">确认</el-button>
          <el-button @click="closeProDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="modelDia"
      title="规格型号"
      width="400px"
      @close="closeModelDia"
      @keydown.enter.prevent
    >
      <el-form
        :model="modelForm"
        label-width="140px"
        label-position="top"
        :rules="modelRules"
        ref="modelFormRef"
      >
    <el-dialog v-model="modelDia"
               title="规格型号"
               width="400px"
               @close="closeModelDia"
               @keydown.enter.prevent>
      <el-form :model="modelForm"
               label-width="140px"
               label-position="top"
               :rules="modelRules"
               ref="modelFormRef">
        <el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="产品编号："
                            prop="productCode">
                <el-input v-model="modelForm.productCode"
                          placeholder="请输入产品编号"
                          clearable
                          @keydown.enter.prevent />
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="24">
            <el-form-item label="规格型号：" prop="model">
              <el-input
                v-model="modelForm.model"
                placeholder="请输入规格型号"
                clearable
                @keydown.enter.prevent
              />
            <el-form-item label="规格型号："
                          prop="model">
              <el-input v-model="modelForm.model"
                        placeholder="请输入规格型号"
                        clearable
                        @keydown.enter.prevent />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="单位：" prop="unit">
              <el-input
                v-model="modelForm.unit"
                placeholder="请输入单位"
                clearable
                @keydown.enter.prevent
              />
            <el-form-item label="单位："
                          prop="unit">
              <el-input v-model="modelForm.unit"
                        placeholder="请输入单位"
                        clearable
                        @keydown.enter.prevent />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitModelForm">确认</el-button>
          <el-button type="primary"
                     @click="submitModelForm">确认</el-button>
          <el-button @click="closeModelDia">取消</el-button>
        </div>
      </template>
@@ -180,473 +177,480 @@
</template>

<script setup>
import { nextTick, ref } from "vue";
import { ElMessageBox } from "element-plus";
import {
  addOrEditProduct,
  addOrEditProductModel,
  delProduct,
  delProductModel,
  modelListPage,
  productTreeList,
} from "@/api/basicData/product.js";
import ImportExcel from "./ImportExcel/index.vue";
  import { nextTick, ref } from "vue";
  import { ElMessageBox } from "element-plus";
  import {
    addOrEditProduct,
    addOrEditProductModel,
    delProduct,
    delProductModel,
    modelListPage,
    productTreeList,
  } from "@/api/basicData/product.js";
  import ImportExcel from "./ImportExcel/index.vue";

const { proxy } = getCurrentInstance();
const tree = ref(null);
const containerRef = ref(null);
const treeKey = ref(0);
const expandedKeySet = new Set();
const EXPANDED_STORAGE_KEY = "basicData_product_tree_expanded_keys_v2";
  const { proxy } = getCurrentInstance();
  const tree = ref(null);
  const containerRef = ref(null);
  const treeKey = ref(0);
  const expandedKeySet = new Set();
  const EXPANDED_STORAGE_KEY = "basicData_product_tree_expanded_keys_v2";

const loadExpandedKeys = () => {
  if (typeof window === "undefined") {
    return [];
  }
  try {
    const saved = localStorage.getItem(EXPANDED_STORAGE_KEY);
    return saved ? JSON.parse(saved) : [];
  } catch (error) {
    console.error(error);
    return [];
  }
};

const saveExpandedKeys = () => {
  if (typeof window === "undefined") {
    return;
  }
  localStorage.setItem(
    EXPANDED_STORAGE_KEY,
    JSON.stringify(Array.from(expandedKeySet))
  );
};

loadExpandedKeys().forEach((key) => expandedKeySet.add(key));

const syncExpandedKeysFromTree = () => {
  const keys = [];
  const walk = (nodes) => {
    (nodes || []).forEach((item) => {
      if (item.expanded && item.data?.id !== undefined) {
        keys.push(item.data.id);
      }
      if (item.childNodes && item.childNodes.length) {
        walk(item.childNodes);
      }
    });
  };

  walk(tree.value?.root?.childNodes);
  expandedKeySet.clear();
  keys.forEach((key) => expandedKeySet.add(key));
  expandedKeys.value = keys;
  saveExpandedKeys();
};

const normalizeExpandedKeys = (treeData) => {
  const parentMap = new Map();
  const walk = (nodes, parentId = null) => {
    (nodes || []).forEach((item) => {
      parentMap.set(item.id, parentId);
      if (item.children && item.children.length) {
        walk(item.children, item.id);
      }
    });
  };

  walk(treeData);

  const normalizedKeys = Array.from(expandedKeySet).filter((key) => {
    if (!parentMap.has(key)) {
      return false;
  const loadExpandedKeys = () => {
    if (typeof window === "undefined") {
      return [];
    }
    let currentId = key;
    while (parentMap.has(currentId)) {
      const parentId = parentMap.get(currentId);
      if (!parentId) {
        return true;
      }
      if (!expandedKeySet.has(parentId)) {
    try {
      const saved = localStorage.getItem(EXPANDED_STORAGE_KEY);
      return saved ? JSON.parse(saved) : [];
    } catch (error) {
      console.error(error);
      return [];
    }
  };

  const saveExpandedKeys = () => {
    if (typeof window === "undefined") {
      return;
    }
    localStorage.setItem(
      EXPANDED_STORAGE_KEY,
      JSON.stringify(Array.from(expandedKeySet))
    );
  };

  loadExpandedKeys().forEach(key => expandedKeySet.add(key));

  const syncExpandedKeysFromTree = () => {
    const keys = [];
    const walk = nodes => {
      (nodes || []).forEach(item => {
        if (item.expanded && item.data?.id !== undefined) {
          keys.push(item.data.id);
        }
        if (item.childNodes && item.childNodes.length) {
          walk(item.childNodes);
        }
      });
    };

    walk(tree.value?.root?.childNodes);
    expandedKeySet.clear();
    keys.forEach(key => expandedKeySet.add(key));
    expandedKeys.value = keys;
    saveExpandedKeys();
  };

  const normalizeExpandedKeys = treeData => {
    const parentMap = new Map();
    const walk = (nodes, parentId = null) => {
      (nodes || []).forEach(item => {
        parentMap.set(item.id, parentId);
        if (item.children && item.children.length) {
          walk(item.children, item.id);
        }
      });
    };

    walk(treeData);

    const normalizedKeys = Array.from(expandedKeySet).filter(key => {
      if (!parentMap.has(key)) {
        return false;
      }
      currentId = parentId;
    }
    return true;
  });

  if (normalizedKeys.length !== expandedKeySet.size) {
    expandedKeySet.clear();
    normalizedKeys.forEach((key) => expandedKeySet.add(key));
    saveExpandedKeys();
  }
};

const productDia = ref(false);
const modelDia = ref(false);
const modelOperationType = ref("");
const search = ref("");
const currentId = ref("");
const currentParentId = ref("");
const operationType = ref("");
const treeLoad = ref(false);
const list = ref([]);
const expandedKeys = ref([]);
const tableColumn = ref([
  {
    label: "规格型号",
    prop: "model",
  },
  {
    label: "单位",
    prop: "unit",
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          openModelDia("edit", row);
        },
      },
    ],
  },
]);
const tableData = ref([]);
const tableLoading = ref(false);
const isShowButton = ref(false);
const selectedRows = ref([]);
const page = reactive({
  current: 1,
  size: 10,
  total: 0,
});
const data = reactive({
  form: {
    productName: "",
  },
  rules: {
    productName: [
      { required: true, message: "请输入", trigger: "blur" },
      { max: 20, message: "产品名称不能超过20个字符", trigger: "blur" },
    ],
  },
  modelForm: {
    model: "",
    unit: "",
  },
  modelRules: {
    model: [{ required: true, message: "请输入", trigger: "blur" }],
    unit: [{ required: true, message: "请输入", trigger: "blur" }],
  },
});
const { form, rules, modelForm, modelRules } = toRefs(data);
// æŸ¥è¯¢äº§å“æ ‘
const getProductTreeList = () => {
  treeLoad.value = true;
  productTreeList()
    .then((res) => {
      list.value = res || [];
      normalizeExpandedKeys(list.value);
      expandedKeys.value = Array.from(expandedKeySet);
      treeKey.value += 1;
      nextTick(() => {
        tree.value?.setDefaultExpandedKeys?.(expandedKeys.value);
      });
    })
    .catch((err) => {
      console.error(err);
    })
    .finally(() => {
      treeLoad.value = false;
    });
};
const handleNodeExpand = (data) => {
  nextTick(syncExpandedKeysFromTree);
};
const handleNodeCollapse = (data, node) => {
  node?.eachNode?.((item) => {
    item.collapse();
  });
  nextTick(syncExpandedKeysFromTree);
};
// è¿‡æ»¤äº§å“æ ‘
const searchFilter = () => {
  proxy.$refs.tree.filter(search.value);
};
const isTopLevelNode = (data, node) => {
  if (node?.level !== undefined) {
    return node.level === 1;
  }
  return [null, undefined, "", 0, "0"].includes(data?.parentId);
};
// æ‰“开产品弹框
const openProDia = (type, data) => {
  if (data && type === "edit" && isTopLevelNode(data)) {
    proxy.$modal.msgWarning("一级节点不能编辑或删除");
    return;
  }
  operationType.value = type;
  productDia.value = true;
  form.value.productName = "";
  if (type === "edit") {
    form.value.productName = data.productName;
  }
};
// æ‰“开规格型号弹框
const openModelDia = (type, data) => {
  modelOperationType.value = type;
  modelDia.value = true;
  modelForm.value.model = "";
  modelForm.value.model = "";
  modelForm.value.id = "";
  if (type === "edit") {
    modelForm.value = { ...data };
  }
};
// æäº¤äº§å“åç§°ä¿®æ”¹
const submitForm = () => {
  proxy.$refs.formRef.validate((valid) => {
    if (valid) {
      if (operationType.value === "add") {
        form.value.parentId = currentId.value;
        form.value.id = "";
      } else if (operationType.value === "addOne") {
        form.value.id = "";
        form.value.parentId = "";
      } else {
        form.value.id = currentId.value;
        form.value.parentId = "";
      let currentId = key;
      while (parentMap.has(currentId)) {
        const parentId = parentMap.get(currentId);
        if (!parentId) {
          return true;
        }
        if (!expandedKeySet.has(parentId)) {
          return false;
        }
        currentId = parentId;
      }
      addOrEditProduct(form.value).then((res) => {
        proxy.$modal.msgSuccess("提交成功");
        closeProDia();
        getProductTreeList();
      });
    }
  });
};
// å…³é—­äº§å“å¼¹æ¡†
const closeProDia = () => {
  proxy.$refs.formRef.resetFields();
  productDia.value = false;
};
      return true;
    });

// åˆ é™¤äº§å“
const remove = (node, data) => {
  if (isTopLevelNode(data, node)) {
    proxy.$modal.msgWarning("一级节点不能编辑或删除");
    return;
  }
  let ids = [];
  ids.push(data.id);
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      tableLoading.value = true;
      delProduct(ids)
        .then((res) => {
          proxy.$modal.msgSuccess("删除成功");
    if (normalizedKeys.length !== expandedKeySet.size) {
      expandedKeySet.clear();
      normalizedKeys.forEach(key => expandedKeySet.add(key));
      saveExpandedKeys();
    }
  };

  const productDia = ref(false);
  const modelDia = ref(false);
  const modelOperationType = ref("");
  const search = ref("");
  const currentId = ref("");
  const currentParentId = ref("");
  const operationType = ref("");
  const treeLoad = ref(false);
  const list = ref([]);
  const expandedKeys = ref([]);
  const tableColumn = ref([
    {
      label: "产品编号",
      prop: "productCode",
    },
    {
      label: "规格型号",
      prop: "model",
    },
    {
      label: "单位",
      prop: "unit",
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            openModelDia("edit", row);
          },
        },
      ],
    },
  ]);
  const tableData = ref([]);
  const tableLoading = ref(false);
  const isShowButton = ref(false);
  const selectedRows = ref([]);
  const page = reactive({
    current: 1,
    size: 10,
    total: 0,
  });
  const data = reactive({
    form: {
      productName: "",
    },
    rules: {
      productName: [
        { required: true, message: "请输入", trigger: "blur" },
        { max: 20, message: "产品名称不能超过20个字符", trigger: "blur" },
      ],
    },
    modelForm: {
      model: "",
      unit: "",
      productCode: "",
    },
    modelRules: {
      model: [{ required: true, message: "请输入", trigger: "blur" }],
      unit: [{ required: true, message: "请输入", trigger: "blur" }],
      productCode: [{ required: true, message: "请输入", trigger: "blur" }],
    },
  });
  const { form, rules, modelForm, modelRules } = toRefs(data);
  // æŸ¥è¯¢äº§å“æ ‘
  const getProductTreeList = () => {
    treeLoad.value = true;
    productTreeList()
      .then(res => {
        list.value = res || [];
        normalizeExpandedKeys(list.value);
        expandedKeys.value = Array.from(expandedKeySet);
        treeKey.value += 1;
        nextTick(() => {
          tree.value?.setDefaultExpandedKeys?.(expandedKeys.value);
        });
      })
      .catch(err => {
        console.error(err);
      })
      .finally(() => {
        treeLoad.value = false;
      });
  };
  const handleNodeExpand = data => {
    nextTick(syncExpandedKeysFromTree);
  };
  const handleNodeCollapse = (data, node) => {
    node?.eachNode?.(item => {
      item.collapse();
    });
    nextTick(syncExpandedKeysFromTree);
  };
  // è¿‡æ»¤äº§å“æ ‘
  const searchFilter = () => {
    proxy.$refs.tree.filter(search.value);
  };
  const isTopLevelNode = (data, node) => {
    if (node?.level !== undefined) {
      return node.level === 1;
    }
    return [null, undefined, "", 0, "0"].includes(data?.parentId);
  };
  // æ‰“开产品弹框
  const openProDia = (type, data) => {
    if (data && type === "edit" && isTopLevelNode(data)) {
      proxy.$modal.msgWarning("一级节点不能编辑或删除");
      return;
    }
    operationType.value = type;
    productDia.value = true;
    form.value.productName = "";
    if (type === "edit") {
      form.value.productName = data.productName;
    }
  };
  // æ‰“开规格型号弹框
  const openModelDia = (type, data) => {
    modelOperationType.value = type;
    modelDia.value = true;
    modelForm.value.model = "";
    modelForm.value.unit = "";
    modelForm.value.productCode = "";
    modelForm.value.id = "";
    if (type === "edit") {
      modelForm.value = { ...data };
    }
  };
  // æäº¤äº§å“åç§°ä¿®æ”¹
  const submitForm = () => {
    proxy.$refs.formRef.validate(valid => {
      if (valid) {
        if (operationType.value === "add") {
          form.value.parentId = currentId.value;
          form.value.id = "";
        } else if (operationType.value === "addOne") {
          form.value.id = "";
          form.value.parentId = "";
        } else {
          form.value.id = currentId.value;
          form.value.parentId = "";
        }
        addOrEditProduct(form.value).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          closeProDia();
          getProductTreeList();
        })
        .finally(() => {
          tableLoading.value = false;
        });
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
      }
    });
};
// é€‰æ‹©äº§å“
const handleNodeClick = (val, node, el) => {
  // åˆ¤æ–­æ˜¯å¦ä¸ºå¶å­èŠ‚点
  isShowButton.value = !(val.children && val.children.length > 0);
  // åªæœ‰å¶å­èŠ‚点才执行以下逻辑
  currentId.value = val.id;
  currentParentId.value = val.parentId;
  getModelList();
};
  };
  // å…³é—­äº§å“å¼¹æ¡†
  const closeProDia = () => {
    proxy.$refs.formRef.resetFields();
    productDia.value = false;
  };

// æäº¤è§„格型号修改
const submitModelForm = () => {
  proxy.$refs.modelFormRef.validate((valid) => {
    if (valid) {
      modelForm.value.productId = currentId.value;
      addOrEditProductModel(modelForm.value).then((res) => {
        proxy.$modal.msgSuccess("提交成功");
        closeModelDia();
        getModelList();
      });
  // åˆ é™¤äº§å“
  const remove = (node, data) => {
    if (isTopLevelNode(data, node)) {
      proxy.$modal.msgWarning("一级节点不能编辑或删除");
      return;
    }
  });
};
// å…³é—­åž‹å·å¼¹æ¡†
const closeModelDia = () => {
  proxy.$refs.modelFormRef.resetFields();
  modelDia.value = false;
};
// è¡¨æ ¼é€‰æ‹©æ•°æ®
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

// æŸ¥è¯¢è§„格型号
const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getModelList();
};
const getModelList = () => {
  tableLoading.value = true;
  modelListPage({
    id: currentId.value,
    current: page.current,
    size: page.size,
  }).then((res) => {
    console.log("res", res);
    tableData.value = res.records;
    page.total = res.total;
    tableLoading.value = false;
  });
};
// åˆ é™¤è§„格型号
const handleDelete = () => {
  let ids = [];
  if (selectedRows.value.length > 0) {
    ids = selectedRows.value.map((item) => item.id);
  } else {
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      tableLoading.value = true;
      delProductModel(ids)
        .then((res) => {
          proxy.$modal.msgSuccess("删除成功");
          getModelList();
        })
        .finally(() => {
          tableLoading.value = false;
        });
    let ids = [];
    ids.push(data.id);
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
      .then(() => {
        tableLoading.value = true;
        delProduct(ids)
          .then(res => {
            proxy.$modal.msgSuccess("删除成功");
            getProductTreeList();
          })
          .finally(() => {
            tableLoading.value = false;
          });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  // é€‰æ‹©äº§å“
  const handleNodeClick = (val, node, el) => {
    // åˆ¤æ–­æ˜¯å¦ä¸ºå¶å­èŠ‚点
    isShowButton.value = !(val.children && val.children.length > 0);
    // åªæœ‰å¶å­èŠ‚点才执行以下逻辑
    currentId.value = val.id;
    currentParentId.value = val.parentId;
    getModelList();
  };

  // æäº¤è§„格型号修改
  const submitModelForm = () => {
    proxy.$refs.modelFormRef.validate(valid => {
      if (valid) {
        modelForm.value.productId = currentId.value;
        addOrEditProductModel(modelForm.value).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          closeModelDia();
          getModelList();
        });
      }
    });
};
// è°ƒç”¨tree过滤方法 ä¸­æ–‡è‹±è¿‡æ»¤
const filterNode = (value, data, node) => {
  if (!value) {
    //如果数据为空，则返回true,显示所有的数据项
    return true;
  }
  // æŸ¥è¯¢åˆ—表是否有匹配数据，将值小写，匹配英文数据
  let val = value.toLowerCase();
  return chooseNode(val, data, node); // è°ƒç”¨è¿‡æ»¤äºŒå±‚方法
};
// è¿‡æ»¤çˆ¶èŠ‚点 / å­èŠ‚点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
const chooseNode = (value, data, node) => {
  if (data.label.indexOf(value) !== -1) {
    return true;
  }
  const level = node.level;
  // å¦‚果传入的节点本身就是一级节点就不用校验了
  if (level === 1) {
    return false;
  }
  // å…ˆå–当前节点的父节点
  let parentData = node.parent;
  // éåŽ†å½“前节点的父节点
  let index = 0;
  while (index < level - 1) {
    // å¦‚果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
    if (parentData.data.label.indexOf(value) !== -1) {
  };
  // å…³é—­åž‹å·å¼¹æ¡†
  const closeModelDia = () => {
    proxy.$refs.modelFormRef.resetFields();
    modelDia.value = false;
  };
  // è¡¨æ ¼é€‰æ‹©æ•°æ®
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };

  // æŸ¥è¯¢è§„格型号
  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getModelList();
  };
  const getModelList = () => {
    tableLoading.value = true;
    modelListPage({
      id: currentId.value,
      current: page.current,
      size: page.size,
    }).then(res => {
      console.log("res", res);
      tableData.value = res.records;
      page.total = res.total;
      tableLoading.value = false;
    });
  };
  // åˆ é™¤è§„格型号
  const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
      ids = selectedRows.value.map(item => item.id);
    } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        tableLoading.value = true;
        delProductModel(ids)
          .then(res => {
            proxy.$modal.msgSuccess("删除成功");
            getModelList();
          })
          .finally(() => {
            tableLoading.value = false;
          });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  // è°ƒç”¨tree过滤方法 ä¸­æ–‡è‹±è¿‡æ»¤
  const filterNode = (value, data, node) => {
    if (!value) {
      //如果数据为空，则返回true,显示所有的数据项
      return true;
    }
    // å¦åˆ™çš„话再往上一层做匹配
    parentData = parentData.parent;
    index++;
  }
  // æ²¡åŒ¹é…åˆ°è¿”回false
  return false;
};
getProductTreeList();
    // æŸ¥è¯¢åˆ—表是否有匹配数据，将值小写，匹配英文数据
    let val = value.toLowerCase();
    return chooseNode(val, data, node); // è°ƒç”¨è¿‡æ»¤äºŒå±‚方法
  };
  // è¿‡æ»¤çˆ¶èŠ‚点 / å­èŠ‚点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
  const chooseNode = (value, data, node) => {
    if (data.label.indexOf(value) !== -1) {
      return true;
    }
    const level = node.level;
    // å¦‚果传入的节点本身就是一级节点就不用校验了
    if (level === 1) {
      return false;
    }
    // å…ˆå–当前节点的父节点
    let parentData = node.parent;
    // éåŽ†å½“前节点的父节点
    let index = 0;
    while (index < level - 1) {
      // å¦‚果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
      if (parentData.data.label.indexOf(value) !== -1) {
        return true;
      }
      // å¦åˆ™çš„话再往上一层做匹配
      parentData = parentData.parent;
      index++;
    }
    // æ²¡åŒ¹é…åˆ°è¿”回false
    return false;
  };
  getProductTreeList();
</script>

<style scoped>
.product-view {
  display: flex;
}
.left {
  width: 450px;
  min-width: 450px;
  padding: 16px;
  background: #ffffff;
}
.right {
  flex: 1;
  min-width: 0;
  padding: 16px;
  margin-left: 20px;
  background: #ffffff;
}
.custom-tree-node {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.tree-node-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.tree-node-content .orange-icon {
  flex-shrink: 0;
}
.tree-node-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orange-icon {
  color: orange;
  font-size: 18px;
  margin-right: 8px; /* å›¾æ ‡ä¸Žæ–‡å­—之间加点间距 */
}
.product-tree-scroll {
  scrollbar-width: thin;
  scrollbar-color: #c0c4cc #f5f7fa;
}
.product-tree-scroll::-webkit-scrollbar {
  width: 8px;
}
.product-tree-scroll::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 4px;
}
.product-tree-scroll::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}
.product-tree-scroll::-webkit-scrollbar-thumb:hover {
  background: #909399;
}
  .product-view {
    display: flex;
  }
  .left {
    width: 450px;
    min-width: 450px;
    padding: 16px;
    background: #ffffff;
  }
  .right {
    flex: 1;
    min-width: 0;
    padding: 16px;
    margin-left: 20px;
    background: #ffffff;
  }
  .custom-tree-node {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .tree-node-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden;
  }
  .tree-node-content .orange-icon {
    flex-shrink: 0;
  }
  .tree-node-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .orange-icon {
    color: orange;
    font-size: 18px;
    margin-right: 8px; /* å›¾æ ‡ä¸Žæ–‡å­—之间加点间距 */
  }
  .product-tree-scroll {
    scrollbar-width: thin;
    scrollbar-color: #c0c4cc #f5f7fa;
  }
  .product-tree-scroll::-webkit-scrollbar {
    width: 8px;
  }
  .product-tree-scroll::-webkit-scrollbar-track {
    background: #f5f7fa;
    border-radius: 4px;
  }
  .product-tree-scroll::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 4px;
  }
  .product-tree-scroll::-webkit-scrollbar-thumb:hover {
    background: #909399;
  }
</style>

 src/views/collaborativeApproval/rulesRegulationsManagement/index.vue

@@ -212,14 +212,7 @@
        </el-table-column>
      </el-table>
    </el-dialog>
    <FileListDialog ref="fileListDialogRef"
                    v-model="fileDialogVisible"
                    :show-upload-button="true"
                    :show-delete-button="true"
                    :delete-method="handleAttachmentDelete"
                    :rules-regulations-management-id="currentFileRuleId"
                    :name-column-label="'附件名称'"
                    @upload="handleAttachmentUpload"/>
    <FileList v-if="fileDialogVisible"  v-model:visible="fileDialogVisible" record-type="rules_regulations_management" :record-id="recordId"  />
  </div>
</template>

@@ -235,7 +228,7 @@
    addReadingStatus,
    updateReadingStatus,
  } from "@/api/collaborativeApproval/sealManagement.js";
  import FileListDialog from "@/components/Dialog/FileListDialog.vue";
  const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));
  import {
    listRuleFiles,
    delRuleFile,
@@ -254,14 +247,7 @@
    total: 0,
  });
  // é™„件弹窗
  const fileDialogVisible = ref(false);
  const fileListDialogRef = ref(null);
  const currentFileRuleId = ref(null);
  const filePage = reactive({
    current: 1,
    size: 1000,
    total: 0,
  });
  // è§„章制度相关
  const showRegulationDialog = ref(false);
  const showRegulationDetailDialog = ref(false);
@@ -564,63 +550,15 @@
    );
  };

  // é™„件：查询
  const fetchRuleFiles = async rulesRegulationsManagementId => {
    const params = {
      current: filePage.current,
      size: filePage.size,
      rulesRegulationsManagementId,
    };
    const res = await listRuleFiles(params);
    const records = res?.data?.records || [];
    filePage.total = res?.data?.total || records.length;
    const mapped = records.map(item => ({
      id: item.id,
      name: item.fileName || item.name,
      url: item.fileUrl || item.url,
      raw: item,
    }));
    fileListDialogRef.value?.setList(mapped);
  };

  // æ‰“开附件弹窗
  const openFileDialog = async row => {
    currentFileRuleId.value = row.id;
    fileDialogVisible.value = true;
    await fetchRuleFiles(row.id);
  };
  const recordId =ref(0)
  const fileDialogVisible = ref(false)

  // åˆ·æ–°é™„件列表
  const refreshFileList = async () => {
    if (!currentFileRuleId.value) return;
    await fetchRuleFiles(currentFileRuleId.value);
  };

  // ä¸Šä¼ é™„件（由子组件触发）
  const handleAttachmentUpload = async filePayload => {
    if (!currentFileRuleId.value) return;
    const payload = {
      name: filePayload?.fileName || filePayload?.name,
      url: filePayload?.fileUrl || filePayload?.url,
      rulesRegulationsManagementId: currentFileRuleId.value,
    };
    await addRuleFile(payload);
    ElMessage.success("文件上传成功");
    await refreshFileList();
  };

  // åˆ é™¤é™„件
  const handleAttachmentDelete = async row => {
    if (!row?.id) return false;
    try {
      await ElMessageBox.confirm("确认删除该附件？", "提示", { type: "warning" });
    } catch {
      return false;
    }
    await delRuleFile([row.id]);
    ElMessage.success("删除成功");
    await refreshFileList();
  };
  // æ‰“开附件弹框
  const openFileDialog = async (row) => {
    recordId.value = row.id
    fileDialogVisible.value = true
  }

  // èŽ·å–规章制度列表数据
  const getRegulationList = async () => {

 src/views/customerService/afterSalesHandling/index.vue

@@ -102,33 +102,19 @@
            ></PIMTable>
        </div>
        <form-dia ref="formDia" @close="handleQuery"></form-dia>
        <FileListDialog
            ref="fileListRef"
            v-model="fileListDialogVisible"
            title="售后附件"
            :show-upload-button="true"
            :show-delete-button="true"
            :upload-method="handleFileUpload"
            :delete-method="handleFileDelete"
        />
    </div>
    <FileList v-if="fileDialogVisible"  v-model:visible="fileDialogVisible" record-type="after_sales_service" :record-id="recordId"  />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick } from "vue";
import {onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick, defineAsyncComponent} from "vue";
import FormDia from "@/views/customerService/afterSalesHandling/components/formDia.vue";
import FileListDialog from "@/components/Dialog/FileListDialog.vue";
import { ElMessageBox } from "element-plus";
import request from "@/utils/request";
import { getToken } from "@/utils/auth";
import {
    afterSalesServiceListPage,
    afterSalesServiceFileListPage,
    afterSalesServiceFileDel,
} from "@/api/customerService/index.js";
import useUserStore from "@/store/modules/user.js";
const { proxy } = getCurrentInstance();
const userStore = useUserStore()
const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));

const data = reactive({
    searchForm: {
@@ -303,144 +289,15 @@
  })
}


// æ‰“开附件弹窗
const recordId =ref(0)
const fileDialogVisible = ref(false)

// æ‰“开附件弹框
const openFilesFormDia = async (row) => {
    currentFileRow.value = row
    try {
        const res = await afterSalesServiceFileListPage({
            afterSalesServiceId: row.id,
            current: 1,
            size: 100,
        })
        if (res.code === 200 && fileListRef.value) {
            const fileList = (res.data?.records || []).map((item) => ({
                name: item.name || item.fileName,
                url: item.url || item.fileUrl,
                id: item.id,
                ...item,
            }))
            fileListRef.value.open(fileList)
            fileListDialogVisible.value = true
        } else {
            fileListRef.value?.open([])
            fileListDialogVisible.value = true
        }
    } catch (error) {
        proxy.$modal.msgError("获取附件列表失败")
        fileListRef.value?.open([])
        fileListDialogVisible.value = true
    }
}

// ä¸Šä¼ é™„件
const handleFileUpload = async () => {
    if (!currentFileRow.value) {
        proxy.$modal.msgWarning("请先选择数据")
        return
    }
    return new Promise((resolve) => {
        const input = document.createElement("input")
        input.type = "file"
        input.style.display = "none"
        input.onchange = async (e) => {
            const file = e.target.files[0]
            if (!file) {
                resolve(null)
                return
            }
            try {
                const formData = new FormData()
                formData.append("file", file)
                formData.append("id", currentFileRow.value.id)
                const uploadRes = await request({
                    url: "/afterSalesService/file/upload",
                    method: "post",
                    data: formData,
                    headers: {
                        "Content-Type": "multipart/form-data",
                        Authorization: `Bearer ${getToken()}`,
                    },
                })
                if (uploadRes.code === 200) {
                    proxy.$modal.msgSuccess("文件上传成功")
                    // é‡æ–°èŽ·å–文件列表
                    const listRes = await afterSalesServiceFileListPage({
                        afterSalesServiceId: currentFileRow.value.id,
                        current: 1,
                        size: 100,
                    })
                    if (listRes.code === 200 && fileListRef.value) {
                        const fileList = (listRes.data?.records || []).map((item) => ({
                            name: item.fileName,
                            url: item.fileUrl,
                            id: item.id,
                            ...item,
                        }))
                        fileListRef.value.setList(fileList)
                    }
                    resolve({ name: file.name, url: "", id: null })
                } else {
                    proxy.$modal.msgError(uploadRes.msg || "文件上传失败")
                    resolve(null)
                }
            } catch (err) {
                proxy.$modal.msgError("文件上传失败")
                resolve(null)
            } finally {
                document.body.removeChild(input)
            }
        }
        document.body.appendChild(input)
        input.click()
    })
}

// åˆ é™¤é™„件
const handleFileDelete = async (row) => {
    try {
        // æ·»åŠ ç¡®è®¤å¯¹è¯æ¡†
        const confirmResult = await ElMessageBox.confirm(
            '确定要删除这个附件吗？',
            '删除确认',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        )

        if (confirmResult === 'confirm') {
            const res = await afterSalesServiceFileDel(row.id)
            if (res.code === 200) {
                proxy.$modal.msgSuccess("删除成功")
                if (currentFileRow.value && fileListRef.value) {
                    const listRes = await afterSalesServiceFileListPage({
                        afterSalesServiceId: currentFileRow.value.id,
                        current: 1,
                        size: 100,
                    })
                    if (listRes.code === 200) {
                        const fileList = (listRes.data?.records || []).map((item) => ({
                            name: item.fileName,
                            url: item.fileUrl,
                            id: item.id,
                            ...item,
                        }))
                        fileListRef.value.setList(fileList)
                    }
                }
            } else {
                proxy.$modal.msgError(res.msg || "删除失败")
                return false
            }
        }
    } catch (error) {
        // å¦‚果用户取消删除，不显示错误信息
        if (error !== 'cancel') {
            proxy.$modal.msgError("删除失败")
        }
        return false
    }
  recordId.value = row.id
  fileDialogVisible.value = true
}

// æŸ¥è¯¢åˆ—表

 src/views/equipmentManagement/measurementEquipment/components/calibrationDia.vue

@@ -228,39 +228,6 @@
    form.value.entryDate = getCurrentDate();
}

// ä¸Šä¼ å‰æ ¡æ£€
function handleBeforeUpload(file) {
    proxy.$modal.loading("正在上传文件，请稍候...");
    return true;
}
// ä¸Šä¼ å¤±è´¥
function handleUploadError(err) {
    proxy.$modal.msgError("上传文件失败");
    proxy.$modal.closeLoading();
}
// ä¸Šä¼ æˆåŠŸå›žè°ƒ
function handleUploadSuccess(res, file, uploadFiles) {
    proxy.$modal.closeLoading();
    if (res.code === 200) {
        file.tempId = res.data.tempId;
        form.value.tempFileIds.push(file.tempId);
        proxy.$modal.msgSuccess("上传成功");
    } else {
        proxy.$modal.msgError(res.msg);
        proxy.$refs.fileUpload.handleRemove(file);
    }
}
// ç§»é™¤æ–‡ä»¶
function handleRemove(file) {
    if (operationType.value === "edit") {
        let ids = [];
        ids.push(file.id);
        delLedgerFile(ids).then((res) => {
            proxy.$modal.msgSuccess("删除成功");
        });
    }
}

// å¤„理有效日期输入，只允许正整数
const handleValidInput = (value) => {
    if (value === '' || value === null || value === undefined) {

 src/views/financialManagement/expenseManagement/index.vue

@@ -76,27 +76,18 @@
      </PIMTable>
    </div>
    <Modal ref="modalRef" @success="getTableData"></Modal>
    <FileListDialog 
      ref="fileListRef" 
      v-model="fileListDialogVisible"
      :show-upload-button="true"
      :show-delete-button="true"
      :upload-method="handleUpload"
      :delete-method="handleFileDelete"
    />
    <FileList v-if="fileDialogVisible"  v-model:visible="fileDialogVisible" record-type="account_expense" :record-id="recordId"  />
  </div>
</template>

<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { listPage, delAccountExpense, fileListPage, fileAdd, fileDel } from "@/api/financialManagement/expenseManagement";
import { onMounted, getCurrentInstance, ref, computed } from "vue";
import { listPage, delAccountExpense } from "@/api/financialManagement/expenseManagement";
import {onMounted, getCurrentInstance, ref, computed, defineAsyncComponent} from "vue";
import Modal from "./Modal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import dayjs from "dayjs";
import FileListDialog from "@/components/Dialog/FileListDialog.vue";
import request from "@/utils/request";
import { getToken } from "@/utils/auth";
const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));

defineOptions({
  name: "支出管理",
@@ -108,9 +99,6 @@
const modalRef = ref();
const { checkout_payment } = proxy.useDict("checkout_payment");
const { expense_types } = proxy.useDict("expense_types");
const fileListRef = ref(null);
const fileListDialogVisible = ref(false);
const currentFileRow = ref(null);
const accountType = ref('支出');

const {
@@ -315,156 +303,16 @@
      proxy.$modal.msg("已取消");
    });
};

// æ‰“开附件弹窗
const recordId =ref(0)
const fileDialogVisible = ref(false)

// æ‰“开附件弹框
const openFilesFormDia = async (row) => {
  currentFileRow.value = row;
  accountType.value = '支出';
  try {
    const res = await fileListPage({
      accountId: row.id,
      accountType: accountType.value,
      current: 1,
      size: 100
    });
    if (res.code === 200 && fileListRef.value) {
      // å°†æ•°æ®è½¬æ¢ä¸º FileListDialog éœ€è¦çš„格式
      const fileList = (res.data?.records || []).map(item => ({
        name: item.name,
        url: item.url,
        id: item.id,
        ...item
      }));
      fileListRef.value.open(fileList);
      fileListDialogVisible.value = true;
    }
  } catch (error) {
    proxy.$modal.msgError("获取附件列表失败");
  }
};

// ä¸Šä¼ é™„件
const handleUpload = async () => {
  if (!currentFileRow.value) {
    proxy.$modal.msgWarning("请先选择数据");
    return null;
  }
  
  return new Promise((resolve) => {
    // åˆ›å»ºä¸€ä¸ªéšè—çš„文件输入元素
    const input = document.createElement('input');
    input.type = 'file';
    input.style.display = 'none';
    input.onchange = async (e) => {
      const file = e.target.files[0];
      if (!file) {
        resolve(null);
        return;
      }
      
      try {
        // ä½¿ç”¨ FormData ä¸Šä¼ æ–‡ä»¶
        const formData = new FormData();
        formData.append('file', file);
        
        const uploadRes = await request({
          url: '/file/upload',
          method: 'post',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
            Authorization: `Bearer ${getToken()}`
          }
        });
        
        if (uploadRes.code === 200) {
          // ä¿å­˜é™„件信息
          const fileData = {
            accountId: currentFileRow.value.id,
            accountType: accountType.value,
            name: uploadRes.data.originalName || file.name,
            url: uploadRes.data.tempPath || uploadRes.data.url
          };
          
          const saveRes = await fileAdd(fileData);
          if (saveRes.code === 200) {
            proxy.$modal.msgSuccess("文件上传成功");
            // é‡æ–°åŠ è½½æ–‡ä»¶åˆ—表
            const listRes = await fileListPage({
              accountId: currentFileRow.value.id,
              accountType: accountType.value,
              current: 1,
              size: 100
            });
            if (listRes.code === 200 && fileListRef.value) {
              const fileList = (listRes.data?.records || []).map(item => ({
                name: item.name,
                url: item.url,
                id: item.id,
                ...item
              }));
              fileListRef.value.setList(fileList);
            }
            // è¿”回新文件信息
            resolve({
              name: fileData.name,
              url: fileData.url,
              id: saveRes.data?.id
            });
          } else {
            proxy.$modal.msgError(saveRes.msg || "文件保存失败");
            resolve(null);
          }
        } else {
          proxy.$modal.msgError(uploadRes.msg || "文件上传失败");
          resolve(null);
        }
      } catch (error) {
        proxy.$modal.msgError("文件上传失败");
        resolve(null);
      } finally {
        document.body.removeChild(input);
      }
    };
    
    document.body.appendChild(input);
    input.click();
  });
};

// åˆ é™¤é™„件
const handleFileDelete = async (row) => {
  try {
    const res = await fileDel([row.id]);
    if (res.code === 200) {
      proxy.$modal.msgSuccess("删除成功");
      // é‡æ–°åŠ è½½æ–‡ä»¶åˆ—表
      if (currentFileRow.value && fileListRef.value) {
        const listRes = await fileListPage({
          accountId: currentFileRow.value.id,
          accountType: accountType.value,
          current: 1,
          size: 100
        });
        if (listRes.code === 200) {
          const fileList = (listRes.data?.records || []).map(item => ({
            name: item.name,
            url: item.url,
            id: item.id,
            ...item
          }));
          fileListRef.value.setList(fileList);
        }
      }
      return true; // è¿”回 true è¡¨ç¤ºåˆ é™¤æˆåŠŸï¼Œç»„件会更新列表
    } else {
      proxy.$modal.msgError(res.msg || "删除失败");
      return false;
    }
  } catch (error) {
    proxy.$modal.msgError("删除失败");
    return false;
  }
};
  recordId.value = row.id
  fileDialogVisible.value = true
}

onMounted(() => {
  getTableData();

 src/views/financialManagement/revenueManagement/index.vue

@@ -3,22 +3,22 @@
    <el-form :model="filters" :inline="true">
      <el-form-item label="收入日期:">
        <el-date-picker v-model="filters.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
                        placeholder="请选择" clearable @change="changeDaterange" />
                        placeholder="请选择" clearable @change="changeDaterange"/>
      </el-form-item>
      <el-form-item label="收款方式:">
        <el-select
                v-model="filters.incomeMethodLabel"
                placeholder="请选择"
                clearable
                style="width: 200px;"
              >
                <el-option
                  v-for="item in incomeMethodOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            v-model="filters.incomeMethodLabel"
            placeholder="请选择"
            clearable
            style="width: 200px;"
        >
          <el-option
              v-for="item in incomeMethodOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
@@ -29,32 +29,32 @@
      <div class="actions">
        <div></div>
        <div>
          <el-button type="primary" @click="add" icon="Plus"> æ–°å¢ž </el-button>
          <el-button type="primary" @click="add" icon="Plus"> æ–°å¢ž</el-button>
          <el-button @click="handleOut" icon="download">导出</el-button>
          <el-button
            type="danger"
            icon="Delete"
            :disabled="multipleList.length <= 0 || hasBusinessIdInSelection"
            @click="handleBatchDelete"
              type="danger"
              icon="Delete"
              :disabled="multipleList.length <= 0 || hasBusinessIdInSelection"
              @click="handleBatchDelete"
          >
            æ‰¹é‡åˆ é™¤
          </el-button>
        </div>
      </div>
      <PIMTable
        rowKey="id"
        isSelection
        :column="columns"
        :tableData="dataList"
        :page="{
          rowKey="id"
          isSelection
          :column="columns"
          :tableData="dataList"
          :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        :isShowSummary="true"
        :summaryMethod="summarizeMainTable"
        @selection-change="handleSelectionChange"
        @pagination="changePage"
          :isShowSummary="true"
          :summaryMethod="summarizeMainTable"
          @selection-change="handleSelectionChange"
          @pagination="changePage"
      >
        <template #incomeMethodSlot="{ row }">
          <el-tag>
@@ -62,18 +62,18 @@
          </el-tag>
        </template>
        <template #operation="{ row }">
          <el-button 
            type="primary" 
            link 
            :disabled="!!row.businessId"
            @click="edit(row.id)"
          <el-button
              type="primary"
              link
              :disabled="!!row.businessId"
              @click="edit(row.id)"
          >
            ç¼–辑
          </el-button>
          <el-button
            type="primary"
                        link
            @click="openFilesFormDia(row)"
              type="primary"
              link
              @click="openFilesFormDia(row)"
          >
            é™„件
          </el-button>
@@ -81,28 +81,16 @@
      </PIMTable>
    </div>
    <Modal ref="modalRef" @success="getTableData"></Modal>
    <!--  todo é™„件预览相关 -->
    <FileListDialog 
      ref="fileListRef" 
      v-model="fileListDialogVisible"
      :show-upload-button="true"
      :show-delete-button="true"
      :upload-method="handleUpload"
      :delete-method="handleFileDelete"
    />
    <FileListDialog v-if="fileListDialogVisible" :record-id="currentRecordId" record-type="account_income" v-model:visible="fileListDialogVisible"/>
  </div>
</template>

<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { listPage, delAccountIncome, fileListPage, fileAdd, fileDel } from "@/api/financialManagement/revenueManagement";
import { onMounted, getCurrentInstance, ref, computed } from "vue";
import Modal from "./Modal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import {usePaginationApi} from "@/hooks/usePaginationApi";
import {listPage, delAccountIncome} from "@/api/financialManagement/revenueManagement";
import {onMounted, getCurrentInstance, ref, computed} from "vue";
import {ElMessageBox, ElMessage} from "element-plus";
import dayjs from "dayjs";
import FileListDialog from "@/components/Dialog/FileListDialog.vue";
import request from "@/utils/request";
import { getToken } from "@/utils/auth";

defineOptions({
  name: "收入管理",
@@ -110,15 +98,14 @@

// è¡¨æ ¼å¤šé€‰æ¡†é€‰ä¸­é¡¹
const multipleList = ref([]);
const { proxy } = getCurrentInstance();
const {proxy} = getCurrentInstance();
const modalRef = ref();
const { payment_methods } = proxy.useDict("payment_methods");
const { receipt_payment_type } = proxy.useDict("receipt_payment_type");
const { income_types } = proxy.useDict("income_types");
const {payment_methods} = proxy.useDict("payment_methods");
const {receipt_payment_type} = proxy.useDict("receipt_payment_type");
const {income_types} = proxy.useDict("income_types");
const fileListRef = ref(null);
const fileListDialogVisible = ref(false);
const currentFileRow = ref(null);
const accountType = ref('收入');
const currentRecordId = ref(0);

const incomeMethodOptions = computed(() => {
  const merged = [...(payment_methods.value || []), ...(receipt_payment_type.value || [])];
@@ -127,7 +114,7 @@
    const label = item?.label;
    if (!label) return;
    if (!uniqueMap.has(label)) {
      uniqueMap.set(label, { label, value: label });
      uniqueMap.set(label, {label, value: label});
    }
  });
  return Array.from(uniqueMap.values());
@@ -142,86 +129,86 @@
  resetFilters,
  onCurrentChange,
} = usePaginationApi(
  listPage,
  {
    incomeMethodLabel: undefined,
    entryDate: undefined,
  },
  [
    listPage,
    {
      label: "收入日期",
      prop: "incomeDate",
      incomeMethodLabel: undefined,
      entryDate: undefined,
    },
    {
      label: "收入类型",
      prop: "incomeType",
      dataType: "tag",
      formatData: (params) => {
        if (income_types.value.find((m) => m.value == params)) {
          return income_types.value.find((m) => m.value == params).label;
        } else {
          return null
        }
    [
      {
        label: "收入日期",
        prop: "incomeDate",
      },
    },
    {
      label: "客户名称",
      prop: "customerName",
            width: '200'
      {
        label: "收入类型",
        prop: "incomeType",
        dataType: "tag",
        formatData: (params) => {
          if (income_types.value.find((m) => m.value == params)) {
            return income_types.value.find((m) => m.value == params).label;
          } else {
            return null
          }
        },
      },
      {
        label: "客户名称",
        prop: "customerName",
        width: '200'

    },
    {
      label: "收入金额",
      prop: "incomeMoney",
      },
      {
        label: "收入金额",
        prop: "incomeMoney",

    },
    {
      label: "收入描述",
      prop: "incomeDescribed",
      },
      {
        label: "收入描述",
        prop: "incomeDescribed",

    },
    {
      label: "收款方式",
      prop: "incomeMethodLabel",
            align: 'center',
            width: '100',
      dataType: "slot",
      slot: "incomeMethodSlot",
    },
    {
      label: "发票号码",
      prop: "invoiceNumber",
      },
      {
        label: "收款方式",
        prop: "incomeMethodLabel",
        align: 'center',
        width: '100',
        dataType: "slot",
        slot: "incomeMethodSlot",
      },
      {
        label: "发票号码",
        prop: "invoiceNumber",

    },
    {
      label: "备注",
      prop: "note",
      },
      {
        label: "备注",
        prop: "note",

    },
    {
      label: "录入人",
      prop: "inputUser",
    },
    {
      label: "录入日期",
      prop: "inputTime",
      },
      {
        label: "录入人",
        prop: "inputUser",
      },
      {
        label: "录入日期",
        prop: "inputTime",

    },
      },
      {
        fixed: "right",
        label: "操作",
        dataType: "slot",
        slot: "operation",
        align: "center",
        width: "160px",
      },
    ],
    undefined,
    {
      fixed: "right",
      label: "操作",
      dataType: "slot",
      slot: "operation",
      align: "center",
      width: "160px",
    },
  ],
  undefined,
  {
    incomeMethodLabel: (value) => ({
      incomeMethodLabel: value || undefined,
    }),
  }
      incomeMethodLabel: (value) => ({
        incomeMethodLabel: value || undefined,
      }),
    }
);

// è¡¨æ ¼åˆè®¡ï¼šæ”¶å…¥é‡‘额
@@ -232,8 +219,8 @@
const getIncomeMethodLabel = (row) => {
  const methodValue = row?.incomeMethod;
  const dictList = String(row?.businessType) === "1"
    ? receipt_payment_type.value
    : payment_methods.value;
      ? receipt_payment_type.value
      : payment_methods.value;
  return dictList.find((item) => item.value == methodValue)?.label || "--";
};

@@ -259,9 +246,9 @@
  }
  modalRef.value.loadForm(id);
};
const changePage = ({ page, limit }) => {
const changePage = ({page, limit}) => {
  pagination.currentPage = page;
    pagination.pageSize = limit;
  pagination.pageSize = limit;
  onCurrentChange(page);
};
const deleteRow = (id) => {
@@ -283,13 +270,13 @@
      return;
    }
  }
  

  ElMessageBox.confirm("此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { code } = await delAccountIncome(id);
    const {code} = await delAccountIncome(id);
    if (code == 200) {
      ElMessage({
        type: "success",
@@ -306,13 +293,13 @@
    proxy.$modal.msgWarning("请选择要删除的数据");
    return;
  }
  

  // æ£€æŸ¥æ˜¯å¦æœ‰ businessId
  if (hasBusinessIdInSelection.value) {
    proxy.$modal.msgWarning("选中的记录中包含已关联业务的记录，不能删除");
    return;
  }
  

  const ids = multipleList.value.map((item) => item.id);
  deleteRow(ids);
};
@@ -336,162 +323,17 @@
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.download(`/account/accountIncome/export`, {}, "收入台账.xlsx");
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
      .then(() => {
        proxy.download(`/account/accountIncome/export`, {}, "收入台账.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};
// æ‰“开附件弹框
const openFilesFormDia = async (row) => {
  currentFileRow.value = row;
  accountType.value = '收入';
  try {
    const res = await fileListPage({
      accountId: row.id,
      accountType: accountType.value,
      current: 1,
      size: 100
    });
    if (res.code === 200 && fileListRef.value) {
      // å°†æ•°æ®è½¬æ¢ä¸º FileListDialog éœ€è¦çš„格式
      const fileList = (res.data?.records || []).map(item => ({
        name: item.name,
        url: item.url,
        id: item.id,
        ...item
      }));
      fileListRef.value.open(fileList);
      fileListDialogVisible.value = true;
    }
  } catch (error) {
    proxy.$modal.msgError("获取附件列表失败");
  }
};

// ä¸Šä¼ é™„件
const handleUpload = async () => {
  if (!currentFileRow.value) {
    proxy.$modal.msgWarning("请先选择数据");
    return null;
  }
  
  return new Promise((resolve) => {
    // åˆ›å»ºä¸€ä¸ªéšè—çš„文件输入元素
    const input = document.createElement('input');
    input.type = 'file';
    input.style.display = 'none';
    input.onchange = async (e) => {
      const file = e.target.files[0];
      if (!file) {
        resolve(null);
        return;
      }
      
      try {
        // ä½¿ç”¨ FormData ä¸Šä¼ æ–‡ä»¶
        const formData = new FormData();
        formData.append('file', file);
        
        const uploadRes = await request({
          url: '/file/upload',
          method: 'post',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
            Authorization: `Bearer ${getToken()}`
          }
        });
        
        if (uploadRes.code === 200) {
          // ä¿å­˜é™„件信息
          const fileData = {
            accountId: currentFileRow.value.id,
            accountType: accountType.value,
            name: uploadRes.data.originalName || file.name,
            url: uploadRes.data.tempPath || uploadRes.data.url
          };
          
          const saveRes = await fileAdd(fileData);
          if (saveRes.code === 200) {
            proxy.$modal.msgSuccess("文件上传成功");
            // é‡æ–°åŠ è½½æ–‡ä»¶åˆ—表
            const listRes = await fileListPage({
              accountId: currentFileRow.value.id,
              accountType: accountType.value,
              current: 1,
              size: 100
            });
            if (listRes.code === 200 && fileListRef.value) {
              const fileList = (listRes.data?.records || []).map(item => ({
                name: item.name,
                url: item.url,
                id: item.id,
                ...item
              }));
              fileListRef.value.setList(fileList);
            }
            // è¿”回新文件信息
            resolve({
              name: fileData.name,
              url: fileData.url,
              id: saveRes.data?.id
            });
          } else {
            proxy.$modal.msgError(saveRes.msg || "文件保存失败");
            resolve(null);
          }
        } else {
          proxy.$modal.msgError(uploadRes.msg || "文件上传失败");
          resolve(null);
        }
      } catch (error) {
        proxy.$modal.msgError("文件上传失败");
        resolve(null);
      } finally {
        document.body.removeChild(input);
      }
    };
    
    document.body.appendChild(input);
    input.click();
  });
};

// åˆ é™¤é™„件
const handleFileDelete = async (row) => {
  try {
    const res = await fileDel([row.id]);
    if (res.code === 200) {
      proxy.$modal.msgSuccess("删除成功");
      // é‡æ–°åŠ è½½æ–‡ä»¶åˆ—表
      if (currentFileRow.value && fileListRef.value) {
        const listRes = await fileListPage({
          accountId: currentFileRow.value.id,
          accountType: accountType.value,
          current: 1,
          size: 100
        });
        if (listRes.code === 200) {
          const fileList = (listRes.data?.records || []).map(item => ({
            name: item.name,
            url: item.url,
            id: item.id,
            ...item
          }));
          fileListRef.value.setList(fileList);
        }
      }
      return true; // è¿”回 true è¡¨ç¤ºåˆ é™¤æˆåŠŸï¼Œç»„件会更新列表
    } else {
      proxy.$modal.msgError(res.msg || "删除失败");
      return false;
    }
  } catch (error) {
    proxy.$modal.msgError("删除失败");
    return false;
  }
  currentRecordId.value = row.id;
  fileListDialogVisible.value = true;
};

onMounted(() => {
@@ -503,6 +345,7 @@
.table_list {
  margin-top: unset;
}

.actions {
  display: flex;
  justify-content: space-between;

 src/views/inventoryManagement/stockManagement/New.vue

@@ -57,14 +57,7 @@
                           style="width: 100%" />
        </el-form-item>
        <el-form-item label="批号"
                      prop="batchNo"
                      :rules="[
                {
                required: true,
                message: '请输入批号',
                trigger: 'blur',
              }
            ]">
                      prop="batchNo">
          <el-input v-model="formState.batchNo"
                    placeholder="请输入批号" />
        </el-form-item>

 src/views/procurementManagement/procurementInvoiceLedger/index.vue

@@ -69,7 +69,7 @@
          <el-button
            type="primary"
            link
            @click="downLoadFile(row)"
            @click="openFileDialog(row)"
          >
            é™„件
          </el-button>
@@ -83,16 +83,7 @@
        </template>
      </PIMTable>
    </div>
    <FileListDialog 
      ref="fileListRef" 
      v-model="fileListDialogVisible"
      title="附件列表"
      :showUploadButton="true"
      :showDeleteButton="true"
      :deleteMethod="handleDeleteFile"
      :uploadMethod="handleFileUpload"
      :rulesRegulationsManagementId="currentRowId"
    />
    <FileList v-if="fileDialogVisible"  v-model:visible="fileDialogVisible" record-type="ticket_registration" :record-id="recordId"  />
    <EditModal ref="editmodalRef" @success="getTableData"></EditModal>
  </div>
</template>
@@ -113,9 +104,9 @@
import { onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import EditModal from "./Modal/EditModal.vue";
import FileListDialog from '@/components/Dialog/FileListDialog.vue';
import useUserStore from "@/store/modules/user.js";
const userStore = useUserStore();
const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));

defineOptions({
  name: "来票台账",
@@ -290,143 +281,15 @@
  onCurrentChange(page);
};

const downLoadFile = row => {
  currentRowId.value = row.id;
  if (fileListRef.value) {
    fileListRef.value.open(row.commonFiles || []);
  }
};
// æ‰“开附件弹窗
const recordId =ref(0)
const fileDialogVisible = ref(false)

// ä¸Šä¼ é™„件（自定义上传方法）
const handleFileUpload = async () => {
  if (!currentRowId.value) {
    proxy.$modal.msgWarning("缺少登记ID，无法保存附件");
    return;
  }
  
  return new Promise((resolve) => {
    // åˆ›å»ºä¸€ä¸ªéšè—çš„文件输入元素
    const input = document.createElement('input');
    input.type = 'file';
    input.style.display = 'none';
    input.onchange = async (e) => {
      const file = e.target.files[0];
      if (!file) {
        resolve(null);
        return;
      }
      
      try {
        // ä½¿ç”¨ FormData ä¸Šä¼ æ–‡ä»¶
        const formData = new FormData();
        formData.append('file', file);
        formData.append('type', '4'); // type å‚数，用户未指定具体值，先传空字符串
        formData.append('id', currentRowId.value); // å½“前行的 id
        
        const uploadRes = await request({
          url: '/file/uploadByCommon',
          method: 'post',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
            Authorization: `Bearer ${getToken()}`
          }
        });
        
        if (uploadRes.code === 200) {
          proxy.$modal.msgSuccess("附件上传成功");
          
          // åˆ·æ–°åˆ—表获取最新数据
          await new Promise((resolveRefresh) => {
            // è°ƒç”¨ API èŽ·å–最新列表数据
            productRecordPage({
              ...filters,
              current: pagination.currentPage,
              size: pagination.pageSize
            }).then(({ code, data }) => {
              if (code === 200) {
                // æ›´æ–°æ•°æ®åˆ—表
                dataList.value = data.records;
                pagination.total = data.total;
                
                // ä»Žå¤–部数据获取 commonFiles
                const currentRow = dataList.value.find(row => row.id === currentRowId.value);
                if (currentRow && fileListRef.value) {
                  // åˆ·æ–°é™„件列表，使用从外部获取的最新 commonFiles
                  fileListRef.value.open(currentRow.commonFiles || []);
                }
                resolveRefresh();
              } else {
                resolveRefresh();
              }
            }).catch(() => {
              resolveRefresh();
            });
          });
          
          resolve({
            name: uploadRes.data?.originalName || file.name,
            url: uploadRes.data?.tempPath || uploadRes.data?.url,
            id: uploadRes.data?.id
          });
        } else {
          proxy.$modal.msgError(uploadRes.msg || "文件上传失败");
          resolve(null);
        }
      } catch (error) {
        console.error("附件上传失败:", error);
        proxy.$modal.msgError("附件上传失败");
        resolve(null);
      } finally {
        document.body.removeChild(input);
      }
    };
    
    document.body.appendChild(input);
    input.click();
  });
};

// åˆ é™¤é™„件
const handleDeleteFile = async (file) => {
  try {
    await delCommonFile([file.id]);
    proxy.$modal.msgSuccess("删除成功");
    
    // åˆ·æ–°åˆ—表获取最新数据
    await new Promise((resolveRefresh) => {
      // è°ƒç”¨ API èŽ·å–最新列表数据
      productRecordPage({
        ...filters,
        current: pagination.currentPage,
        size: pagination.pageSize
      }).then(({ code, data }) => {
        if (code === 200) {
          // æ›´æ–°æ•°æ®åˆ—表
          dataList.value = data.records;
          pagination.total = data.total;
          
          // ä»Žå¤–部数据获取 commonFiles
          const currentRow = dataList.value.find(row => row.id === currentRowId.value);
          if (currentRow && fileListRef.value) {
            // åˆ·æ–°é™„件列表，使用从外部获取的最新 commonFiles
            fileListRef.value.open(currentRow.commonFiles || []);
          }
          resolveRefresh();
        } else {
          resolveRefresh();
        }
      }).catch(() => {
        resolveRefresh();
      });
    });
    
    return true;
  } catch (error) {
    proxy.$modal.msgError("删除失败");
    return false;
  }
};
// æ‰“开附件弹框
const openFileDialog = async (row) => {
  recordId.value = row.id
  fileDialogVisible.value = true
}

const openEdit = (row) => {
  editmodalRef.value.open(row);

 src/views/procurementManagement/procurementLedger/index.vue

@@ -9,7 +9,7 @@
                      placeholder="请输入"
                      clearable
                      prefix-icon="Search"
                      @change="handleQuery" />
                      @change="handleQuery"/>
          </el-form-item>
          <el-form-item label="采购合同号：">
            <el-input v-model="searchForm.purchaseContractNumber"
@@ -17,21 +17,21 @@
                      placeholder="请输入"
                      @change="handleQuery"
                      clearable
                      :prefix-icon="Search" />
                      :prefix-icon="Search"/>
          </el-form-item>
          <el-form-item label="销售合同号：">
            <el-input v-model="searchForm.salesContractNo"
                      placeholder="请输入"
                      clearable
                      prefix-icon="Search"
                      @change="handleQuery" />
                      @change="handleQuery"/>
          </el-form-item>
          <el-form-item label="项目名称：">
            <el-input v-model="searchForm.projectName"
                      placeholder="请输入"
                      clearable
                      prefix-icon="Search"
                      @change="handleQuery" />
                      @change="handleQuery"/>
          </el-form-item>
          <el-form-item label="录入日期：">
            <el-date-picker v-model="searchForm.entryDate"
@@ -40,11 +40,12 @@
                            type="daterange"
                            placeholder="请选择"
                            clearable
                            @change="changeDaterange" />
                            @change="changeDaterange"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="handleQuery"> æœç´¢ </el-button>
                       @click="handleQuery"> æœç´¢
            </el-button>
          </el-form-item>
        </el-form>
      </div>
@@ -57,7 +58,8 @@
        <el-button @click="handleOut">导出</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
                   @click="handleDelete">删除
        </el-button>
      </div>
      <el-table :data="tableData"
                border
@@ -71,7 +73,7 @@
                height="calc(100vh - 21.5em)">
        <el-table-column align="center"
                         type="selection"
                         width="55" />
                         width="55"/>
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.children"
@@ -81,62 +83,62 @@
              <el-table-column align="center"
                               label="序号"
                               type="index"
                               width="60" />
                               width="60"/>
              <el-table-column label="产品大类"
                               prop="productCategory" />
                               prop="productCategory"/>
              <el-table-column label="规格型号"
                               prop="specificationModel" />
                               prop="specificationModel"/>
              <el-table-column label="单位"
                               prop="unit" />
                               prop="unit"/>
              <el-table-column label="数量"
                               prop="quantity" />
                               prop="quantity"/>
              <el-table-column label="可用数量"
                               prop="availableQuality" />
                               prop="availableQuality"/>
              <el-table-column label="退货数量"
                               prop="returnQuality" />
                               
                               prop="returnQuality"/>

              <el-table-column label="税率(%)"
                               prop="taxRate" />
                               prop="taxRate"/>
              <el-table-column label="含税单价(元)"
                               prop="taxInclusiveUnitPrice"
                               :formatter="formattedNumber" />
                               :formatter="formattedNumber"/>
              <el-table-column label="含税总价(元)"
                               prop="taxInclusiveTotalPrice"
                               :formatter="formattedNumber" />
                               :formatter="formattedNumber"/>
              <el-table-column label="不含税总价(元)"
                               prop="taxExclusiveTotalPrice"
                               :formatter="formattedNumber" />
                               :formatter="formattedNumber"/>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="序号"
                         type="index"
                         width="60" />
                         width="60"/>
        <el-table-column label="采购合同号"
                         prop="purchaseContractNumber"
                         width="160"
                         show-overflow-tooltip />
                         show-overflow-tooltip/>
        <el-table-column label="销售合同号"
                         prop="salesContractNo"
                          width="160"
                         show-overflow-tooltip />
                         width="160"
                         show-overflow-tooltip/>
        <el-table-column label="供应商名称"
                         prop="supplierName"
                          width="160"
                         show-overflow-tooltip />
                         width="160"
                         show-overflow-tooltip/>
        <el-table-column label="项目名称"
                         prop="projectName"
                         width="320"
                         show-overflow-tooltip />
                         show-overflow-tooltip/>
        <el-table-column label="审批状态"
                         prop="approvalStatus"
                         width="100"
                         show-overflow-tooltip>
          <template #default="scope">
            <el-tag 
              :type="getApprovalStatusType(scope.row.approvalStatus)"
              size="small">
            <el-tag
                :type="getApprovalStatusType(scope.row.approvalStatus)"
                size="small">
              {{ approvalStatusText[scope.row.approvalStatus] || '未知状态' }}
            </el-tag>
          </template>
@@ -144,28 +146,28 @@
        <el-table-column label="签订日期"
                         prop="executionDate"
                         width="100"
                         show-overflow-tooltip />
                         show-overflow-tooltip/>
        <el-table-column label="付款方式"
                         width="100"
                         prop="paymentMethod"
                         show-overflow-tooltip />
                         show-overflow-tooltip/>
        <el-table-column label="合同金额(元)"
                         prop="contractAmount"
                         width="200"
                         show-overflow-tooltip
                         :formatter="formattedNumber" />
                         :formatter="formattedNumber"/>
        <el-table-column label="录入人"
                         prop="recorderName"
                         width="120"
                         show-overflow-tooltip />
                         show-overflow-tooltip/>
        <el-table-column label="录入日期"
                         prop="entryDate"
                         width="100"
                         show-overflow-tooltip />
                         show-overflow-tooltip/>
        <el-table-column label="备注"
                         prop="remarks"
                         width="200"
                         show-overflow-tooltip />
                         show-overflow-tooltip/>
        <el-table-column fixed="right"
                         label="操作"
                         width="120"
@@ -174,10 +176,11 @@
            <el-button link
                       type="primary"
                       @click="openForm('edit', scope.row)"
                       :disabled="scope.row.approvalStatus !== 1 && scope.row.approvalStatus !== 4">编辑</el-button>
                       :disabled="scope.row.approvalStatus !== 1 && scope.row.approvalStatus !== 4">编辑
            </el-button>
            <el-button link
                       type="primary"
                       @click="downLoadFile(scope.row)">附件</el-button>
                       @click="openFileDialog(scope.row)">附件</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -186,15 +189,15 @@
                  layout="total, sizes, prev, pager, next, jumper"
                  :page="page.current"
                  :limit="page.size"
                  @pagination="paginationChange" />
                  @pagination="paginationChange"/>
    </div>
    <FormDialog v-model="dialogFormVisible"
               :title="operationType === 'add' ? '新增采购台账页面' : '编辑采购台账页面'"
               :width="'70%'"
               :operation-type="operationType"
               @close="closeDia"
               @confirm="submitForm"
               @cancel="closeDia">
                :title="operationType === 'add' ? '新增采购台账页面' : '编辑采购台账页面'"
                :width="'70%'"
                :operation-type="operationType"
                @close="closeDia"
                @confirm="submitForm"
                @cancel="closeDia">
      <el-form :model="form"
               label-width="140px"
               label-position="top"
@@ -206,7 +209,7 @@
                          prop="purchaseContractNumber">
              <el-input v-model="form.purchaseContractNumber"
                        placeholder="请输入"
                        clearable />
                        clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -220,7 +223,7 @@
                <el-option v-for="item in salesContractList"
                           :key="item.id"
                           :label="item.salesContractNo"
                           :value="item.id" />
                           :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
@@ -236,7 +239,8 @@
                <el-option v-for="item in supplierList"
                           :key="item.id"
                           :label="item.supplierName"
                                                     :value="item.id" >{{item.supplierName + '---' + item.supplierType}}</el-option>
                           :value="item.id">{{ item.supplierName + '---' + item.supplierType }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
@@ -245,7 +249,7 @@
                          prop="projectName">
              <el-input v-model="form.projectName"
                        placeholder="请输入"
                        clearable />
                        clearable/>
            </el-form-item>
          </el-col>
        </el-row>
@@ -254,7 +258,7 @@
            <el-form-item label="付款方式">
              <el-input v-model="form.paymentMethod"
                        placeholder="请输入"
                        clearable />
                        clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -266,7 +270,7 @@
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
                              clearable/>
            </el-form-item>
          </el-col>
        </el-row>
@@ -274,7 +278,7 @@
          <el-col :span="12">
            <el-form-item label="录入人："
                          prop="recorderId">
              <el-input v-model="form.recorderName" placeholder="自动填充" disabled />
              <el-input v-model="form.recorderName" placeholder="自动填充" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -286,7 +290,7 @@
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
                              clearable/>
            </el-form-item>
          </el-col>
        </el-row>
@@ -294,10 +298,12 @@
          <el-form-item label="产品信息："
                        prop="entryDate">
            <el-button type="primary"
                       @click="openProductForm('add')">添加</el-button>
                       @click="openProductForm('add')">添加
            </el-button>
            <el-button plain
                       type="danger"
                       @click="deleteProduct">删除</el-button>
                       @click="deleteProduct">删除
            </el-button>
          </el-form-item>
          <div class="select-button-group"
               style="width: 500px; margin: 20px 0;"
@@ -321,12 +327,12 @@
                         :value="item.templateName">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                  <span>{{ item.templateName }}</span>
                  <el-icon 
                    v-if="item.id"
                    class="delete-icon"
                    @click.stop="handleDeleteTemplate(item)"
                    style="cursor: pointer; color: #f56c6c; font-size: 14px; margin-left: 8px;">
                    <Delete />
                  <el-icon
                      v-if="item.id"
                      class="delete-icon"
                      @click.stop="handleDeleteTemplate(item)"
                      style="cursor: pointer; color: #f56c6c; font-size: 14px; margin-left: 8px;">
                    <Delete/>
                  </el-icon>
                </div>
              </el-option>
@@ -347,40 +353,40 @@
                  :summary-method="summarizeProTable">
          <el-table-column align="center"
                           type="selection"
                           width="55" />
                           width="55"/>
          <el-table-column align="center"
                           label="序号"
                           type="index"
                           width="60" />
                           width="60"/>
          <el-table-column label="产品大类"
                           prop="productCategory" />
                           prop="productCategory"/>
          <el-table-column label="规格型号"
                           prop="specificationModel" />
                           prop="specificationModel"/>
          <el-table-column label="单位"
                           prop="unit"
                           width="70" />
                           width="70"/>
          <el-table-column label="数量"
                           prop="quantity"
                           width="70" />
                           width="70"/>
          <el-table-column label="库存预警数量"
                           prop="warnNum"
                           width="120"
                           show-overflow-tooltip />
                           show-overflow-tooltip/>
          <el-table-column label="税率(%)"
                           prop="taxRate"
                           width="80" />
                           width="80"/>
          <el-table-column label="含税单价(元)"
                           prop="taxInclusiveUnitPrice"
                           :formatter="formattedNumber"
                           width="150" />
                           width="150"/>
          <el-table-column label="含税总价(元)"
                           prop="taxInclusiveTotalPrice"
                           :formatter="formattedNumber"
                           width="150" />
                           width="150"/>
          <el-table-column label="不含税总价(元)"
                           prop="taxExclusiveTotalPrice"
                           :formatter="formattedNumber"
                           width="150" />
                           width="150"/>
          <el-table-column label="是否质检"
                           prop="isChecked"
                           width="150">
@@ -397,7 +403,8 @@
            <template #default="scope">
              <el-button link
                         type="primary"
                         @click="openProductForm('edit', scope.row, scope.$index)">编辑</el-button>
                         @click="openProductForm('edit', scope.row, scope.$index)">编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
@@ -409,7 +416,7 @@
                        placeholder="请输入"
                        clearable
                        type="textarea"
                        :rows="2" />
                        :rows="2"/>
            </el-form-item>
          </el-col>
        </el-row>
@@ -417,24 +424,7 @@
          <el-col :span="24">
            <el-form-item label="附件材料："
                          prop="purchaseLedgerFiles">
              <el-upload v-model:file-list="fileList"
                         :action="upload.url"
                         multiple
                         ref="fileUpload"
                         auto-upload
                         :headers="upload.headers"
                         :before-upload="handleBeforeUpload"
                         :on-error="handleUploadError"
                         :on-success="handleUploadSuccess"
                         :on-remove="handleRemove">
                <el-button type="primary">上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    æ–‡ä»¶æ ¼å¼æ”¯æŒ
                    doc，docx，xls，xlsx，ppt，pptx，pdf，txt，xml，jpg，jpeg，png，gif，bmp，rar，zip，7z
                  </div>
                </template>
              </el-upload>
              <FileUpload v-model:file-list="fileList"/>
            </el-form-item>
          </el-col>
        </el-row>
@@ -442,26 +432,26 @@
    </FormDialog>
    <!-- å¯¼å…¥å¼¹çª— -->
    <FormDialog
      v-model="importUpload.open"
      :title="importUpload.title"
      :width="'600px'"
      @close="importUpload.open = false"
      @confirm="submitImportFile"
      @cancel="importUpload.open = false"
        v-model="importUpload.open"
        :title="importUpload.title"
        :width="'600px'"
        @close="importUpload.open = false"
        @confirm="submitImportFile"
        @cancel="importUpload.open = false"
    >
      <el-upload
        ref="importUploadRef"
        :limit="1"
        accept=".xlsx,.xls"
        :action="importUpload.url"
        :headers="importUpload.headers"
        :before-upload="importUpload.beforeUpload"
        :on-success="importUpload.onSuccess"
        :on-error="importUpload.onError"
        :on-progress="importUpload.onProgress"
        :on-change="importUpload.onChange"
        :auto-upload="false"
        drag
          ref="importUploadRef"
          :limit="1"
          accept=".xlsx,.xls"
          :action="importUpload.url"
          :headers="importUpload.headers"
          :before-upload="importUpload.beforeUpload"
          :on-success="importUpload.onSuccess"
          :on-error="importUpload.onError"
          :on-progress="importUpload.onProgress"
          :on-change="importUpload.onChange"
          :auto-upload="false"
          drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
@@ -476,12 +466,12 @@
      </el-upload>
    </FormDialog>
    <FormDialog v-model="productFormVisible"
               :title="productOperationType === 'add' ? '新增产品' : '编辑产品'"
               :width="'40%'"
               :operation-type="productOperationType"
               @close="closeProductDia"
               @confirm="submitProduct"
               @cancel="closeProductDia">
                :title="productOperationType === 'add' ? '新增产品' : '编辑产品'"
                :width="'40%'"
                :operation-type="productOperationType"
                @close="closeProductDia"
                @confirm="submitProduct"
                @cancel="closeProductDia">
      <el-form :model="productForm"
               label-width="140px"
               label-position="top"
@@ -499,7 +489,7 @@
                              @change="getModels"
                              :data="productOptions"
                              :render-after-expand="false"
                              style="width: 100%" />
                              style="width: 100%"/>
            </el-form-item>
          </el-col>
        </el-row>
@@ -515,7 +505,7 @@
                <el-option v-for="item in modelOptions"
                           :key="item.id"
                           :label="item.model"
                           :value="item.id" />
                           :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
@@ -526,7 +516,7 @@
                          prop="unit">
              <el-input v-model="productForm.unit"
                        placeholder="请输入"
                        clearable />
                        clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -537,11 +527,11 @@
                         clearable
                         @change="mathNum">
                <el-option label="1"
                           value="1" />
                           value="1"/>
                <el-option label="6"
                           value="6" />
                           value="6"/>
                <el-option label="13"
                           value="13" />
                           value="13"/>
              </el-select>
            </el-form-item>
          </el-col>
@@ -556,7 +546,7 @@
                               :min="0"
                               clearable
                               style="width: 100%"
                               @change="mathNum" />
                               @change="mathNum"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -569,7 +559,7 @@
                               style="width: 100%"
                               v-model="productForm.quantity"
                               placeholder="请输入"
                               @change="mathNum" />
                               @change="mathNum"/>
            </el-form-item>
          </el-col>
        </el-row>
@@ -583,7 +573,7 @@
                               :min="0"
                               clearable
                               style="width: 100%"
                               @change="reverseMathNum('taxInclusiveTotalPrice')" />
                               @change="reverseMathNum('taxInclusiveTotalPrice')"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -595,7 +585,7 @@
                               :min="0"
                               clearable
                               style="width: 100%"
                               @change="reverseMathNum('taxExclusiveTotalPrice')" />
                               @change="reverseMathNum('taxExclusiveTotalPrice')"/>
            </el-form-item>
          </el-col>
        </el-row>
@@ -607,9 +597,9 @@
                         placeholder="请选择"
                         clearable>
                <el-option label="增普票"
                           value="增普票" />
                           value="增普票"/>
                <el-option label="增专票"
                           value="增专票" />
                           value="增专票"/>
              </el-select>
            </el-form-item>
          </el-col>
@@ -621,7 +611,7 @@
                               :step="0.1"
                               :min="0"
                               clearable
                               style="width: 100%" />
                               style="width: 100%"/>
            </el-form-item>
          </el-col>
        </el-row>
@@ -631,24 +621,23 @@
                          prop="isChecked">
              <el-radio-group v-model="productForm.isChecked">
                <el-radio label="是"
                          :value="true" />
                          :value="true"/>
                <el-radio label="否"
                          :value="false" />
                          :value="false"/>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </FormDialog>
    <FileListDialog 
      ref="fileListRef" 
      v-model="fileListDialogVisible"
      title="附件列表"
    />
    <FileList v-if="fileListDialogVisible"  v-model:visible="fileListDialogVisible" record-type="purchase_ledger" :record-id="recordId"  />
  </div>
</template>

<script setup>
import {Search, Delete} from "@element-plus/icons-vue";
import FormDialog from '@/components/Dialog/FormDialog.vue';
import FileListDialog from '@/components/Dialog/FileListDialog.vue';
  import { getToken } from "@/utils/auth";
  import pagination from "@/components/PIMTable/Pagination.vue";
  import {
@@ -661,10 +650,7 @@
  } from "vue";
  import { Search, Delete } from "@element-plus/icons-vue";
  import { ElMessageBox, ElMessage } from "element-plus";
  import FormDialog from '@/components/Dialog/FormDialog.vue';
  import FileListDialog from '@/components/Dialog/FileListDialog.vue';
  import {
    getSalesLedgerWithProducts,
    addOrUpdateSalesLedgerProduct,
    delProduct,
    delLedgerFile,
@@ -685,431 +671,434 @@
    delPurchaseTemplate,
  } from "@/api/procurementManagement/procurementLedger.js";
  import useFormData from "@/hooks/useFormData.js";
  const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));

  const { proxy } = getCurrentInstance();
  const tableData = ref([]);
  const productData = ref([]);
  const selectedRows = ref([]);
  const productSelectedRows = ref([]);
  const modelOptions = ref([]);
  const productOptions = ref([]);
  const salesContractList = ref([]);
  const supplierList = ref([]);
  const tableLoading = ref(false);
  const page = reactive({
    current: 1,
    size: 100,
  });
  const total = ref(0);
  const fileList = ref([]);
  import useUserStore from "@/store/modules/user";
  import { modelList, productTreeList } from "@/api/basicData/product.js";
  import dayjs from "dayjs";
const {proxy} = getCurrentInstance();
const tableData = ref([]);
const productData = ref([]);
const selectedRows = ref([]);
const productSelectedRows = ref([]);
const modelOptions = ref([]);
const productOptions = ref([]);
const salesContractList = ref([]);
const supplierList = ref([]);
const tableLoading = ref(false);
const fileListDialogVisible = ref(false)
const page = reactive({
  current: 1,
  size: 100,
});
const total = ref(0);
const fileList = ref([]);
import useUserStore from "@/store/modules/user";
import {modelList, productTreeList} from "@/api/basicData/product.js";
import dayjs from "dayjs";
import FileUpload from "@/components/AttachmentUpload/file/index.vue";

  const userStore = useUserStore();
const userStore = useUserStore();

  // è®¢å•å®¡æ‰¹çŠ¶æ€æ˜¾ç¤ºæ–‡æœ¬
  const approvalStatusText = {
    1: "待审核",
    2: "审批中",
    3: "审批通过",
    4: "审批失败",
// è®¢å•å®¡æ‰¹çŠ¶æ€æ˜¾ç¤ºæ–‡æœ¬
const approvalStatusText = {
  1: "待审核",
  2: "审批中",
  3: "审批通过",
  4: "审批失败",
};

// èŽ·å–审批状态标签类型
const getApprovalStatusType = (status) => {
  const typeMap = {
    1: "info",      // å¾…审核 - ç°è‰²
    2: "warning",   // å®¡æ‰¹ä¸­ - æ©™è‰²
    3: "success",   // å®¡æ‰¹é€šè¿‡ - ç»¿è‰²
    4: "danger",    // å®¡æ‰¹å¤±è´¥ - çº¢è‰²
  };
  return typeMap[status] || "";
};

  // èŽ·å–审批状态标签类型
  const getApprovalStatusType = (status) => {
    const typeMap = {
      1: "info",      // å¾…审核 - ç°è‰²
      2: "warning",   // å®¡æ‰¹ä¸­ - æ©™è‰²
      3: "success",   // å®¡æ‰¹é€šè¿‡ - ç»¿è‰²
      4: "danger",    // å®¡æ‰¹å¤±è´¥ - çº¢è‰²
    };
    return typeMap[status] || "";
  };
const templateName = ref("");
const filterInputValue = ref("");
const templateList = ref([]);
const isTemplateNameDuplicate = ref(false); // æ ‡è®°æ¨¡æ¿åç§°æ˜¯å¦é‡å¤
// å½“前选中的模板ID（用于区分新增模板还是更新模板）
const currentTemplateId = ref(null);

  const templateName = ref("");
  const filterInputValue = ref("");
  const templateList = ref([]);
  const isTemplateNameDuplicate = ref(false); // æ ‡è®°æ¨¡æ¿åç§°æ˜¯å¦é‡å¤
  // å½“前选中的模板ID（用于区分新增模板还是更新模板）
  const currentTemplateId = ref(null);

  // æ£€æŸ¥æ¨¡æ¿åç§°æ˜¯å¦é‡å¤
  const checkTemplateNameDuplicate = name => {
    if (!name || name.trim() === "") {
      isTemplateNameDuplicate.value = false;
      return false;
    }
    const isDuplicate = templateList.value.some(
// æ£€æŸ¥æ¨¡æ¿åç§°æ˜¯å¦é‡å¤
const checkTemplateNameDuplicate = name => {
  if (!name || name.trim() === "") {
    isTemplateNameDuplicate.value = false;
    return false;
  }
  const isDuplicate = templateList.value.some(
      item => item.templateName === name.trim()
    );
    isTemplateNameDuplicate.value = isDuplicate;
    return isDuplicate;
  };
  );
  isTemplateNameDuplicate.value = isDuplicate;
  return isDuplicate;
};

  // é˜²æŠ–定时器
  let duplicateCheckTimer = null;
  const onTemplateFilterChange = val => {
    filterInputValue.value = val ?? "";
    // æ¸…除之前的定时器
    if (duplicateCheckTimer) {
      clearTimeout(duplicateCheckTimer);
    }
    // å®žæ—¶æ£€æŸ¥æ¨¡æ¿åç§°æ˜¯å¦é‡å¤ï¼ˆé˜²æŠ–处理，避免频繁提示）
    if (val && val.trim()) {
      duplicateCheckTimer = setTimeout(() => {
        const isDuplicate = checkTemplateNameDuplicate(val);
        if (isDuplicate) {
          ElMessage({
            message: "模板名称已存在，请更换模板名称",
            type: "warning",
            duration: 2000,
          });
        }
      }, 300); // 300ms é˜²æŠ–
    } else {
      isTemplateNameDuplicate.value = false;
    }
  };

  // allow-create æ—¶ï¼Œè¾“入不存在的内容会作为 string å€¼è¿”回；这里同步回输入框以确保文字不丢
  const onTemplateChange = async val => {
    if (typeof val === "string") {
      filterInputValue.value = val;
      // é€‰æ‹©æˆ–输入时检查重复
      checkTemplateNameDuplicate(val);
    }

    // è¿‡æ»¤æ•°æ®ï¼ŒæŸ¥æ‰¾åŒ¹é…çš„模板
    const matchedTemplate = templateList.value.find(
      item => item.templateName === val
    );

    if (matchedTemplate?.id) {
      // è®°å½•å½“前选中的模板ID，后续保存时进行更新操作
      currentTemplateId.value = matchedTemplate.id;
      // é€‰ä¸­å·²æœ‰æ¨¡æ¿æ—¶ï¼Œä¸åº”视为“模板名称重复导致不可保存”
      isTemplateNameDuplicate.value = false;
      // å¦‚果找到模板，只赋值供应商、项目名称、付款方式和产品信息
      if (matchedTemplate.supplierId) {
        form.value.supplierId = matchedTemplate.supplierId;
      }
      if (matchedTemplate.supplierName) {
        form.value.supplierName = matchedTemplate.supplierName;
      }
      if (matchedTemplate.projectName) {
        form.value.projectName = matchedTemplate.projectName;
      }
      if (matchedTemplate.paymentMethod) {
        form.value.paymentMethod = matchedTemplate.paymentMethod;
      }
      // æ¨¡æ¿æ•°æ®ä¸­çš„产品字段是 productList，需要转换为 productData
      productData.value = matchedTemplate.productList || matchedTemplate.productData || [];
    } else {
      // æœªåŒ¹é…åˆ°å·²æœ‰æ¨¡æ¿ï¼Œè§†ä¸ºæ–°æ¨¡æ¿
      currentTemplateId.value = null;
      // å¦‚果没有找到模板，重置表单（保持当前表单状态）
      const currentFormData = { ...form.value };
      const currentProductData = [...productData.value];

      // å¦‚果对话框未打开，先打开
      if (!dialogFormVisible.value) {
        operationType.value = "add";
        dialogFormVisible.value = true;
      }

      // ç­‰å¾…下一个 tick åŽæ¢å¤æ•°æ®
      await nextTick();
      form.value = {
        ...form.value,
        ...currentFormData,
      };
      productData.value = currentProductData;
    }
  };

  // ç”¨æˆ·ä¿¡æ¯è¡¨å•å¼¹æ¡†æ•°æ®
  const operationType = ref("");
  const dialogFormVisible = ref(false);
  const data = reactive({
    searchForm: {
      supplierName: "", // ä¾›åº”商名称
      purchaseContractNumber: "", // é‡‡è´­åˆåŒç¼–号
      salesContractNo: "", // é”€å”®åˆåŒç¼–号
      projectName: "", // é¡¹ç›®åç§°
      entryDate: null, // å½•å…¥æ—¥æœŸ
      entryDateStart: undefined,
      entryDateEnd: undefined,
    },
    form: {
      purchaseContractNumber: "",
      salesLedgerId: "",
      projectName: "",
      recorderId: "",
            recorderName: "",
      entryDate: "",
      productData: [],
      supplierName: "",
      supplierId: "",
      paymentMethod: "",
      executionDate: "",
      isChecked: false,
    },
    rules: {
      purchaseContractNumber: [
        { required: true, message: "请输入", trigger: "blur" },
      ],
      projectName: [
        { required: true, message: "请输入项目名称", trigger: "blur" },
      ],
      supplierId: [{ required: true, message: "请输入", trigger: "blur" }],
      entryDate: [{ required: true, message: "请选择", trigger: "change" }],
      executionDate: [{ required: true, message: "请选择", trigger: "change" }],
    },
  });
  const { form, rules } = toRefs(data);
  const { form: searchForm } = useFormData({
    ...data.searchForm,
    // è®¾ç½®å½•å…¥æ—¥æœŸèŒƒå›´ä¸ºå½“天
    entryDate: [
      dayjs().startOf("day").format("YYYY-MM-DD"),
      dayjs().endOf("day").format("YYYY-MM-DD"),
    ],
    entryDateStart: dayjs().startOf("day").format("YYYY-MM-DD"),
    entryDateEnd: dayjs().endOf("day").format("YYYY-MM-DD"),
  });

  // äº§å“è¡¨å•å¼¹æ¡†æ•°æ®
  const productFormVisible = ref(false);
  const productOperationType = ref("");
  const productOperationIndex = ref("");
  const currentId = ref("");
  const productFormData = reactive({
    productForm: {
      productId: "",
      productCategory: "",
      productModelId: "",
      specificationModel: "",
      unit: "",
      quantity: "",
      taxInclusiveUnitPrice: "",
      taxRate: "",
      taxInclusiveTotalPrice: "",
      taxExclusiveTotalPrice: "",
      invoiceType: "",
      warnNum: "",
      isChecked: false,
    },
    productRules: {
      productId: [{ required: true, message: "请选择", trigger: "change" }],
      productModelId: [{ required: true, message: "请选择", trigger: "change" }],
      unit: [{ required: true, message: "请输入", trigger: "blur" }],
      quantity: [{ required: true, message: "请输入", trigger: "blur" }],
      taxInclusiveUnitPrice: [
        { required: true, message: "请输入", trigger: "blur" },
      ],
      taxRate: [{ required: true, message: "请选择", trigger: "change" }],
      warnNum: [{ required: true, message: "请选择", trigger: "change" }],
      taxInclusiveTotalPrice: [
        { required: true, message: "请输入", trigger: "blur" },
      ],
      taxExclusiveTotalPrice: [
        { required: true, message: "请输入", trigger: "blur" },
      ],
      invoiceType: [{ required: true, message: "请选择", trigger: "change" }],
      isChecked: [{ required: true, message: "请选择", trigger: "change" }],
    },
  });
  const { productForm, productRules } = toRefs(productFormData);
  const upload = reactive({
    // ä¸Šä¼ çš„地址
    url: import.meta.env.VITE_APP_BASE_API + "/file/upload",
    // è®¾ç½®ä¸Šä¼ çš„请求头部
    headers: { Authorization: "Bearer " + getToken() },
  });

  // å¯¼å…¥ç›¸å…³
  const importUploadRef = ref(null);
  const importUpload = reactive({
    title: "导入采购台账",
    open: false,
    url: import.meta.env.VITE_APP_BASE_API + "/purchase/ledger/import",
    headers: { Authorization: "Bearer " + getToken() },
    isUploading: false,
    beforeUpload: (file) => {
      const isExcel = file.name.endsWith(".xlsx") || file.name.endsWith(".xls");
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isExcel) {
        proxy.$modal.msgError("上传文件只能是 xlsx/xls æ ¼å¼!");
        return false;
      }
      if (!isLt10M) {
        proxy.$modal.msgError("上传文件大小不能超过 10MB!");
        return false;
      }
      return true;
    },
    onChange: (file, fileList) => {
      // noop
    },
    onProgress: (event, file, fileList) => {
      // noop
    },
    onSuccess: (response, file, fileList) => {
      importUpload.isUploading = false;
      if (response?.code === 200) {
        proxy.$modal.msgSuccess("导入成功");
        importUpload.open = false;
        if (importUploadRef.value) {
          importUploadRef.value.clearFiles?.();
        }
        getList();
      } else {
        proxy.$modal.msgError(response?.msg || "导入失败");
      }
    },
    onError: () => {
      importUpload.isUploading = false;
      proxy.$modal.msgError("导入失败，请重试");
    },
  });

  const handleImport = () => {
    importUpload.title = "导入采购台账";
    importUpload.open = true;
    importUpload.isUploading = false;
    if (importUploadRef.value) {
      importUploadRef.value.clearFiles?.();
    }
  };

  // ä¸‹è½½å¯¼å…¥æ¨¡æ¿ï¼ˆå¦‚后端路径不同，可在此处调整）
  const downloadTemplate = () => {
    proxy.download("/purchase/ledger/exportTemplate", {}, "采购台账导入模板.xlsx");
  };

  const submitImportFile = () => {
    importUpload.isUploading = true;
    proxy.$refs["importUploadRef"]?.submit?.();
  };

  const changeDaterange = value => {
    if (value) {
      searchForm.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
      searchForm.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
    } else {
      searchForm.entryDateStart = undefined;
      searchForm.entryDateEnd = undefined;
    }
    handleQuery();
  };

  const formattedNumber = (row, column, cellValue) => {
    return parseFloat(cellValue).toFixed(2);
  };
  // æŸ¥è¯¢åˆ—表
  /** æœç´¢æŒ‰é’®æ“ä½œ */
  const handleQuery = () => {
    page.current = 1;
    getList();
  };

  // ä¿å­˜æ¨¡æ¿
  const handleButtonClick = async () => {
    // æ£€æŸ¥æ¨¡æ¿åç§°æ˜¯å¦ä¸ºç©º
    if (!templateName.value || templateName.value.trim() === "") {
      ElMessage({
        message: "请输入模板名称",
        type: "warning",
      });
      return;
    }

    // å¦‚果是“新增模板”（没有选中已有模板），才需要做重名校验；
    // è‹¥æ˜¯é€‰ä¸­å·²æœ‰æ¨¡æ¿åŽä¿®æ”¹ï¼Œåˆ™å…è®¸ä½¿ç”¨åŽŸåç§°ï¼ˆè§†ä¸ºæ›´æ–°ï¼‰
    if (!currentTemplateId.value) {
      const isDuplicate = checkTemplateNameDuplicate(templateName.value);
// é˜²æŠ–定时器
let duplicateCheckTimer = null;
const onTemplateFilterChange = val => {
  filterInputValue.value = val ?? "";
  // æ¸…除之前的定时器
  if (duplicateCheckTimer) {
    clearTimeout(duplicateCheckTimer);
  }
  // å®žæ—¶æ£€æŸ¥æ¨¡æ¿åç§°æ˜¯å¦é‡å¤ï¼ˆé˜²æŠ–处理，避免频繁提示）
  if (val && val.trim()) {
    duplicateCheckTimer = setTimeout(() => {
      const isDuplicate = checkTemplateNameDuplicate(val);
      if (isDuplicate) {
        ElMessage({
          message: "模板名称已存在，请更换模板名称",
          type: "warning",
          duration: 2000,
        });
        return;
      }
    }, 300); // 300ms é˜²æŠ–
  } else {
    isTemplateNameDuplicate.value = false;
  }
};

// allow-create æ—¶ï¼Œè¾“入不存在的内容会作为 string å€¼è¿”回；这里同步回输入框以确保文字不丢
const onTemplateChange = async val => {
  if (typeof val === "string") {
    filterInputValue.value = val;
    // é€‰æ‹©æˆ–输入时检查重复
    checkTemplateNameDuplicate(val);
  }

  // è¿‡æ»¤æ•°æ®ï¼ŒæŸ¥æ‰¾åŒ¹é…çš„模板
  const matchedTemplate = templateList.value.find(
      item => item.templateName === val
  );

  if (matchedTemplate?.id) {
    // è®°å½•å½“前选中的模板ID，后续保存时进行更新操作
    currentTemplateId.value = matchedTemplate.id;
    // é€‰ä¸­å·²æœ‰æ¨¡æ¿æ—¶ï¼Œä¸åº”视为“模板名称重复导致不可保存”
    isTemplateNameDuplicate.value = false;
    // å¦‚果找到模板，只赋值供应商、项目名称、付款方式和产品信息
    if (matchedTemplate.supplierId) {
      form.value.supplierId = matchedTemplate.supplierId;
    }
    if (matchedTemplate.supplierName) {
      form.value.supplierName = matchedTemplate.supplierName;
    }
    if (matchedTemplate.projectName) {
      form.value.projectName = matchedTemplate.projectName;
    }
    if (matchedTemplate.paymentMethod) {
      form.value.paymentMethod = matchedTemplate.paymentMethod;
    }
    // æ¨¡æ¿æ•°æ®ä¸­çš„产品字段是 productList，需要转换为 productData
    productData.value = matchedTemplate.productList || matchedTemplate.productData || [];
  } else {
    // æœªåŒ¹é…åˆ°å·²æœ‰æ¨¡æ¿ï¼Œè§†ä¸ºæ–°æ¨¡æ¿
    currentTemplateId.value = null;
    // å¦‚果没有找到模板，重置表单（保持当前表单状态）
    const currentFormData = {...form.value};
    const currentProductData = [...productData.value];

    // å¦‚果对话框未打开，先打开
    if (!dialogFormVisible.value) {
      operationType.value = "add";
      dialogFormVisible.value = true;
    }

    // æ£€æŸ¥ä¾›åº”商是否选择
    if (!form.value.supplierId) {
    // ç­‰å¾…下一个 tick åŽæ¢å¤æ•°æ®
    await nextTick();
    form.value = {
      ...form.value,
      ...currentFormData,
    };
    productData.value = currentProductData;
  }
};

// ç”¨æˆ·ä¿¡æ¯è¡¨å•å¼¹æ¡†æ•°æ®
const operationType = ref("");
const dialogFormVisible = ref(false);
const data = reactive({
  searchForm: {
    supplierName: "", // ä¾›åº”商名称
    purchaseContractNumber: "", // é‡‡è´­åˆåŒç¼–号
    salesContractNo: "", // é”€å”®åˆåŒç¼–号
    projectName: "", // é¡¹ç›®åç§°
    entryDate: null, // å½•å…¥æ—¥æœŸ
    entryDateStart: undefined,
    entryDateEnd: undefined,
  },
  form: {
    purchaseContractNumber: "",
    salesLedgerId: "",
    projectName: "",
    recorderId: "",
    recorderName: "",
    entryDate: "",
    productData: [],
    supplierName: "",
    supplierId: "",
    paymentMethod: "",
    executionDate: "",
    isChecked: false,
  },
  rules: {
    purchaseContractNumber: [
      {required: true, message: "请输入", trigger: "blur"},
    ],
    projectName: [
      {required: true, message: "请输入项目名称", trigger: "blur"},
    ],
    supplierId: [{required: true, message: "请输入", trigger: "blur"}],
    entryDate: [{required: true, message: "请选择", trigger: "change"}],
    executionDate: [{required: true, message: "请选择", trigger: "change"}],
  },
});
const {form, rules} = toRefs(data);
const {form: searchForm} = useFormData({
  ...data.searchForm,
  // è®¾ç½®å½•å…¥æ—¥æœŸèŒƒå›´ä¸ºå½“天
  entryDate: [
    dayjs().startOf("day").format("YYYY-MM-DD"),
    dayjs().endOf("day").format("YYYY-MM-DD"),
  ],
  entryDateStart: dayjs().startOf("day").format("YYYY-MM-DD"),
  entryDateEnd: dayjs().endOf("day").format("YYYY-MM-DD"),
});

// äº§å“è¡¨å•å¼¹æ¡†æ•°æ®
const productFormVisible = ref(false);
const productOperationType = ref("");
const productOperationIndex = ref("");
const currentId = ref("");
const productFormData = reactive({
  productForm: {
    productId: "",
    productCategory: "",
    productModelId: "",
    specificationModel: "",
    unit: "",
    quantity: "",
    taxInclusiveUnitPrice: "",
    taxRate: "",
    taxInclusiveTotalPrice: "",
    taxExclusiveTotalPrice: "",
    invoiceType: "",
    warnNum: "",
    isChecked: false,
  },
  productRules: {
    productId: [{required: true, message: "请选择", trigger: "change"}],
    productModelId: [{required: true, message: "请选择", trigger: "change"}],
    unit: [{required: true, message: "请输入", trigger: "blur"}],
    quantity: [{required: true, message: "请输入", trigger: "blur"}],
    taxInclusiveUnitPrice: [
      {required: true, message: "请输入", trigger: "blur"},
    ],
    taxRate: [{required: true, message: "请选择", trigger: "change"}],
    warnNum: [{required: true, message: "请选择", trigger: "change"}],
    taxInclusiveTotalPrice: [
      {required: true, message: "请输入", trigger: "blur"},
    ],
    taxExclusiveTotalPrice: [
      {required: true, message: "请输入", trigger: "blur"},
    ],
    invoiceType: [{required: true, message: "请选择", trigger: "change"}],
    isChecked: [{required: true, message: "请选择", trigger: "change"}],
  },
});
const {productForm, productRules} = toRefs(productFormData);
const upload = reactive({
  // ä¸Šä¼ çš„地址
  url: import.meta.env.VITE_APP_BASE_API + "/file/upload",
  // è®¾ç½®ä¸Šä¼ çš„请求头部
  headers: {Authorization: "Bearer " + getToken()},
});

// å¯¼å…¥ç›¸å…³
const importUploadRef = ref(null);
const importUpload = reactive({
  title: "导入采购台账",
  open: false,
  url: import.meta.env.VITE_APP_BASE_API + "/purchase/ledger/import",
  headers: {Authorization: "Bearer " + getToken()},
  isUploading: false,
  beforeUpload: (file) => {
    const isExcel = file.name.endsWith(".xlsx") || file.name.endsWith(".xls");
    const isLt10M = file.size / 1024 / 1024 < 10;
    if (!isExcel) {
      proxy.$modal.msgError("上传文件只能是 xlsx/xls æ ¼å¼!");
      return false;
    }
    if (!isLt10M) {
      proxy.$modal.msgError("上传文件大小不能超过 10MB!");
      return false;
    }
    return true;
  },
  onChange: (file, fileList) => {
    // noop
  },
  onProgress: (event, file, fileList) => {
    // noop
  },
  onSuccess: (response, file, fileList) => {
    importUpload.isUploading = false;
    if (response?.code === 200) {
      proxy.$modal.msgSuccess("导入成功");
      importUpload.open = false;
      if (importUploadRef.value) {
        importUploadRef.value.clearFiles?.();
      }
      getList();
    } else {
      proxy.$modal.msgError(response?.msg || "导入失败");
    }
  },
  onError: () => {
    importUpload.isUploading = false;
    proxy.$modal.msgError("导入失败，请重试");
  },
});

const handleImport = () => {
  importUpload.title = "导入采购台账";
  importUpload.open = true;
  importUpload.isUploading = false;
  if (importUploadRef.value) {
    importUploadRef.value.clearFiles?.();
  }
};

// ä¸‹è½½å¯¼å…¥æ¨¡æ¿ï¼ˆå¦‚后端路径不同，可在此处调整）
const downloadTemplate = () => {
  proxy.download("/purchase/ledger/exportTemplate", {}, "采购台账导入模板.xlsx");
};

const submitImportFile = () => {
  importUpload.isUploading = true;
  proxy.$refs["importUploadRef"]?.submit?.();
};

const changeDaterange = value => {
  if (value) {
    searchForm.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
    searchForm.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
  } else {
    searchForm.entryDateStart = undefined;
    searchForm.entryDateEnd = undefined;
  }
  handleQuery();
};

const formattedNumber = (row, column, cellValue) => {
  return parseFloat(cellValue).toFixed(2);
};
// æŸ¥è¯¢åˆ—表
/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
  page.current = 1;
  getList();
};

// ä¿å­˜æ¨¡æ¿
const handleButtonClick = async () => {
  // æ£€æŸ¥æ¨¡æ¿åç§°æ˜¯å¦ä¸ºç©º
  if (!templateName.value || templateName.value.trim() === "") {
    ElMessage({
      message: "请输入模板名称",
      type: "warning",
    });
    return;
  }

  // å¦‚果是“新增模板”（没有选中已有模板），才需要做重名校验；
  // è‹¥æ˜¯é€‰ä¸­å·²æœ‰æ¨¡æ¿åŽä¿®æ”¹ï¼Œåˆ™å…è®¸ä½¿ç”¨åŽŸåç§°ï¼ˆè§†ä¸ºæ›´æ–°ï¼‰
  if (!currentTemplateId.value) {
    const isDuplicate = checkTemplateNameDuplicate(templateName.value);
    if (isDuplicate) {
      ElMessage({
        message: "请先选择供应商",
        message: "模板名称已存在，请更换模板名称",
        type: "warning",
      });
      return;
    }
  }

    // æ£€æŸ¥æ˜¯å¦æœ‰äº§å“æ•°æ®
    if (!productData.value || productData.value.length === 0) {
      ElMessage({
        message: '请先添加产品信息',
        type: 'warning',
  // æ£€æŸ¥ä¾›åº”商是否选择
  if (!form.value.supplierId) {
    ElMessage({
      message: "请先选择供应商",
      type: "warning",
    });
    return;
  }

  // æ£€æŸ¥æ˜¯å¦æœ‰äº§å“æ•°æ®
  if (!productData.value || productData.value.length === 0) {
    ElMessage({
      message: '请先添加产品信息',
      type: 'warning',
    });
    return;
  }

  try {
    let params = {
      productData: proxy.HaveJson(productData.value),
      supplierId: form.value.supplierId,
      paymentMethod: form.value.paymentMethod,
      recorderId: form.value.recorderId,
      recorderName: form.value.recorderName,
      projectName: form.value.projectName,
      templateName: templateName.value.trim(),
    };
    console.log("template params ===>", params, "currentTemplateId:", currentTemplateId.value);

    // å¦‚æžœ currentTemplateId æœ‰å€¼ï¼Œè¯´æ˜Žå½“前是“编辑已有模板” â†’ è°ƒç”¨æ›´æ–°æŽ¥å£
    // å¦åˆ™ä¸ºâ€œæ–°å»ºæ¨¡æ¿â€ â†’ è°ƒç”¨æ–°å¢žæŽ¥å£
    let res;
    if (currentTemplateId.value) {
      res = await updatePurchaseTemplate({
        id: currentTemplateId.value,
        ...params,
      });
      return;
    } else {
      res = await addPurchaseTemplate(params);
    }

    try {
      let params = {
        productData: proxy.HaveJson(productData.value),
        supplierId: form.value.supplierId,
        paymentMethod: form.value.paymentMethod,
        recorderId: form.value.recorderId,
                recorderName: form.value.recorderName,
        projectName: form.value.projectName,
        templateName: templateName.value.trim(),
      };
      console.log("template params ===>", params, "currentTemplateId:", currentTemplateId.value);

      // å¦‚æžœ currentTemplateId æœ‰å€¼ï¼Œè¯´æ˜Žå½“前是“编辑已有模板” â†’ è°ƒç”¨æ›´æ–°æŽ¥å£
      // å¦åˆ™ä¸ºâ€œæ–°å»ºæ¨¡æ¿â€ â†’ è°ƒç”¨æ–°å¢žæŽ¥å£
      let res;
      if (currentTemplateId.value) {
        res = await updatePurchaseTemplate({
          id: currentTemplateId.value,
          ...params,
        });
      } else {
        res = await addPurchaseTemplate(params);
      }

      if (res && res.code === 200) {
        ElMessage({
          message: currentTemplateId.value ? "模板更新成功" : "模板保存成功",
          type: "success",
        });
        // ä¿å­˜æˆåŠŸåŽé‡æ–°èŽ·å–模板列表
        await getTemplateList();
        // æ¸…空模板名称输入
        templateName.value = "";
        filterInputValue.value = "";
        isTemplateNameDuplicate.value = false;
        // ä¿å­˜/更新完成后，重置当前模板ID
        currentTemplateId.value = null;
      } else {
        ElMessage({
          message: res?.msg || "模板保存失败",
          type: "error",
        });
      }
    } catch (error) {
      console.error("保存模板失败:", error);
    if (res && res.code === 200) {
      ElMessage({
        message: "模板保存失败，请稍后重试",
        message: currentTemplateId.value ? "模板更新成功" : "模板保存成功",
        type: "success",
      });
      // ä¿å­˜æˆåŠŸåŽé‡æ–°èŽ·å–模板列表
      await getTemplateList();
      // æ¸…空模板名称输入
      templateName.value = "";
      filterInputValue.value = "";
      isTemplateNameDuplicate.value = false;
      // ä¿å­˜/更新完成后，重置当前模板ID
      currentTemplateId.value = null;
    } else {
      ElMessage({
        message: res?.msg || "模板保存失败",
        type: "error",
      });
    }
  };
  // å­è¡¨åˆè®¡æ–¹æ³•
  const summarizeChildrenTable = param => {
    return proxy.summarizeTable(
  } catch (error) {
    console.error("保存模板失败:", error);
    ElMessage({
      message: "模板保存失败，请稍后重试",
      type: "error",
    });
  }
};
// å­è¡¨åˆè®¡æ–¹æ³•
const summarizeChildrenTable = param => {
  return proxy.summarizeTable(
      param,
      [
        "taxInclusiveUnitPrice",
@@ -1121,20 +1110,20 @@
        "futureTicketsAmount",
      ],
      {
        ticketsNum: { noDecimal: true }, // ä¸ä¿ç•™å°æ•°
        futureTickets: { noDecimal: true }, // ä¸ä¿ç•™å°æ•°
        ticketsNum: {noDecimal: true}, // ä¸ä¿ç•™å°æ•°
        futureTickets: {noDecimal: true}, // ä¸ä¿ç•™å°æ•°
      }
    );
  };
  const paginationChange = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  const getList = () => {
    tableLoading.value = true;
    const { entryDate, ...rest } = searchForm;
    purchaseListPage({ ...rest, ...page })
  );
};
const paginationChange = obj => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};
const getList = () => {
  tableLoading.value = true;
  const {entryDate, ...rest} = searchForm;
  purchaseListPage({...rest, ...page})
      .then(res => {
        tableLoading.value = false;
        // tableData.value = res.data.records;
@@ -1151,458 +1140,461 @@
      .catch(() => {
        tableLoading.value = false;
      });
  };
  // è¡¨æ ¼é€‰æ‹©æ•°æ®
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };
  const productSelected = selectedRows => {
    productSelectedRows.value = selectedRows;
  };
  const expandedRowKeys = ref([]);
  // å±•å¼€è¡Œ
  const expandChange = async (row, expandedRows) => {
    if (expandedRows.length > 0) {
      expandedRowKeys.value = [];
};
// è¡¨æ ¼é€‰æ‹©æ•°æ®
const handleSelectionChange = selection => {
  selectedRows.value = selection;
};
const productSelected = selectedRows => {
  productSelectedRows.value = selectedRows;
};
const expandedRowKeys = ref([]);
// å±•å¼€è¡Œ
const expandChange = async (row, expandedRows) => {
  if (expandedRows.length > 0) {
    expandedRowKeys.value = [];
    try {
      const res = await productList({salesLedgerId: row.id, type: 2});
      const index = tableData.value.findIndex(item => item.id === row.id);
      if (index > -1) {
        tableData.value[index].children = res.data || [];
        expandedRowKeys.value.push(row.id);
      }
    } catch (error) {
      console.error("加载产品列表失败:", error);
      proxy.$modal.msgError("加载产品列表失败");
      // å±•å¼€å¤±è´¥æ—¶ï¼Œç§»é™¤å±•å¼€çŠ¶æ€
      const index = expandedRows.findIndex(item => item.id === row.id);
      if (index > -1) {
        expandedRows.splice(index, 1);
      }
    }
  } else {
    expandedRowKeys.value = [];
  }
};
// ä¸»è¡¨åˆè®¡æ–¹æ³•
const summarizeMainTable = param => {
  return proxy.summarizeTable(param, ["contractAmount"]);
};
// å­è¡¨åˆè®¡æ–¹æ³•
const summarizeProTable = param => {
  return proxy.summarizeTable(param, [
    "taxInclusiveUnitPrice",
    "taxInclusiveTotalPrice",
    "taxExclusiveTotalPrice",
  ]);
};
// æ‰“开弹框
const openForm = async (type, row) => {
  // ç¼–辑时检查审核状态，只有待审核(1)和审批失败(4)才能编辑
  if (type === "edit" && row) {
    if (row.approvalStatus !== 1 && row.approvalStatus !== 4) {
      proxy.$modal.msgWarning("只有待审核和审批失败状态的记录才能编辑");
      return;
    }
  }

  await getTemplateList();
  operationType.value = type;
  form.value = {};
  productData.value = [];
  fileList.value = [];
  templateName.value = "";
  filterInputValue.value = "";
  isTemplateNameDuplicate.value = false;
  try {
    // å¹¶è¡ŒåŠ è½½åŸºç¡€æ•°æ®
    const [salesRes, supplierRes] = await Promise.all([
      getSalesNo(),
      getOptions(),
    ]);

    salesContractList.value = salesRes || [];
    // ä¾›åº”商过滤出isWhite=0 çš„数据
    supplierList.value = (supplierRes.data || []).filter(
        item => item.isWhite === 0
    );

    // è®¾ç½®é»˜è®¤å€¼
    form.value.recorderName = userStore.nickName;
    form.value.entryDate = getCurrentDate();

    if (type === "add") {
      // æ–°å¢žæ—¶ç”Ÿæˆé‡‡è´­åˆåŒå·
      try {
        const res = await productList({ salesLedgerId: row.id, type: 2 });
        const index = tableData.value.findIndex(item => item.id === row.id);
        if (index > -1) {
          tableData.value[index].children = res.data || [];
          expandedRowKeys.value.push(row.id);
        const purchaseNoRes = await createPurchaseNo();
        if (purchaseNoRes?.data) {
          form.value.purchaseContractNumber = purchaseNoRes.data;
        }
      } catch (error) {
        console.error("加载产品列表失败:", error);
        proxy.$modal.msgError("加载产品列表失败");
        // å±•å¼€å¤±è´¥æ—¶ï¼Œç§»é™¤å±•å¼€çŠ¶æ€
        const index = expandedRows.findIndex(item => item.id === row.id);
        if (index > -1) {
          expandedRows.splice(index, 1);
        }
        console.error("生成采购合同号失败:", error);
        proxy.$modal.msgWarning("生成采购合同号失败");
      }
    } else {
      expandedRowKeys.value = [];
    }
  };
  // ä¸»è¡¨åˆè®¡æ–¹æ³•
  const summarizeMainTable = param => {
    return proxy.summarizeTable(param, ["contractAmount"]);
  };
  // å­è¡¨åˆè®¡æ–¹æ³•
  const summarizeProTable = param => {
    return proxy.summarizeTable(param, [
      "taxInclusiveUnitPrice",
      "taxInclusiveTotalPrice",
      "taxExclusiveTotalPrice",
    ]);
  };
  // æ‰“开弹框
  const openForm = async (type, row) => {
    // ç¼–辑时检查审核状态，只有待审核(1)和审批失败(4)才能编辑
    if (type === "edit" && row) {
      if (row.approvalStatus !== 1 && row.approvalStatus !== 4) {
        proxy.$modal.msgWarning("只有待审核和审批失败状态的记录才能编辑");
    } else if (type === "edit" && row?.id) {
      // ç¼–辑时加载数据
      currentId.value = row.id;
      try {
        const purchaseRes = await getPurchaseById({id: row.id, type: 2});
        form.value = {...purchaseRes};
        productData.value = purchaseRes.productData || [];
        fileList.value = purchaseRes.storageBlobVOS || [];
      } catch (error) {
        console.error("加载采购台账数据失败:", error);
        proxy.$modal.msgError("加载数据失败");
        return;
      }
    }
    
    await getTemplateList();
    operationType.value = type;
    form.value = {};
    productData.value = [];
    fileList.value = [];
    templateName.value = "";
    filterInputValue.value = "";
    isTemplateNameDuplicate.value = false;

    if (form.value.salesLedgerId == -1) {
      form.value.salesLedgerId = null;
    }
    console.log(form.value, "form.value===========");
    dialogFormVisible.value = true;
  } catch (error) {
    console.error("打开表单失败:", error);
    proxy.$modal.msgError("加载基础数据失败");
  }
};

// ä¸Šä¼ å‰æ ¡æ£€
function handleBeforeUpload(file) {
  // æ ¡æ£€æ–‡ä»¶å¤§å°
  if (file.size > 1024 * 1024 * 10) {
    proxy.$modal.msgError("上传文件大小不能超过10MB!");
    return false;
  }
  proxy.$modal.loading("正在上传文件，请稍候...");
  return true;
}

// ä¸Šä¼ å¤±è´¥
function handleUploadError(err) {
  proxy.$modal.msgError("上传文件失败");
  proxy.$modal.closeLoading();
}

// ä¸Šä¼ æˆåŠŸå›žè°ƒ
function handleUploadSuccess(res, file, uploadFiles) {
  proxy.$modal.closeLoading();
  if (res.code === 200) {
    file.tempId = res.data.tempId;
    proxy.$modal.msgSuccess("上传成功");
  } else {
    proxy.$modal.msgError(res.msg);
    proxy.$refs.fileUpload.handleRemove(file);
  }
}

// ç§»é™¤æ–‡ä»¶
async function handleRemove(file) {
  if (!file?.id) {
    return;
  }
  console.log("handleRemove", file.id);
  if (file.size > 1024 * 1024 * 10) {
    // ä»…前端清理，不调用删除接口和提示
    return;
  }

  if (operationType.value === "edit" && file.id) {
    try {
      // å¹¶è¡ŒåŠ è½½åŸºç¡€æ•°æ®
      const [salesRes, supplierRes] = await Promise.all([
        getSalesNo(),
        getOptions(),
      ]);

      salesContractList.value = salesRes || [];
      // ä¾›åº”商过滤出isWhite=0 çš„数据
      supplierList.value = (supplierRes.data || []).filter(
        item => item.isWhite === 0
      );

      // è®¾ç½®é»˜è®¤å€¼
      form.value.recorderName = userStore.nickName;
      form.value.entryDate = getCurrentDate();

      if (type === "add") {
        // æ–°å¢žæ—¶ç”Ÿæˆé‡‡è´­åˆåŒå·
        try {
          const purchaseNoRes = await createPurchaseNo();
          if (purchaseNoRes?.data) {
            form.value.purchaseContractNumber = purchaseNoRes.data;
          }
        } catch (error) {
          console.error("生成采购合同号失败:", error);
          proxy.$modal.msgWarning("生成采购合同号失败");
        }
      } else if (type === "edit" && row?.id) {
        // ç¼–辑时加载数据
        currentId.value = row.id;
        try {
          const purchaseRes = await getPurchaseById({ id: row.id, type: 2 });
          form.value = { ...purchaseRes };
          productData.value = purchaseRes.productData || [];
          fileList.value = purchaseRes.salesLedgerFiles || [];
        } catch (error) {
          console.error("加载采购台账数据失败:", error);
          proxy.$modal.msgError("加载数据失败");
          return;
        }
      }

      if (form.value.salesLedgerId == -1) {
        form.value.salesLedgerId = null;
      }
      console.log(form.value, "form.value===========");
      dialogFormVisible.value = true;
      await delLedgerFile([file.id]);
      proxy.$modal.msgSuccess("删除成功");
    } catch (error) {
      console.error("打开表单失败:", error);
      proxy.$modal.msgError("加载基础数据失败");
    }
  };
  // ä¸Šä¼ å‰æ ¡æ£€
  function handleBeforeUpload(file) {
    // æ ¡æ£€æ–‡ä»¶å¤§å°
    if (file.size > 1024 * 1024 * 10) {
      proxy.$modal.msgError("上传文件大小不能超过10MB!");
      return false;
    }
    proxy.$modal.loading("正在上传文件，请稍候...");
    return true;
  }
  // ä¸Šä¼ å¤±è´¥
  function handleUploadError(err) {
    proxy.$modal.msgError("上传文件失败");
    proxy.$modal.closeLoading();
  }
  // ä¸Šä¼ æˆåŠŸå›žè°ƒ
  function handleUploadSuccess(res, file, uploadFiles) {
    proxy.$modal.closeLoading();
    if (res.code === 200) {
      file.tempId = res.data.tempId;
      proxy.$modal.msgSuccess("上传成功");
    } else {
      proxy.$modal.msgError(res.msg);
      proxy.$refs.fileUpload.handleRemove(file);
      console.error("删除文件失败:", error);
      proxy.$modal.msgError("删除文件失败");
    }
  }
  // ç§»é™¤æ–‡ä»¶
  async function handleRemove(file) {
    if (!file?.id) {
      return;
    }
    console.log("handleRemove", file.id);
    if (file.size > 1024 * 1024 * 10) {
      // ä»…前端清理，不调用删除接口和提示
      return;
    }
}

    if (operationType.value === "edit" && file.id) {
      try {
        await delLedgerFile([file.id]);
        proxy.$modal.msgSuccess("删除成功");
      } catch (error) {
        console.error("删除文件失败:", error);
        proxy.$modal.msgError("删除文件失败");
      }
    }
  }
  // æäº¤è¡¨å•
  const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
      if (valid) {
        if (productData.value.length > 0) {
          // æ–°å¢žæ—¶ï¼Œéœ€è¦ä»Žæ¯ä¸ªäº§å“å¯¹è±¡ä¸­åˆ é™¤ id å­—段
          let processedProductData = productData.value;
          if (operationType.value === "add") {
            processedProductData = productData.value.map(product => {
              const { id, ...rest } = product;
              return rest;
            });
          }
          form.value.productData = proxy.HaveJson(processedProductData);
        } else {
          proxy.$modal.msgWarning("请添加产品信息");
          return;
        }
        let tempFileIds = [];
        if (fileList.value.length > 0) {
          tempFileIds = fileList.value.map(item => item.tempId);
        }
        form.value.tempFileIds = tempFileIds;
        form.value.type = 2;

        // å¦‚æžœsalesLedgerId为空，则不传递salesContractNo
        if (!form.value.salesLedgerId) {
          form.value.salesContractNo = "";
        }

        // æ–°å¢žæ—¶ä¸ä¼ é€’id
        const submitData = { ...form.value };
// æäº¤è¡¨å•
const submitForm = () => {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      if (productData.value.length > 0) {
        // æ–°å¢žæ—¶ï¼Œéœ€è¦ä»Žæ¯ä¸ªäº§å“å¯¹è±¡ä¸­åˆ é™¤ id å­—段
        let processedProductData = productData.value;
        if (operationType.value === "add") {
          delete submitData.id;
          processedProductData = productData.value.map(product => {
            const {id, ...rest} = product;
            return rest;
          });
        }

        addOrEditPurchase(submitData).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          closeDia();
          getList();
        });
        form.value.productData = proxy.HaveJson(processedProductData);
      } else {
        proxy.$modal.msgWarning("请添加产品信息");
        return;
      }
    });
  };
  // å…³é—­å¼¹æ¡†
  const closeDia = () => {
    proxy.resetForm("formRef");
    dialogFormVisible.value = false;
  };
  // æ‰“开产品弹框
  const openProductForm = async (type, row, index) => {
    productOperationType.value = type;
    productOperationIndex.value = index;
    productForm.value = {};
    proxy.resetForm("productFormRef");
    productFormVisible.value = true;
    
    // å…ˆèŽ·å–产品选项，确保数据加载完成
    await getProductOptions();
    
    // ç­‰å¾… DOM æ›´æ–°
    await nextTick();
    
    if (type === "add") {
      productForm.value.isChecked = false;
    }
      form.value.storageBlobDTOS = fileList.value;
      form.value.type = 2;

    if (type === "edit") {
      // å¤åˆ¶è¡Œæ•°æ®
      productForm.value = { ...row };
      
      // å¦‚果是从模板加载的数据，可能没有 productId å’Œ productModelId
      // éœ€è¦æ ¹æ® productCategory å’Œ specificationModel æ¥æŸ¥æ‰¾å¯¹åº”çš„ ID
      if (!productForm.value.productId && productForm.value.productCategory) {
        // æ ¹æ® productCategory æŸ¥æ‰¾ productId
        const findProductIdByCategory = (nodes, categoryName) => {
          for (let i = 0; i < nodes.length; i++) {
            if (nodes[i].label === categoryName) {
              return nodes[i].value;
            }
            if (nodes[i].children && nodes[i].children.length > 0) {
              const found = findProductIdByCategory(nodes[i].children, categoryName);
              if (found) return found;
            }
      // å¦‚æžœsalesLedgerId为空，则不传递salesContractNo
      if (!form.value.salesLedgerId) {
        form.value.salesContractNo = "";
      }

      // æ–°å¢žæ—¶ä¸ä¼ é€’id
      const submitData = {...form.value};
      if (operationType.value === "add") {
        delete submitData.id;
      }

      addOrEditPurchase(submitData).then(res => {
        proxy.$modal.msgSuccess("提交成功");
        closeDia();
        getList();
      });
    }
  });
};
// å…³é—­å¼¹æ¡†
const closeDia = () => {
  proxy.resetForm("formRef");
  dialogFormVisible.value = false;
};
// æ‰“开产品弹框
const openProductForm = async (type, row, index) => {
  productOperationType.value = type;
  productOperationIndex.value = index;
  productForm.value = {};
  proxy.resetForm("productFormRef");
  productFormVisible.value = true;

  // å…ˆèŽ·å–产品选项，确保数据加载完成
  await getProductOptions();

  // ç­‰å¾… DOM æ›´æ–°
  await nextTick();

  if (type === "add") {
    productForm.value.isChecked = false;
  }

  if (type === "edit") {
    // å¤åˆ¶è¡Œæ•°æ®
    productForm.value = {...row};

    // å¦‚果是从模板加载的数据，可能没有 productId å’Œ productModelId
    // éœ€è¦æ ¹æ® productCategory å’Œ specificationModel æ¥æŸ¥æ‰¾å¯¹åº”çš„ ID
    if (!productForm.value.productId && productForm.value.productCategory) {
      // æ ¹æ® productCategory æŸ¥æ‰¾ productId
      const findProductIdByCategory = (nodes, categoryName) => {
        for (let i = 0; i < nodes.length; i++) {
          if (nodes[i].label === categoryName) {
            return nodes[i].value;
          }
          return null;
        };
        
        const productId = findProductIdByCategory(productOptions.value, productForm.value.productCategory);
        if (productId) {
          productForm.value.productId = productId;
          // èŽ·å–型号列表并等待完成
          const modelRes = await modelList({ id: productId });
          modelOptions.value = modelRes;
          
          // ç­‰å¾… DOM æ›´æ–°
          await nextTick();
          
          // æ ¹æ® specificationModel æŸ¥æ‰¾ productModelId
          if (productForm.value.specificationModel && modelOptions.value.length > 0) {
            const modelItem = modelOptions.value.find(
              item => item.model === productForm.value.specificationModel
            );
            if (modelItem) {
              productForm.value.productModelId = modelItem.id;
              // è®¾ç½®è§„格型号和单位
              getProductModel(modelItem.id);
            }
          if (nodes[i].children && nodes[i].children.length > 0) {
            const found = findProductIdByCategory(nodes[i].children, categoryName);
            if (found) return found;
          }
        }
      } else if (productForm.value.productId) {
        // å¦‚果有 productId，正常加载型号列表
        await getModels(productForm.value.productId);
        
        return null;
      };

      const productId = findProductIdByCategory(productOptions.value, productForm.value.productCategory);
      if (productId) {
        productForm.value.productId = productId;
        // èŽ·å–型号列表并等待完成
        const modelRes = await modelList({id: productId});
        modelOptions.value = modelRes;

        // ç­‰å¾… DOM æ›´æ–°
        await nextTick();
        
        if (productForm.value.productModelId) {
          getProductModel(productForm.value.productModelId);

        // æ ¹æ® specificationModel æŸ¥æ‰¾ productModelId
        if (productForm.value.specificationModel && modelOptions.value.length > 0) {
          const modelItem = modelOptions.value.find(
              item => item.model === productForm.value.specificationModel
          );
          if (modelItem) {
            productForm.value.productModelId = modelItem.id;
            // è®¾ç½®è§„格型号和单位
            getProductModel(modelItem.id);
          }
        }
      }
      
      // æœ€åŽå†ç­‰å¾…一次 DOM æ›´æ–°ï¼Œç¡®ä¿æ‰€æœ‰æ•°æ®éƒ½å·²è®¾ç½®
    } else if (productForm.value.productId) {
      // å¦‚果有 productId，正常加载型号列表
      await getModels(productForm.value.productId);

      // ç­‰å¾… DOM æ›´æ–°
      await nextTick();

      if (productForm.value.productModelId) {
        getProductModel(productForm.value.productModelId);
      }
    }
  };
  const getProductOptions = () => {
    return productTreeList().then(res => {
      productOptions.value = convertIdToValue(res);

    // æœ€åŽå†ç­‰å¾…一次 DOM æ›´æ–°ï¼Œç¡®ä¿æ‰€æœ‰æ•°æ®éƒ½å·²è®¾ç½®
    await nextTick();
  }
};
const getProductOptions = () => {
  return productTreeList().then(res => {
    productOptions.value = convertIdToValue(res);
    return res;
  });
};
const getModels = value => {
  if (value) {
    productForm.value.productCategory =
        findNodeById(productOptions.value, value) || "";
    return modelList({id: value}).then(res => {
      modelOptions.value = res;
      return res;
    });
  };
  const getModels = value => {
    if (value) {
      productForm.value.productCategory =
        findNodeById(productOptions.value, value) || "";
      return modelList({ id: value }).then(res => {
        modelOptions.value = res;
        return res;
      });
    } else {
      productForm.value.productCategory = "";
      modelOptions.value = [];
      return Promise.resolve([]);
    }
  };
  const getProductModel = value => {
    const index = modelOptions.value.findIndex(item => item.id === value);
    if (index !== -1) {
      productForm.value.specificationModel = modelOptions.value[index].model;
      productForm.value.unit = modelOptions.value[index].unit;
    } else {
      productForm.value.specificationModel = null;
      productForm.value.unit = null;
    }
  };
  const findNodeById = (nodes, productId) => {
    for (let i = 0; i < nodes.length; i++) {
      if (nodes[i].value === productId) {
        return nodes[i].label; // æ‰¾åˆ°èŠ‚点，返回该节点的label
      }
      if (nodes[i].children && nodes[i].children.length > 0) {
        const foundNode = findNodeById(nodes[i].children, productId);
        if (foundNode) {
          return foundNode; // åœ¨å­èŠ‚点中找到，直接返回（已经是label字符串）
        }
      }
    }
    return null; // æ²¡æœ‰æ‰¾åˆ°èŠ‚点，返回null
  };
  function convertIdToValue(data) {
    return data.map(item => {
      const { id, children, ...rest } = item;
      const newItem = {
        ...rest,
        value: id, // å°† id æ”¹ä¸º value
      };
      if (children && children.length > 0) {
        newItem.children = convertIdToValue(children);
      }

      return newItem;
    });
  } else {
    productForm.value.productCategory = "";
    modelOptions.value = [];
    return Promise.resolve([]);
  }
  // æäº¤äº§å“è¡¨å•
  const submitProduct = () => {
    proxy.$refs["productFormRef"].validate(valid => {
      if (valid) {
        if (operationType.value === "edit") {
          submitProductEdit();
        } else {
          if (productOperationType.value === "add") {
            productData.value.push({ ...productForm.value });
            console.log("productData.value---", productData.value);
          } else {
            productData.value[productOperationIndex.value] = {
              ...productForm.value,
            };
          }
          closeProductDia();
        }
      }
    });
  };
  const submitProductEdit = () => {
    productForm.value.salesLedgerId = currentId.value;
    productForm.value.type = 2;
    addOrUpdateSalesLedgerProduct(productForm.value).then(res => {
      proxy.$modal.msgSuccess("提交成功");
      closeProductDia();
      getPurchaseById({ id: currentId.value, type: 2 }).then(res => {
        productData.value = res.productData;
      });
    });
  };
  // åˆ é™¤äº§å“
  const deleteProduct = () => {
    if (productSelectedRows.value.length === 0) {
      proxy.$modal.msgWarning("请选择数据");
      return;
};
const getProductModel = value => {
  const index = modelOptions.value.findIndex(item => item.id === value);
  if (index !== -1) {
    productForm.value.specificationModel = modelOptions.value[index].model;
    productForm.value.unit = modelOptions.value[index].unit;
  } else {
    productForm.value.specificationModel = null;
    productForm.value.unit = null;
  }
};
const findNodeById = (nodes, productId) => {
  for (let i = 0; i < nodes.length; i++) {
    if (nodes[i].value === productId) {
      return nodes[i].label; // æ‰¾åˆ°èŠ‚点，返回该节点的label
    }
    if (operationType.value === "add") {
      productSelectedRows.value.forEach(selectedRow => {
        const index = productData.value.findIndex(
          product => product.id === selectedRow.id
        );
        if (index !== -1) {
          productData.value.splice(index, 1);
        }
      });
    } else {
      let ids = [];
      if (productSelectedRows.value.length > 0) {
        ids = productSelectedRows.value.map(item => item.id);
    if (nodes[i].children && nodes[i].children.length > 0) {
      const foundNode = findNodeById(nodes[i].children, productId);
      if (foundNode) {
        return foundNode; // åœ¨å­èŠ‚点中找到，直接返回（已经是label字符串）
      }
      ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "导出", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
    }
  }
  return null; // æ²¡æœ‰æ‰¾åˆ°èŠ‚点，返回null
};

function convertIdToValue(data) {
  return data.map(item => {
    const {id, children, ...rest} = item;
    const newItem = {
      ...rest,
      value: id, // å°† id æ”¹ä¸º value
    };
    if (children && children.length > 0) {
      newItem.children = convertIdToValue(children);
    }

    return newItem;
  });
}

// æäº¤äº§å“è¡¨å•
const submitProduct = () => {
  proxy.$refs["productFormRef"].validate(valid => {
    if (valid) {
      if (operationType.value === "edit") {
        submitProductEdit();
      } else {
        if (productOperationType.value === "add") {
          productData.value.push({...productForm.value});
          console.log("productData.value---", productData.value);
        } else {
          productData.value[productOperationIndex.value] = {
            ...productForm.value,
          };
        }
        closeProductDia();
      }
    }
  });
};
const submitProductEdit = () => {
  productForm.value.salesLedgerId = currentId.value;
  productForm.value.type = 2;
  addOrUpdateSalesLedgerProduct(productForm.value).then(res => {
    proxy.$modal.msgSuccess("提交成功");
    closeProductDia();
    getPurchaseById({id: currentId.value, type: 2}).then(res => {
      productData.value = res.productData;
    });
  });
};
// åˆ é™¤äº§å“
const deleteProduct = () => {
  if (productSelectedRows.value.length === 0) {
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  if (operationType.value === "add") {
    productSelectedRows.value.forEach(selectedRow => {
      const index = productData.value.findIndex(
          product => product.id === selectedRow.id
      );
      if (index !== -1) {
        productData.value.splice(index, 1);
      }
    });
  } else {
    let ids = [];
    if (productSelectedRows.value.length > 0) {
      ids = productSelectedRows.value.map(item => item.id);
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
        .then(() => {
          delProduct(ids).then(res => {
            proxy.$modal.msgSuccess("删除成功");
            closeProductDia();
            getPurchaseById({ id: currentId.value, type: 2 }).then(
              res => {
                productData.value = res.productData;
              }
            getPurchaseById({id: currentId.value, type: 2}).then(
                res => {
                  productData.value = res.productData;
                }
            );
          });
        })
        .catch(() => {
          proxy.$modal.msg("已取消");
        });
    }
  };
  // å…³é—­äº§å“å¼¹æ¡†
  const closeProductDia = () => {
    proxy.resetForm("productFormRef");
    productFormVisible.value = false;
  };
  // å¯¼å‡º
  const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
  }
};
// å…³é—­äº§å“å¼¹æ¡†
const closeProductDia = () => {
  proxy.resetForm("productFormRef");
  productFormVisible.value = false;
};
// å¯¼å‡º
const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        proxy.download("/purchase/ledger/export", {}, "采购台账.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  // åˆ é™¤
  const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
      ids = selectedRows.value.filter(item => item.salesLedgerId === null).map(item => item.id);
    } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
};
// åˆ é™¤
const handleDelete = () => {
  let ids = [];
  if (selectedRows.value.length > 0) {
    ids = selectedRows.value.filter(item => item.salesLedgerId === null).map(item => item.id);
  } else {
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        delPurchase(ids).then(res => {
          proxy.$modal.msgSuccess("删除成功");
@@ -1612,172 +1604,172 @@
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  // èŽ·å–当前日期并格式化为 YYYY-MM-DD
  function getCurrentDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0"); // æœˆä»½ä»Ž0开始
    const day = String(today.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }
  const mathNum = () => {
    if (!productForm.value.taxRate) {
      proxy.$modal.msgWarning("请先选择税率");
      return;
    }
    if (!productForm.value.taxInclusiveUnitPrice) {
      return;
    }
    if (!productForm.value.quantity) {
      return;
    }
    // å«ç¨Žæ€»ä»·è®¡ç®—
    productForm.value.taxInclusiveTotalPrice =
      proxy.calculateTaxIncludeTotalPrice(
        productForm.value.taxInclusiveUnitPrice,
        productForm.value.quantity
      );
    if (productForm.value.taxRate) {
      // ä¸å«ç¨Žæ€»ä»·è®¡ç®—
      productForm.value.taxExclusiveTotalPrice =
        proxy.calculateTaxExclusiveTotalPrice(
          productForm.value.taxInclusiveTotalPrice,
          productForm.value.taxRate
        );
    }
  };
  const reverseMathNum = field => {
    if (!productForm.value.taxRate) {
      proxy.$modal.msgWarning("请先选择税率");
      return;
    }
    const taxRate = Number(productForm.value.taxRate);
    if (!taxRate) return;
};

    // ç¡®ä¿è¾“入值不为负数
    if (
// èŽ·å–当前日期并格式化为 YYYY-MM-DD
function getCurrentDate() {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, "0"); // æœˆä»½ä»Ž0开始
  const day = String(today.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

const mathNum = () => {
  if (!productForm.value.taxRate) {
    proxy.$modal.msgWarning("请先选择税率");
    return;
  }
  if (!productForm.value.taxInclusiveUnitPrice) {
    return;
  }
  if (!productForm.value.quantity) {
    return;
  }
  // å«ç¨Žæ€»ä»·è®¡ç®—
  productForm.value.taxInclusiveTotalPrice =
      proxy.calculateTaxIncludeTotalPrice(
          productForm.value.taxInclusiveUnitPrice,
          productForm.value.quantity
      );
  if (productForm.value.taxRate) {
    // ä¸å«ç¨Žæ€»ä»·è®¡ç®—
    productForm.value.taxExclusiveTotalPrice =
        proxy.calculateTaxExclusiveTotalPrice(
            productForm.value.taxInclusiveTotalPrice,
            productForm.value.taxRate
        );
  }
};
const reverseMathNum = field => {
  if (!productForm.value.taxRate) {
    proxy.$modal.msgWarning("请先选择税率");
    return;
  }
  const taxRate = Number(productForm.value.taxRate);
  if (!taxRate) return;

  // ç¡®ä¿è¾“入值不为负数
  if (
      field === "taxInclusiveTotalPrice" ||
      field === "taxExclusiveTotalPrice"
    ) {
      const value = Number(productForm.value[field]);
      if (value < 0) {
        productForm.value[field] = "0";
        proxy.$modal.msgWarning("值不能小于0");
        return;
      }
    }

    if (field === "taxInclusiveTotalPrice") {
      // å·²çŸ¥å«ç¨Žæ€»ä»·å’Œæ•°é‡ï¼Œåç®—含税单价
      if (productForm.value.quantity) {
        productForm.value.taxInclusiveUnitPrice = (
          Number(productForm.value.taxInclusiveTotalPrice) /
          Number(productForm.value.quantity)
        ).toFixed(2);
        // ç¡®ä¿ç»“果不为负数
        if (Number(productForm.value.taxInclusiveUnitPrice) < 0) {
          productForm.value.taxInclusiveUnitPrice = "0";
        }
      }
      // å·²çŸ¥å«ç¨Žæ€»ä»·å’Œå«ç¨Žå•ä»·ï¼Œåç®—数量
      else if (productForm.value.taxInclusiveUnitPrice) {
        productForm.value.quantity = (
          Number(productForm.value.taxInclusiveTotalPrice) /
          Number(productForm.value.taxInclusiveUnitPrice)
        ).toFixed(2);
        // ç¡®ä¿ç»“果不为负数
        if (Number(productForm.value.quantity) < 0) {
          productForm.value.quantity = "0";
        }
      }
      // åç®—不含税总价
      productForm.value.taxExclusiveTotalPrice = (
        Number(productForm.value.taxInclusiveTotalPrice) /
        (1 + taxRate / 100)
      ).toFixed(2);
      // ç¡®ä¿ç»“果不为负数
      if (Number(productForm.value.taxExclusiveTotalPrice) < 0) {
        productForm.value.taxExclusiveTotalPrice = "0";
      }
    } else if (field === "taxExclusiveTotalPrice") {
      // åç®—含税总价
      productForm.value.taxInclusiveTotalPrice = (
        Number(productForm.value.taxExclusiveTotalPrice) *
        (1 + taxRate / 100)
      ).toFixed(2);
      // ç¡®ä¿ç»“果不为负数
      if (Number(productForm.value.taxInclusiveTotalPrice) < 0) {
        productForm.value.taxInclusiveTotalPrice = "0";
      }
      // å·²çŸ¥æ•°é‡ï¼Œåç®—含税单价
      if (productForm.value.quantity) {
        productForm.value.taxInclusiveUnitPrice = (
          Number(productForm.value.taxInclusiveTotalPrice) /
          Number(productForm.value.quantity)
        ).toFixed(2);
        // ç¡®ä¿ç»“果不为负数
        if (Number(productForm.value.taxInclusiveUnitPrice) < 0) {
          productForm.value.taxInclusiveUnitPrice = "0";
        }
      }
      // å·²çŸ¥å«ç¨Žå•ä»·ï¼Œåç®—数量
      else if (productForm.value.taxInclusiveUnitPrice) {
        productForm.value.quantity = (
          Number(productForm.value.taxInclusiveTotalPrice) /
          Number(productForm.value.taxInclusiveUnitPrice)
        ).toFixed(2);
        // ç¡®ä¿ç»“果不为负数
        if (Number(productForm.value.quantity) < 0) {
          productForm.value.quantity = "0";
        }
      }
    }
  };
  // é”€å”®åˆåŒé€‰æ‹©æ”¹å˜æ–¹æ³•
  const salesLedgerChange = async row => {
    console.log("row", row);
    var index = salesContractList.value.findIndex(item => item.id == row);
    console.log("index", index);
    if (index > -1) {
      await querygProductInfoByContractNo();
    }
  };

  const querygProductInfoByContractNo = async () => {
    const { code, data } = await getProductInfoByContractNo({
      contractNo: form.value.salesLedgerId,
    });
    if (code == 200) {
      productData.value = data;
    }
  };

  const fileListRef = ref(null);
  const fileListDialogVisible = ref(false);
  const downLoadFile = row => {
    if (fileListRef.value) {
      fileListRef.value.open(row.salesLedgerFiles);
    }
  };

  // èŽ·å–模板信息
  const getTemplateList = async () => {
    let res = await getPurchaseTemplateList();
    if (res && res.code === 200 && Array.isArray(res.data)) {
      templateList.value = res.data;
    }
  };

  // åˆ é™¤æ¨¡æ¿
  const handleDeleteTemplate = async (item) => {
    if (!item.id) {
      proxy.$modal.msgWarning("无法删除该模板");
  ) {
    const value = Number(productForm.value[field]);
    if (value < 0) {
      productForm.value[field] = "0";
      proxy.$modal.msgWarning("值不能小于0");
      return;
    }
    
    try {
      await ElMessageBox.confirm(
  }

  if (field === "taxInclusiveTotalPrice") {
    // å·²çŸ¥å«ç¨Žæ€»ä»·å’Œæ•°é‡ï¼Œåç®—含税单价
    if (productForm.value.quantity) {
      productForm.value.taxInclusiveUnitPrice = (
          Number(productForm.value.taxInclusiveTotalPrice) /
          Number(productForm.value.quantity)
      ).toFixed(2);
      // ç¡®ä¿ç»“果不为负数
      if (Number(productForm.value.taxInclusiveUnitPrice) < 0) {
        productForm.value.taxInclusiveUnitPrice = "0";
      }
    }
    // å·²çŸ¥å«ç¨Žæ€»ä»·å’Œå«ç¨Žå•ä»·ï¼Œåç®—数量
    else if (productForm.value.taxInclusiveUnitPrice) {
      productForm.value.quantity = (
          Number(productForm.value.taxInclusiveTotalPrice) /
          Number(productForm.value.taxInclusiveUnitPrice)
      ).toFixed(2);
      // ç¡®ä¿ç»“果不为负数
      if (Number(productForm.value.quantity) < 0) {
        productForm.value.quantity = "0";
      }
    }
    // åç®—不含税总价
    productForm.value.taxExclusiveTotalPrice = (
        Number(productForm.value.taxInclusiveTotalPrice) /
        (1 + taxRate / 100)
    ).toFixed(2);
    // ç¡®ä¿ç»“果不为负数
    if (Number(productForm.value.taxExclusiveTotalPrice) < 0) {
      productForm.value.taxExclusiveTotalPrice = "0";
    }
  } else if (field === "taxExclusiveTotalPrice") {
    // åç®—含税总价
    productForm.value.taxInclusiveTotalPrice = (
        Number(productForm.value.taxExclusiveTotalPrice) *
        (1 + taxRate / 100)
    ).toFixed(2);
    // ç¡®ä¿ç»“果不为负数
    if (Number(productForm.value.taxInclusiveTotalPrice) < 0) {
      productForm.value.taxInclusiveTotalPrice = "0";
    }
    // å·²çŸ¥æ•°é‡ï¼Œåç®—含税单价
    if (productForm.value.quantity) {
      productForm.value.taxInclusiveUnitPrice = (
          Number(productForm.value.taxInclusiveTotalPrice) /
          Number(productForm.value.quantity)
      ).toFixed(2);
      // ç¡®ä¿ç»“果不为负数
      if (Number(productForm.value.taxInclusiveUnitPrice) < 0) {
        productForm.value.taxInclusiveUnitPrice = "0";
      }
    }
    // å·²çŸ¥å«ç¨Žå•ä»·ï¼Œåç®—数量
    else if (productForm.value.taxInclusiveUnitPrice) {
      productForm.value.quantity = (
          Number(productForm.value.taxInclusiveTotalPrice) /
          Number(productForm.value.taxInclusiveUnitPrice)
      ).toFixed(2);
      // ç¡®ä¿ç»“果不为负数
      if (Number(productForm.value.quantity) < 0) {
        productForm.value.quantity = "0";
      }
    }
  }
};
// é”€å”®åˆåŒé€‰æ‹©æ”¹å˜æ–¹æ³•
const salesLedgerChange = async row => {
  console.log("row", row);
  var index = salesContractList.value.findIndex(item => item.id == row);
  console.log("index", index);
  if (index > -1) {
    await querygProductInfoByContractNo();
  }
};

const querygProductInfoByContractNo = async () => {
  const {code, data} = await getProductInfoByContractNo({
    contractNo: form.value.salesLedgerId,
  });
  if (code == 200) {
    productData.value = data;
  }
};

// èŽ·å–模板信息
const getTemplateList = async () => {
  let res = await getPurchaseTemplateList();
  if (res && res.code === 200 && Array.isArray(res.data)) {
    templateList.value = res.data;
  }
};

// æ‰“开附件弹框
const openFileDialog = async (row) => {
  recordId.value = row.id
  fileListDialogVisible.value = true
}

// åˆ é™¤æ¨¡æ¿
const handleDeleteTemplate = async (item) => {
  if (!item.id) {
    proxy.$modal.msgWarning("无法删除该模板");
    return;
  }

  try {
    await ElMessageBox.confirm(
        `确定要删除模板"${item.templateName}"吗？`,
        "删除确认",
        {
@@ -1785,118 +1777,122 @@
          cancelButtonText: "取消",
          type: "warning",
        }
      );
      
      const res = await delPurchaseTemplate([item.id]);
      if (res && res.code === 200) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        // å¦‚果删除的是当前选中的模板，清空选择
        if (templateName.value === item.templateName) {
          templateName.value = "";
          filterInputValue.value = "";
        }
        // é‡æ–°èŽ·å–模板列表
        await getTemplateList();
      } else {
        ElMessage({
          message: res?.msg || "删除失败",
          type: "error",
        });
      }
    } catch (error) {
      if (error !== "cancel") {
        console.error("删除模板失败:", error);
        ElMessage({
          message: "删除失败，请稍后重试",
          type: "error",
        });
      }
    }
  };
    );

  onMounted(() => {
    getList();
    getTemplateList();
  });
    const res = await delPurchaseTemplate([item.id]);
    if (res && res.code === 200) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      // å¦‚果删除的是当前选中的模板，清空选择
      if (templateName.value === item.templateName) {
        templateName.value = "";
        filterInputValue.value = "";
      }
      // é‡æ–°èŽ·å–模板列表
      await getTemplateList();
    } else {
      ElMessage({
        message: res?.msg || "删除失败",
        type: "error",
      });
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("删除模板失败:", error);
      ElMessage({
        message: "删除失败，请稍后重试",
        type: "error",
      });
    }
  }
};

onMounted(() => {
  getList();
  getTemplateList();
});
</script>

<style scoped lang="scss">
  .invalid-row {
    opacity: 0.6;
    background-color: #f5f7fa;
.invalid-row {
  opacity: 0.6;
  background-color: #f5f7fa;
}

.el-row {
  justify-content: space-between;
  align-items: center;
}

.no-arrow-select {
  --el-select-suffix-icon-color: transparent; /* éšè—é»˜è®¤ä¸‹æ‹‰ç®­å¤´ */
}

.select-button-group {
  display: flex;
  align-items: center;
}

// å®¡æ‰¹äººèŠ‚点容器样式
.approver-nodes-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

.approver-node-item {
  flex: 0 0 calc(33.333% - 12px);
  min-width: 200px;
  padding: 12px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;

  &:hover {
    border-color: #409eff;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
  }
  .el-row {
    justify-content: space-between;
    align-items: center;
  }
  .no-arrow-select {
    --el-select-suffix-icon-color: transparent; /* éšè—é»˜è®¤ä¸‹æ‹‰ç®­å¤´ */
  }
  .select-button-group {
    display: flex;
    align-items: center;
  }
  
  // å®¡æ‰¹äººèŠ‚点容器样式
  .approver-nodes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e4e7ed;
  }
  
}

.approver-node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.approver-node-label {
  font-size: 13px;
  font-weight: 500;
  color: #606266;
}

@media (max-width: 1200px) {
  .approver-node-item {
    flex: 0 0 calc(33.333% - 12px);
    min-width: 200px;
    padding: 12px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    transition: all 0.3s;
    
    &:hover {
      border-color: #409eff;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
    }
    flex: 0 0 calc(50% - 8px);
  }
  
  .approver-node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
  .approver-node-item {
    flex: 0 0 100%;
  }
  
  .approver-node-label {
    font-size: 13px;
    font-weight: 500;
    color: #606266;
}

// åˆ é™¤å›¾æ ‡æ ·å¼
.delete-icon {
  transition: all 0.3s;

  &:hover {
    color: #f56c6c !important;
    transform: scale(1.2);
  }
  
  @media (max-width: 1200px) {
    .approver-node-item {
      flex: 0 0 calc(50% - 8px);
    }
  }
  
  @media (max-width: 768px) {
    .approver-node-item {
      flex: 0 0 100%;
    }
  }
  
  // åˆ é™¤å›¾æ ‡æ ·å¼
  .delete-icon {
    transition: all 0.3s;
    &:hover {
      color: #f56c6c !important;
      transform: scale(1.2);
    }
  }
}
</style>

 src/views/productionManagement/processRoute/index.vue

@@ -61,7 +61,8 @@
  import EditProcess from "@/views/productionManagement/processRoute/Edit.vue";
  import RouteItemForm from "@/views/productionManagement/processRoute/ItemsForm.vue";
  import { listPage, del } from "@/api/productionManagement/processRoute.js";
  import FileList from "@/components/Dialog/FileList.vue";
  const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));

  import { useRouter } from "vue-router";
  import { ElMessage, ElMessageBox } from "element-plus";


 src/views/productionManagement/processRoute/processRouteItem/index.vue

@@ -68,7 +68,8 @@
                   style="margin-right: 10px;">
          å¡ç‰‡è§†å›¾
        </el-button>
        <el-button type="primary"
        <el-button v-if="editable"
                   type="primary"
                   @click="handleAdd">新增</el-button>
      </div>
    </div>
@@ -133,12 +134,12 @@
                     link
                     size="small"
                     @click="handleEdit(scope.row)"
                     :disabled="scope.row.isComplete">编辑</el-button>
                     :disabled="scope.row.isComplete || !editable">编辑</el-button>
          <el-button type="danger"
                     link
                     size="small"
                     @click="handleDelete(scope.row)"
                     :disabled="scope.row.isComplete">删除</el-button>
                     :disabled="scope.row.isComplete || !editable">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
@@ -152,7 +153,8 @@
                     style="margin-right: 10px;">
            è¡¨æ ¼è§†å›¾
          </el-button>
          <el-button type="primary"
          <el-button v-if="editable"
                     type="primary"
                     @click="handleAdd">新增</el-button>
        </div>
      </div>
@@ -196,7 +198,7 @@
                         link
                         size="small"
                         @click="handleEdit(item)"
                         :disabled="item.isComplete">编辑</el-button>
                         :disabled="item.isComplete || !editable">编辑</el-button>
              <el-button type="info"
                         link
                         size="small"
@@ -205,7 +207,7 @@
                         link
                         size="small"
                         @click="handleDelete(item)"
                         :disabled="item.isComplete">删除</el-button>
                         :disabled="item.isComplete || !editable">删除</el-button>
            </div>
          </div>
        </div>
@@ -216,7 +218,7 @@
         style="margin-top: 20px;">
      <div class="section-title">BOM ç»“æž„</div>
      <div class="section-actions"
           v-if="pageType === 'order'">
           v-if="pageType === 'order' && editable">
        <el-button v-if="!bomDataValue.isEdit"
                   type="primary"
                   @click="bomDataValue.isEdit = true">
@@ -447,7 +449,6 @@
                         @confirm="handleProductSelect"
                         single />
    <!-- å‚数列表对话框 -->
    <!-- :editable="!routeInfo.status" -->
    <ProcessParamListDialog v-model="showParamListDialog"
                            :title="`${currentProcess ? (currentProcess.processName || currentProcess.technologyOperationName || currentProcess.operationName) : ''} - å‚数列表`"
                            :route-id="routeId"
@@ -455,6 +456,7 @@
                            :process="currentProcess"
                            :page-type="pageType"
                            :param-list="paramList"
                            :editable="editable"
                            @getsyncProcessParamItem="getsyncProcessParamItem"
                            @refresh="refreshParamList" />
  </div>
@@ -509,6 +511,7 @@
  const routeId = computed(() => route.query.id);
  const orderId = computed(() => route.query.orderId);
  const pageType = computed(() => route.query.type);
  const editable = computed(() => route.query.editable !== "false");

  const tableLoading = ref(false);
  const tableData = ref([]);
@@ -878,6 +881,7 @@
  // åˆå§‹åŒ–拖拽排序
  const initSortable = () => {
    destroySortable();
    if (!editable.value) return;

    if (viewMode.value === "table") {
      // è¡¨æ ¼è§†å›¾çš„拖拽排序

 src/views/productionManagement/productionOrder/components/MaterialDetailDialog.vue

@@ -55,14 +55,15 @@
                             controls-position="right"
                             placeholder="输入实际数量"
                             style="width: 100%;"
                             :disabled="row.returned"
                             :disabled="row.returned || orderRow?.end"
                             @change="val => handleActualQtyChange(row, val)" />
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="warning"
          <el-button v-if="!orderRow?.end"
                     type="warning"
                     :loading="materialReturnConfirming"
                     :disabled="!canOpenReturnSummary"
                     @click="openReturnSummaryDialog">

 src/views/productionManagement/productionOrder/index.vue

@@ -40,6 +40,8 @@
                       value="3" />
            <el-option label="已取消"
                       value="4" />
            <el-option label="已结束"
                       value="5" />
          </el-select>
        </el-form-item>
        <el-form-item>
@@ -65,6 +67,7 @@
                :tableLoading="tableLoading"
                :row-class-name="tableRowClassName"
                :isSelection="true"
                :selectable="row => !row.endOrder"
                @selection-change="handleSelectionChange"
                @pagination="pagination">
        <template #completionStatus="{ row }">
@@ -210,6 +213,7 @@
    listProcessBom,
    delProductOrder,
    getProductOrderSource,
    updateProductOrder,
  } from "@/api/productionManagement/productionOrder.js";
  import { listMain as getOrderProcessRouteMain } from "@/api/productionManagement/productProcessRoute.js";
  import MaterialLedgerDialog from "@/views/productionManagement/productionOrder/components/MaterialLedgerDialog.vue";
@@ -243,7 +247,7 @@
      prop: "npsNo",
      width: "150px",
    },
    // 1.待开始、2.进行中、3.已完成、4.已取消
    // 1.待开始、2.进行中、3.已完成、4.已取消、5.已结束
    {
      label: "状态",
      prop: "status",
@@ -256,6 +260,8 @@
          ? "进行中"
          : val === 3
          ? "已完成"
          : val === 5
          ? "已结束"
          : "已取消",
      formatType: val =>
        val === 1
@@ -264,7 +270,9 @@
          ? "warning"
          : val === 3
          ? "success"
          : "danger",
          : val === 5
          ? "danger"
          : "info",
    },
    {
      label: "产品名称",
@@ -319,7 +327,7 @@
      label: "操作",
      align: "center",
      fixed: "right",
      width: 260,
      width: 280,
      operation: [
        {
          name: "工艺路线",
@@ -332,7 +340,7 @@
        {
          name: "绑定工艺路线",
          type: "text",
          showHide: row => !row.processRouteCode,
          showHide: row => !row.processRouteCode && !row.endOrder,
          clickFun: row => {
            openBindRouteDialog(row, "add");
          },
@@ -340,7 +348,7 @@
        {
          name: "更换工艺路线",
          type: "text",
          showHide: row => row.processRouteCode,
          showHide: row => row.processRouteCode && !row.endOrder,
          clickFun: row => {
            openBindRouteDialog(row, "change");
          },
@@ -356,6 +364,7 @@
          name: "领料",
          type: "text",
          color: "#5EC7AB",
          showHide: row => !row.endOrder,
          clickFun: row => {
            openMaterialDialog(row);
          },
@@ -364,6 +373,7 @@
          name: "补料",
          type: "text",
          color: "#5EC7AB",
          showHide: row => !row.endOrder,
          clickFun: row => {
            openMaterialSupplementDialog(row);
          },
@@ -379,9 +389,34 @@
        {
          name: "打印领料单",
          type: "text",
          color: "#409eff",
          color: "#5EC7AB",
          showHide: row => !row.endOrder,
          clickFun: row => {
            handlePrint(row);
          },
        },
        {
          name: "生产追溯",
          type: "text",
          color: "#409eff",
          clickFun: row => {
            router.push({
              path: "/productionManagement/productionTraceability",
              query: {
                npsNo: row.npsNo,
                productName: row.productName,
                model: row.model,
              },
            });
          },
        },
        {
          name: "结束订单",
          type: "text",
          color: "red",
          showHide: row => !row.endOrder,
          clickFun: row => {
            handleEndOrder(row);
          },
        },
      ],
@@ -627,6 +662,7 @@
          quantity: row.quantity || 0,
          orderId,
          type: "order",
          editable: !row.endOrder,
        },
      });
    } catch (e) {
@@ -721,6 +757,26 @@
      });
  };

  // ç»“束订单
  const handleEndOrder = row => {
    ElMessageBox.confirm(`是否确认结束订单：${row.npsNo}？`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        const params = {
          id: row.id,
          endOrder: true,
        };
        updateProductOrder(params).then(() => {
          proxy.$modal.msgSuccess("结束订单成功");
          getList();
        });
      })
      .catch(() => {});
  };

  const handleConfirmRoute = () => {};

  onMounted(() => {

 src/views/productionManagement/productionTraceability/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,831 @@
<template>
  <div class="app-container">
    <el-card style="height:82vh;overflow:auto;">
      <template #header>
        <div class="card-header">
          <el-form :inline="true"
                   :model="searchForm"
                   class="search-form">
            <el-form-item label="生产订单号">
              <el-select v-model="selectedNpsNo"
                         filterable
                         remote
                         reserve-keyword
                         placeholder="请输入生产订单号"
                         :loading="npsNoLoading"
                         :remote-method="handleNpsNoSearch"
                         @change="handleSearch"
                         style="width: 400px;">
                <el-option v-for="option in npsNoOptions"
                           :key="option.id"
                           :label="option.npsNo + '-' + option.productName + '-' + option.model"
                           :value="option.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleBack">返回</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <!-- åŸºç¡€ä¿¡æ¯ -->
      <div v-if="rowData.productionOrderDto"
           class="detail-section">
        <h3 class="section-title">基础信息</h3>
        <el-descriptions :column="3"
                         border>
          <el-descriptions-item label="生产订单号">{{ rowData.productionOrderDto?.npsNo || '-' }}</el-descriptions-item>
          <el-descriptions-item label="产品名称">{{ rowData.productionOrderDto?.productName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="产品规格">{{ rowData.productionOrderDto?.model || '-' }}</el-descriptions-item>
          <el-descriptions-item label="物料编码">{{ rowData.productionOrderDto?.materialCode || '-' }}</el-descriptions-item>
          <el-descriptions-item label="计划数量">{{ rowData.productionOrderDto?.quantity || 0 }} <span class="unit">{{ rowData.productionOrderDto?.unit || '-' }}</span></el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag :type="getStatusType(rowData.productionOrderDto?.status)">
              {{ getStatusText(rowData.productionOrderDto?.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="客户名称">{{ rowData.productionOrderDto?.customerName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="开始日期">{{ rowData.productionOrderDto?.startTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="完成进度">
            <el-progress :percentage="rowData.productionOrderDto?.completionStatus"
                         :color="customColors(rowData.productionOrderDto?.completionStatus)"
                         :status="rowData.productionOrderDto?.completionStatus === 100 ? 'success' : ''"
                         style="width: 120px;" />
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <el-empty v-else
                description="请搜索生产订单号" />
      <!-- ç”Ÿäº§æŠ¥å·¥è®°å½• -->
      <div v-if="rowData.productionRecords && rowData.productionRecords.length > 0"
           class="progress-container">
        <div class="progress-section">
          <h3 class="section-title">工单信息</h3>
          <div class="order-item">
            <el-table :data="rowData.productionRecords"
                      border
                      style="width: 100%">
              <el-table-column prop="productNo"
                               label="工单编号"
                               align="center">
              </el-table-column>
              <el-table-column prop="productName"
                               label="产品名称"
                               align="center" />
              <el-table-column prop="model"
                               label="规格"
                               align="center" />
              <el-table-column prop="processName"
                               label="工序名称"
                               align="center" />
              <el-table-column prop="requiredQuantity"
                               label="需求数量"
                               align="center" />
              <el-table-column prop="completedQuantity"
                               label="完成数量"
                               align="center" />
              <el-table-column label="详情"
                               align="center"
                               width="200">
                <template #default="{ row }">
                  <el-link @click="handleClickStep(row)"
                           type="primary">报工记录</el-link>
                  <el-link @click="handleClickQuality(row)"
                           style="margin-left:20px"
                           type="primary">质检信息</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <el-empty v-else-if="rowData.productionOrderDto"
                description="暂无报工记录" />
    </el-card>
    <!-- ç”Ÿäº§æŠ¥å·¥è¯¦æƒ…弹窗 -->
    <el-dialog v-model="detailDialogVisible"
               title="生产报工详情"
               width="1000px"
               :close-on-click-modal="false"
               custom-class="custom-dialog">
      <div class="detail-container">
        <!-- åŸºç¡€ä¿¡æ¯ -->
        <div class="detail-section">
          <h3 class="section-title">基础信息</h3>
          <el-descriptions :column="3"
                           border>
            <el-descriptions-item label="生产工单号">{{ detailData.npsNo || '-' }}</el-descriptions-item>
            <el-descriptions-item label="班组">
              <el-tag :type="detailData.schedule === '白班' ? 'primary' : 'warning'">{{ detailData.schedule || '-' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="产品编码">{{ detailData.materialCode || '-' }}</el-descriptions-item>
            <el-descriptions-item label="产品名称">{{ detailData.productName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="规格">{{ detailData.model || '-' }}</el-descriptions-item>
            <el-descriptions-item label="合格数量"><span class="num2">{{ detailData.qualifiedQuantity || 0 }}</span> <span class="unit">{{ detailData.unit || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="不合格数量"><span class="num3">{{ detailData.unqualifiedQuantity || 0 }}</span> <span class="unit">{{ detailData.unit || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="总数量"><span class="num1">{{ detailData.quantity || 0 }}</span> <span class="unit">{{ detailData.unit || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="开始时间">{{ detailData.reportingTime || '-' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="detail-section">
          <h3 class="section-title">报工明细</h3>
          <el-table :data="[detailData]"
                    border
                    style="width: 100%">
            <el-table-column label="报工单号"
                             prop="productNo"
                             align="center" />
            <el-table-column label="产出数量"
                             prop="qualifiedQuantity"
                             align="center" />
            <el-table-column label="报废数量"
                             prop="unqualifiedQuantity"
                             align="center" />
            <el-table-column label="创建时间"
                             prop="reportingTime"
                             align="center" />
            <el-table-column label="操作"
                             align="center"
                             width="200">
              <template #default="{ row }">
                <el-button type="primary"
                           link
                           @click="showInput(row.id)">查看投入</el-button>
                <el-button type="primary"
                           link
                           @click="showParamDetail(row.productionOperationParamList)">参数详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- æŠ•å…¥æ¨¡æ€æ¡† -->
    <input-modal v-if="isShowInput"
                 v-model:visible="isShowInput"
                 :production-product-main-id="isShowingId" />
    <!-- å‚数详情弹窗 -->
    <el-dialog v-model="paramDetailVisible"
               title="参数详情"
               width="600px">
      <div v-if="currentParams && currentParams.length > 0"
           class="param-detail-list">
        <el-descriptions :column="1"
                         border>
          <el-descriptions-item v-for="param in currentParams"
                                :key="param.id"
                                :label="param.paramName">
            {{ param.inputValue }}
            <span v-if="param.unit && param.unit !== '/'"
                  class="unit-text">({{ param.unit }})</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <el-empty v-else
                description="暂无参数数据" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="paramDetailVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- è´¨æ£€ä¿¡æ¯å¼¹çª— -->
    <el-dialog v-model="qualityDialogVisible"
               title="质检详情"
               width="1000px"
               :close-on-click-modal="false"
               custom-class="custom-dialog">
      <div class="detail-container">
        <div v-for="(record, index) in qualityRecords"
             :key="record.id"
             class="quality-record-block">
          <div class="detail-section">
            <h3 class="section-title">检测记录 {{ index + 1 }} - {{ record.checkTime }}</h3>
            <el-descriptions :column="3"
                             border>
              <el-descriptions-item label="检测日期">{{ record.checkTime || '-' }}</el-descriptions-item>
              <el-descriptions-item label="生产工单号">{{ record.workOrderNo || '-' }}</el-descriptions-item>
              <el-descriptions-item label="工序">{{ record.process || '-' }}</el-descriptions-item>
              <el-descriptions-item label="检验员">{{ record.checkName || '-' }}</el-descriptions-item>
              <el-descriptions-item label="产品名称">{{ record.productName || '-' }}</el-descriptions-item>
              <el-descriptions-item label="规格型号">{{ record.model || '-' }}</el-descriptions-item>
              <el-descriptions-item label="数量">{{ record.quantity || 0 }} {{ record.unit || '-' }}</el-descriptions-item>
              <el-descriptions-item label="检测单位">{{ record.checkCompany || '-' }}</el-descriptions-item>
              <el-descriptions-item label="检测结果">
                <el-tag :type="record.checkResult === '合格' ? 'success' : 'danger'">
                  {{ record.checkResult || '-' }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
            <h4 class="sub-section-title">检验指标列表</h4>
            <el-table :data="record.inspectItems"
                      border
                      style="width: 100%">
              <el-table-column label="序号"
                               type="index"
                               width="60"
                               align="center" />
              <el-table-column label="指标"
                               prop="itemName"
                               align="center" />
              <el-table-column label="单位"
                               prop="unit"
                               align="center" />
              <el-table-column label="标准值"
                               prop="standardValue"
                               align="center" />
              <el-table-column label="内控值"
                               prop="controlValue"
                               align="center" />
              <el-table-column label="实际值"
                               prop="actualValue"
                               align="center" />
            </el-table>
          </div>
          <!-- <div class="detail-section">

          </div> -->
          <el-divider v-if="index < qualityRecords.length - 1" />
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="qualityDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { ElMessage } from "element-plus";
  import InputModal from "@/views/productionManagement/productionReporting/Input.vue";

  const route = useRoute();
  const router = useRouter();

  // æœç´¢ç›¸å…³
  const searchForm = reactive({
    npsNo: "",
  });
  const selectedNpsNo = ref(null);
  const npsNoLoading = ref(false);
  const npsNoOptions = ref([
    {
      id: 1,
      npsNo: "PO20240301001",
      productName: "精密液压缸",
      model: "HG-100/50-500",
      materialCode: "MAT-2024-001",
      quantity: 500,
      unit: "件",
      status: 1,
      customerName: "重工机械有限公司",
      startTime: "2024-03-01",
      completionStatus: 65,
    },
    {
      id: 2,
      npsNo: "PO20240301002",
      productName: "工业伺服电机",
      model: "SV-400W-3000",
      materialCode: "MAT-2024-002",
      quantity: 200,
      unit: "台",
      status: 2,
      customerName: "自动化设备科技公司",
      startTime: "2024-03-02",
      completionStatus: 100,
    },
    {
      id: 3,
      npsNo: "PO20240301003",
      productName: "高压密封圈",
      model: "SR-80-5",
      materialCode: "MAT-2024-003",
      quantity: 5000,
      unit: "个",
      status: 0,
      customerName: "密封系统配件厂",
      startTime: "2024-03-05",
      completionStatus: 0,
    },
  ]);

  // è¯¦æƒ…数据
  const rowData = reactive({
    productionOrderDto: null,
    productionRecords: [],
  });

  // æŠ¥å·¥è¯¦æƒ…弹窗
  const detailDialogVisible = ref(false);
  const detailData = ref({});

  // æŠ•å…¥æ¨¡æ€æ¡†
  const isShowInput = ref(false);
  const isShowingId = ref(0);
  const showInput = id => {
    isShowInput.value = true;
    isShowingId.value = id;
  };

  // å‚数详情弹窗
  const paramDetailVisible = ref(false);
  const currentParams = ref([]);
  const showParamDetail = params => {
    currentParams.value = params || [];
    paramDetailVisible.value = true;
  };

  // è´¨æ£€ä¿¡æ¯å¼¹çª—
  const qualityDialogVisible = ref(false);
  const qualityRecords = ref([]);

  // çŠ¶æ€å¤„理
  const getStatusType = status => {
    const typeMap = { 0: "info", 1: "primary", 2: "success" };
    return typeMap[status] || "info";
  };
  const getStatusText = status => {
    const statusMap = { 0: "未开始", 1: "生产中", 2: "已完成" };
    return statusMap[status] || "未知";
  };
  const customColors = percentage => {
    if (percentage < 30) return "#f56c6c";
    if (percentage < 70) return "#e6a23c";
    return "#67c23a";
  };

  // æ¨¡æ‹Ÿæœç´¢æ–¹æ³•
  const handleNpsNoSearch = query => {
    if (query) {
      npsNoLoading.value = true;
      setTimeout(() => {
        npsNoLoading.value = false;
      }, 300);
    }
  };

  const handleSearch = id => {
    const selected = npsNoOptions.value.find(item => item.id === id);
    if (selected) {
      rowData.productionOrderDto = selected;
      rowData.productionRecords = [
        {
          id: 1001,
          productNo: "MO-2024-001-01",
          productName: selected.productName,
          model: selected.model,
          processName: "毛坯加工",
          requiredQuantity: selected.quantity,
          completedQuantity: Math.floor(selected.quantity * 0.4),
          qualifiedQuantity: Math.floor(selected.quantity * 0.4) - 2,
          unqualifiedQuantity: 2,
          reportingTime: "2024-03-01 10:00:00",
          schedule: "白班",
          postName: "张三",
          unit: selected.unit,
        },
        {
          id: 1002,
          productNo: "MO-2024-001-02",
          productName: selected.productName,
          model: selected.model,
          processName: "精加工",
          requiredQuantity: Math.floor(selected.quantity * 0.4),
          completedQuantity: Math.floor(selected.quantity * 0.25),
          qualifiedQuantity: Math.floor(selected.quantity * 0.25),
          unqualifiedQuantity: 0,
          reportingTime: "2024-03-01 16:00:00",
          schedule: "白班",
          postName: "李四",
          unit: selected.unit,
        },
      ];
    }
  };

  const handleBack = () => {
    router.back();
  };

  const handleClickStep = row => {
    detailData.value = {
      id: row.id || Math.floor(Math.random() * 1000),
      productNo: row.productNo,
      npsNo: rowData.productionOrderDto.npsNo,
      schedule: row.schedule,
      postName: row.postName,
      materialCode: rowData.productionOrderDto.materialCode,
      productName: row.productName,
      model: row.model,
      qualifiedQuantity: row.qualifiedQuantity,
      unqualifiedQuantity: row.unqualifiedQuantity || 0,
      quantity: row.completedQuantity,
      unit: row.unit,
      reportingTime: row.reportingTime,
      productionOperationParamList: [
        { id: 1, paramName: "主轴转速", inputValue: "2400", unit: "rpm" },
        { id: 2, paramName: "进给速度", inputValue: "120", unit: "mm/min" },
        { id: 3, paramName: "切削深度", inputValue: "0.5", unit: "mm" },
        { id: 4, paramName: "冷却液压力", inputValue: "0.6", unit: "Mpa" },
      ],
    };
    detailDialogVisible.value = true;
  };

  const handleClickQuality = row => {
    qualityRecords.value = [
      {
        id: 2001,
        checkTime: "2024-03-01 11:30:00",
        workOrderNo: row.productNo,
        process: row.processName,
        checkName: "质量部-王建国",
        productName: row.productName,
        model: row.model,
        unit: row.unit,
        quantity: row.completedQuantity,
        checkCompany: "内部实验室",
        checkResult: "合格",
        inspectItems: [
          {
            id: 1,
            itemName: "外径尺寸",
            unit: "mm",
            standardValue: "100.00±0.05",
            controlValue: "100.00±0.03",
            actualValue: "100.01",
            result: "合格",
          },
          {
            id: 2,
            itemName: "内径尺寸",
            unit: "mm",
            standardValue: "50.00+0.02/-0",
            controlValue: "50.00+0.01/-0",
            actualValue: "50.01",
            result: "合格",
          },
          {
            id: 3,
            itemName: "表面粗糙度",
            unit: "Ra",
            standardValue: "≤1.6",
            controlValue: "≤1.2",
            actualValue: "0.8",
            result: "合格",
          },
        ],
      },
      {
        id: 2001,
        checkTime: "2024-03-01 11:30:00",
        workOrderNo: row.productNo,
        process: row.processName,
        checkName: "质量部-王建国",
        productName: row.productName,
        model: row.model,
        unit: row.unit,
        quantity: row.completedQuantity,
        checkCompany: "内部实验室",
        checkResult: "合格",
        inspectItems: [
          {
            id: 1,
            itemName: "外径尺寸",
            unit: "mm",
            standardValue: "100.00±0.05",
            controlValue: "100.00±0.03",
            actualValue: "100.01",
            result: "合格",
          },
          {
            id: 2,
            itemName: "内径尺寸",
            unit: "mm",
            standardValue: "50.00+0.02/-0",
            controlValue: "50.00+0.01/-0",
            actualValue: "50.01",
            result: "合格",
          },
          {
            id: 3,
            itemName: "表面粗糙度",
            unit: "Ra",
            standardValue: "≤1.6",
            controlValue: "≤1.2",
            actualValue: "0.8",
            result: "合格",
          },
        ],
      },
    ];
    qualityDialogVisible.value = true;
  };

  onMounted(() => {
    if (route.query.npsNo) {
      const npsNo = route.query.npsNo;
      const found = npsNoOptions.value.find(item => item.npsNo === npsNo);
      if (found) {
        selectedNpsNo.value = found.id;
        handleSearch(found.id);
      } else {
        // å¦‚果没找到，创建一个临时的
        const mockItem = {
          id: Date.now(),
          npsNo: npsNo,
          productName: route.query.productName || "精密液压缸",
          model: route.query.model || "HG-100/50-500",
          materialCode: "MAT-2024-MOCK",
          quantity: 100,
          unit: "件",
          status: 1,
          customerName: "模拟客户",
          startTime: "2024-03-01",
          completionStatus: 50,
        };
        npsNoOptions.value.push(mockItem);
        selectedNpsNo.value = mockItem.id;
        handleSearch(mockItem.id);
      }
    }
  });
</script>

<style scoped>
  .app-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }

  .search-form {
    width: 100%;
  }

  .search-form .el-form-item {
    margin-right: 10px;
  }

  .detail-section {
    margin-bottom: 24px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }

  .detail-section:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
  }

  .section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1a1a1a;
    border-bottom: 2px solid #409eff;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .section-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #409eff;
    margin-right: 8px;
    border-radius: 2px;
  }

  .sub-section-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #303133;
    display: flex;
    align-items: center;
  }

  .sub-section-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 12px;
    background-color: #67c23a;
    margin-right: 8px;
    border-radius: 2px;
  }

  .unit {
    font-size: 12px;
    color: #909399;
    margin-left: 4px;
  }

  :deep(.el-descriptions) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  :deep(.el-descriptions__row:nth-child(odd)) {
    background-color: #f9f9f9;
  }

  :deep(.el-descriptions__label) {
    font-weight: 500;
    color: #606266;
    background-color: #f5f7fa;
  }

  :deep(.el-descriptions__content) {
    color: #303133;
    font-weight: 500;
  }

  .progress-container {
    display: flex;
    gap: 24px;
  }

  .progress-section {
    margin-bottom: 24px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
    flex: 1;
    transition: all 0.3s ease;
    width: 100%;
  }

  .progress-section:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
  }

  .order-item {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  :deep(.el-table) {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  :deep(.el-table th) {
    background-color: #f5f7fa !important;
    font-weight: 600;
    color: #606266;
  }

  :deep(.el-progress-bar__inner) {
    border-radius: 10px;
  }

  :deep(.el-tag) {
    border-radius: 12px;
    padding: 2px 10px;
  }

  /* å¼¹çª—样式 */
  .detail-container {
    max-height: 600px;
    overflow-y: auto;
    padding: 0 16px;
  }

  .process-item {
    margin-bottom: 24px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .process-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f2f5;
  }

  .process-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1a1a1a;
    display: flex;
    align-items: center;
  }

  .process-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #409eff;
    margin-right: 8px;
    border-radius: 2px;
  }

  .process-info {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #606266;
  }

  .process-label {
    padding: 4px 12px;
    background-color: #ecf5ff;
    border-radius: 4px;
    color: #409eff;
    font-weight: 500;
  }

  .process-details {
    margin-bottom: 20px;
  }

  .num1 {
    color: #1107cc;
    font-weight: 600;
  }

  .num2 {
    color: #0fcf25;
    font-weight: 600;
  }

  .num3 {
    color: #d31818;
    font-weight: 600;
  }

  .dialog-footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #ebeef5;
  }

  .dialog-footer .el-button {
    min-width: 100px;
    padding: 8px 20px;
  }

  /* è‡ªå®šä¹‰å¯¹è¯æ¡†æ ·å¼ */
  :deep(.custom-dialog) {
    border-radius: 12px;
    overflow: hidden;
  }

  :deep(.custom-dialog .el-dialog__header) {
    background-color: #f5f7fa;
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
  }

  :deep(.custom-dialog .el-dialog__title) {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
  }

  :deep(.custom-dialog .el-dialog__body) {
    padding: 20px;
  }

  .unit-text {
    margin-left: 5px;
    color: #909399;
    font-size: 12px;
  }

  .param-detail-list {
    padding: 10px;
  }
</style>

 src/views/productionManagement/workOrderEdit/index.vue

@@ -204,6 +204,11 @@
      width: "140",
    },
    {
      label: "指定报工人",
      prop: "userNames",
      width: "180",
    },
    {
      label: "操作",
      width: "200",
      align: "center",

 src/views/productionManagement/workOrderManagement/index.vue

@@ -244,6 +244,7 @@
                    @refresh="getList" />
    <FileList v-if="fileDialogVisible"
              v-model:visible="fileDialogVisible"
              :editable="!currentWorkOrderRow?.endOrder"
              :record-type="'production_operation_task'"
              :record-id="currentWorkOrderId" />
  </div>
@@ -264,8 +265,11 @@
  import QRCode from "qrcode";
  import { getCurrentInstance, reactive, toRefs } from "vue";
  import MaterialDialog from "./components/MaterialDialog.vue";
  import FileList from "@/components/Dialog/FileList.vue";
  const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));

  import useUserStore from "@/store/modules/user";
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();

  const tableColumn = ref([
    {
@@ -368,7 +372,23 @@
          clickFun: row => {
            showReportDialog(row);
          },
          disabled: row => row.planQuantity <= 0,
          showHide: row => !row.endOrder,
          disabled: row => {
            if (row.planQuantity <= 0) return true;
            if (!row.userIds) return false;
            try {
              const userIds =
                typeof row.userIds === "string"
                  ? JSON.parse(row.userIds)
                  : row.userIds;
              if (Array.isArray(userIds)) {
                return !userIds.some(id => String(id) === String(userStore.id));
              }
              return true;
            } catch (e) {
              return true;
            }
          },
        },
      ],
    },
@@ -614,9 +634,11 @@
  const printTransferCard = () => {
    window.print();
  };
  const currentWorkOrderRow = ref(null);

  const openWorkOrderFiles = row => {
    currentWorkOrderId.value = row.id;
    currentWorkOrderRow.value = row;
    fileDialogVisible.value = true;
  };

@@ -801,6 +823,7 @@
  };

  onMounted(() => {
    userStore.getInfo();
    getList();
    // èŽ·å–用户列表
    userListNoPageByTenantId().then(res => {

 src/views/safeProduction/dangerInvestigation/index.vue

@@ -415,17 +415,12 @@
        </el-row>
      </el-form>
    </FormDialog>
  <!--  todo é™„件预览相关 -->
    <FileListDialog ref="fileListRef"
                    v-model="fileListDialogVisible"
                    :show-upload-button="true"
                    :show-delete-button="true"
                    :is-show-pagination="true"
                    :page="filePagination"
                    :upload-method="handleUpload"
                    :delete-method="handleFileDelete"
                    @pagination="paginationSearch"
                    title="附件列表" />
    <FileListDialog
        v-if="fileListDialogVisible"
        :record-id="currentRecordId"
        record-type="safe_hidden"
        v-model:visible="fileListDialogVisible"/>

  </div>
</template>

@@ -436,7 +431,6 @@
  import { ElMessageBox, ElMessage } from "element-plus";
  import useUserStore from "@/store/modules/user";
  import { userListNoPage } from "@/api/system/user.js";
  import FileListDialog from "@/components/Dialog/FileListDialog.vue";
  import FormDialog from "@/components/Dialog/FormDialog.vue";
  import { getQuotationList } from "@/api/salesManagement/salesQuotation.js";
  import {
@@ -445,13 +439,9 @@
    safeHiddenUpdate,
    safeHiddenDel,
    fileListPage,
    safeHiddenFileAdd,
    safeHiddenFileDel,
  } from "@/api/safeProduction/dangerInvestigation.js";
  import useFormData from "@/hooks/useFormData.js";
  import request from "@/utils/request";
  import dayjs from "dayjs";
  import { get } from "@vueuse/core";

  const userStore = useUserStore();
  const { proxy } = getCurrentInstance();
@@ -459,6 +449,7 @@
  const selectedRows = ref([]);
  const userList = ref([]);
  const tableLoading = ref(false);
  const currentRecordId = ref(0);
  const page = reactive({
    current: 1,
    size: 100,
@@ -943,18 +934,8 @@
  const fileListDialogVisible = ref(false);
  const currentFileRow = ref(null);
  const downLoadFile = row => {
    currentFileRow.value = row;
    fileListPage({
      safeHiddenId: row.id,
      current: filePagination.value.current,
      size: filePagination.value.size,
    }).then(res => {
      if (fileListRef.value) {
        fileListRef.value.open(res.data.records || []);
        console.log("res.data", res.data);
        filePagination.value.total = res.data.total || 0;
      }
    });
    currentRecordId.value = row.id;
    fileListDialogVisible.value = true;
  };
  const currentUserId = ref("");
  const currentUserName = ref("");
@@ -990,147 +971,6 @@
      userList.value = res.data;
    });
  });
  // ä¸Šä¼ é™„件
  const handleUpload = async () => {
    if (!currentFileRow.value) {
      proxy.$modal.msgWarning("请先选择数据");
      return null;
    }

    return new Promise(resolve => {
      // åˆ›å»ºä¸€ä¸ªéšè—çš„文件输入元素
      const input = document.createElement("input");
      input.type = "file";
      input.style.display = "none";
      input.onchange = async e => {
        const file = e.target.files[0];
        if (!file) {
          resolve(null);
          return;
        }

        try {
          // ä½¿ç”¨ FormData ä¸Šä¼ æ–‡ä»¶
          const formData = new FormData();
          formData.append("file", file);

          const uploadRes = await request({
            url: "/file/upload",
            method: "post",
            data: formData,
            headers: {
              "Content-Type": "multipart/form-data",
              Authorization: `Bearer ${getToken()}`,
            },
          });

          if (uploadRes.code === 200) {
            // ä¿å­˜é™„件信息
            const fileData = {
              safeHiddenId: currentFileRow.value.id,
              name: uploadRes.data.originalName || file.name,
              url: uploadRes.data.tempPath || uploadRes.data.url,
            };

            const saveRes = await safeHiddenFileAdd(fileData);
            if (saveRes.code === 200) {
              proxy.$modal.msgSuccess("文件上传成功");
              // é‡æ–°åŠ è½½æ–‡ä»¶åˆ—表
              const listRes = await fileListPage({
                safeHiddenId: currentFileRow.value.id,
                current: filePagination.value.current,
                size: filePagination.value.size,
              });
              if (listRes.code === 200 && fileListRef.value) {
                const fileList = (listRes.data?.records || []).map(item => ({
                  name: item.name,
                  url: item.url,
                  id: item.id,
                  ...item,
                }));
                fileListRef.value.setList(fileList);
                filePagination.value.total = listRes.data?.total || 0;
              }
              // è¿”回新文件信息
              resolve({
                name: fileData.name,
                url: fileData.url,
                id: saveRes.data?.id,
              });
            } else {
              proxy.$modal.msgError(saveRes.msg || "文件保存失败");
              resolve(null);
            }
          } else {
            proxy.$modal.msgError(uploadRes.msg || "文件上传失败");
            resolve(null);
          }
        } catch (error) {
          proxy.$modal.msgError("文件上传失败");
          resolve(null);
        } finally {
          document.body.removeChild(input);
        }
      };

      document.body.appendChild(input);
      input.click();
    });
  };
  // åˆ†é¡µæŸ¥è¯¢æ–‡ä»¶åˆ—表
  const paginationSearch = async (page, size) => {
    filePagination.value.current = page;
    filePagination.value.size = size;
    const listRes = await fileListPage({
      safeHiddenId: currentFileRow.value.id,
      current: filePagination.value.current,
      size: filePagination.value.size,
    });
    if (listRes.code === 200) {
      const fileList = (listRes.data?.records || []).map(item => ({
        name: item.name,
        url: item.url,
        id: item.id,
        ...item,
      }));
      fileListRef.value.setList(fileList);
      filePagination.value.total = listRes.data?.total || 0;
    }
  };
  // åˆ é™¤é™„件
  const handleFileDelete = async row => {
    try {
      const res = await safeHiddenFileDel([row.id]);
      if (res.code === 200) {
        proxy.$modal.msgSuccess("删除成功");
        // é‡æ–°åŠ è½½æ–‡ä»¶åˆ—表
        if (currentFileRow.value && fileListRef.value) {
          const listRes = await fileListPage({
            safeHiddenId: currentFileRow.value.id,
            current: filePagination.value.current,
            size: filePagination.value.size,
          });
          if (listRes.code === 200) {
            const fileList = (listRes.data?.records || []).map(item => ({
              name: item.name,
              url: item.url,
              id: item.id,
              ...item,
            }));
            fileListRef.value.setList(fileList);
            filePagination.value.total = listRes.data?.total || 0;
          }
        }
        return true; // è¿”回 true è¡¨ç¤ºåˆ é™¤æˆåŠŸï¼Œç»„件会更新列表
      } else {
        proxy.$modal.msgError(res.msg || "删除失败");
        return false;
      }
    } catch (error) {
      proxy.$modal.msgError("删除失败");
      return false;
    }
  };
</script>

<style scoped lang="scss">

 src/views/safeProduction/safeQualifications/index.vue

@@ -110,7 +110,7 @@
            <el-button link
                       type="primary"
                       size="small"
                       @click="downLoadFile(scope.row)">附件</el-button>
                       @click="openFileDialog(scope.row)">附件</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -203,16 +203,7 @@
      </el-form>
    </FormDialog>
<!-- todo é™„件预览相关 -->
    <FileListDialog ref="fileListRef"
                    v-model="fileListDialogVisible"
                    :show-upload-button="true"
                    :show-delete-button="true"
                    :is-show-pagination="true"
                    :page="filePagination"
                    :upload-method="handleUpload"
                    :delete-method="handleFileDelete"
                    @pagination="paginationSearch"
                    title="附件列表" />
    <FileList v-if="fileDialogVisible"  v-model:visible="fileDialogVisible" record-type="safe_certification" :record-id="recordId"  />
  </div>
</template>

@@ -223,7 +214,6 @@
  import { ElMessageBox, ElMessage } from "element-plus";
  import useUserStore from "@/store/modules/user";
  import { userListNoPage } from "@/api/system/user.js";
  import FileListDialog from "@/components/Dialog/FileListDialog.vue";
  import FormDialog from "@/components/Dialog/FormDialog.vue";
  import { getQuotationList } from "@/api/salesManagement/salesQuotation.js";
  import {
@@ -238,7 +228,7 @@
  import useFormData from "@/hooks/useFormData.js";
  import request from "@/utils/request";
  import dayjs from "dayjs";

  const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));
  const userStore = useUserStore();
  const { proxy } = getCurrentInstance();
  const tableData = ref([]);
@@ -524,19 +514,17 @@
    size: 10,
    total: 0,
  });
  const downLoadFile = row => {
    currentFileRow.value = row;
    fileListPage({
      safeCertificationId: row.id,
      current: filePagination.value.current,
      size: filePagination.value.size,
    }).then(res => {
      if (fileListRef.value) {
        fileListRef.value.open(res.data.records);
      }
      filePagination.value.total = res.data.total || 0;
    });
  };

  // æ‰“开附件弹窗
  const recordId =ref(0)
  const fileDialogVisible = ref(false)

  // æ‰“开附件弹框
  const openFileDialog = async (row) => {
    recordId.value = row.id
    fileDialogVisible.value = true
  }
  
  const currentFactoryName = ref("");
  const getCurrentFactoryName = async () => {
    let res = await userStore.getInfo();

 src/views/safeProduction/safetyTrainingAssessment/index.vue

@@ -239,7 +239,7 @@
          <el-descriptions-item label="附件列表:">
            <el-button type="primary"
                       size="small"
                       @click="downLoadFile(endform)">附件列表</el-button>
                       @click="openFileDialog(endform)">附件列表</el-button>
          </el-descriptions-item>
        </el-descriptions>
        <!-- <el-divider style="margin: 20px 0;" /> -->
@@ -359,22 +359,12 @@
      </template>
    </el-dialog>
    <!--  todo é™„件预览相关 -->
    <FileListDialog ref="fileListRef"
                    v-model="fileListDialogVisible"
                    :show-upload-button="true"
                    :show-delete-button="true"
                    :is-show-pagination="true"
                    :page="filePagination"
                    :upload-method="handleUpload"
                    :delete-method="handleFileDelete"
                    @pagination="paginationSearch"
                    title="附件列表" />
    <FileList v-if="fileDialogVisible"  v-model:visible="fileDialogVisible" record-type="safe_training" :record-id="recordId"  />
  </div>
</template>

<script setup>
  import { Search } from "@element-plus/icons-vue";
  import FileListDialog from "@/components/Dialog/FileListDialog.vue";
  import {
    onMounted,
    ref,
@@ -403,6 +393,7 @@
  import useUserStore from "@/store/modules/user";
  import dayjs from "dayjs";
  const userStore = useUserStore();
  const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));

  // è¡¨å•éªŒè¯è§„则
  const rules = {
@@ -621,7 +612,7 @@
          name: "附件",
          type: "text",
          clickFun: row => {
            downLoadFile(row);
            openFileDialog(row);
          },
          color: "#007AFF",
        },
@@ -783,27 +774,17 @@
      form.value.principalMobile = selectedUser.phonenumber;
    }
  };
  /**
   * ä¸‹è½½æ–‡ä»¶
   *
   * @param row ä¸‹è½½æ–‡ä»¶çš„相关信息对象
   */
  const fileListRef = ref(null);
  const fileListDialogVisible = ref(false);
  const currentFileRow = ref(null);
  const downLoadFile = row => {
    currentFileRow.value = row;
    safeTrainingFileListPage({
      safeTrainingId: row.id,
      current: filePagination.value.current,
      size: filePagination.value.size,
    }).then(res => {
      if (fileListRef.value) {
        fileListRef.value.open(res.data.records);
        filePagination.value.total = res.data?.total || 0;
      }
    });
  };

  // æ‰“开附件弹窗
  const recordId =ref(0)
  const fileDialogVisible = ref(false)

  // æ‰“开附件弹框
  const openFileDialog = async (row) => {
    recordId.value = row.id
    fileDialogVisible.value = true
  }
  
  // ä¸Šä¼ é™„件
  const handleUpload = async () => {
    if (!currentFileRow.value) {

 src/views/salesManagement/invoiceLedger/index.vue

@@ -44,7 +44,7 @@
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="openForm(scope.row)">编辑</el-button>
            <el-button link type="primary" @click="downLoadFile(scope.row)">附件</el-button>
            <el-button link type="primary" @click="openFileDialog(scope.row)">附件</el-button>
            <el-button link type="primary" @click="delInvoiceLedger(scope.row)">删除</el-button>
          </template>
        </el-table-column>
@@ -134,7 +134,7 @@
        </div>
      </template>
    </el-dialog>
    <FileListDialog ref="fileListRef" v-model="fileListDialogVisible" />
    <FileList v-if="fileDialogVisible"  v-model:visible="fileDialogVisible" record-type="invoice_registration_product" :record-id="recordId"  />
  </div>
</template>

@@ -155,8 +155,8 @@
import useUserStore from "@/store/modules/user.js";
import useFormData from "@/hooks/useFormData";
import dayjs from "dayjs";
import FileListDialog from '@/components/Dialog/FileListDialog.vue';
import { getCurrentDate } from "@/utils/index.js";
const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));

const { proxy } = getCurrentInstance();
const tableData = ref([]);
@@ -422,17 +422,14 @@
  getList();
};

//附件相关
const fileListRef = ref(null)
const fileListDialogVisible = ref(false)
//查看附件
const downLoadFile = (row) => {
    invoiceLedgerProductInfo({ id: row.id }).then((res) => {
        if (fileListRef.value) {
            fileListRef.value.open(res.data.fileList)
            fileListDialogVisible.value = true
        }
    });
// æ‰“开附件弹窗
const recordId =ref(0)
const fileDialogVisible = ref(false)

// æ‰“开附件弹框
const openFileDialog = async (row) => {
  recordId.value = row.id
  fileDialogVisible.value = true
}

onMounted(() => {

 src/views/salesManagement/salesLedger/index.vue

@@ -231,7 +231,7 @@
                       :disabled="!scope.row.isEdit || scope.row.hasProductionRecord || !canEditLedger(scope.row)">编辑</el-button>
            <el-button link
                       type="primary"
                       @click="downLoadFile(scope.row)">附件</el-button>
                       @click="openFileDialog(scope.row)">附件</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -740,9 +740,7 @@
    </FormDialog>
<!-- // todo é™„件预览相关 -->
    <!-- é™„件列表弹窗 -->
    <FileListDialog ref="fileListRef"
                    v-model="fileListDialogVisible"
                    title="附件列表" />
    <FileList v-if="fileDialogVisible"  v-model:visible="fileDialogVisible" record-type="sales_ledger" :record-id="recordId"  />
    <!-- æ‰“印预览弹窗 -->
    <el-dialog v-model="printPreviewVisible"
               title="打印预览"
@@ -904,10 +902,8 @@
  import { onMounted, ref, getCurrentInstance } from "vue";
  import { addShippingInfo } from "@/api/salesManagement/deliveryLedger.js";
  import { ElMessageBox, ElMessage } from "element-plus";
  import { UploadFilled, Download } from "@element-plus/icons-vue";
  import useUserStore from "@/store/modules/user";
  import { userListNoPage } from "@/api/system/user.js";
  import FileListDialog from "@/components/Dialog/FileListDialog.vue";
  import FormDialog from "@/components/Dialog/FormDialog.vue";
  import { getQuotationList } from "@/api/salesManagement/salesQuotation.js";
  import {
@@ -929,6 +925,9 @@
  import { useRouter, useRoute } from "vue-router";
  import { listCustomerPrivatePool } from "@/api/basicData/customerFile.js";
  import FileUpload from "@/components/AttachmentUpload/file/index.vue";

  const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));

  const router = useRouter();
  const route = useRoute();
  const userStore = useUserStore();
@@ -2440,20 +2439,15 @@
    return statusStr === "待发货" || statusStr === "审核拒绝";
  };

  /**
   * ä¸‹è½½æ–‡ä»¶
   *
   * @param row ä¸‹è½½æ–‡ä»¶çš„相关信息对象
   */
  const fileListRef = ref(null);
  const fileListDialogVisible = ref(false);
  const downLoadFile = row => {
    getSalesLedgerWithProducts({ id: row.id, type: 1 }).then(res => {
      if (fileListRef.value) {
        fileListRef.value.open(res.salesLedgerFiles);
      }
    });
  };
  // æ‰“开附件弹窗
  const recordId =ref(0)
  const fileDialogVisible = ref(false)

  // æ‰“开附件弹框
  const openFileDialog = async (row) => {
    recordId.value = row.id
    fileDialogVisible.value = true
  }

  // æ‰“开发货弹框
  const openDeliveryForm = row => {