Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-ma...

gongchunyi

13 小时以前 9cf2a2365b1e5cf0c5a25cf05281465b8f667428

 src/views/customerService/afterSalesHandling/index.vue

@@ -2,22 +2,35 @@
   <div class="app-container">
      <div class="search_form">
         <div>
            <span class="search_title">设备名称：</span>
            <el-input
               v-model="searchForm.name"
               style="width: 240px"
               placeholder="请输入"
               @change="handleQuery"
            <span class="search_title">反馈日期：</span>
            <el-date-picker
               v-model="searchForm.feedbackDate"
               value-format="YYYY-MM-DD"
               format="YYYY-MM-DD"
               type="date"
               placeholder="请选择"
               clearable
               :prefix-icon="Search"
               @change="handleQuery"
            />
            <span class="search_title ml10">处理日期：</span>
            <el-date-picker
               v-model="searchForm.disDate"
               value-format="YYYY-MM-DD"
               format="YYYY-MM-DD"
               type="date"
               placeholder="请选择"
               clearable
               @change="handleQuery"
            />
        <span style = "margin-left: 10px;" class="search_title">处理状态：</span>
        <el-select v-model="searchForm.status" placeholder="请选择状态" @change="handleQuery" style="width: 140px" clearable>
          <el-option label="待处理" :value="1"></el-option>
          <el-option label="已处理" :value="2"></el-option>
        </el-select>
            <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
            >搜索</el-button
            >
         </div>
         <div>
            <el-button type="primary" @click="openForm('add')">新增</el-button>
            <el-button type="danger" plain @click="handleDelete">删除</el-button>
            <el-button @click="handleOut" style="margin-left: 10px">导出</el-button>
         </div>
      </div>
      <div class="table_list">
@@ -33,22 +46,72 @@
         ></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} from "vue";
import FormDia from "@/views/customerService/feedbackRegistration/components/formDia.vue";
import {ElMessageBox} from "element-plus";
import {afterSalesServiceDelete, afterSalesServiceListPage} from "@/api/customerService/index.js";
import { onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick } 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 {
   afterSalesServiceDelete,
   afterSalesServiceListPage,
   afterSalesServiceFileListPage,
   afterSalesServiceFileAdd,
   afterSalesServiceFileDel,
   afterSalesServiceRepairListPage,
} from "@/api/customerService/index.js";
import useUserStore from "@/store/modules/user.js";
const { proxy } = getCurrentInstance();
const userStore = useUserStore()

const data = reactive({
   searchForm: {
      name: "",
      feedbackDate: "",
      disDate: "",
   },
});
const { searchForm } = toRefs(data);
@@ -102,20 +165,58 @@
      width: 200,
   },
   {
      label: "处理人",
      prop: "disposeNickName",
   },
   {
      label: "处理结果",
      prop: "disRes",
      width: 200,
   },
   {
      label: "处理日期",
      prop: "disDate",
      width: 150,
   },
   {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: 'right',
      width: 240,
      operation: [
         {
            name: "编辑",
            name: "处理",
            type: "text",
            clickFun: (row) => {
               openForm("edit", row);
               openForm("approve", row);
            },
            disabled: (row) => {
               return row.checkUserId !== userStore.id || row.status !== 1
               return row.status !== 1
            }
         },
         {
            name: "查看",
            type: "text",
            clickFun: (row) => {
               openForm("view", row);
            },
         },
         // TODO 为写报告添加的
         {
            name: "附件",
            type: "text",
            clickFun: (row) => {
               openFilesFormDia(row);
            },
         },
         // TODO 为写报告添加的
         {
            name: "维修记录",
            type: "text",
            clickFun: (row) => {
               openRepairDialog(row);
            },
         },
      ],
   },
@@ -134,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
   }
}

// 查询列表
/** 搜索按钮操作 */
@@ -190,6 +451,22 @@
         proxy.$modal.msg("已取消");
      });
};

// 导出
const handleOut = () => {
   ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
   })
      .then(() => {
         proxy.download("/afterSalesService/exportTwo", {}, "售后处理.xlsx");
      })
      .catch(() => {
         proxy.$modal.msg("已取消");
      });
};

onMounted(() => {
   getList();
});