gongchunyi
13 小时以前 9cf2a2365b1e5cf0c5a25cf05281465b8f667428
src/views/customerService/afterSalesHandling/index.vue
@@ -46,15 +46,64 @@
         ></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"
      />
      <el-dialog
         v-model="repairDialogVisible"
         title="维修记录"
         width="700px"
         destroy-on-close
         @close="repairRecordList = []"
      >
         <el-table
            :data="repairRecordList"
            border
            v-loading="repairRecordLoading"
            max-height="400"
         >
            <el-table-column type="index" label="序号" width="55" align="center" />
            <el-table-column label="维修日期" prop="maintenanceTime" min-width="120" show-overflow-tooltip>
               <template #default="{ row }">
                  {{ row.maintenanceTime || row.repairTime || '-' }}
               </template>
            </el-table-column>
            <el-table-column label="维修人" prop="maintenanceName" min-width="100" show-overflow-tooltip>
               <template #default="{ row }">
                  {{ row.maintenanceName || row.repairName || '-' }}
               </template>
            </el-table-column>
            <el-table-column label="维修结果" prop="maintenanceResult" min-width="180" show-overflow-tooltip />
         </el-table>
         <template #footer>
            <el-button @click="repairDialogVisible = false">关闭</el-button>
         </template>
      </el-dialog>
   </div>
</template>
<script setup>
import {Search} from "@element-plus/icons-vue";
import {onMounted, ref, getCurrentInstance, nextTick} from "vue";
import { onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick } from "vue";
import FormDia from "@/views/customerService/afterSalesHandling/components/formDia.vue";
import {ElMessageBox} from "element-plus";
import {afterSalesServiceDelete, afterSalesServiceListPage} from "@/api/customerService/index.js";
import FileListDialog from "@/components/Dialog/FileListDialog.vue";
import { ElMessageBox } from "element-plus";
import request from "@/utils/request";
import { getToken } from "@/utils/auth";
import {
   afterSalesServiceDelete,
   afterSalesServiceListPage,
   afterSalesServiceFileListPage,
   afterSalesServiceFileAdd,
   afterSalesServiceFileDel,
   afterSalesServiceRepairListPage,
} from "@/api/customerService/index.js";
import useUserStore from "@/store/modules/user.js";
const { proxy } = getCurrentInstance();
const userStore = useUserStore()
@@ -134,7 +183,7 @@
      label: "操作",
      align: "center",
      fixed: 'right',
      width: 120,
      width: 240,
      operation: [
         {
            name: "处理",
@@ -151,6 +200,22 @@
            type: "text",
            clickFun: (row) => {
               openForm("view", row);
            },
         },
         // TODO 为写报告添加的
         {
            name: "附件",
            type: "text",
            clickFun: (row) => {
               openFilesFormDia(row);
            },
         },
         // TODO 为写报告添加的
         {
            name: "维修记录",
            type: "text",
            clickFun: (row) => {
               openRepairDialog(row);
            },
         },
      ],
@@ -170,6 +235,166 @@
   selectedRows.value = selection;
};
const formDia = ref()
const fileListRef = ref(null)
const fileListDialogVisible = ref(false)
const currentFileRow = ref(null)
const repairDialogVisible = ref(false)
const repairRecordList = ref([])
const repairRecordLoading = ref(false)
// 打开维修记录弹框
const openRepairDialog = async (row) => {
   repairDialogVisible.value = true
   repairRecordLoading.value = true
   repairRecordList.value = []
   try {
      const res = await afterSalesServiceRepairListPage({
         afterSalesServiceId: row.id,
         current: 1,
         size: 100,
      })
      if (res.code === 200 && res.data?.records) {
         repairRecordList.value = res.data.records
      }
   } catch (error) {
      proxy.$modal.msgError("获取维修记录失败")
   } finally {
      repairRecordLoading.value = false
   }
}
// 打开附件弹框-----  TODO:接口是没有对接的,需要新增接口,为写报告添加的
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)
            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 = {
                  afterSalesServiceId: currentFileRow.value.id,
                  name: uploadRes.data?.originalName || file.name,
                  url: uploadRes.data?.tempPath || uploadRes.data?.url,
               }
               const saveRes = await afterSalesServiceFileAdd(fileData)
               if (saveRes.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.name || item.fileName,
                        url: item.url || item.fileUrl,
                        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 (err) {
            proxy.$modal.msgError("文件上传失败")
            resolve(null)
         } finally {
            document.body.removeChild(input)
         }
      }
      document.body.appendChild(input)
      input.click()
   })
}
// 删除附件
const handleFileDelete = async (row) => {
   try {
      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.name || item.fileName,
                  url: item.url || item.fileUrl,
                  id: item.id,
                  ...item,
               }))
               fileListRef.value.setList(fileList)
            }
         }
      } else {
         proxy.$modal.msgError(res.msg || "删除失败")
         return false
      }
   } catch (error) {
      proxy.$modal.msgError("删除失败")
      return false
   }
}
// 查询列表
/** 搜索按钮操作 */