Merge branch 'dev' of http://114.132.189.42:9002/r/center-lims-before-ruoyi...

lxp

2025-03-12 952a20f1c005d80e9bf881287c40e6f4e4266a0b

Merge branch 'dev' of http://114.132.189.42:9002/r/center-lims-before-ruoyi into dev

 package.json

@@ -43,7 +43,9 @@
    "axios": "0.28.1",
    "clipboard": "2.0.8",
    "core-js": "3.37.1",
    "dom-to-image": "^2.6.0",
    "echarts": "5.4.0",
    "element-resize-detector": "^1.2.4",
    "element-ui": "2.15.14",
    "file-saver": "2.0.5",
    "fuse.js": "6.4.3",

 src/api/business/insBushing.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
import request from '@/utils/request'

// æŸ¥çœ‹æ‰€å±žå•ä½æ£€éªŒå•
export function selectBushingBySampleId(query) {
  return request({
    url: '/insBushing/selectBushingBySampleId',
    method: 'get',
    params: query
  })
}

 src/api/business/inspectionOrder.js

@@ -120,7 +120,7 @@
export function exportChecked(query) {
  return request({
    url: '/insOrder/exportChecked',
    method: 'get',
    method: 'post',
    data: query,
    responseType:'blob'
  })

 src/api/cnas/personnel/personalOverview.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
import request from "@/utils/request";

// èµ„源要求-人员总览
export function selectPersonnelOverview(query) {
  return request({
    url: "/user/selectPersonnelOverview",
    method: "get",
    params: query,
  });
}

 src/api/cnas/personnel/personnelInfo.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,819 @@
import request from "@/utils/request";

//删除部门
export function delDepartmentLims(query) {
  return request({
    url: "/department/delDepartmentLims",
    method: "delete",
    params: query,
  });
}

// æ·»åŠ éƒ¨é—¨
export function addDepartmentLims(data) {
  return request({
    url: "/department/addDepartmentLims",
    method: "post",
    data: data,
  });
}

// æŸ¥è¯¢CNAS人员侧边栏
export function selectCNSAPersonTree(query) {
  return request({
    url: "/personBasicInfo/selectCNSAPersonTree",
    method: "get",
    params: query,
  });
}

// å¯¹æŽ¥äººå‘˜å¹³å° èŽ·å–所有人员信息
export function getEmployees(query) {
  return request({
    url: "/personBasicInfo/getEmployees",
    method: "get",
    params: query,
  });
}

// èŽ·å–人员列表
export function basicInformationOfPersonnelSelectPage(query) {
  return request({
    url: "/personBasicInfo/basicInformationOfPersonnelSelectPage",
    method: "get",
    params: query,
  });
}

//删除人员明细所在组织架构
export function delUserDepardLimsId(query) {
  return request({
    url: "/user/delUserDepardLimsId",
    method: "delete",
    params: query,
  });
}

// ä¿®æ”¹äººå‘˜æ˜Žç»†æ‰€åœ¨ç»„织架构
export function upUserDepardLimsId(data) {
  return request({
    url: "/system/newUser/upUserDepardLimsId",
    method: "post",
    data: data,
  });
}

// æœ¬ä¿¡æ¯å¯¼å‡º,传参类似分页
export function exportPersonBasicInfo(query) {
  return request({
    url: "/personBasicInfo/exportPersonBasicInfo",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

// æœ¬ä¿¡æ¯å¯¼å‡º,传参类似分页
export function exportPersonBasicInfoById(query) {
  return request({
    url: "/personBasicInfo/exportPersonBasicInfoById",
    method: "get",
    params: query,
  });
}

/**
 * @desc æ²Ÿé€šè®°å½•
 */

// æ²Ÿé€šè®°å½•-列表
export function personPersonCommunicationAbilityPage(query) {
  return request({
    url: "/personCommunicationAbility/personPersonCommunicationAbilityPage",
    method: "get",
    params: query,
  });
}

//沟通记录-删除
export function deletePersonCommunicationAbility(query) {
  return request({
    url: "/personCommunicationAbility/deletePersonCommunicationAbility",
    method: "delete",
    params: query,
  });
}

// æ²Ÿé€šè®°å½•-导出
export function exportPersonCommunicationAbility(query) {
  return request({
    url: "/personCommunicationAbility/exportPersonCommunicationAbility",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

// äººå‘˜åˆ—表
export function selectUserList(query) {
  return request({
    url: "/deviceScope/selectUserList",
    method: "get",
    params: query,
  });
}

// æ²Ÿé€šè®°å½•æ–°å¢ž-编辑
export function addOrUpdatePersonCommunicationAbility(data) {
  return request({
    url: "/personCommunicationAbility/addOrUpdatePersonCommunicationAbility",
    method: "post",
    data: data,
  });
}

/**
 * @desc å²—位职责
 */

// åˆ†é¡µæŸ¥è¯¢å²—位职责
export function personJobResponsibilitiesSelect(query) {
  return request({
    url: "/personJobResponsibilities/personJobResponsibilitiesSelect",
    method: "get",
    params: query,
  });
}

// æ–°å¢žå²—位职责
export function personJobResponsibilitiesSave(data) {
  return request({
    url: "/personJobResponsibilities/personJobResponsibilitiesSave",
    method: "post",
    data: data,
  });
}

// å¯¼å‡ºäººå‘˜èŒè´£,传参id
export function exportPersonJobResponsibilities(query) {
  return request({
    url: "/personJobResponsibilities/exportPersonJobResponsibilities",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//删除岗位职责
export function personJobResponsibilitiesDelete(query) {
  return request({
    url: "/personJobResponsibilities/personJobResponsibilitiesDelete",
    method: "delete",
    params: query,
  });
}

/**
 * @desc ä»»èŒæŽˆæƒ
 */

// ä»»èŒæŽˆæƒè®°å½•-列表
export function PersonPostAuthorizationRecordPage(query) {
  return request({
    url: "/personPostAuthorizationRecord/PersonPostAuthorizationRecordPage",
    method: "get",
    params: query,
  });
}

//任职授权记录-删除
export function deletePersonPostAuthorizationRecord(query) {
  return request({
    url: "/personPostAuthorizationRecord/deletePersonPostAuthorizationRecord",
    method: "delete",
    params: query,
  });
}

// å¯¼å‡ºäººå‘˜èŒè´£,传参id
export function exportPersonPostAuthorizationRecord(query) {
  return request({
    url: "/personPostAuthorizationRecord/exportPersonPostAuthorizationRecord",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

// ä»»èŒæŽˆæƒè®°å½•-新增
export function addOrUpdatePersonPostAuthorizationRecord(data) {
  return request({
    url: "/personPostAuthorizationRecord/addOrUpdatePersonPostAuthorizationRecord",
    method: "post",
    data: data,
  });
}

//删除文件
export function deleteCNASFile(query) {
  return request({
    url: "/personBasicInfo/deleteCNASFile",
    method: "delete",
    params: query,
  });
}

/**
 * @desc äººå‘˜èƒ½åŠ›
 */
// å¯¼å‡ºäººå‘˜èƒ½åŠ›
export function exportPersonnelCapacity(query) {
  return request({
    url: "/personPersonnelCapacity/exportPersonnelCapacity",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

// æŸ¥è¯¢äººå‘˜èƒ½åŠ›
export function personPersonnelCapacityPage(query) {
  return request({
    url: "/personPersonnelCapacity/personPersonnelCapacityPage",
    method: "get",
    params: query,
  });
}

// æ–°å¢žç¼–辑人员能力
export function addOrUpdatePersonPersonnelCapacity(data) {
  return request({
    url: "/personPersonnelCapacity/addOrUpdatePersonPersonnelCapacity",
    method: "post",
    data: data,
  });
}

// ç¡®è®¤äººå‘˜èƒ½åŠ›
export function confirmPersonnelCapability(data) {
  return request({
    url: "/personPersonnelCapacity/confirmPersonnelCapability",
    method: "post",
    data: data,
  });
}

//删除人员能力
export function deletePersonPersonnelCapacity(query) {
  return request({
    url: "/personPersonnelCapacity/deletePersonPersonnelCapacity",
    method: "delete",
    params: query,
  });
}

/**
 * @desc äººå‘˜ä¿¡æ¯
 */
// èŽ·å–附件
export function getAnnex(query) {
  return request({
    url: "/personBasicInfo/getAnnex",
    method: "get",
    params: query,
  });
}

// æ›´æ–°é™„件
export function updateAnnex(data) {
  return request({
    url: "/personBasicInfo/updateAnnex",
    method: "post",
    data: data,
  });
}

//
export function getAnnexByUserId(query) {
  return request({
    url: "/personBasicInfo/getAnnexByUserId",
    method: "get",
    params: query,
  });
}

// æ·»åŠ é™„件
export function addAnnex(data) {
  return request({
    url: "/personBasicInfo/addAnnex",
    method: "post",
    data: data,
  });
}

//删除附件
export function deleteAnnex(query) {
  return request({
    url: "/personBasicInfo/deleteAnnex/" + query,
    method: "delete",
    // params: query,
  });
}

//人员基本信息查询
export function getCNASPersonnelInfo(query) {
  return request({
    url: "/personBasicInfo/getCNASPersonnelInfo",
    method: "get",
    params: query,
  });
}

// äººå‘˜åŸºæœ¬ä¿¡æ¯ä¿å­˜
export function saveCNASPersonnelInfo(data) {
  return request({
    url: "/personBasicInfo/saveCNASPersonnelInfo",
    method: "post",
    data: data,
  });
}

/**培训计划
 */
//年度计划明细表 åˆ é™¤
export function deleteDetail(query) {
  return request({
    url: "/personTraining/deleteDetail",
    method: "delete",
    params: query,
  });
}

//查询人员培训
export function personTrainingSelect(query) {
  return request({
    url: "/personTraining/personTrainingSelect",
    method: "get",
    params: query,
  });
}

//查询培训计划年度计划明细表
export function queryTheAnnualPlanDetailsTable(query) {
  return request({
    url: "/personTraining/queryTheAnnualPlanDetailsTable",
    method: "get",
    params: query,
  });
}

//删除人员培训信息
export function personTrainingDelete(query) {
  return request({
    url: "/personTraining/personTrainingDelete",
    method: "delete",
    params: query,
  });
}

// å®¡æ ¸ å¹´åº¦äººå‘˜åŸ¹è®­
export function reviewAnnualPersonnelTraining(data) {
  return request({
    url: "/personTraining/reviewAnnualPersonnelTraining",
    method: "post",
    data: data,
  });
}

// æ‰¹å‡† å¹´åº¦äººå‘˜åŸ¹è®­
export function approveAnnualPersonnelTraining(data) {
  return request({
    url: "/personTraining/approveAnnualPersonnelTraining",
    method: "post",
    data: data,
  });
}

// å¯¼å‡ºäººå‘˜åŸ¹è®­ä¸Žè€ƒæ ¸è®°å½•
export function exportPersonTrainingRecord(query) {
  return request({
    url: "/personTraining/exportPersonTrainingRecord",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

// å¯¼å‡º/人员培训
export function exportPersonTraining(query) {
  return request({
    url: "/personTraining/exportPersonTraining",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

// è®¤é¢†/取消认领
export function claimOfTrainingAndAssessmentRecords(data) {
  return request({
    url: "/personTraining/claimOfTrainingAndAssessmentRecords",
    method: "post",
    data: data,
  });
}

// æ‰¹é‡åˆ é™¤ å¹´åº¦è®¡åˆ’明细表
export function deleteAnnualPlanDetailTable(query) {
  return request({
    url: "/personTraining/deleteAnnualPlanDetailTable",
    method: "delete",
    params: query,
  });
}

// å¹´åº¦è®¡åˆ’明细 æ–‡ä»¶ä¸‹è½½
export function fileDownLoad(query) {
  return request({
    url: "/personTraining/fileDownLoad",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

// åˆ é™¤æŸ¥è¯¢
export function deleteFile(query) {
  return request({
    url: "/personTraining/deleteFile",
    method: "delete",
    params: query,
  });
}

//附件查询
export function getFileData(query) {
  return request({
    url: "/personTraining/getFileData",
    method: "get",
    params: query,
  });
}

//培训与考核记录 æŸ¥è¯¢
export function trainingAndAssessmentRecordsPage(query) {
  return request({
    url: "/personTraining/trainingAndAssessmentRecordsPage",
    method: "get",
    params: query,
  });
}

// åŸ¹è®­ä¸Žè€ƒæ ¸ å¤±ç„¦æ›´æ–°
export function outOfFocusPreservation(data) {
  return request({
    url: "/personTraining/outOfFocusPreservation",
    method: "post",
    data: data,
  });
}

// åŸ¹è®­ä¸Žè€ƒæ ¸ æ–°å¢žäººå‘˜
export function newPersonnelAddedToTrainingRecords(data) {
  return request({
    url: "/personTraining/newPersonnelAddedToTrainingRecords",
    method: "post",
    data: data,
  });
}

// åŸ¹è®­ä¸Žè€ƒæ ¸è®°å½• æ‰¹é‡åˆ é™¤
export function deleteTrainingAndAssessmentRecords(query) {
  return request({
    url: "/personTraining/deleteTrainingAndAssessmentRecords",
    method: "delete",
    params: query,
  });
}

//  åŸ¹è®­ä¸Žè€ƒæ ¸è®°å½• æäº¤
export function trainingAndAssessmentRecordsAdded(data) {
  return request({
    url: "/personTraining/trainingAndAssessmentRecordsAdded",
    method: "post",
    data: data,
  });
}

//查询部门
export function selectDepartLims(query) {
  return request({
    url: "/personTraining/selectDepartLims",
    method: "get",
    params: query,
  });
}

//  æ–°å¢žåŸ¹è®­è®¡åˆ’年度计划明细表
export function addOrUpdatePersonTrainingDetailed(data) {
  return request({
    url: "/personTraining/addOrUpdatePersonTrainingDetailed",
    method: "post",
    data: data,
  });
}

/**
 * @desc ç›‘督计划
 */
//年度计划列表
export function yearPlanList(query) {
  return request({
    url: "/superVisePlan/yearPlanList",
    method: "get",
    params: query,
  });
}

//年度计划明细
export function yearPlanDetailList(query) {
  return request({
    url: "/superVisePlan/yearPlanDetailList",
    method: "get",
    params: query,
  });
}

// åˆ é™¤å¹´è®¡åˆ’
export function yearPlanDel(query) {
  return request({
    url: "/superVisePlan/yearPlanDel",
    method: "delete",
    params: query,
  });
}

// åˆ é™¤å¹´è®¡åˆ’明细
export function yearPlanDetailDel(query) {
  return request({
    url: "/superVisePlan/yearPlanDetailDel",
    method: "delete",
    params: query,
  });
}

//  æ‰¹å‡†å¹´åº¦è®¡åˆ’
export function yearPlanDetailApproval(data) {
  return request({
    url: "/superVisePlan/yearPlanDetailApproval",
    method: "post",
    data: data,
  });
}

// äººå‘˜ ç›‘督计划导出
export function exportSuperVisePlan(query) {
  return request({
    url: "/superVisePlan/exportSuperVisePlan",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//  ç›‘督计划导入年度计划
export function yearPlanDetailImport(data) {
  return request({
    url: "/superVisePlan/yearPlanDetailImport",
    method: "post",
    headers: {
      "Content-Type": "multipart/form-data;",
    },
    data: data,
  });
}

//  ç›‘督计划-新增年度计划
export function yearPlanDetailAdd(data) {
  return request({
    url: "/superVisePlan/yearPlanDetailAdd",
    method: "post",
    data: data,
  });
}

//  ç›‘督计划-编辑年度计划
export function yearPlanDetailEdit(data) {
  return request({
    url: "/superVisePlan/yearPlanDetailEdit",
    method: "post",
    data: data,
  });
}

/**
 * @desc ç›‘督记录
 */
//查询
export function personSupervisionRecordPage(query) {
  return request({
    url: "/personSupervisionRecord/personSupervisionRecordPage",
    method: "get",
    params: query,
  });
}

// åˆ é™¤ ç›‘督记录
export function deletePersonSupervisionRecord(query) {
  return request({
    url: "/personSupervisionRecord/deletePersonSupervisionRecord",
    method: "delete",
    params: query,
  });
}

// æŽ§åˆ¶å•å¯¼å‡º
export function exportSupervisionControlSheet(query) {
  return request({
    url: "/personSupervisionRecord/exportSupervisionControlSheet",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

// å¤„理单导出
export function exportSupervisionProcessingSheet(query) {
  return request({
    url: "/personSupervisionRecord/exportSupervisionProcessingSheet",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

// ç›‘督记录导出
export function exportPersonSupervisionRecord(query) {
  return request({
    url: "/personSupervisionRecord/exportPersonSupervisionRecord",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//  æ–°å¢ž-编辑 ç›‘督记录
export function addOrUpdatePersonSupervisionRecord(data) {
  return request({
    url: "/personSupervisionRecord/addOrUpdatePersonSupervisionRecord",
    method: "post",
    data: data,
  });
}

//查询 æŽ§åˆ¶å•
export function personSupervisionControlSheetPage(query) {
  return request({
    url: "/personSupervisionRecord/personSupervisionControlSheetPage",
    method: "get",
    params: query,
  });
}

//  æ–°å¢ž-编辑 æŽ§åˆ¶å•
export function addOrUpdatePersonSupervisionControl(data) {
  return request({
    url: "/personSupervisionRecord/addOrUpdatePersonSupervisionControl",
    method: "post",
    data: data,
  });
}

//查询 å¤„理单
export function personSupervisionProcessingPage(query) {
  return request({
    url: "/personSupervisionRecord/personSupervisionProcessingPage",
    method: "get",
    params: query,
  });
}

//  æ–°å¢ž-编辑 å¤„理单
export function addOrUpdatePersonnelServiceProcessing(data) {
  return request({
    url: "/personSupervisionRecord/addOrUpdatePersonnelServiceProcessing",
    method: "post",
    data: data,
  });
}

/**
 * @desc å¥–惩记录
 */
//  å¥–惩记录 æ–°å¢ž/更新
export function addOrUpdateRewardPunishment(data) {
  return request({
    url: "/personRewardPunishmentRecord/addOrUpdateRewardPunishment",
    method: "post",
    data: data,
  });
}

// äººå‘˜ - å¥–惩记录 åˆ é™¤
export function deleteRewardPunishment(query) {
  return request({
    url: "/personRewardPunishmentRecord/deleteRewardPunishment",
    method: "delete",
    params: query,
  });
}

// äººå‘˜ - å¥–惩记录 åˆ†é¡µæŸ¥è¯¢
export function rewardPunishmentPage(query) {
  return request({
    url: "/personRewardPunishmentRecord/rewardPunishmentPage",
    method: "get",
    params: query,
  });
}

/**
 * @desc å·¥ä½œå±¥åŽ†
 */

// å¯¼å‡ºå·¥ä½œå±¥åŽ†
export function personTrackRecordExport(query) {
  return request({
    url: "/personTrackRecord/personTrackRecordExport",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//  æ›´æ–°å·¥ä½œå±¥åŽ†
export function personTrackRecordUpdate(data) {
  return request({
    url: "/personTrackRecord/personTrackRecordUpdate",
    method: "post",
    data: data,
  });
}

//  æ–°å¢žå·¥ä½œå±¥åŽ†
export function personTrackRecordSave(data) {
  return request({
    url: "/personTrackRecord/personTrackRecordSave",
    method: "post",
    data: data,
  });
}

// åˆ é™¤å·¥ä½œå±¥åŽ†
export function personTrackRecordDelete(query) {
  return request({
    url: "/personTrackRecord/personTrackRecordDelete",
    method: "delete",
    params: query,
  });
}

//查询工作履历
export function personTrackRecordSelect(query) {
  return request({
    url: "/personTrackRecord/personTrackRecordSelect",
    method: "get",
    params: query,
  });
}

/**
 * @desc åŸ¹è®­è®°å½•
 */
// å¯¼å‡ºåŸ¹è®­è®°å½•
export function exportTrainingRecord(query) {
  return request({
    url: "/personTrainingRecord/exportTrainingRecord",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//查询人员 åŸ¹è®­è®°å½•
export function trainingSelectTrainingRecord(query) {
  return request({
    url: "/personTrainingRecord/trainingSelectTrainingRecord",
    method: "get",
    params: query,
  });
}

//查询人员明细 åŸ¹è®­è®°å½•
export function queryPersonnelDetails(query) {
  return request({
    url: "/personTrainingRecord/queryPersonnelDetails",
    method: "get",
    params: query,
  });
}

 src/api/cnas/resourceDemand/device.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,916 @@
// ä¸ç¡®å®šåº¦è¯„定相关接口
import request from "@/utils/request";

//设备树形
export function treeDevice(query) {
  return request({
    url: "/deviceScope/treeDevice",
    method: "get",
    params: query,
  });
}

//查询设备详情列表
export function selectDeviceParameter(query) {
  return request({
    url: "/deviceScope/selectDeviceParameter",
    method: "get",
    params: query,
  });
}

//获取实验室名称
export function obtainItemParameterList(query) {
  return request({
    url: "/laboratoryScope/obtainItemParameterList",
    method: "get",
    params: query,
  });
}

//设备工具明细导出
export function exportEquipmentDetails(query) {
  return request({
    url: "/deviceScope/exportEquipmentDetails",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//设备里面选择检验项目(树形结构)
export function getInsProduction(query) {
  return request({
    url: "/capacityScope/getInsProduction",
    method: "get",
    params: query,
  });
}

// ä¿®æ”¹è®¾å¤‡è¯¦æƒ…参数
export function upDeviceParameter(data) {
  return request({
    url: "/deviceScope/upDeviceParameter",
    method: "post",
    data: data,
  });
}

// æ·»åŠ è®¾å¤‡è¯¦æƒ…参数
export function addDeviceParameter(data) {
  return request({
    url: "/deviceScope/addDeviceParameter",
    method: "post",
    data: data,
  });
}

// ç»´æŠ¤æ•°é‡‡é…ç½®
export function numberCollect(data) {
  return request({
    url: "/deviceScope/numberCollect",
    method: "post",
    data: data,
  });
}

//设备预约接口-列表
export function getDeviceParameter(query) {
  return request({
    url: "/deviceScope/selectDeviceParameter",
    method: "get",
    params: query,
  });
}

//删除设备详情参数
export function delDeviceParameter(query) {
  return request({
    url: "/deviceScope/delDeviceParameter",
    method: "delete",
    params: query,
  });
}

//查询数采配置
export function queryDataAcquisitionConfiguration(query) {
  return request({
    url: "/deviceScope/queryDataAcquisitionConfiguration",
    method: "get",
    params: query,
  });
}

// ç»´æŠ¤æ•°é‡‡é…ç½®
export function saveDataAcquisitionConfiguration(data) {
  return request({
    url: "/deviceScope/saveDataAcquisitionConfiguration",
    method: "post",
    data: data,
  });
}

//删除数采配置
export function deleteDataAcquisitionConfiguration(data) {
  return request({
    url: "/deviceScope/deleteDataAcquisitionConfiguration",
    method: "post",
    data: data,
  });
}

//cnas设备使用记录分页查询
export function deviceRecordPage(query) {
  return request({
    url: "/deviceRecord/deviceRecordPage",
    method: "get",
    params: query,
  });
}

// è®¾å¤‡ä½¿ç”¨è®°å½•ä¿å­˜
export function saveDeviceRecord(data) {
  return request({
    url: "/deviceRecord/saveDeviceRecord",
    method: "post",
    data: data,
  });
}

// è®¾å¤‡ä½¿ç”¨è®°å½•ç¼–辑
export function updateDeviceRecord(data) {
  return request({
    url: "/deviceRecord/updateDeviceRecord",
    method: "post",
    data: data,
  });
}

//删除设备使用记录
export function deleteDeviceRecord(query) {
  return request({
    url: "/deviceRecord/deleteDeviceRecord",
    method: "delete",
    params: query,
  });
}
//使用记录 å¯¼å‡º
export function exportUseRecord(query) {
  return request({
    url: "/deviceRecord/exportUseRecord",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//新增设备档案
export function addDocument(data) {
  return request({
    url: "/documents/add",
    method: "post",
    data: data,
  });
}

// èŽ·å–相关文档数据的api-更新
export function updateDocument(data) {
  return request({
    url: "/documents/updateDocument",
    method: "post",
    data: data,
  });
}

//删除设备档案
export function deleteDocumentById(query) {
  return request({
    url: "/documents/delete",
    method: "delete",
    params: query,
  });
}
//

//设备验收列表
export function pageDeviceAcceptance(query) {
  return request({
    url: "/deviceAcceptance/pageDeviceAcceptance",
    method: "get",
    params: query,
  });
}

//设备验收附件列表
export function getDeviceAcceptanceFileList(query) {
  return request({
    url: "/deviceAcceptance/getDeviceAcceptanceFileList",
    method: "get",
    params: query,
  });
}

//设备验收附件删除
export function delDeviceAcceptanceFileList(query) {
  return request({
    url: "/deviceAcceptance/delDeviceAcceptanceFileList",
    method: "delete",
    params: query,
  });
}

//设备验收（装备）导出
export function exportDeviceAcceptance(query) {
  return request({
    url: "/deviceAcceptance/exportDeviceAcceptance",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//删除设备验收
export function delDeviceAcceptance(query) {
  return request({
    url: "/deviceAcceptance/delDeviceAcceptance",
    method: "delete",
    params: query,
  });
}

//查询设备验收
export function getDeviceAcceptance(query) {
  return request({
    url: "/deviceAcceptance/getDeviceAcceptance",
    method: "get",
    params: query,
  });
}

// æ–°å¢žè®¾å¤‡éªŒæ”¶
export function addDeviceAcceptance(data) {
  return request({
    url: "/deviceAcceptance/addDeviceAcceptance",
    method: "post",
    data: data,
  });
}

// ç¼–辑设备验收
export function updateDeviceAcceptance(data) {
  return request({
    url: "/deviceAcceptance/updateDeviceAcceptance",
    method: "post",
    data: data,
  });
}

//设备校准 åˆ†é¡µæŸ¥è¯¢
export function deviceMetricRecordPage(query) {
  return request({
    url: "/deviceMetricRecord/deviceMetricRecordPage",
    method: "get",
    params: query,
  });
}
// è®¾å¤‡æ ¡å‡† æ–°å¢ž æ›´æ–°-校准记录
export function addOrUpdateDeviceMetricRecord(data) {
  return request({
    url: "/deviceMetricRecord/addOrUpdateDeviceMetricRecord",
    method: "post",
    data: data,
  });
}
//设备校准 æ–°å¢ž æ›´æ–°-提交项目校准维护
export function saveOrUpdateDeviceMetric(data) {
  return request({
    url: "/deviceMetrics/saveOrUpdateDeviceMetric",
    method: "post",
    data: data,
  });
}

//设备校准 æŸ¥è¯¢æ ¡å‡†æ¡ç›®
export function showDeviceMetricsCopy(query) {
  return request({
    url: "/deviceMetricRecord/showDeviceMetricsCopy",
    method: "get",
    params: query,
  });
}

//设备校准 åˆ é™¤
export function deleteDeviceMetricRecord(query) {
  return request({
    url: "/deviceMetricRecord/deleteDeviceMetricRecord",
    method: "delete",
    params: query,
  });
}
//设备校准 å¯¼å‡º
export function deviceMetricRecordExport(query) {
  return request({
    url: "/deviceMetricRecord/deviceMetricRecordExport",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//设备校准 è®¾å¤‡ç»´æŠ¤è¡¨ æŸ¥è¯¢
export function selectDeviceMetric(query) {
  return request({
    url: "/deviceMetrics/selectDeviceMetric",
    method: "get",
    params: query,
  });
}

//设备校准 åˆ é™¤
export function deleteDeviceMetrics(query) {
  return request({
    url: "/deviceMetrics/deleteDeviceMetrics",
    method: "delete",
    params: query,
  });
}
//删除 è®¾å¤‡æ ¡å‡†-附件
export function delDeviceCalibrationFile(query) {
  return request({
    url: "/personBasicInfo/delDeviceCalibrationFile",
    method: "delete",
    params: query,
  });
}
//设备校准查询-附件
export function getDeviceCalibrationFile(query) {
  return request({
    url: "/personBasicInfo/getDeviceCalibrationFile",
    method: "get",
    params: query,
  });
}
//设备校准导出-附件
export function downLoadDeviceCalibrationFile(query) {
  return request({
    url: "/personBasicInfo/downLoadDeviceCalibrationFile",
    method: "get",
    params: query,
    responseType: "blob"
  });
}

//删除文件
export function deleteCNASFile(query) {
  return request({
    url: "/personBasicInfo/deleteCNASFile",
    method: "delete",
    params: query,
  });
}

//查询设备档案列表
export function getListByDId(query) {
  return request({
    url: '/documents/getListByDId',
    method: "get",
    params: query,
  });
}

//设备档案导出
export function exportDeviceFile(query) {
  return request({
    url: "/deviceScope/exportDeviceFile",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//设备保养单条导出
export function exportMaintenanceRecord(query) {
  return request({
    url: "/deviceMaintain/exportMaintenanceRecord",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//设备维护删除
export function deleteDeviceMaintenance(query) {
  return request({
    url: "/deviceMaintain/deleteDeviceMaintenance",
    method: "delete",
    params: query,
  });
}
//设备维护删除
export function deviceMaintenanceExport(query) {
  return request({
    url: "/deviceMaintain/deviceMaintenanceExport",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

// æ–°å¢žè®¾å¤‡ç»´æŠ¤ä¿å…»
export function addDeviceMaintenance(data) {
  return request({
    url: "/deviceMaintain/addDeviceMaintenance",
    method: "post",
    data: data,
  });
}
//设备维护表 æŸ¥è¯¢
export function getDeviceMaintenancePage(query) {
  return request({
    url: "/deviceMaintain/getDeviceMaintenancePage",
    method: "get",
    params: query,
  });
}

// å€Ÿç”¨-保存
export function saveDeviceBorrow(data) {
  return request({
    url: "/deviceBorrow/saveDeviceBorrow",
    method: "post",
    data: data,
  });
}

//借用-查看
export function getDeviceBorrow(query) {
  return request({
    url: "/deviceBorrow/getDeviceBorrow",
    method: "get",
    params: query,
  });
}

//借用-导出
export function deviceBorrowExport(query) {
  return request({
    url: "/deviceBorrow/deviceBorrowExport",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//借用-删除
export function deleteDeviceBorrow(query) {
  return request({
    url: "/deviceBorrow/deleteDeviceBorrow",
    method: "delete",
    params: query,
  });
}

//借用-列表
export function deviceBorrowPage(query) {
  return request({
    url: "/deviceBorrow/deviceBorrowPage",
    method: "get",
    params: query,
  });
}

// è®¾å¤‡å¯ç”¨/停用 ä¿å­˜ï¼Œæäº¤ï¼Œé©³å›žï¼Œé€šè¿‡æŽ¥å£
export function saveDeviceState(data) {
  return request({
    url: "/deviceState/saveDeviceState",
    method: "post",
    data: data,
  });
}

//通过设备编号获取设备列表
export function selectDeviceByCode(query) {
  return request({
    url: "/deviceScope/selectDeviceByCode",
    method: "get",
    params: query,
  });
}

//设备停启用单条导出
export function exportDeviceStatus(query) {
  return request({
    url: "/deviceState/exportDeviceStatus",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//设备启用/停用 åˆ é™¤
export function deleteDeviceState(query) {
  return request({
    url: "/deviceState/deleteDeviceState",
    method: "delete",
    params: query,
  });
}

//设备状态导出
export function deviceStateExport(query) {
  return request({
    url: "/deviceState/deviceStateExport",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//设备启用/停用 åˆ†é¡µ
export function getDeviceStatePage(query) {
  return request({
    url: "/deviceState/getDeviceStatePage",
    method: "get",
    params: query,
  });
}

//设备报废申请列表
export function pageDeviceScrapped(query) {
  return request({
    url: "/deviceScrapped/pageDeviceScrapped",
    method: "get",
    params: query,
  });
}

// å¯¼å‡º
export function exportDeviceScrapped(query) {
  return request({
    url: "/deviceScrapped/exportDeviceScrapped",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//删除设备报废申请
export function delDeviceScrapped(query) {
  return request({
    url: "/deviceScrapped/delDeviceScrapped",
    method: "delete",
    params: query,
  });
}

//查询设备报废申请
export function getDeviceScrapped(query) {
  return request({
    url: "/deviceScrapped/getDeviceScrapped",
    method: "get",
    params: query,
  });
}

// æ–°å¢žè®¾å¤‡æŠ¥åºŸç”³è¯·
export function addDeviceScrapped(data) {
  return request({
    url: "/deviceScrapped/addDeviceScrapped",
    method: "post",
    data: data,
  });
}

//设备故障维修列表
export function pageDeviceBreakdownMaintenance(query) {
  return request({
    url: "/deviceBreakdownMaintenance/pageDeviceBreakdownMaintenance",
    method: "get",
    params: query,
  });
}

// è®¾å¤‡æ•…障与维修-导出
export function exportDeviceBreakdownMaintenance(query) {
  return request({
    url: "/deviceBreakdownMaintenance/exportDeviceBreakdownMaintenance",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//删除设备故障维修
export function delDeviceBreakdownMaintenance(query) {
  return request({
    url: "/deviceBreakdownMaintenance/delDeviceBreakdownMaintenance",
    method: "delete",
    params: query,
  });
}

//查询设备故障维修
export function getDeviceBreakdownMaintenance(query) {
  return request({
    url: "/deviceBreakdownMaintenance/getDeviceBreakdownMaintenance",
    method: "get",
    params: query,
  });
}

// æ–°å¢žè®¾å¤‡æ•…障维修
export function addDeviceBreakdownMaintenance(data) {
  return request({
    url: "/deviceBreakdownMaintenance/addDeviceBreakdownMaintenance",
    method: "post",
    data: data,
  });
}

//分页查询设备点检记录
export function getDeviceInspectionRecordByPage(query) {
  return request({
    url: "/deviceInspectionRecord/getDeviceInspectionRecordByPage",
    method: "get",
    params: query,
  });
}

// å¯¼å‡ºè®¾å¤‡ç‚¹æ£€è®°å½•
export function exportDeviceInspectionRecord(query) {
  return request({
    url: "/deviceInspectionRecord/exportDeviceInspectionRecord",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//删除设备点检记录
export function deleteDeviceInspectionRecord(query) {
  return request({
    url: "/deviceInspectionRecord/deleteDeviceInspectionRecord",
    method: "delete",
    params: query,
  });
}

//设备点检记录详情
export function getDeviceInspectionRecord(query) {
  return request({
    url: "/deviceInspectionRecord/getDeviceInspectionRecord",
    method: "get",
    params: query,
  });
}

// æ–°å¢žè®¾å¤‡ç‚¹æ£€è®°å½•
export function addDeviceInspectionRecord(data) {
  return request({
    url: "/deviceInspectionRecord/addDeviceInspectionRecord",
    method: "post",
    data: data,
  });
}

// ä¿®æ”¹è®¾å¤‡ç‚¹æ£€è®°å½•
export function updateDeviceInspectionRecord(data) {
  return request({
    url: "/deviceInspectionRecord/updateDeviceInspectionRecord",
    method: "post",
    data: data,
  });
}

// å¤æ ¸è®¾å¤‡ç‚¹æ£€è®°å½•
export function reviewDeviceInspectionRecord(data) {
  return request({
    url: "/deviceInspectionRecord/reviewDeviceInspectionRecord",
    method: "post",
    data: data,
  });
}

//设备事故报告列表
export function pageDeviceAccidentReport(query) {
  return request({
    url: "/deviceAccidentReport/pageDeviceAccidentReport",
    method: "get",
    params: query,
  });
}

// å¯¼å‡ºè®¾å¤‡äº‹æ•…
export function exportDeviceAccidentReport(query) {
  return request({
    url: "/deviceAccidentReport/exportDeviceAccidentReport",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//删除设备事故报告
export function delDeviceAccidentReport(query) {
  return request({
    url: "/deviceAccidentReport/delDeviceAccidentReport",
    method: "delete",
    params: query,
  });
}

//查询设备事故报告
export function getDeviceAccidentReport(query) {
  return request({
    url: "/deviceAccidentReport/getDeviceAccidentReport",
    method: "get",
    params: query,
  });
}

// æ–°å¢žè®¾å¤‡äº‹æ•…报告
export function addDeviceAccidentReport(data) {
  return request({
    url: "/deviceAccidentReport/addDeviceAccidentReport",
    method: "post",
    data: data,
  });
}
//作业指导书查询
export function pageByPageQueryOfHomeworkInstructions(query) {
  return request({
    url: "/instruction/pageByPageQueryOfHomeworkInstructions",
    method: "get",
    params: query,
  });
}
//作业指导书 å®¡æ‰¹
export function approvalOfHomeworkInstructionManual(data) {
  return request({
    url: "/instruction/approvalOfHomeworkInstructionManual",
    method: "post",
    data: data,
  });
}

//作业指导书 åˆ é™¤
export function homeworkGuidebook(query) {
  return request({
    url: "/instruction/homeworkGuidebook",
    method: "delete",
    params: query,
  });
}

//作业指导书 ç¼–辑查询
export function homeworkGuidebookEditor(query) {
  return request({
    url: "/instruction/homeworkGuidebookEditor",
    method: "get",
    params: query,
  });
}

//作业指导书新增
export function newHomeworkGuidebookAdded(data) {
  return request({
    url: "/instruction/newHomeworkGuidebookAdded",
    method: "post",
    data: data,
  });
}

//作业指导书受控文件删除
export function deleteHomeworkGuidebook(query) {
  return request({
    url: "/instruction/deleteHomeworkGuidebook",
    method: "delete",
    params: query,
  });
}

//设备预约接口
export function reservationSelectDevice(query) {
  return request({
    url: "/reservation/selectDeviceParameter",
    method: "get",
    params: query,
  });
}
//设备预约接口 åˆ é™¤
export function reservationDelete(query) {
  return request({
    url: "/reservation/delete",
    method: "delete",
    params: query,
  });
}
//设备预约接口 ä¿å­˜
export function reservationSave(query) {
  return request({
    url: "/reservation/save",
    method: "post",
    data: query,
  });
}
//设备预约接口
export function selectReservationParameterPage(query) {
  return request({
    url: "/reservation/selectReservationParameterPage",
    method: "get",
    params: query,
  });
}
// è®¾å¤‡è¿è¡Œæ€»è§ˆ-根据id获取设备故障数据
export function device(query) {
  return request({
    url: "/deviceFaults/device",
    method: "get",
    params: query,
  });
}
//设备验收中四个table表格的删除功能
export function deleteIncidentReportAll(query) {
  return request({
    url: "/incidentReport/deleteIncidentReportAll",
    method: "delete",
    params: query,
  });
}
//设备验收中四个table表格的删除功能
export function deleteIncidentReport(query) {
  return request({
    url: "/incidentReport/deleteIncidentReport",
    method: "delete",
    params: query,
  });
}

//设备验收 ä¿å­˜ï¼Œæäº¤ï¼Œé©³å›žï¼Œé€šè¿‡æŽ¥å£
export function saveIncidentReportData(query) {
  return request({
    url: "/incidentReport/saveIncidentReportData",
    method: "post",
    data: query,
  });
}
//设备验收 ä¿å­˜ï¼Œæäº¤ï¼Œé©³å›žï¼Œé€šè¿‡æŽ¥å£
export function incidentReportPage(query) {
  return request({
    url: "/incidentReport/incidentReportPage",
    method: "get",
    params: query,
  });
}
//设备验收 ä¿å­˜ï¼Œæäº¤ï¼Œé©³å›žï¼Œé€šè¿‡æŽ¥å£
export function getShowIncidentReport(query) {
  return request({
    url: "/incidentReport/getShowIncidentReport",
    method: "get",
    params: query,
  });
}
//设备验收导出
export function incidentReportExport(query) {
  return request({
    url: "/incidentReport/incidentReportExport",
    method: "get",
    params: query,
    responseType: "blob"
  });
}
//添加设备故障
export function addOrUpdateDeviceFaultOne(query) {
  return request({
    url: "/deviceFaultOne/addOrUpdateDeviceFaultOne",
    method: "post",
    data: query,
  });
}
//设备故障表 åˆ†é¡µæŸ¥è¯¢
export function deviceFaultOnePage(query) {
  return request({
    url: "/deviceFaultOne/deviceFaultOnePage",
    method: "get",
    params: query,
  });
}
//设备故障导出
export function exportRewardAndPunishmentRecords(query) {
  return request({
    url: "/deviceFaultOne/exportRewardAndPunishmentRecords",
    method: "get",
    params: query,
    responseType: "blob"
  });
}

//删除 è®¾å¤‡æ•…éšœ
export function deleteDeviceFaultOne(query) {
  return request({
    url: "/deviceFaultOne/deleteDeviceFaultOne",
    method: "delete",
    params: query,
  });
}


 src/api/standard/standardLibrary.js

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

// é€šè¿‡æ ‡å‡†æ ‘查询对应的检验项目
export function selectStandardProductList(query) {
  return request({
    url: "/standardTree/selectStandardProductList",
    method: "get",
    params: query,
  });
}

// æŸ¥è¯¢åŽŸå§‹è®°å½•æ¨¡æ¿æžšä¸¾
export function getStandardTemplate(query) {
  return request({
@@ -134,3 +143,19 @@
    params: query,
  });
}

// èŽ·å–标准树下标准方法枚举
export function selectStandardMethodEnum() {
  return request({
    url: "/standardTree/selectStandardMethodEnum",
    method: "get",
  });
}

// èŽ·å–标准树(检验下单)
export function selectStandardTreeList2() {
  return request({
    url: "/standardTree/selectStandardTreeList2",
    method: "get",
  });
}

 src/api/system/user.js

@@ -185,9 +185,17 @@
}

// èŽ·å–当前登录人员部门
export function selectUserDepartmentLimsName(query) {
export function selectUserDepartmentLimsName() {
  return request({
    url: "/system/newUser/selectUserDepartmentLimsName",
    method: "get",
  });
}

// èŽ·å–实验室下的检验员列表
export function getLaboratoryPersonList() {
  return request({
    url: "/system/newUser/getLaboratoryPersonList",
    method: "get",
  });
}

 src/assets/images/renyuan-title.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,11 @@
<svg width="148" height="21" viewBox="0 0 148 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00437 5.75531V0.0625L0.772461 5.75531H7.00437Z" fill="#B26F00"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M141.709 5.75531V0.0625L147.941 5.75531H141.709Z" fill="#B26F00"/>
<path d="M6.97192 2.0625C6.97192 0.957931 7.86735 0.0625 8.97192 0.0625H139.676C140.781 0.0625 141.676 0.957931 141.676 2.0625V12.0625C141.676 16.4808 138.095 20.0625 133.676 20.0625H14.9719C10.5537 20.0625 6.97192 16.4808 6.97192 12.0625V2.0625Z" fill="url(#paint0_linear_2026_4)"/>
<defs>
<linearGradient id="paint0_linear_2026_4" x1="6.97192" y1="0.0625" x2="6.97192" y2="20.0625" gradientUnits="userSpaceOnUse">
<stop stop-color="#F9C76F"/>
<stop offset="1" stop-color="#FEB42F"/>
</linearGradient>
</defs>
</svg>

 src/assets/styles/element-ui.scss

@@ -89,4 +89,48 @@
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}
}

/* å…¨å±€è¡¨æ ¼æ ·å¼ */
.el-table th.el-table__cell,
.has-gutter .el-table__cell {
  background-color: #f0f1f5 !important;
  color: #333;
}

/* è¡¨æ ¼è¡Œé€‰ä¸­èƒŒæ™¯è‰² */
.el-table__body tr.current-row>td.el-table__cell,
.el-table__body tr.selection-row>td.el-table__cell {
  background-color: #c1ddf1;
}

.el-table__header .has-gutter .el-table__cell .cell {
  font-size: 14px !important;
  font-weight: 500;
}

.cell {
  color: #333;
  padding: 0 15px !important;
  font-size: 12px;
}

.cell span {
  font-size: 12px;
  font-weight: 400;
}

.el-table .el-table__cell {
  padding: 0 0;
}

.el-table .el-table__row {
  height: 41px;
}

.el-table th.el-table__cell>.cell {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  padding: 6px 15px !important;
}

 src/assets/styles/index.scss

@@ -199,8 +199,8 @@

.bg-1 {
  width: 100%;
  height: calc(100% - 50px);
  min-height: calc(100vh - 90px);
  overflow-y: auto;
  padding: 20px 10px 10px;
  // padding: 20px 10px 10px;
  background: rgb(245, 247, 251);
}

 src/components/Echart/echart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,116 @@
<template>
  <div>
    <div class="echart_size" :id="id" :style="`height:${config.height};width:${config.width}`"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import ResizeListener from 'element-resize-detector';
import { iuCharts } from '@/utils/echarts'
export default {
  props: {
    id: {
      type: String,
      default: ''
    },
    config: {
      type: Object,
      default: () => { }
    },
    datas: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  watch: {
    /* å¦‚果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */
    datas: {
      deep: true,
      // immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.init();
        })
      },
    },
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted() {
    window.addEventListener('resize', this.windowResizeListener);
    this.chartEleResizeListener();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    init() {
      // å®žä¾‹åŒ–对象
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.showLoading({
        text: 'loading',
        color: '#3A7BFA',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.2)',
        zlevel: 0,
      });
      if (this.config.isLoading) {
        this.chart.hideLoading();
        switch (this.config.type) {
          case 'bar':
            iuCharts.drawBar(this.chart, this.datas)
            break;
          case 'line':
            iuCharts.drawLine(this.chart, this.datas)
            break;
          case 'pie':
            iuCharts.drawPie(this.chart, this.datas)
            break;
          case 'gauge':
            iuCharts.drawGauge(this.chart, this.datas)
            break;
          default:
            break;
        }
        setTimeout(() => {
          this.chart.resize()
        }, 200)
      }
    },
    /* å¯¹chart元素尺寸进行监听，当发生变化时同步更新echart视图 */
    chartEleResizeListener() {
      const chartInstance = ResizeListener({
        strategy: 'scroll',
        callOnAdd: true
      });
      chartInstance.listenTo(this.$el, () => {
        if (!this.chart) return;
        this.chart.resize();
      });
    },
    /* å½“窗口缩放时，echart动态调整自身大小 */
    windowResizeListener() {
      if (!this.chart) return;
      this.chart.resize();
    }
  }
}
</script>
<style scoped>
.echart_size {
  width: 100%;
  height: 100%;
}
</style>

 src/components/Editor/index.vue

@@ -1,17 +1,8 @@
<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :before-upload="handleBeforeUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :headers="headers"
      style="display: none"
      ref="upload"
      v-if="this.type == 'url'"
    >
    <el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess"
      :on-error="handleUploadError" name="file" :show-file-list="false" :headers="uploadHeader" style="display: none"
      ref="upload" v-if="this.type == 'url'">
    </el-upload>
    <div class="editor" ref="editor" :style="styles"></div>
  </div>
@@ -197,76 +188,95 @@
</script>

<style>
.editor, .ql-toolbar {
.editor,
.ql-toolbar {
  white-space: pre-wrap !important;
  line-height: normal !important;
}

.quill-img {
  display: none;
}

.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";

 src/components/FileUpload/index.vue

@@ -1,19 +1,8 @@
<template>
  <div class="upload-file">
    <el-upload
      multiple
      :action="uploadFileUrl"
      :before-upload="handleBeforeUpload"
      :file-list="fileList"
      :limit="limit"
      :on-error="handleUploadError"
      :on-exceed="handleExceed"
      :on-success="handleUploadSuccess"
      :show-file-list="false"
      :headers="headers"
      class="upload-file-uploader"
      ref="fileUpload"
    >
    <el-upload multiple :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="limit"
      :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="false"
      :headers="uploadHeader" class="upload-file-uploader" ref="fileUpload">
      <!-- ä¸Šä¼ æŒ‰é’® -->
      <el-button size="mini" type="primary">选取文件</el-button>
      <!-- ä¸Šä¼ æç¤º -->
@@ -203,18 +192,21 @@
.upload-file-uploader {
  margin-bottom: 5px;
}

.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}

.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}

.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}

 src/components/ImageUpload/index.vue

@@ -1,22 +1,9 @@
<template>
  <div class="component-upload-image">
    <el-upload
      multiple
      :action="uploadImgUrl"
      list-type="picture-card"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload"
      :limit="limit"
      :on-error="handleUploadError"
      :on-exceed="handleExceed"
      ref="imageUpload"
      :on-remove="handleDelete"
      :show-file-list="true"
      :headers="headers"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :class="{hide: this.fileList.length >= this.limit}"
    >
    <el-upload multiple :action="uploadImgUrl" list-type="picture-card" :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed"
      ref="imageUpload" :on-remove="handleDelete" :show-file-list="true" :headers="uploadHeader" :file-list="fileList"
      :on-preview="handlePictureCardPreview" :class="{ hide: this.fileList.length >= this.limit }">
      <i class="el-icon-plus"></i>
    </el-upload>

@@ -28,16 +15,8 @@
      çš„文件
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      title="预览"
      width="800"
      append-to-body
    >
      <img
        :src="dialogImageUrl"
        style="display: block; max-width: 100%; margin: 0 auto"
      />
    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
    </el-dialog>
  </div>
</template>
@@ -56,7 +35,7 @@
    },
    // å¤§å°é™åˆ¶(MB)
    fileSize: {
       type: Number,
      type: Number,
      default: 5,
    },
    // æ–‡ä»¶ç±»åž‹, ä¾‹å¦‚['png', 'jpg', 'jpeg']
@@ -95,9 +74,9 @@
          this.fileList = list.map(item => {
            if (typeof item === "string") {
              if (item.indexOf(this.baseUrl) === -1 && !isExternal(item)) {
                  item = { name: this.baseUrl + item, url: this.baseUrl + item };
                item = { name: this.baseUrl + item, url: this.baseUrl + item };
              } else {
                  item = { name: item, url: item };
                item = { name: item, url: item };
              }
            }
            return item;
@@ -215,17 +194,18 @@
<style scoped lang="scss">
// .el-upload--picture-card æŽ§åˆ¶åŠ å·éƒ¨åˆ†
::v-deep.hide .el-upload--picture-card {
    display: none;
  display: none;
}

// åŽ»æŽ‰åŠ¨ç”»æ•ˆæžœ
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
    transition: all 0s;
  transition: all 0s;
}

::v-deep .el-list-enter, .el-list-leave-active {
::v-deep .el-list-enter,
.el-list-leave-active {
  opacity: 0;
  transform: translateY(0);
}
</style>


 src/components/Table/lims-table.vue

@@ -1,29 +1,85 @@
<template>
  <div>
    <!-- è¡¨æ ¼ -->
    <el-table ref="multipleTable" v-loading="tableLoading" :border="border" :data="tableData"
      :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" :height="height"
      :highlight-current-row="highlightCurrentRow" :row-class-name="rowClassName" :row-style="rowStyle"
      :row-key="rowKey" :span-method="spanMethod" stripe style="width: 100%" tooltip-effect="dark" @row-click="rowClick"
      @current-change="currentChange" @selection-change="handleSelectionChange" class="lims-table">
      <el-table-column align="center" type="selection" width="55" v-if="isSelection" />
      <el-table-column align="center" label="序号" type="index" width="60" :index="indexMethod" />
    <el-table
      ref="multipleTable"
      v-loading="tableLoading"
      :border="border"
      :data="tableData"
      :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
      :height="height"
      :highlight-current-row="highlightCurrentRow"
      :row-class-name="rowClassName"
      :row-style="rowStyle"
      :row-key="rowKey"
      :span-method="spanMethod"
      :stripe="stripe"
      style="width: 100%"
      tooltip-effect="dark"
      @row-click="rowClick"
      @current-change="currentChange"
      @selection-change="handleSelectionChange"
      class="lims-table"
    >
      <el-table-column
        align="center"
        type="selection"
        width="55"
        v-if="isSelection"
      />
      <el-table-column
        align="center"
        label="序号"
        type="index"
        width="60"
        :index="indexMethod"
      />

      <el-table-column v-for="(item, index) in column" :key="index" :column-key="item.columnKey"
        :filter-method="item.filterHandler" :filter-multiple="item.filterMultiple" :filtered-value="item.filteredValue"
        :filters="item.filters" :fixed="item.fixed" :label="item.label" :min-width="item.minWidth" :prop="item.prop"
        :show-overflow-tooltip="item.dataType === 'action' || item.dataType === 'slot' ? false : true"
        :sortable="item.sortable ? true : false" :type="item.type"
        :width="item.dataType === 'action' ? getWidth(item.operation) : item.width" align="center">
      <el-table-column
        v-for="(item, index) in column"
        :key="index"
        :column-key="item.columnKey"
        :filter-method="item.filterHandler"
        :filter-multiple="item.filterMultiple"
        :filtered-value="item.filteredValue"
        :filters="item.filters"
        :fixed="item.fixed"
        :label="item.label"
        :min-width="item.minWidth"
        :prop="item.prop"
        :show-overflow-tooltip="
          item.dataType === 'action' || item.dataType === 'slot' ? false : true
        "
        :sortable="item.sortable ? true : false"
        :type="item.type"
        :width="
          item.dataType === 'action' ? getWidth(item.operation) : item.width
        "
        align="center"
      >
        <!-- <div class="123" v-if="item.type == ''"> -->
        <template v-if="item.hasOwnProperty('colunmTemplate')" :slot="item.colunmTemplate" slot-scope="scope">
          <slot v-if="item.theadSlot" :index="index" :name="item.theadSlot" :row="scope.row" />
        <template
          v-if="item.hasOwnProperty('colunmTemplate')"
          :slot="item.colunmTemplate"
          slot-scope="scope"
        >
          <slot
            v-if="item.theadSlot"
            :index="index"
            :name="item.theadSlot"
            :row="scope.row"
          />
        </template>

        <template slot-scope="scope">
          <!-- æ’槽 -->
          <div v-if="item.dataType == 'slot'">
            <slot v-if="item.slot" :index="scope.$index" :name="item.slot" :row="scope.row" />
            <slot
              v-if="item.slot"
              :index="scope.$index"
              :name="item.slot"
              :row="scope.row"
            />
          </div>
          <!-- è¿›åº¦æ¡ -->
          <div v-else-if="item.dataType == 'progress'">
@@ -31,89 +87,142 @@
          </div>
          <!-- å›¾ç‰‡ -->
          <div v-else-if="item.dataType == 'image'">
            <img :src="javaApi + '/img/' + scope.row[item.prop]" alt=""
              style="width: 40px; height: 40px; margin-top: 10px" />
            <img
              :src="javaApi + '/img/' + scope.row[item.prop]"
              alt=""
              style="width: 40px; height: 40px; margin-top: 10px"
            />
          </div>

          <!-- tag -->
          <div v-else-if="item.dataType == 'tag'">
            <el-tag v-if="
              typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
              'string'
            " :title="scope.row[item.prop] | formatters(item.formatData)"
              :type="formatType(scope.row[item.prop], item.formatType)">{{ scope.row[item.prop] |
                formatters(item.formatData) }}</el-tag>
            <el-tag v-for="(tag, index) in dataTypeFn(
              scope.row[item.prop],
              item.formatData
            )" v-else-if="
              typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
              'object'
            " :key="index" :title="scope.row[item.prop] | formatters(item.formatData)"
              :type="formatType(tag, item.formatType)">{{
            <el-tag
              v-if="
                typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
                'string'
              "
              :title="scope.row[item.prop] | formatters(item.formatData)"
              :type="formatType(scope.row[item.prop], item.formatType)"
              >{{ scope.row[item.prop] | formatters(item.formatData) }}</el-tag
            >
            <el-tag
              v-for="(tag, index) in dataTypeFn(
                scope.row[item.prop],
                item.formatData
              )"
              v-else-if="
                typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
                'object'
              "
              :key="index"
              :title="scope.row[item.prop] | formatters(item.formatData)"
              :type="formatType(tag, item.formatType)"
              >{{
                item.tagGroup
                  ? tag[item.tagGroup.label]
                    ? tag[item.tagGroup.label]
                    : tag
                  : tag
              }}</el-tag>
            <el-tag v-else :title="scope.row[item.prop] | formatters(item.formatData)"
              :type="formatType(scope.row[item.prop], item.formatType)">{{ scope.row[item.prop] |
                formatters(item.formatData) }}</el-tag>
              }}</el-tag
            >
            <el-tag
              v-else
              :title="scope.row[item.prop] | formatters(item.formatData)"
              :type="formatType(scope.row[item.prop], item.formatType)"
              >{{ scope.row[item.prop] | formatters(item.formatData) }}</el-tag
            >
          </div>

          <!-- æŒ‰é’® -->
          <div v-else-if="item.dataType == 'action'">
            <template v-for="(o, key) in item.operation">
              <el-button v-show="o.type != 'upload'" size="mini" v-if="o.showHide ? o.showHide(scope.row) : true"
                :disabled="o.disabled ? o.disabled(scope.row) : false" :icon="iconFn(o)" :plain="o.plain"
                :style="{ color: o.name === '删除' ? '#f56c6c' : o.color }" :type="o.type | typeFn(scope.row)"
                @click="o.clickFun(scope.row)" :key="key">
              <el-button
                v-show="o.type != 'upload'"
                size="mini"
                v-if="o.showHide ? o.showHide(scope.row) : true"
                :disabled="o.disabled ? o.disabled(scope.row) : false"
                :icon="iconFn(o)"
                :plain="o.plain"
                :style="{ color: o.name === '删除' ? '#f56c6c' : o.color }"
                :type="o.type | typeFn(scope.row)"
                @click="o.clickFun(scope.row)"
                :key="key"
              >
                {{ o.name }}
              </el-button>
              <!-- <el-upload :action="javaApi + o.url + '?id=' + (o.uploadIdFun ? o.uploadIdFun(scope.row) : scope.row.id)"
                size="mini" ref="upload" :multiple="o.multiple ? o.multiple : false" :limit="1"
                :disabled="o.disabled ? o.disabled(scope.row) : false" :accept="o.accept
                  ? o.accept
                  : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'
                  " v-if="o.type == 'upload' && o.url" style="display: inline-block; width: 50px"
                v-show="o.showHide ? o.showHide(scope.row) : true" :headers="uploadHeader" :on-error="onError"
              <el-upload
                :action="
                  javaApi +
                  o.url
                "
                size="mini"
                ref="upload"
                :multiple="o.multiple ? o.multiple : false"
                :disabled="o.disabled ? o.disabled(scope.row) : false"
                :accept="
                  o.accept
                    ? o.accept
                    : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'
                "
                v-if="o.type == 'upload' && o.url"
                style="display: inline-block; width: 50px"
                v-show="o.showHide ? o.showHide(scope.row) : true"
                :data="o.data ? o.data(scope.row) : {}"
                :before-upload="o.beforeUpload ? o.beforeUpload(scope.row) : () => true"
                :on-exceed="onExceed" :on-success="handleSuccessUp" :show-file-list="false" :key="key">
                <el-button :size="o.size ? o.size : 'small'" type="text"
                  :disabled="o.disabled ? o.disabled(scope.row) : false">{{ o.name }}</el-button>
              </el-upload> -->
              <el-upload :action="javaApi + o.url"
                size="mini" ref="upload" :multiple="o.multiple ? o.multiple : false" 
                :disabled="o.disabled ? o.disabled(scope.row) : false" :accept="o.accept
                  ? o.accept
                  : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'
                  " v-if="o.type == 'upload' && o.url" style="display: inline-block; width: 50px"
                v-show="o.showHide ? o.showHide(scope.row) : true" :headers="uploadHeader" :on-error="onError"
                :data="o.data ? o.data(scope.row) : {}"
                :before-upload="o.beforeUpload ? o.beforeUpload(scope.row) : () => true"
                :on-exceed="onExceed" :on-success="handleSuccessUp" :show-file-list="false" :key="key">
                <el-button :size="o.size ? o.size : 'small'" type="text"
                  :disabled="o.disabled ? o.disabled(scope.row) : false">{{ o.name }}</el-button>
                :headers="uploadHeader"
                :on-error="onError"
                :on-exceed="onExceed"
                :on-success="handleSuccessUp"
                :show-file-list="false"
                :key="key"
              >
                <el-button
                  :size="o.size ? o.size : 'small'"
                  type="text"
                  :disabled="o.disabled ? o.disabled(scope.row) : false"
                  >{{ o.name }}</el-button
                >
              </el-upload>
              <el-upload action="#" :on-change="(file, fileList) => o.clickFun(scope.row, file, fileList)
                " :multiple="o.multiple ? o.multiple : false" :limit="o.limit ? o.limit : 1"
                :disabled="o.disabled ? o.disabled(scope.row) : false" :accept="o.accept
                  ? o.accept
                  : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'
                  " v-if="o.type == 'upload' && !o.url" style="display: inline-block; width: 50px"
                v-show="o.showHide ? o.showHide(scope.row) : true" :auto-upload="false" :on-exceed="onExceed"
                :show-file-list="false" :key="key">
                <el-button :size="o.size ? o.size : 'small'" type="text"
                  :disabled="o.disabled ? o.disabled(scope.row) : false">{{ o.name }}</el-button>
              <el-upload
                action="#"
                :on-change="
                  (file, fileList) => o.clickFun(scope.row, file, fileList)
                "
                :multiple="o.multiple ? o.multiple : false"
                :limit="o.limit ? o.limit : 1"
                :disabled="o.disabled ? o.disabled(scope.row) : false"
                :accept="
                  o.accept
                    ? o.accept
                    : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'
                "
                v-if="o.type == 'upload' && !o.url"
                style="display: inline-block; width: 50px"
                v-show="o.showHide ? o.showHide(scope.row) : true"
                :auto-upload="false"
                :on-exceed="onExceed"
                :show-file-list="false"
                :key="key"
              >
                <el-button
                  :size="o.size ? o.size : 'small'"
                  type="text"
                  :disabled="o.disabled ? o.disabled(scope.row) : false"
                  >{{ o.name }}</el-button
                >
              </el-upload>
            </template>
          </div>
          <!-- å¯ç‚¹å‡»çš„文字 -->
          <div v-else-if="item.dataType == 'link'" class="cell link" style="width: 100%"
            @click="goLink(scope.row, item.linkMethod)">
            <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
          <div
            v-else-if="item.dataType == 'link'"
            class="cell"
            style="width: 100%"
            @click="goLink(scope.row, item.linkEvent)"
          >
            <span class="link" v-if="!item.formatData">
              {{ scope.row[item.prop] }}
            </span>
          </div>
          <!-- é»˜è®¤çº¯å±•ç¤ºæ•°æ® -->
          <div v-else class="cell" style="width: 100%">
@@ -125,8 +234,16 @@
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="page" v-show="page.total > 0" :total="page.total" :layout="page.layout" :page.sync="page.current"
      :limit.sync="page.size" @pagination="pagination" style="background-color: #fff;" />
    <pagination
      v-if="page"
      v-show="page.total > 0"
      :total="page.total"
      :layout="page.layout"
      :page.sync="page.current"
      :limit.sync="page.size"
      @pagination="pagination"
      style="background-color: #fff"
    />
  </div>
</template>

@@ -184,7 +301,6 @@
  name: "ZTTable",
  filters: {
    typeFn(val, row) {
      // console.log(val, row, '11111111');
      if (typeof val === "function") {
        return val(row);
      } else return val;
@@ -216,19 +332,19 @@
    handleSelectionChange: {
      type: Function,
      default: () => {
        return () => { };
        return () => {};
      },
    },
    rowClick: {
      type: Function,
      default: () => {
        return () => { };
        return () => {};
      },
    },
    currentChange: {
      type: Function,
      default: () => {
        return () => { };
        return () => {};
      },
    },
    border: {
@@ -236,6 +352,10 @@
      default: true,
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
    stripe: {
      type: Boolean,
      default: false,
    },
@@ -253,7 +373,7 @@
    },
    rowClassName: {
      type: Function,
      default: () => { },
      default: () => {},
    },
    rowStyle: {
      type: Function,
@@ -356,11 +476,11 @@
      return (this.page.current - 1) * this.page.size + index + 1;
    },
    // ç‚¹å‡»å•å…ƒæ ¼link事件
    goLink(row, linkMethod) {
      if (!linkMethod) {
    goLink(row, linkEvent) {
      if (!linkEvent) {
        return this.$message.warning("请配置lingk事件");
      }
      this.$parent[linkMethod](row);
      linkEvent.vueComponent[linkEvent.method](row);
    },
    // åˆå¹¶å•å…ƒæ ¼
    calculateSpanInfo() {
@@ -449,11 +569,11 @@
</script>

<style scoped>
.el-table>>>.el-table__empty-text {
.el-table >>> .el-table__empty-text {
  text-align: center;
}

>>>.cell {
>>> .cell {
  padding: 0 !important;
}

@@ -470,7 +590,7 @@
  cursor: pointer;
}

>>>.el-table__body-wrapper::-webkit-scrollbar {
>>> .el-table__body-wrapper::-webkit-scrollbar {
  height: 14px;
  /* è®¾ç½®æ»šåŠ¨æ¡å®½åº¦ */
}

 src/components/Table/value-table.vue

@@ -152,8 +152,8 @@
            <!-- å¯æ“ä½œè¡Œè¿›è¡Œç‚¹å‡»äº‹ä»¶ -->
            <span v-else-if="data.linkEvent && showLink(a.label, data.linkEvent)" style="color:#409EFF;cursor: pointer;"
              @click="handleLinkEvent(scope.row, data.linkEvent[a.label])">{{ scope.row[a.label] }}</span>
            <img v-else-if="showUpload(a.label) && scope.row[a.label]" :src="javaApi + '/img/' + scope.row[a.label]" alt=""
              style="width: 40px;height: 40px;margin-top: 10px;">
            <img v-else-if="showUpload(a.label) && scope.row[a.label]" :src="javaApi + '/img/' + scope.row[a.label]"
              alt="" style="width: 40px;height: 40px;margin-top: 10px;">
            <span v-else :class="{ red: getRedColor(a.label, scope.row) }">{{ scope.row[a.label] }}</span>
          </template>
        </el-table-column>
@@ -165,8 +165,9 @@
              <span v-if="a.type != 'upload'">{{ a.font }}</span>
              <el-upload v-else ref='upload' :accept='a.uploadConfig.accept'
                :action="javaApi + a.uploadConfig.url + '?id=' + (a.uploadConfig.uploadIdFun ? a.uploadConfig.uploadIdFun(scope.row) : scope.row.id)"
                :disabled="a.disabled ? a.disabled(scope.row, scope.$index) : false" :headers="token" :on-error="onError"
                :on-success="handleSuccessUp" :show-file-list="false" name="file" style="background: transparent;">
                :disabled="a.disabled ? a.disabled(scope.row, scope.$index) : false" :headers="uploadHeader"
                :on-error="onError" :on-success="handleSuccessUp" :show-file-list="false" name="file"
                style="background: transparent;">
                <span>{{ a.font }}</span>
              </el-upload>
            </el-button>
@@ -189,7 +190,8 @@
              <span v-if="showUpReq(a.label)" class="required-span">* </span>{{ a.value }}：
            </el-col>
            <el-col :span="16 / data.row">
              <el-input v-if="showType(a.label, data.selectField) == null && !showUpload(a.label) && !showCascader(a.label)"
              <el-input
                v-if="showType(a.label, data.selectField) == null && !showUpload(a.label) && !showCascader(a.label)"
                v-model="upData[a.label]" :disabled="isDisabled(a.label)" :placeholder="`请输入${a.value}`" clearable
                size="small"></el-input>
              <el-select v-if="showType(a.label, data.selectField) != null" v-model="upData[a.label]"
@@ -201,8 +203,9 @@
                </el-option>
              </el-select>
              <el-upload v-if="showUpload(a.label)" ref='upload' :accept='data.addUploadConfig.accept'
                :action="javaApi + data.addUploadConfig.url" :headers="token" :multiple="false" :on-error="onError"
                :on-success="m => handleSuccessUp(m, a.label)" :show-file-list="false" class="avatar-uploader" name="file"
                :action="javaApi + data.addUploadConfig.url" :headers="uploadHeader" :multiple="false"
                :on-error="onError" :on-success="m => handleSuccessUp(m, a.label)" :show-file-list="false"
                class="avatar-uploader" name="file"
                style="background: transparent;width: 80px;height: 80px;border: 1px solid #DCDFE6;border-radius: 6px;margin: 10px 0;">
                <img v-if="upData[a.label]" :src="javaApi + '/img/' + upData[a.label]" class="avatar"
                  style="width: 80px;height: 80px;border-radius: 6px;">
@@ -221,7 +224,8 @@
              <span v-if="showUpReq(a.label)" class="required-span">* </span>{{ a.value }}：
            </el-col>
            <el-col :offset="1" :span="16">
              <el-input v-if="showType(a.label, data.selectField) == null && !showUpload(a.label) && !showCascader(a.label)"
              <el-input
                v-if="showType(a.label, data.selectField) == null && !showUpload(a.label) && !showCascader(a.label)"
                v-model="upData[a.label]" :disabled="isDisabled(a.label)" :placeholder="`请输入${a.value}`" clearable
                size="small"></el-input>
              <el-select v-if="showType(a.label, data.selectField) != null" v-model="upData[a.label]"
@@ -231,8 +235,9 @@
                  :value="b.value"></el-option>
              </el-select>
              <el-upload v-if="showUpload(a.label)" ref='upload' :accept='data.addUploadConfig.accept'
                :action="javaApi + data.addUploadConfig.url" :headers="token" :multiple="false" :on-error="onError"
                :on-success="m => handleSuccessUp(m, a.label)" :show-file-list="false" class="avatar-uploader" name="file"
                :action="javaApi + data.addUploadConfig.url" :headers="uploadHeader" :multiple="false"
                :on-error="onError" :on-success="m => handleSuccessUp(m, a.label)" :show-file-list="false"
                class="avatar-uploader" name="file"
                style="background: transparent;width: 80px;height: 80px;border: 1px solid #DCDFE6;border-radius: 6px;margin: 10px 0;">
                <img v-if="upData[a.label]" :src="javaApi + '/img/' + upData[a.label]" class="avatar"
                  style="width: 80px;height: 80px;border-radius: 6px;">
@@ -260,7 +265,8 @@
                class="required-span">*
              </span>{{ a.value }}：</el-col>
            <el-col :span="16 / data.row">
              <el-input v-if="showType(a.label, data.selectField) == null && !showUpload(a.label) && !showCascader(a.label)"
              <el-input
                v-if="showType(a.label, data.selectField) == null && !showUpload(a.label) && !showCascader(a.label)"
                v-model="upData[a.label]" :placeholder="`请输入${a.value}`" clearable size="small"></el-input>
              <el-select v-if="showType(a.label, data.selectField) != null" v-model="upData[a.label]"
                :multiple="data.selectField[a.label].choose" :placeholder="`请选择${a.value}`" clearable filterable
@@ -269,8 +275,9 @@
                  :value="b.value"></el-option>
              </el-select>
              <el-upload v-if="showUpload(a.label)" ref='upload' :accept='data.addUploadConfig.accept'
                :action="javaApi + data.addUploadConfig.url" :headers="token" :multiple="false" :on-error="onError"
                :on-success="m => handleSuccessUp(m, a.label)" :show-file-list="false" class="avatar-uploader" name="file"
                :action="javaApi + data.addUploadConfig.url" :headers="uploadHeader" :multiple="false"
                :on-error="onError" :on-success="m => handleSuccessUp(m, a.label)" :show-file-list="false"
                class="avatar-uploader" name="file"
                style="background: transparent;width: 80px;height: 80px;border: 1px solid #DCDFE6;border-radius: 6px;margin: 10px 0;">
                <img v-if="upData[a.label]" :src="javaApi + '/img/' + upData[a.label]" class="avatar"
                  style="width: 80px;height: 80px;border-radius: 6px;">
@@ -287,7 +294,8 @@
            <el-col :span="6" style="text-align: right;"><span v-if="showAddReq(a.label)" class="required-span">*
              </span>{{ a.value }}：</el-col>
            <el-col :offset="1" :span="16">
              <el-input v-if="showType(a.label, data.selectField) == null && !showUpload(a.label) && !showCascader(a.label)"
              <el-input
                v-if="showType(a.label, data.selectField) == null && !showUpload(a.label) && !showCascader(a.label)"
                v-model="upData[a.label]" :placeholder="`请输入${a.value}`" clearable size="small"></el-input>
              <el-select v-if="showType(a.label, data.selectField) != null" v-model="upData[a.label]"
                :multiple="data.selectField[a.label].choose" :placeholder="`请选择${a.value}`" clearable size="small"
@@ -296,8 +304,9 @@
                  :value="b.value"></el-option>
              </el-select>
              <el-upload v-if="showUpload(a.label)" ref='upload' :accept='data.addUploadConfig.accept'
                :action="javaApi + data.addUploadConfig.url" :headers="token" :multiple="false" :on-error="onError"
                :on-success="m => handleSuccessUp(m, a.label)" :show-file-list="false" class="avatar-uploader" name="file"
                :action="javaApi + data.addUploadConfig.url" :headers="uploadHeader" :multiple="false"
                :on-error="onError" :on-success="m => handleSuccessUp(m, a.label)" :show-file-list="false"
                class="avatar-uploader" name="file"
                style="background: transparent;width: 80px;height: 80px;border: 1px solid #DCDFE6;border-radius: 6px;margin: 10px 0;">
                <img v-if="upData[a.label]" :src="javaApi + '/img/' + upData[a.label]" class="avatar"
                  style="width: 80px;height: 80px;border-radius: 6px;">
@@ -328,8 +337,8 @@
    <el-dialog :visible.sync="uploadDia" title="数据导入" width="500px">
      <div style="margin: 0 auto;">
        <el-upload ref="upload" :accept="data.accept === undefined ? '.csv' : data.accept" :action="javaApi + inputUrl"
          :auto-upload="false" :data="{ param: data.uploadStr }" :file-list="fileList" :headers="token" :limit="1"
          :on-change="beforeUpload" :on-error="onError" :on-success="onSuccess" drag name="file">
          :auto-upload="false" :data="{ param: data.uploadStr }" :file-list="fileList" :headers="uploadHeader"
          :limit="1" :on-change="beforeUpload" :on-error="onError" :on-success="onSuccess" drag name="file">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>

 src/components/materialOrder/filesLookVisible.vue

@@ -3,26 +3,20 @@
    <el-dialog title="附件查看" :visible.sync="isShow" width="80%" @closed="$emit('closeFilesLook')">
      <div style="display: flex;justify-content: space-between;">
        <ul class="tab">
          <li v-for="(m,i) in dataVisibleTitle" :key="i" :class="{active:i===dataVisibleIndex}" @click="handleDataVisibleTab(m,i)">{{m.label}}</li>
          <li v-for="(m, i) in dataVisibleTitle" :key="i" :class="{ active: i === dataVisibleIndex }"
            @click="handleDataVisibleTab(m, i)">{{ m.label }}</li>
        </ul>
        <el-upload :action="action"
                   :auto-upload="true"
                   :data="{orderId: dataVisibleIndex === 0 ? filesLookInfo.enterOrderId : filesLookInfo.quarterOrderId}"
                   :on-success="handleSuccessUp" :show-file-list="false"
                   accept='.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar' :headers="headers"
                   :before-upload="beforeUpload"
                   style="width: 80px !important;"
                   :on-error="onError" ref='upload'>
        <el-upload :action="action" :auto-upload="true"
          :data="{ orderId: dataVisibleIndex === 0 ? filesLookInfo.enterOrderId : filesLookInfo.quarterOrderId }"
          :on-success="handleSuccessUp" :show-file-list="false"
          accept='.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar' :headers="uploadHeader"
          :before-upload="beforeUpload" style="width: 80px !important;" :on-error="onError" ref='upload'>
          <el-button size="small" type="primary" style="height: 38px">附件上传</el-button>
        </el-upload>
      </div>
      <div style="height: 70vh;overflow-y: auto;" v-if="filesDialogVisible">
        <ValueTable ref="fileList"
                    :url="$api.insOrderPlan.getFileList"
                    :delUrl="$api.insOrderPlan.delfile"
                    class="value-table"
                    :key="upIndex"
                    :componentData="componentData"/>
        <ValueTable ref="fileList" :url="$api.insOrderPlan.getFileList" :delUrl="$api.insOrderPlan.delfile"
          class="value-table" :key="upIndex" :componentData="componentData" />
      </div>
    </el-dialog>
  </div>
@@ -35,7 +29,7 @@
export default {
  name: "filesLookVisible",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {ValueTable},
  components: { ValueTable },
  props: {
    filesDialogVisible: {
      type: Boolean,
@@ -43,7 +37,7 @@
    },
    filesLookInfo: {
      type: Object,
      default: () => {}
      default: () => { }
    },
  },
  data() {
@@ -64,20 +58,20 @@
      dataVisibleIndex: 0, // tab栏选择值
      componentData: {
        entity: {
          insOrderId:''
          insOrderId: ''
        },
        isIndex: true,
        showSelect: false,
        select: false,
        sort: false,
        init:false,
        init: false,
        do: [
          {
            id: 'parent',
            font: '下载',
            type: 'text',
            method: 'handleDown'
          },{
          }, {
            id: 'delete',
            font: '删除',
            type: 'text',
@@ -87,8 +81,8 @@
        isPage: false,
        linkEvent: {},
        tagField: {
          type:{
            select:[
          type: {
            select: [
              {
                value: 1,
                label: '图片'
@@ -114,7 +108,7 @@
  // æ–¹æ³•é›†åˆ
  methods: {
    // åˆ‡æ¢æ•°æ®æŸ¥çœ‹tab栏
    handleDataVisibleTab (m, i) {
    handleDataVisibleTab(m, i) {
      this.dataVisibleIndex = i
      this.refreshTable()
    },
@@ -129,17 +123,17 @@
        this.$refs['fileList'].selectList(e)
      })
    },
    handleDown(row){
    handleDown(row) {
      this.$axios.post(this.$api.insOrderPlan.downFile, {
        id: row.id,
      }).then(res => {
        if (res.code === 200) {
          let url = '';
          if(res.data.type==1){
            url = this.javaApi+'/img/'+res.data.fileUrl
            file.downloadIamge(url,row.fileName)
          }else{
            url = this.javaApi+'/word/'+res.data.fileUrl
          if (res.data.type == 1) {
            url = this.javaApi + '/img/' + res.data.fileUrl
            file.downloadIamge(url, row.fileName)
          } else {
            url = this.javaApi + '/word/' + res.data.fileUrl
            const link = document.createElement('a');
            link.href = url;
            link.download = row.fileName;
@@ -150,7 +144,7 @@

      })
    },
    handleSuccessUp(response, ) {
    handleSuccessUp(response,) {
      this.upLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功');

 src/layout/components/Navbar.vue

@@ -10,7 +10,8 @@
    </div>
    <div class="right-menu">
      <div class="avatar-wrapper">
        <img :src="avatar" class="user-avatar" />
        <!-- <img :src="avatar" class="user-avatar" /> -->
        <el-avatar :size="28">{{ nickName.substring(0, 1) }}</el-avatar>
        <span class="userName">{{ nickName }}</span>
        <img
          class="logoout"

 src/layout/components/TagsView/index.vue

@@ -1,245 +1,278 @@
<template>
  <div id="tags-view-container" class="tags-view-container">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
      <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    <scroll-pane
      ref="scrollPane"
      class="tags-view-wrapper"
      @scroll="handleScroll"
    >
      <hamburger
        id="hamburger-container"
        :is-active="sidebar.opened"
        class="hamburger-container"
        @toggleClick="toggleSideBar"
      />
      <router-link
        v-for="tag in visitedViews"
        ref="tag"
        :key="tag.path"
        :class="isActive(tag)?'active':''"
        :class="isActive(tag) ? 'active' : ''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        tag="span"
        class="tags-view-item"
        :style="activeStyle(tag)"
        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
        @contextmenu.prevent.native="openMenu(tag,$event)"
        @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
        @contextmenu.prevent.native="openMenu(tag, $event)"
      >
        {{ tag.title }}
        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
        <span
          v-if="!isAffix(tag)"
          class="el-icon-close"
          @click.prevent.stop="closeSelectedTag(tag)"
        />
      </router-link>
    </scroll-pane>
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> åˆ·æ–°é¡µé¢</li>
      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> å…³é—­å½“前</li>
      <li @click="closeOthersTags"><i class="el-icon-circle-close"></i> å…³é—­å…¶ä»–</li>
      <li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> å…³é—­å·¦ä¾§</li>
      <li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> å…³é—­å³ä¾§</li>
      <li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> å…¨éƒ¨å…³é—­</li>
    <ul
      v-show="visible"
      :style="{ left: left + 'px', top: top + 'px' }"
      class="contextmenu"
    >
      <li @click="refreshSelectedTag(selectedTag)">
        <i class="el-icon-refresh-right"></i> åˆ·æ–°é¡µé¢
      </li>
      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
        <i class="el-icon-close"></i> å…³é—­å½“前
      </li>
      <li @click="closeOthersTags">
        <i class="el-icon-circle-close"></i> å…³é—­å…¶ä»–
      </li>
      <li v-if="!isFirstView()" @click="closeLeftTags">
        <i class="el-icon-back"></i> å…³é—­å·¦ä¾§
      </li>
      <li v-if="!isLastView()" @click="closeRightTags">
        <i class="el-icon-right"></i> å…³é—­å³ä¾§
      </li>
      <li @click="closeAllTags(selectedTag)">
        <i class="el-icon-circle-close"></i> å…¨éƒ¨å…³é—­
      </li>
    </ul>
  </div>
</template>

<script>
import ScrollPane from './ScrollPane'
import path from 'path'
import ScrollPane from "./ScrollPane";
import path from "path";
import Hamburger from "@/components/Hamburger/index.vue";
import {mapGetters} from "vuex";
import { mapGetters } from "vuex";

export default {
  components: {Hamburger, ScrollPane },
  components: { Hamburger, ScrollPane },
  data() {
    return {
      visible: false,
      top: 0,
      left: 0,
      selectedTag: {},
      affixTags: []
    }
      affixTags: [],
    };
  },
  computed: {
    ...mapGetters([
      'sidebar',
    ]),
    ...mapGetters(["sidebar"]),
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
      return this.$store.state.tagsView.visitedViews;
    },
    routes() {
      return this.$store.state.permission.routes
      return this.$store.state.permission.routes;
    },
    theme() {
      return this.$store.state.settings.theme;
    }
    },
  },
  watch: {
    $route() {
      this.addTags()
      this.moveToCurrentTag()
      this.addTags();
      this.moveToCurrentTag();
    },
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener('click', this.closeMenu)
        document.body.removeEventListener("click", this.closeMenu);
      }
    }
    },
  },
  mounted() {
    this.initTags()
    this.addTags()
    this.initTags();
    this.addTags();
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
      this.$store.dispatch("app/toggleSideBar");
    },
    isActive(route) {
      return route.path === this.$route.path
      return route.path === this.$route.path;
    },
    activeStyle(tag) {
      if (!this.isActive(tag)) return {};
      return {
        "background-color": this.theme,
        "border-color": this.theme
        "border-color": this.theme,
      };
    },
    isAffix(tag) {
      return tag.meta && tag.meta.affix
      return tag.meta && tag.meta.affix;
    },
    isFirstView() {
      try {
        return this.selectedTag.fullPath === '/index' || this.selectedTag.fullPath === this.visitedViews[1].fullPath
        return (
          this.selectedTag.fullPath === "/index" ||
          this.selectedTag.fullPath === this.visitedViews[1].fullPath
        );
      } catch (err) {
        return false
        return false;
      }
    },
    isLastView() {
      try {
        return this.selectedTag.fullPath === this.visitedViews[this.visitedViews.length - 1].fullPath
        return (
          this.selectedTag.fullPath ===
          this.visitedViews[this.visitedViews.length - 1].fullPath
        );
      } catch (err) {
        return false
        return false;
      }
    },
    filterAffixTags(routes, basePath = '/') {
      let tags = []
      routes.forEach(route => {
    filterAffixTags(routes, basePath = "/") {
      let tags = [];
      routes.forEach((route) => {
        if (route.meta && route.meta.affix) {
          const tagPath = path.resolve(basePath, route.path)
          const tagPath = path.resolve(basePath, route.path);
          tags.push({
            fullPath: tagPath,
            path: tagPath,
            name: route.name,
            meta: { ...route.meta }
          })
            meta: { ...route.meta },
          });
        }
        if (route.children) {
          const tempTags = this.filterAffixTags(route.children, route.path)
          const tempTags = this.filterAffixTags(route.children, route.path);
          if (tempTags.length >= 1) {
            tags = [...tags, ...tempTags]
            tags = [...tags, ...tempTags];
          }
        }
      })
      return tags
      });
      return tags;
    },
    initTags() {
      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
      const affixTags = (this.affixTags = this.filterAffixTags(this.routes));
      for (const tag of affixTags) {
        // Must have tag name
        if (tag.name) {
          this.$store.dispatch('tagsView/addVisitedView', tag)
          this.$store.dispatch("tagsView/addVisitedView", tag);
        }
      }
    },
    addTags() {
      const { name } = this.$route
      const { name } = this.$route;
      if (name) {
        this.$store.dispatch('tagsView/addView', this.$route)
        this.$store.dispatch("tagsView/addView", this.$route);
      }
    },
    moveToCurrentTag() {
      const tags = this.$refs.tag
      const tags = this.$refs.tag;
      this.$nextTick(() => {
        for (const tag of tags) {
          if (tag.to.path === this.$route.path) {
            this.$refs.scrollPane.moveToTarget(tag)
            this.$refs.scrollPane.moveToTarget(tag);
            // when query is different then update
            if (tag.to.fullPath !== this.$route.fullPath) {
              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
              this.$store.dispatch("tagsView/updateVisitedView", this.$route);
            }
            break
            break;
          }
        }
      })
      });
    },
    refreshSelectedTag(view) {
      this.$tab.refreshPage(view);
      if (this.$route.meta.link) {
        this.$store.dispatch('tagsView/delIframeView', this.$route)
        this.$store.dispatch("tagsView/delIframeView", this.$route);
      }
    },
    closeSelectedTag(view) {
      this.$tab.closePage(view).then(({ visitedViews }) => {
        if (this.isActive(view)) {
          this.toLastView(visitedViews, view)
          this.toLastView(visitedViews, view);
        }
      })
      });
    },
    closeRightTags() {
      this.$tab.closeRightPage(this.selectedTag).then(visitedViews => {
        if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) {
          this.toLastView(visitedViews)
      this.$tab.closeRightPage(this.selectedTag).then((visitedViews) => {
        if (!visitedViews.find((i) => i.fullPath === this.$route.fullPath)) {
          this.toLastView(visitedViews);
        }
      })
      });
    },
    closeLeftTags() {
      this.$tab.closeLeftPage(this.selectedTag).then(visitedViews => {
        if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) {
          this.toLastView(visitedViews)
      this.$tab.closeLeftPage(this.selectedTag).then((visitedViews) => {
        if (!visitedViews.find((i) => i.fullPath === this.$route.fullPath)) {
          this.toLastView(visitedViews);
        }
      })
      });
    },
    closeOthersTags() {
      this.$router.push(this.selectedTag.fullPath).catch(()=>{});
      this.$router.push(this.selectedTag.fullPath).catch(() => {});
      this.$tab.closeOtherPage(this.selectedTag).then(() => {
        this.moveToCurrentTag()
      })
        this.moveToCurrentTag();
      });
    },
    closeAllTags(view) {
      this.$tab.closeAllPage().then(({ visitedViews }) => {
        if (this.affixTags.some(tag => tag.path === this.$route.path)) {
          return
        if (this.affixTags.some((tag) => tag.path === this.$route.path)) {
          return;
        }
        this.toLastView(visitedViews, view)
      })
        this.toLastView(visitedViews, view);
      });
    },
    toLastView(visitedViews, view) {
      const latestView = visitedViews.slice(-1)[0]
      const latestView = visitedViews.slice(-1)[0];
      if (latestView) {
        this.$router.push(latestView.fullPath)
        this.$router.push(latestView.fullPath);
      } else {
        // now the default is to redirect to the home page if there is no tags-view,
        // you can adjust it according to your needs.
        if (view.name === 'Dashboard') {
        if (view.name === "Dashboard") {
          // to reload home page
          this.$router.replace({ path: '/redirect' + view.fullPath })
          this.$router.replace({ path: "/redirect" + view.fullPath });
        } else {
          this.$router.push('/')
          this.$router.push("/");
        }
      }
    },
    openMenu(tag, e) {
      const menuMinWidth = 105
      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
      const offsetWidth = this.$el.offsetWidth // container width
      const maxLeft = offsetWidth - menuMinWidth // left boundary
      const left = e.clientX - offsetLeft + 15 // 15: margin right
      const menuMinWidth = 105;
      const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
      const offsetWidth = this.$el.offsetWidth; // container width
      const maxLeft = offsetWidth - menuMinWidth; // left boundary
      const left = e.clientX - offsetLeft + 15; // 15: margin right

      if (left > maxLeft) {
        this.left = maxLeft
        this.left = maxLeft;
      } else {
        this.left = left
        this.left = left;
      }

      this.top = e.clientY
      this.visible = true
      this.selectedTag = tag
      this.top = e.clientY;
      this.visible = true;
      this.selectedTag = tag;
    },
    closeMenu() {
      this.visible = false
      this.visible = false;
    },
    handleScroll() {
      this.closeMenu()
    }
  }
}
      this.closeMenu();
    },
  },
};
</script>

<style lang="scss" scoped>
@@ -251,19 +284,19 @@
  z-index: 1000; /* ç¡®ä¿å¤´éƒ¨åœ¨å…¶ä»–内容之上 */
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  .tags-view-wrapper {
    .hamburger-container {
      display: inline-block;
      line-height: 46px;
      height: 100%;
      cursor: pointer;
      transition: background .3s;
      -webkit-tap-highlight-color:transparent;
      transition: background 0.3s;
      -webkit-tap-highlight-color: transparent;
      padding: 0 10px !important;

      &:hover {
        background: rgba(0, 0, 0, .025)
        background: rgba(0, 0, 0, 0.025);
      }
    }
    .tags-view-item {
@@ -290,7 +323,7 @@
        color: #fff;
        border-color: #42b983;
        &::before {
          content: '';
          content: "";
          background: #fff;
          display: inline-block;
          width: 8px;
@@ -303,7 +336,7 @@
    }
  }
  .contextmenu {
    margin: 0;
    margin: -20px;
    background: #fff;
    z-index: 3000;
    position: absolute;
@@ -313,7 +346,7 @@
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    li {
      margin: 0;
      padding: 7px 16px;
@@ -336,10 +369,10 @@
      vertical-align: 2px;
      border-radius: 50%;
      text-align: center;
      transition: all .3s cubic-bezier(.645, .045, .355, 1);
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: 100% 50%;
      &:before {
        transform: scale(.6);
        transform: scale(0.6);
        display: inline-block;
        vertical-align: -3px;
      }

 src/plugins/download.js

@@ -4,6 +4,7 @@
import { getToken } from "@/utils/auth";
import errorCode from "@/utils/errorCode";
import { blobValidate } from "@/utils/ruoyi";
import Vue from "vue";

const baseURL = process.env.VUE_APP_BASE_API;
let downloadLoadingInstance;
@@ -99,7 +100,7 @@
        // å°†æ–‡ä»¶è½¬æ¢ä¸º Blob
        const blob = await response.blob();
        // ä½¿ç”¨ saveAs ä¿å­˜æ–‡ä»¶
        saveAs(blob, filename);
        saveAs(blob, name);
        Message.success("数据导出成功");
      } catch (error) {
        Message.error(error);

 src/router/index.js

@@ -100,11 +100,18 @@
    permissions: ['business:order'],
    children: [
      {
        // é“œææ–™ä¸‹å•
        // æ–°å¢žå§”托单页面
        path: 'addOrder',
        component: () => import('@/views/business/inspectionOrder/add'),
        name: 'addOrder',
        meta: { title: '新增委托单', activeMenu: '/business/inspectionOrder' }
      },
      {
        // æŸ¥çœ‹å§”托单详情页面
        path: 'showDetails',
        component: () => import('@/views/business/inspectionOrder/add'),
        name: 'showDetails',
        meta: { title: '委托单详情', activeMenu: '/business/inspectionOrder' }
      }
    ]
  },

 src/store/getters.js

@@ -9,6 +9,8 @@
  avatar: (state) => state.user.avatar,
  name: (state) => state.user.name,
  nickName: (state) => state.user.nickName,
  companyName: (state) => state.user.companyName,
  loginUserInfo: (state) => state.user.loginUserInfo,
  userId: (state) => state.user.id,
  introduction: (state) => state.user.introduction,
  roles: (state) => state.user.roles,

 src/store/modules/user.js

@@ -11,6 +11,8 @@
    name: "",
    avatar: "",
    nickName: "",
    companyName: "",
    loginUserInfo: {},
    roles: [],
    permissions: [],
  },
@@ -30,6 +32,12 @@
    },
    SET_NICKNAME: (state, nickName) => {
      state.nickName = nickName;
    },
    SET_COMPANYNAME: (state, companyName) => {
      state.companyName = companyName;
    },
    SET_LOGINUSERINFO: (state, loginUserInfo) => {
      state.loginUserInfo = loginUserInfo;
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles;
@@ -67,7 +75,6 @@
      return new Promise((resolve, reject) => {
        getInfo()
          .then((res) => {
            console.log("store-->",res);
            const user = res.user;
            let avatar = user.avatar || "";
            if (!isHttp(avatar)) {
@@ -82,10 +89,12 @@
            } else {
              commit("SET_ROLES", ["ROLE_DEFAULT"]);
            }
            commit("SET_LOGINUSERINFO", user);
            commit("SET_ID", user.userId);
            commit("SET_NAME", user.userName);
            commit("SET_AVATAR", avatar);
            commit("SET_NICKNAME", user.nickName);
            commit("SET_COMPANYNAME", user.companyName);
            resolve(res);
          })
          .catch((error) => {

 src/utils/echarts.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,353 @@
import * as echarts from "echarts";

const iuCharts = {
  drawBar: function (chart, params) {
    var color = ["#4379EE", "#FEC53D", "#65789B", "#F6BD16"];
    let series = params.yData.map((m, i) => {
      let obj = {
        name: m.title,
        type: "bar",
        barWidth: "16%",
        barGap: "30%",
        itemStyle: {
          normal: {
            color: color[i],
            barBorderRadius: [50, 50, 0, 0],
          },
        },
        data: m.data,
      };
      return obj;
    });
    var option = {
      backgroundColor: "#fff",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          lineStyle: {
            color: "#4379EE",
          },
        },
      },
      grid: {
        top: "25px",
        left: "40px",
        right: "3%",
        bottom: "40px",
        // containLabel: true
      },
      legend: {
        show: true,
        orient: "horizontal",
        y: -2,
        right: 15,
        itemWidth: 12,
        itemHeight: 12,
        itemGap: 24,
        textStyle: {
          color: "rgba(43,48,52)",
          fontSize: "14px",
        },
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "rgba(43,48,52, 0.4)",
            margin: 20,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          boundaryGap: false,
          data: params.xData,
        },
      ],
      yAxis: [
        {
          minInterval: 1,
          type: "value",
          min: 0,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(43,48,52, 0.1)",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "rgba(43,48,52, 0.4)",
            margin: 20,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: series,
    };
    chart.setOption(option);
  },
  drawLine: function (chart, params) {
    let series = [];
    params.yData.forEach((m) => {
      series.push({
        name: m.title,
        type: "line",
        showAllSymbol: true,
        symbol: "circle",
        symbolSize: 10,
        lineStyle: {
          normal: {
            color: "#4379EE",
            width: 3,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(67,121,238,0.3)",
                },
                {
                  offset: 1,
                  color: "rgba(67,121,238,0)",
                },
              ],
              false
            ),
          },
        },
        data: m.data,
      });
    });
    let option = {
      backgroundColor: "#fff",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          lineStyle: {
            color: "#4379EE",
          },
        },
      },
      grid: {
        top: "25px",
        left: "40px",
        right: "3%",
        bottom: "40px",
        // containLabel: true
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "rgba(43,48,52, 0.4)",
            margin: 20,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          boundaryGap: false,
          data: params.xData,
        },
      ],
      yAxis: [
        {
          minInterval: 1,
          type: "value",
          min: 0,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(43,48,52, 0.1)",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "rgba(43,48,52, 0.4)",
            margin: 20,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: series,
    };
    chart.setOption(option);
  },
  drawPie: function (chart, params) {
    let option = {
      color: params.color,
      backgroundColor: "#fff",
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c}",
      },
      title: {
        text: params.percentage,
        textStyle: {
          color: "#4379EE",
          fontSize: 14,
          align: "center",
          fontWeight: "normal",
        },
        x: "center",
        y: "center",
      },
      grid: {
        top: 20,
        bottom: 20,
        left: 0,
        right: 0,
      },
      legend: {
        show: false,
      },
      series: [
        // ä¸»è¦å±•ç¤ºå±‚çš„
        {
          radius: ["55%", "90%"],
          center: ["50%", "50%"],
          type: "pie",
          label: {
            show: false,
          },
          name: params.title,
          data: params.data,
        },
        // è¾¹æ¡†çš„设置
        {
          radius: ["55%", "65%"],
          center: ["50%", "50%"],
          type: "pie",
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          animation: false,
          tooltip: {
            show: false,
          },
          data: [
            {
              value: 1,
              itemStyle: {
                color: "rgba(250,250,250,0.3)",
              },
            },
          ],
        },
      ],
    };
    chart.setOption(option);
  },
  drawGauge: function (chart, params) {
    let option = {
      tooltip: {
        formatter: "{a} <br/>{b} : {c}%",
      },
      toolbox: {
        feature: {
          restore: {},
          saveAsImage: {},
        },
      },
      series: [
        {
          type: "gauge",
          axisLine: {
            lineStyle: {
              width: 28,
              color: [
                [0.3, "#67e0e3"],
                [0.7, "#37a2da"],
                [1, "#fd666d"],
              ],
            },
          },
          pointer: {
            itemStyle: {
              color: "auto",
            },
          },
          axisTick: {
            distance: -28,
            length: 8,
            lineStyle: {
              color: "#fff",
              width: 2,
            },
          },
          splitLine: {
            distance: -28,
            length: 28,
            lineStyle: {
              color: "#fff",
              width: 4,
            },
          },
          axisLabel: {
            color: "inherit",
            distance: 40,
            fontSize: 14,
          },
          detail: {
            valueAnimation: true,
            formatter: "{value} %",
            color: "inherit",
            textStyle: {
              fontSize: 30,
              align: "center",
            },
          },
          data: [
            {
              value: 70,
            },
          ],
        },
      ],
    };
    chart.setOption(option, true);
  },
};

export { iuCharts };

 src/views/CNAS/personnel/personalOverview/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,242 @@
<style scoped>
.search {
  background-color: #fff;
  height: 80px;
  display: flex;
  align-items: center;
}

.search_thing {
  width: 350px;
  display: flex;
  align-items: center;
}

.search_label {
  width: 110px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 110px);
}

.table {
  margin-top: 10px;
  background-color: #fff;
  width: calc(100% - 40px);
  height: calc(100% - 60px - 80px - 10px - 40px);
  padding: 20px;
  overflow-y: auto;
}

.card {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, 320px);
  /* justify-content: center; */
  grid-gap: 16px;
  min-height: 200px;
}

.card li {
  width: 320px;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 4px 4px 8px 0px rgba(51, 51, 51, 0.04);
  border: 1px solid #EEEEEE;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 26px 16px 16px;
  font-size: 14px;
  position: relative;
  overflow: show;
}

li .title {
  width: 147px;
  height: 20px;
  background: url(../../../../assets/images/renyuan-title.svg) no-repeat;
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  line-height: 20px;
  color: #fff;
}
</style>

<template>
  <div class="role_manage">
    <div class="search">
      <div class="search_thing">
        <div class="search_label">人员名称：</div>
        <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="entity.name"></el-input>
        </div>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" @click="refresh()">重 ç½®</el-button>
        <el-button size="small" type="primary"
          @click="currentPage = 1, list = [], finishLoding = false, keyMap = {}, refreshTable()">查 è¯¢</el-button>
      </div>
    </div>
    <div class="table" v-loading="loading">
      <scroll-pagination @load="refreshTable" :finishLoding="finishLoding" :list="list"
        v-if="list.length > 0 || loading">
        <ul class="card" style="margin-top: 10px;">
          <li v-for="(m, i) in list" :key="i">
            <el-image style="width: 80px;
            height: 112px;" :src="javaApi + '/img/' + m.pictureUrl">
              <div slot="error" class="image-error" style="width: 79px;
            height: 110px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #EEEEEE;">
                <i class="el-icon-picture-outline" style="font-size:30px;color:#666666;"></i>
              </div>
            </el-image>
            <el-image style="width: 195px;
            height: 112px;" :src="javaApi + '/img/' + m.signatureUrl">
              <div slot="error" class="image-error" style="width: 194px;
            height: 110px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #EEEEEE;">
                <i class="el-icon-picture-outline" style="font-size:30px;color:#666666;"></i>
              </div>
            </el-image>
            <div class="title">{{ m.name }}</div>
          </li>
        </ul>
      </scroll-pagination>
      <div v-if="list.length < 1 && !loading" style="color:#909399;font-size:14px;text-align: center;margin-top:200px">
        æš‚无数据
      </div>
    </div>
  </div>
</template>

<script>
import ScrollPagination from '@/components/index/scroll-paging.vue'
import {
  selectPersonnelOverview
} from '@/api/cnas/personnel/personalOverview'
export default {
  components: {
    ScrollPagination
  },
  data() {
    return {
      entity: {
        name: null,
        state: 1,
        orderBy: { field: "id", order: "asc" }
      },
      list: [],
      currentPage: 1, // å½“前页
      pageSize: 16, // ä¸€é¡µ16条
      total: '',
      loading: true, // ç»„件loading的展示,默认为true
      finishLoding: false, // åŠ è½½å®Œæˆï¼Œæ˜¾ç¤ºå·²ç»æ²¡æœ‰æ›´å¤šäº†
      keyMap: {}
    }
  },
  created() {
    this.keyMap = {};
    this.currentPage = 1;
    this.list = [];
    this.refreshTable();
  },
  methods: {
    refreshTable() {
      const key = `_${this.currentPage}`
      const value = this.keyMap[key]
      // å¦‚æžœvalue存在，表示缓存有值，那么阻止请求
      if (value) {
        return
      }
      // value不存在，表示第一次请求,设置占位
      this.keyMap[key] = 'temp'
      if (this.currentPage == 1) {
        this.loading = true
      }
      selectPersonnelOverview({
        current: this.currentPage,
        size: this.pageSize,
        ...this.entity
      }).then(res => {
        if (res.code == 200) {
          this.total = res.data.body.total
          let list = res.data.body.records;
          if (list.length == 0) {
            this.finishLoding = true;
          } else {
            if (list.length < this.pageSize) {
              this.finishLoding = true;
            }
            this.list = this.list.concat(list)
            if (this.total == this.list.length) {
              this.finishLoding = true;
            }
            this.currentPage++;
          }
        }
        this.loading = false
      })
    },
    refresh() {
      this.keyMap = {};
      this.currentPage = 1;
      this.list = [];
      this.finishLoding = false;
      this.entity = {
        name: null,
        state: 1,
        orderBy: { field: "id", order: "asc" }
      };
      this.refreshTable()
    },
    // æ»šåŠ¨è§¦åº•åŠ è½½
    scrollFn() {
      let clientHeight = document.documentElement.clientHeight - 18; //可视区域
      let scrollHeight = document.body.scrollHeight; // æ»šåŠ¨æ–‡æ¡£é«˜åº¦
      let scrollTop = parseInt(document.documentElement.scrollTop); // å·²æ»šåŠ¨çš„高度
      let height = 300;
      if (
        scrollTop + clientHeight >= scrollHeight - height &&
        scrollHeight != 0
      ) {
        if (!this.finishLoding && this.currentPage * this.pageSize < this.total) {
          this.currentPage = this.currentPage + 1;
          this.refreshTable();
        }
      } else {
        return false;
      }
    },
    throttle(fn, wait) {
      // å°è£…函数进行节流
      var timer = null;
      return function () {
        var context = this;
        var args = arguments;
        if (!timer) {
          timer = setTimeout(function () {
            fn.apply(context, args);
            timer = null;
          }, wait);
        }
      };
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.throttle(), false);
  },
}
</script>

 src/views/CNAS/personnel/personnelInfo/Department/components/Communicate/Add.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,116 @@
<template>
    <div class="add">
        <el-dialog :title="isEdit ? '编辑附件资料' : '新增附件资料'" :visible.sync="dialogVisible" width="40%">
            <el-form :model="form" label-width="80px" size="small">
                <el-form-item label="沟通人">
                    <el-select v-model="form.userId" placeholder="请选择" style="width: 100%" multiple>
                        <el-option v-for="(item, index) in userList" :key="index" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="沟通时间">
                    <el-date-picker v-model="form.communicationTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择日期时间" style="width: 100%">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="沟通地点">
                    <el-input v-model="form.communicationPlace" placeholder="请选择"></el-input>
                </el-form-item>
                <el-form-item label="沟通内容">
                    <el-input v-model="form.communicationContent" placeholder="请选择"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="foot">
                <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm">ç¡® å®š</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    selectUserList,
    addOrUpdatePersonCommunicationAbility
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
    data() {
        return {
            isEdit: false,
            dialogVisible: false,
            form: {
                id: undefined,
                userId: [],
                communicationTime: undefined,
                communicationPlace: undefined,
                communicationContent: undefined
            },
            loading: false,
            userList: []
        }
    },
    methods: {
        /**
         * @desc æ˜¾ç¤ºæ¨¡æ€æ¡†
         * @param {*} row
         * @param {*} type
         */
        openDialog(row, type) {
            this.getUserList()
            this.dialogVisible = true
            if (type) {
                this.isEdit = true
                this.form.id = row.id
                this.form.userId = row.userId.split(',').map(m => Number(m))
                this.form.communicationTime = row.communicationTime
                this.form.communicationPlace = row.communicationPlace
                this.form.communicationContent = row.communicationContent
            } else {
                this.isEdit = false
                this.form.id = undefined
                this.form.userId = []
                this.form.communicationTime = undefined
                this.form.communicationPlace = undefined
                this.form.communicationContent = undefined
            }
        },
        /**
         * @desc èŽ·å–用户信息
         */
        async getUserList() {
            const { code, data } = await selectUserList()
            if (code == 200) {
                this.userList = data
            }
        },
        /**
         * @desc æäº¤è¡¨å•
         */
        async submitForm() {
            this.loading = true
            const { code, data } = await addOrUpdatePersonCommunicationAbility({
                id: this.form.id,
                userId: this.form.userId.join(','),
                communicationTime: this.form.communicationTime,
                communicationPlace: this.form.communicationPlace,
                communicationContent: this.form.communicationContent,
            })
            if (code == 200) {
                this.$emit('submit')
                this.dialogVisible = false
            } else {
                this.$message.error(this.isEdit ? '编辑失败' : '新增失败')
            }
            this.loading = false
        }
    }
}
</script>
<style scoped>
.foot {
    width: 100%;
}

.add>>>.el-dialog__footer {
    padding-right: 20px;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/Communicate/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,213 @@
<template>
    <div class="flex_column">
        <TableCard :showForm="isDepartment" title="沟通记录">
            <template v-slot:form>
                <div v-if="isDepartment" class="w100 items_center justify_between">
                    <div></div>
                    <div>
                        <el-button size="small" type="primary" @click="openDialog">新增</el-button>
                    </div>
                </div>
            </template>
            <template v-slot:table>
                <limsTable :column="columnData" :height="'calc(100vh - 21em)'" :table-data="tableData"
                    :table-loading="loading" style="margin-top: 18px; padding: 0 15px;" :page="page"
                    @pagination="pagination"></limsTable>
            </template>
        </TableCard>
        <Add ref="communicateModal" @submit="getTableData"></Add>
    </div>
</template>
<script>
import TableCard from '@/components/TableCard/index.vue';
import limsTable from "@/components/Table/lims-table.vue";
import Add from "./Add.vue"
import {
    personPersonCommunicationAbilityPage,
    deletePersonCommunicationAbility,
    exportPersonCommunicationAbility
} from '@/api/cnas/personnel/personnelInfo.js'

export default {
    components: {
        TableCard,
        limsTable,
        Add
    },
    props: {
        departId: {
            type: Number,
            default: () => {
                return null;
            }
        },
        isDepartment: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // departId: 0,
            columnData: [
                {
                    label: '序号',
                    prop: 'id'
                }, {
                    label: '沟通人',
                    prop: 'userName'
                }, {
                    label: '沟通时间',
                    prop: 'communicationTime'
                }, {
                    label: '沟通地点',
                    prop: 'communicationPlace'
                }, {
                    label: '沟通内容',
                    prop: 'communicationContent'
                }, {
                    label: '操作',
                    dataType: 'action',
                    operation: [
                        {
                            name: '编辑',
                            type: 'text',
                            clickFun: (row) => {
                                this.openDialog(row, true)
                            }
                        }, {
                            name: '导出',
                            type: 'text',
                            clickFun: (row) => {
                                this.handleDown(row)
                            }
                        }, {
                            name: '删除',
                            type: 'text',
                            color: '#f56c6c',
                            clickFun: (row) => {
                                this.delPerson(row.id)
                            }
                        }
                    ]
                },
            ],
            tableData: [],
            page: {
                current: 1,
                pageSize: 20,
                total: 0
            },
            loading: false
        }
    },
    mounted() {
        this.getTableData()
    },
    methods: {
        openDialog(row, type = false) {
            this.$refs.communicateModal.openDialog(row, type)
        },
        async getTableData() {
            this.loading = true
            const params = this.isDepartment ? {
                departLimsId: this.departId,
                current: this.page.current,
                size: this.page.pageSize
            } : {
                userId: this.departId,
                current: this.page.current,
                size: this.page.pageSize
            }
            const { code, data } = await personPersonCommunicationAbilityPage(params)
            if (code == 200) {
                this.page.total = data.total
                this.tableData = data.records
                this.loading = false
            }
        },
        pagination({ page, limit }) {
            this.page.current = page;
            this.page.size = limit;
            this.getTableData();
        },
        /**
         * @desc èŽ·å–设备id
         */
        getDepart(id) {
            this.departId = id
            this.getTableData()
        },
        /**
         * @desc åˆ é™¤æ²Ÿé€šè®°å½•
         */
        delPerson(id) {
            this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let formData = new FormData()
                formData.append('id', id)
                const { code } = await deletePersonCommunicationAbility(formData)
                if (code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getTableData()
                }
            })
        },
        async handleDown(row) {
            exportPersonCommunicationAbility({ id: row.id }).then(res => {
                if (res.code == 201) {
                    this.$message.error(res.message)
                    return
                }
                const blob = new Blob([res], { type: 'application/octet-stream' });
                this.$download.saveAs(blob, row.userName + '-沟通记录' + '.docx')
            })
        }
    },
    watch: {
        departId: {
            handler(newId, oldId) {
                if (newId) {
                    this.getTableData();
                }
            }
        }
    }
}
</script>
<style scoped>
.flex_column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.w100 {
    width: 100%;
}


.items_center {
    display: flex;
    align-items: center;
}

.justify_between {
    justify-content: space-between
}

.date_box {
    margin: 0 5px;
}

.search {
    width: 150px;
    padding: 0 16px;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/JobResponsibilities/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,364 @@
<!-- å²—位职责 -->
<template>
  <div class="view">
    <div style="text-align: left; margin-bottom: 15px;padding: 0 10px">
      <label>员工：</label>
      <el-input v-model="userName" clearable placeholder="请输入员工" size="small" style="width: 20vh;"></el-input>
      <el-button size="small" type="primary" @click="refreshTable">查询</el-button>
      <div v-if="isDepartment" style="float: right;">
        <el-button size="small" type="primary" @click="addPost">新增</el-button>
        <!--        <el-button size="small" type="primary">导出excel</el-button>-->
      </div>
    </div>
    <div class="table" style="padding: 0 10px">
      <el-table :data="tableData" height="70vh" style="width: 100%">
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="员工编号" min-width="120" prop="account"></el-table-column>
        <el-table-column label="岗位名称" min-width="180" prop="postName"></el-table-column>
        <el-table-column label="所属部门" min-width="180" prop="departLimsName"></el-table-column>
        <el-table-column label="工作目标" min-width="180" prop="jobObjective"></el-table-column>
        <el-table-column label="岗位职责" min-width="180" prop="jobResponsibilities"></el-table-column>
        <el-table-column label="任职人" min-width="180" prop="incumbentName"></el-table-column>
        <el-table-column label="任职人审核日期" min-width="180" prop="incumbentDate"></el-table-column>
        <el-table-column label="主管" min-width="180" prop="supervisorName"></el-table-column>
        <el-table-column label="主管审核日期" min-width="180" prop="supervisorDate"></el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
          <template v-slot="scope">
            <el-button v-if="!isDepartment || scope.row.currentState === '关闭'" size="small" type="text"
              @click="handleViewClick(scope.row, 'view')">查看
            </el-button>
            <el-button v-if="isDepartment && scope.row.currentState !== '关闭'" size="small" type="text"
              @click="handleViewClick(scope.row, 'edit')">编辑
            </el-button>
            <el-button size="small" type="text" @click="downLoadPost(scope.row)">导出</el-button>
            <el-button v-if="isDepartment" size="small" type="text" @click="deletePost(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
        :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- æ–°å¢žå²—位职责 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="新增岗位职责"
      width="50%" @close="resetForm">
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step v-for="(v, i) in steps" :key="i" :title="v" style="cursor:pointer"
          @click.native="choiceStep(i)"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <div>
          <el-card style="margin-top: 1em; height: 40vh; overflow-y: scroll;">
            <!-- æ–°å¢žè®¾å¤‡äº‹è®°å½•å¡ç‰‡ -->
            <el-row>
              <el-col :span="12">
                <el-form-item label="岗位名称：" prop="postName">
                  <el-input v-model="form.postName" :disabled="currentStep !== 0 || operationType === 'view'"
                    size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="工作目标：" prop="jobObjective">
                  <el-input v-model="form.jobObjective" :disabled="currentStep !== 0 || operationType === 'view'"
                    size="small" type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="岗位职责：" prop="jobResponsibilities">
                  <el-input v-model="form.jobResponsibilities" :disabled="currentStep !== 0 || operationType === 'view'"
                    size="small" type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col v-if="currentStep === 0 || operationType === 'view'" :span="12">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请选择任职人', trigger: 'change' }]"
                  label="任职人：" prop="incumbentId">
                  <el-select v-model="form.incumbentId" :disabled="operationType === 'view'" clearable filterable
                    placeholder="请选择任职人" size="small" style="width: 100%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="currentStep === 1 || operationType === 'view'" :span="12">
                <el-form-item :rules="[{ required: currentStep === 1, message: '请选择主管', trigger: 'blur' }]" label="主管："
                  prop="supervisorId">
                  <el-select v-model="form.supervisorId" :disabled="currentStep !== 1 || operationType === 'view'"
                    clearable filterable placeholder="请选择主管" size="small" style="width: 100%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.submitPerson }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.submitDate }}
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="currentStep !== 0 && currentStep !== 3" @click="submitForm('3reject')">驳回</el-button>
        <el-button v-if="currentStep === 0" @click="submitForm('2save')">保存</el-button>
        <el-button v-if="currentStep !== 3" type="primary" @click="submitForm('1submit')">{{ currentStep === 0 ? '提交' :
          '通过'
          }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from '@/utils/date';
import {
  selectUserList,
  personJobResponsibilitiesSelect,
  personJobResponsibilitiesSave,
  exportPersonJobResponsibilities,
  personJobResponsibilitiesDelete,
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
  data() {
    return {
      userName: '',
      tableData: [],
      responsibleOptions: [],
      search: {
        size: 20,
        current: 1,
        total: 0
      },
      dialogVisible: false,
      currentStep: 0, // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
      currentStepClick: 0, // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
      operationType: '',
      steps: ['提交', '任职人确认', '主管确认'],
      form: {
        postName: '', // å²—位名称
        jobObjective: '', // å·¥ä½œç›®æ ‡
        jobResponsibilities: '', // å²—位职责
        incumbentId: '', // ä»»èŒäºº
        supervisorId: '' // ä¸»ç®¡
      },
      rules: {
        postName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
        jobObjective: [{ required: true, message: '请输入工作目标', trigger: 'blur' }],
        jobResponsibilities: [{ required: true, message: '请输入岗位职责', trigger: 'blur' }],
        incumbentId: [{ required: true, message: '请选择任职人', trigger: 'change' }],
        supervisorId: [{ required: true, message: '请选择主管', trigger: 'change' }]
      }
      // departId: 0
    };
  },
  props: {
    departId: {
      type: Number,
      default: () => {
        return null;
      }
    },
    isDepartment: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.getPostList(this.departId);
  },
  methods: {
    addPost() {
      this.dialogVisible = true;
      this.form = {
        postName: '', // å²—位名称
        jobObjective: '', // å·¥ä½œç›®æ ‡
        jobResponsibilities: '', // å²—位职责
        incumbentId: '', // ä»»èŒäºº
        supervisorId: '', // æ“ä½œäºº
        submitPerson: '', // ä¸»ç®¡
        submitDate: '', // æ—¥æœŸ
        currentStep: 0 // æ—¥æœŸ
      };
      this.currentStep = 0;
      this.getUserList();
    },
    // æŸ¥è¯¢åˆ—表信息
    getPostList(userId) {
      this.search.userId = userId;
      const name = this.isDepartment ? 'departmentId' : 'userId';
      personJobResponsibilitiesSelect({
        userName: this.userName,
        [name]: this.search.userId,
        size: this.search.size,
        current: this.search.current
      }).then(res => {
        if (res.code === 201) return;
        this.tableData = res.data.records;
        this.search.total = res.data.total;
      });
    },
    //提交表单
    async submitForm(saveState) {
      this.$refs.form.validate((valid) => {
        if (valid === true || saveState !== '1submit') {
          // ç»™å½“前环节设置创建人与时间
          let user = JSON.parse(localStorage.getItem('user'));
          const dateTime = dateFormat(new Date());
          // èŽ·å–当前环节操作人与日期
          switch (this.currentStep) {
            case 0:
              this.form.submittingOperator = user.name;
              this.form.submittingDate = dateTime;
              break;
            case 1:
              this.form.incumbentOperator = user.name;
              this.form.incumbentDate = dateTime;
              break;
            case 2:
              this.form.supervisorOperator = user.name;
              this.form.supervisorDate = dateTime;
              break;
            default:
              break;
          }
          // èŽ·å–当前环节负责人
          switch (saveState === '3reject' ? this.currentStep - 1 : this.currentStep) {
            case 1:
              this.form.currentResponsible = this.form.submittingOperator;
              break;
            case 2:
              this.form.currentResponsible = this.form.incumbentOperator;
              break;
            default:
              break;
          }
          let currentStepAction;
          // è®¾ç½®è¯¥æ“ä½œåˆ¤æ–­æ˜¯å¦ä¸ºæäº¤ï¼Œä¿å­˜ï¼Œé©³å›žï¼Œé€šè¿‡
          switch (saveState) {
            // æäº¤ï¼Œé€šè¿‡
            case '1submit':
              currentStepAction = this.currentStep + 1;
              break;
            // ä¿å­˜
            case '2save':
              currentStepAction = this.currentStep;
              break;
            // é©³å›ž
            case '3reject':
              currentStepAction = this.currentStep - 1;
              break;
            default:
              break;
          }
          // èŽ·å–当前状态
          this.form.currentState = currentStepAction === 3 ? '关闭' : this.steps[currentStepAction];
          personJobResponsibilitiesSave(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success('提交成功');
              this.getPostList(this.departId);
              this.dialogVisible = false;
            }
          });
        } else {
          let step = this.steps[this.currentStep];
          this.$message.warning(step + '  æµç¨‹ä¸­æœ‰å¿…填项未填！');
        }
      });
    },
    // ç¼–辑
    handleViewClick(row, type) {
      this.operationType = type;
      this.getUserList();
      row.incumbentId = Number(row.incumbentId);
      this.form = { ...row };
      switch (row.currentState) {
        case '提交':
          this.currentStep = 0;
          break;
        case '任职人确认':
          this.currentStep = 1;
          this.form.submitPerson = row.submittingOperator;
          this.form.submitDate = row.submittingDate;
          break;
        case '主管确认':
          this.currentStep = 2;
          this.form.submitPerson = row.incumbentOperator;
          this.form.submitDate = row.incumbentDate;
          break;
        case '关闭':
          this.currentStep = 3;
          this.form.submitPerson = row.supervisorOperator;
          this.form.submitDate = row.supervisorDate;
          break;
        default:
          break;
      }
      this.form.currentState = this.currentStep;
      this.currentStepClick = this.currentStep === 3 ? 0 : this.currentStep
      console.log('this.form---', this.form);
      this.dialogVisible = true;
    },
    // ä¸‹è½½å²—位职责
    downLoadPost(row) {
      exportPersonJobResponsibilities({ id: row.id }).then(res => {
        const blob = new Blob([res], { type: 'application/octet-stream' });
        this.$download.saveAs(blob, row.incumbentName + '-岗位职责' + '.docx')
      })
    },
    // åˆ é™¤å²—位职责
    deletePost(row) {
      this.$confirm('此操作将永久删除此数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        personJobResponsibilitiesDelete({ id: row.id }).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功');
            this.getPostList(this.departId);
          }
        });
      }).catch(() => {
        this.$message.error('删除失败');
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    refreshTable() {
      this.getPostList(this.departId);
    },
    // èŽ·å–负责人信息接口
    getUserList() {
      selectUserList().then(res => {
        if (res.code == 200) {
          this.responsibleOptions = res.data;
        }
      });
    },
    choiceStep(index) {
      this.currentStepClick = index;
    },
    handleSizeChange(val) {
      this.search.size = val;
      this.getPostList(this.departId);
    },
    handleCurrentChange(val) {
      this.search.current = val;
      this.getPostList(this.departId);
    }
  },
  watch: {
    departId: {
      handler(newId, oldId) {
        this.getPostList(newId);
      }
    }
  }
};
</script>
<style scoped></style>

 src/views/CNAS/personnel/personnelInfo/Department/components/Mandate/Add.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,198 @@
<template>
    <div class="add">
        <el-dialog :title="isEdit ? '编辑附件资料' : '新增附件资料'" :visible.sync="dialogVisible" width="50%">
            <el-form ref="ruleForm" :rules="rules" :model="form" label-width="100px" size="medium">
                <el-form-item label="证书编号" prop="certificateNumber">
                    <el-input v-model="form.certificateNumber" placeholder="请输入" style="width: 100%">
                    </el-input>
                </el-form-item>
                <el-form-item label="被任职人员" prop="userId">
                    <el-select v-model="form.userId" placeholder="请选择">
                        <el-option v-for="(item, index) in userList" :key="index" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="任职岗位" prop="post">
                    <el-input v-model="form.post" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="理论考试成绩" prop="num1">
                    <el-input v-model="form.num1" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="操作技能考试成绩" prop="num2">
                    <el-input v-model="form.num2" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="操作类型" prop="operationType">
                    <el-input v-model="form.operationType" placeholder="请选择"></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="上岗证书">
                            <el-input v-model="form.systemFileName" size="small" disabled>
                                <el-button slot="append" icon="el-icon-delete-solid"
                                    @click="deleteFile(form.systemFileName)"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-upload ref="upload" style="float: left; margin: 0 12px 0 20px;" :action="action"
                            :show-file-list="false" :on-success="onSuccess" :headers="uploadHeader">
                            <el-button class="uploadFile" slot="trigger" size="small" type="primary">浏览</el-button>
                        </el-upload>
                    </el-col>
                </el-row>
                <el-form-item label="备注">
                    <el-input v-model="form.remarks" placeholder="请选择"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="foot">
                <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm">ç¡® å®š</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    addOrUpdatePersonPostAuthorizationRecord,
    selectUserList,
    deleteCNASFile
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
    data() {
        return {
            isEdit: false,
            dialogVisible: false,
            form: {
                id: undefined,
                certificateNumber: undefined,
                userId: undefined,
                post: undefined,
                operationType: undefined,
                fileList: [],
                fileName: undefined,
                systemFileName: undefined,
                remarks: undefined,
                num2: undefined,
                num1: undefined
            },
            rules: {
                certificateNumber: [{ required: true, message: '请输入证书编号', trigger: 'blur' }],
                userId: [{ required: true, message: '请选择被任职人员', trigger: 'change' }],
                post: [{ required: true, message: '任职岗位', trigger: 'blur' }],
                operationType: [{ required: true, message: '操作类型', trigger: 'blur' }],

            },
            loading: false,
            userList: []
        }
    },
    mounted() {

    },
    computed: {
        action() {
            return this.javaApi + '/personBasicInfo/saveCNASFile'
        }
    },
    methods: {
        async onSuccess(response, file, fileList) {
            this.$set(this.form, "systemFileName", response.data)
        },
        deleteFile(fileName) {
            deleteCNASFile({ fileName }).then(res => {
                this.$message.success('删除成功！')
                this.$set(this.form, "systemFileName", null)
            })
        },
        async openDialog(row, type) {
            await this.getUserList()
            this.dialogVisible = true
            if (type) {
                this.isEdit = true
                this.form.id = row.id
                this.form.certificateNumber = row.certificateNumber
                this.form.userId = Number(row.userId)
                this.form.post = row.post
                this.form.operationType = row.operationType
                this.form.systemFileName = row.systemFileName
                this.form.remarks = row.remarks
                this.form.num1 = row.num1
                this.form.num2 = row.num2
            } else {
                this.isEdit = false
                this.form.id = undefined
                this.form.certificateNumber = undefined
                this.form.userId = undefined
                this.form.post = undefined
                this.form.operationType = undefined
                this.form.fileList = []
                this.form.fileName = undefined
                this.form.systemFileName = undefined
                this.form.remarks = undefined
                this.form.num1 = undefined
                this.form.num2 = undefined
            }
        },
        closeDialog() {
            this.dialogVisible = false
        },
        /**
         * @desc èŽ·å–用户信息
         */
        async getUserList() {
            const { code, data } = await selectUserList()
            if (code == 200) {
                this.userList = data
            }
        },
        /**
         * @desc æäº¤è¡¨å•
         */
        submitForm() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    await this.submitFormData()
                }
            })
        },
        /**
         * @desc ä¸Šä¼ æ–‡ä»¶
         */
        beforeUpload(file) {
            this.form.fileList = [file]
            this.form.fileName = file.name
        },
        /**
         * @desc æäº¤form表单
         */
        async submitFormData() {
            this.loading = true
            const { code, data } = await addOrUpdatePersonPostAuthorizationRecord({
                id: this.form.id,
                certificateNumber: this.form.certificateNumber,
                userId: this.form.userId,
                post: this.form.post,
                operationType: this.form.operationType,
                systemFileName: this.form.systemFileName,
                remarks: this.form.remarks,
                num1: this.form.num1,
                num2: this.form.num2
            })
            if (code == 200) {
                this.closeDialog()
                this.$emit('refresh')
            }
            this.loading = false
        }
    }
}
</script>
<style scoped>
.foot {
    width: 100%;
}

.add>>>.el-dialog__footer {
    padding-right: 20px;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/Mandate/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,228 @@
<template>
    <div class="flex_column">
        <TableCard :showForm="isDepartment" title="任职授权记录">
            <template v-slot:form>
                <div v-if="isDepartment" class="w100 items_center justify_between">
                    <div></div>
                    <div>
                        <el-button size="small" type="primary" @click="openDialog">新增</el-button>
                    </div>
                </div>
            </template>
            <template v-slot:table>
                <limsTable :column="columnData" :height="'calc(100vh - 21em)'" :table-data="tableData"
                    :table-loading="loading" style="margin-top: 18px; padding: 0 15px;" :page="page"
                    @pagination="pagination"></limsTable>
            </template>
        </TableCard>
        <Add ref="mandateModal" @refresh="getTableData"></Add>
    </div>
</template>
<script>
import TableCard from "@/components/TableCard/index.vue";
import limsTable from "@/components/Table/lims-table.vue";
import Add from "./Add.vue"
import {
    PersonPostAuthorizationRecordPage,
    deletePersonPostAuthorizationRecord,
    exportPersonPostAuthorizationRecord
} from '@/api/cnas/personnel/personnelInfo.js'
import { nextTick } from "vue";

export default {
    components: {
        TableCard,
        limsTable,
        Add
    },
    props: {
        departId: {
            type: Number,
            default: () => {
                return null;
            }
        },
        isDepartment: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // departId: 0,
            columnData: [
                {
                    label: '序号',
                    prop: 'id'
                }, {
                    label: '证书编号',
                    prop: 'certificateNumber'
                }, {
                    label: '被任职人员',
                    prop: 'userName'
                }, {
                    label: '任职岗位',
                    prop: 'post'
                }, {
                    label: '理论考试成绩',
                    prop: 'num1'
                }, {
                    label: '操作技能考试成绩',
                    prop: 'num2'
                }, {
                    label: '操作时间',
                    prop: 'updateTime'
                }, {
                    label: '备注',
                    prop: 'remarks',
                    width: 300
                }, {
                    label: '操作',
                    dataType: 'action',
                    width: 160,
                    operation: [
                        {
                            name: '编辑',
                            type: 'text',
                            clickFun: (row) => {
                                this.openDialog(row, true)
                            }
                        }, {
                            name: '下载',
                            type: 'text',
                            clickFun: (row) => {
                                this.handleDown(row)
                            }
                        }, {
                            name: '删除',
                            type: 'text',
                            color: '#f56c6c',
                            clickFun: (row) => {
                                this.deleteNotify(row.id)
                            }
                        }
                    ]
                },
            ],
            tableData: [],
            page: {
                current: 1,
                pageSize: 20,
                total: 0
            },
            loading: false
        }
    },
    mounted() {
        this.getTableData()
        console.log(this.departId)
    },
    methods: {
        openDialog(row, type = false) {
            this.$refs.mandateModal.openDialog(row, type)
        },
        /**
         * @desc æŸ¥è¯¢è¡¨æ ¼æ•°æ®
         */
        async getTableData() {
            this.loading = true
            await nextTick()
            const params = this.isDepartment ? {
                departLimsId: this.departId,
                current: this.page.current,
                size: this.page.pageSize
            } : {
                userId: this.departId,
                current: this.page.current,
                size: this.page.pageSize
            }
            const { code, data } = await PersonPostAuthorizationRecordPage(params)
            if (code == 200) {
                this.page.total = data.total
                this.tableData = data.records
                this.loading = false
            }
        },
        /**
         * @desc åˆ†é¡µ
         */
        pagination({ page, limit }) {
            this.page.current = page;
            this.page.size = limit;
            this.getTableData();
        },
        /**
         * @desc åˆ é™¤ä»»èŒè®°å½•
         */
        deleteNotify(id) {
            this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delMandate(id)
            })
        },
        /**
         * @desc api删除
         */
        async delMandate(id) {
            const formData = new FormData()
            formData.append('id', id)
            const { code, data } = await deletePersonPostAuthorizationRecord(formData)
            if (code == 200) {
                this.$message({ message: '删除成功', type: 'success' })
                this.getTableData()
            } else {
                this.$message({ message: '删除失败', type: 'error' })
            }
        },
        /**
         * @desc èŽ·å–设备id
         */
        getDepart(id) {
            this.departId = id
            this.getTableData()
        },
        handleDown(row) {
            exportPersonPostAuthorizationRecord({ id: row.id }).then(res => {
                if (res.code == 201) {
                    this.$message.error(res.message)
                    return
                }
                const blob = new Blob([res], { type: 'application/octet-stream' });
                this.$download.saveAs(blob, '任职授权-' + row.certificateNumber + '-' + row.post + '.docx')
            })
        }
    },
    //   watch: {
    //     departId: {
    //       handler(newId, oldId) {
    //         if (newId) {
    //           this.getTableData();
    //         }
    //       }
    //     }
    //   }
}
</script>
<style scoped>
.flex_column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.w100 {
    width: 100%;
}

.items_center {
    display: flex;
    align-items: center;
}

.justify_between {
    justify-content: space-between
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/PersonnelCapacity/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,567 @@
<!-- äººå‘˜èƒ½åŠ› -->
<template>
  <div>
    <div style="text-align: left; margin-bottom: 15px;padding: 0 16px">
      <label>姓名</label>
      <el-input v-model="userName" placeholder="请输入姓名" size="small" style="width: 20vh;"></el-input>
      <el-button size="small" type="primary" @click="refreshTable">查询</el-button>
      <div v-if="isDepartment" style="float: right;">
        <el-button size="small" type="primary" @click="addAppointPost('add')">新增</el-button>
      </div>
    </div>
    <div class="table">
      <TableCard :showForm="false" :showTitle="false">
        <template v-slot:table>
          <limsTable :column="yearColumnData" :height="'calc(100vh - 20em)'" :table-data="tableData"
            :table-loading="yearLoading" style="padding: 0 15px;margin-bottom: 16px" :page="search"
            @pagination="pagination">
            <div slot="jobResponsibilities" slot-scope="scope">
              <div v-html="changeLine(scope.row.responsibilities)"></div>
            </div>
            <div slot="placeWorkSlot" slot-scope="scope">
              <div v-html="changeLine(scope.row.placeWork)"></div>
            </div>
          </limsTable>
        </template>
      </TableCard>
    </div>
    <!--新增能力认定弹框-->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="title" :visible.sync="dialogVisible"
      width="80%" @close="resetForm">
      <el-form v-if="dialogVisible" ref="infoForm" :model="form" :rules="rules">
        <el-col :span="12">
          <el-form-item label="人员：" label-width="110px" prop="userId">
            <el-select v-model="form.userId" :disabled="operationType === 'view'" clearable filterable placeholder="请选择"
              size="small" style="width: 100%;">
              <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职称：" label-width="110px" prop="technicalPost">
            <el-input v-model="form.technicalPost" :disabled="operationType === 'view'" clearable size="small"
              style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div style="display: flex;justify-content: space-evenly;font-weight: 600">
            <span>查核结果</span>
            <span>符合与否</span>
            <span>备注</span>
          </div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历：" label-width="110px" prop="academicDegree">
            <el-input v-model="form.academicDegree" :disabled="operationType === 'view'" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="radio-group" prop="academicConformNot" style="text-align: center">
            <el-radio-group v-model="form.academicConformNot" :disabled="operationType === 'view'">
              <el-radio :label="1">符合</el-radio>
              <el-radio :label="2">不符合</el-radio>
              <el-radio :label="3">不适用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="academicRemarks">
            <el-input v-model="form.academicRemarks" :disabled="operationType === 'view'" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="相关年限：" label-width="110px" prop="relatedYears">
            <el-input v-model="form.relatedYears" :disabled="operationType === 'view'" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="radio-group" prop="relatedYearsConformNot" style="text-align: center">
            <el-radio-group v-model="form.relatedYearsConformNot" :disabled="operationType === 'view'">
              <el-radio :label="1">符合</el-radio>
              <el-radio :label="2">不符合</el-radio>
              <el-radio :label="3">不适用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="relatedYearsRemarks    ">
            <el-input v-model="form.relatedYearsRemarks" :disabled="operationType === 'view'" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="相关培训：" label-width="110px" prop="relatedTraining">
            <el-input v-model="form.relatedTraining" :disabled="operationType === 'view'" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="radio-group" prop="relatedTrainingConformNot" style="text-align: center">
            <el-radio-group v-model="form.relatedTrainingConformNot" :disabled="operationType === 'view'">
              <el-radio :label="1">符合</el-radio>
              <el-radio :label="2">不符合</el-radio>
              <el-radio :label="3">不适用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="relatedTrainingRemarks">
            <el-input v-model="form.relatedTrainingRemarks" :disabled="operationType === 'view'"
              size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="相关经验：" label-width="110px" prop="relevantExperience">
            <el-input v-model="form.relevantExperience" :disabled="operationType === 'view'" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="radio-group" prop="relevantExperienceConformNot" style="text-align: center">
            <el-radio-group v-model="form.relevantExperienceConformNot" :disabled="operationType === 'view'">
              <el-radio :label="1">符合</el-radio>
              <el-radio :label="2">不符合</el-radio>
              <el-radio :label="3">不适用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="relevantExperienceRemarks">
            <el-input v-model="form.relevantExperienceRemarks" :disabled="operationType === 'view'"
              size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上岗证：" label-width="110px" prop="workLicense">
            <el-input v-model="form.workLicense" :disabled="operationType === 'view'" size="small" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="radio-group" prop="workLicenseConformNot" style="text-align: center">
            <el-radio-group v-model="form.workLicenseConformNot" :disabled="operationType === 'view'">
              <el-radio :label="1">符合</el-radio>
              <el-radio :label="2">不符合</el-radio>
              <el-radio :label="3">不适用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="workLicenseRemarks">
            <el-input v-model="form.workLicenseRemarks" :disabled="operationType === 'view'" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="岗位职责：" label-width="110px" prop="jobResponsibilitiesTem" style="height: 450px">
            <el-checkbox-group v-model="form.jobResponsibilitiesTem" :disabled="operationType === 'view'"
              @change="selectResponsibilities">
              <el-checkbox v-for="city in responsibilities" :key="city.value" :label="city.label"
                :value="city.value"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="radio-group" prop="jobResponsibilitiesConformNot"
            style="text-align: center;height: 420px">
            <el-radio-group v-model="form.jobResponsibilitiesConformNot" :disabled="operationType === 'view'">
              <el-radio :label="1">符合</el-radio>
              <el-radio :label="2">不符合</el-radio>
              <el-radio :label="3">不适用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="jobResponsibilitiesRemarks" style="height: 420px">
            <el-input v-model="form.jobResponsibilitiesRemarks" :disabled="operationType === 'view'"
              size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <span style="padding-left: 110px;font-size: 14px">备注：岗位职责达到5项及5项以上为符合</span>
        </el-col>
        <el-col :span="16">
          <el-form-item label="综合评价：" label-width="110px" prop="comprehensiveAssessment">
            <el-radio-group v-model="form.comprehensiveAssessment" :disabled="operationType === 'view'">
              <el-radio label="Qualified this position">可胜任该岗位</el-radio>
              <el-radio label="You can work while training">可边培训边上岗</el-radio>
              <el-radio label="Iconpetent for the position">不胜任该岗位</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="operationType !== 'view'" @click="resetForm">取消</el-button>
        <el-button v-if="operationType !== 'view'" type="primary" @click="submitForm">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import limsTable from "@/components/Table/lims-table.vue";
import TableCard from '@/components/TableCard/index.vue';
import {
  exportPersonnelCapacity,
  personPersonnelCapacityPage,
  addOrUpdatePersonPersonnelCapacity,
  confirmPersonnelCapability,
  deletePersonPersonnelCapacity,
  selectUserList,
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
  dicts: ['responsibilities_list'],
  props: {
    departId: {
      type: Number,
      default: () => {
        return null;
      }
    },
    isDepartment: {
      type: Boolean,
      default: false
    }
  },
  components: {
    limsTable,
    TableCard
  },
  data() {
    return {
      userName: '',
      tableData: [],
      search: {
        size: 20,
        current: 1,
        total: 0
      },
      title: '新增能力认定',
      operationType: '',
      yearColumnData: [
        {
          label: '岗位',
          prop: 'postName',
          minWidth: '100'
        }, {
          label: '姓名',
          prop: 'userName',
          minWidth: '100'
        }, {
          label: '学历',
          prop: 'academicDegree',
          minWidth: '100'
        }, {
          label: '专业',
          prop: 'major',
          minWidth: '100'
        }, {
          label: '职称',
          prop: 'technicalPost',
          minWidth: '100'
        }, {
          dataType: 'slot',
          label: '工作经历',
          prop: 'placeWork',
          minWidth: '100',
          slot: 'placeWorkSlot'
        }, {
          dataType: 'slot',
          label: '岗位职责',
          prop: 'jobResponsibilities',
          minWidth: '200px',
          slot: 'jobResponsibilities'
        }, {
          dataType: 'tag',
          label: '综合评价',
          minWidth: '140px',
          prop: 'comprehensiveAssessment',
          formatData: (params) => {
            if (params == 'Qualified this position') {
              return '可胜任该岗位';
            } else if (params == 'You can work while training') {
              return '可边培训边上岗';
            } else {
              return '不胜任该岗位';
            }
          },
          formatType: (params) => {
            if (params == 'Qualified this position') {
              return 'success';
            } else if (params == 'You can work while training') {
              return 'warning';
            } else {
              return 'danger';
            }
          }
        }, {
          label: '确认人',
          prop: 'confirmOperatingPersonnelId',
          minWidth: '100'
        }, {
          label: '确认日期',
          prop: 'confirmDate',
          minWidth: '160'
        }, {
          dataType: 'action',
          minWidth: '220',
          label: '操作',
          fixed: 'right',
          operation: [
            {
              name: '编辑',
              type: 'text',
              clickFun: (row) => {
                this.handleViewClick('edit', row);
              },
              showHide: (row) => {
                if (this.isDepartment) {
                  return true;
                } else {
                  return false;
                }
              }
            },
            {
              name: '查看',
              type: 'text',
              clickFun: (row) => {
                this.handleViewClick('view', row);
              }
            },
            {
              name: '导出',
              type: 'text',
              clickFun: (row) => {
                this.downLoadPost(row);
              }
            },
            {
              name: '确认',
              type: 'text',
              clickFun: (row) => {
                this.verifyGet(row.id);
              }
            },
            {
              name: '删除',
              type: 'text',
              color: '#f56c6c',
              clickFun: (row) => {
                this.deletePost(row.id);
              },
              showHide: (row) => {
                if (this.isDepartment) {
                  return true;
                } else {
                  return false;
                }
              }
            }
          ]
        }],
      yearLoading: false,
      dialogVisible: false,
      form: {
        jobResponsibilitiesTem: []
      },
      responsibleOptions: [],
      rules: {
        userId: [{ required: true, message: '请选择人员', trigger: 'change' }],
        academicDegree: [{ required: true, message: '请输入学历查核结果', trigger: 'blur' }],
        academicConformNot: [{ required: true, message: '请选择学历符合与否', trigger: 'change' }],
        relatedYears: [{ required: true, message: '请输入相关年限查核结果', trigger: 'blur' }],
        relatedYearsConformNot: [{ required: true, message: '请选择相关年限符合与否', trigger: 'change' }],
        relatedTraining: [{ required: true, message: '请输入相培训限查核结果', trigger: 'blur' }],
        relatedTrainingConformNot: [{ required: true, message: '请选择相关培训符合与否', trigger: 'change' }],
        relevantExperience: [{ required: true, message: '请输入相关经验查核结果', trigger: 'blur' }],
        relevantExperienceConformNot: [{ required: true, message: '请选择相关经验符合与否', trigger: 'change' }],
        workLicense: [{ required: true, message: '请输入上岗证查核结果', trigger: 'blur' }],
        workLicenseConformNot: [{ required: true, message: '请选择上岗证符合与否', trigger: 'change' }],
        jobResponsibilitiesTem: [{ required: true, message: '请选择岗位职责查核结果', trigger: 'change' }],
        jobResponsibilitiesConformNot: [{ required: true, message: '请选择岗位职责符合与否', trigger: 'change' }],
        comprehensiveAssessment: [{ required: true, message: '请选择综合评价', trigger: 'change' }]
      },
      responsibilities: []
    };
  },
  mounted() {
    this.getList(this.departId);
  },
  methods: {
    // ä¸‹è½½
    downLoadPost(row) {
      exportPersonnelCapacity({ id: row.id }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/msword' });
        this.$download.saveAs(blob, "人员能力导出" + '.docx')
      })
    },
    // æŸ¥è¯¢
    refreshTable() {
      this.getList(this.departId);
    },
    // èŽ·å–人员能力列表信息
    getList(userId) {
      this.search.userId = userId;
      const name = this.isDepartment ? 'departmentId' : 'userId';
      this.yearLoading = true
      personPersonnelCapacityPage({
        userName: this.userName,
        [name]: this.search.userId,
        size: this.search.size,
        current: this.search.current
      }).then(res => {
        this.yearLoading = false
        if (res.code === 201) return;
        this.tableData = res.data.records;
        this.search.total = res.data.total;
      }).catch(err => {
        console.log(err);
        this.yearLoading = false
      })
    },
    selectResponsibilities(arr) {
      let arrTem = [];
      arr.map(val => {
        const index = this.responsibilities.findIndex(item => item.label === val);
        if (index > -1) {
          arrTem.push(this.responsibilities[index].value);
        }
      });
      this.form.jobResponsibilities = arrTem.join(',');
    },
    getResponsibilities() {
      this.responsibilities = this.dict.type.responsibilities_list;
    },
    changeLine(val) {
      if (val) {
        return val.replace(/,/g, '<br>')
      } else {
        return
      }
    },
    // æ–°å¢ž
    addAppointPost(type) {
      this.operationType = type;
      this.title = '新增能力认定'
      this.dialogVisible = true;
      this.form = {
        jobResponsibilitiesTem: []
      }
      this.getUserList();
      this.getResponsibilities();

    },
    // ç¼–辑/查看
    handleViewClick(type, row) {
      this.operationType = type;
      this.title = this.operationType === 'edit' ? '修改能力认定' : '查看能力认定'
      this.dialogVisible = true;
      this.form = { ...row }
      if (this.form.responsibilities) {
        this.$set(this.form, 'jobResponsibilitiesTem', this.form.responsibilities.split(","))
      } else {
        this.$set(this.form, 'jobResponsibilitiesTem', [])
      }
      this.getUserList();
      this.getResponsibilities();
    },
    submitForm() {
      this.$refs.infoForm.validate((valid) => {
        if (valid) {
          addOrUpdatePersonPersonnelCapacity(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success('提交成功');
              this.getList(this.departId);
              this.form.id = null;
              this.dialogVisible = false;
            }
          });
        }
      });
    },
    verifyGet(id) {
      this.$confirm('是否确认本条信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        confirmPersonnelCapability({ id }).then(res => {
          if (res.code == 200) {
            this.$message.success('确认成功');
            this.getList(this.departId);
          }
        });
      }).catch((err) => {
        console.log('err---', err);
        this.$message.info('已取消')
      });
    },
    // åˆ é™¤å²—位职责
    deletePost(id) {
      this.$confirm('此操作将永久删除此数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePersonPersonnelCapacity({ id }).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功');
            this.getList(this.departId);
          }
        });
      }).catch(() => {
        this.$message.error('删除失败');
      });
    },
    resetForm() {
      this.$refs.infoForm.resetFields();
      this.dialogVisible = false;
    },
    // èŽ·å–负责人信息接口
    getUserList() {
      selectUserList().then(res => {
        if (res.code == 200) {
          this.responsibleOptions = res.data;
        }
      });
    },
    pagination({ page, limit }) {
      this.search.current = page;
      this.search.size = limit;
      this.getList();
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    departId: {
      handler(newId, oldId) {
        this.getList(newId);
      }
    },
    // ç›‘听点击el-tree的数据，进行数据刷新
    isDepartment: {
      handler(newId, oldId) {
        this.getList(this.departId);
      }
    },
  }
};
</script>
<style scoped>
>>>.el-dialog {
  margin: 6vh auto 50px !important;
}

>>>.el-dialog__body {
  max-height: 70vh;
  overflow-y: auto;
}

.radio-group>>>.el-form-item__error {
  padding-left: 38px;
}

>>>.el-checkbox__label {
  width: 212px;
  white-space: pre-wrap;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/PersonnelInformation/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,948 @@
<template>
  <div>
    <div style="text-align: right;margin-bottom: 10px">
      <!--       <el-button size="small" @click="$emit('goBackList')">返回</el-button>-->
      <el-button size="small" type="primary" @click="synchronous" :loading="synchronousLoading">同步第三方信息</el-button>
      <el-button size="small" type="primary" @click="dialogVisible = true">人员分类</el-button>
      <el-button :loading="saveLoading" size="small" type="primary" @click="save">保存</el-button>
    </div>
    <div>
      <div style="display: flex;flex-direction: row;">
        <div style="width: 12em">
          <el-image :src="javaApi + '/img/' + form.pictureUrl" fit="fill"
            style="width: 180px;height: 300px;border: 1px solid #000;border-radius: 10px;margin-left: 6px;margin-top: 10px;">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" style="font-size: 40px;"></i>
            </div>
          </el-image>
          <el-image :src="javaApi + '/img/' + form.signatureUrl" fit="fill"
            style="width:80%;height: 50px;border: 1px solid #000;border-radius: 10px;margin-left: 22px;margin-top: 20px;">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" style="font-size: 40px;"></i>
            </div>
          </el-image>
        </div>
        <div style="height: calc(100vh - 14em);overflow-y: auto">
          <el-form ref="form" :model="form" label-width="110px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="姓名">
                  <el-input v-model="form.name" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="登录账号">
                  <el-input v-model="form.account" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="当前状态">
                  <el-radio-group v-model="form.currentState">
                    <el-radio label="1formal" size="mini">正式</el-radio>
                    <el-radio label="2intern" size="mini">实习</el-radio>
                    <el-radio label="3leaveOffice" size="mini">离职</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="工号">
                  <el-input v-model="form.jobNumber" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="员工子编号">
                  <el-input v-model="form.subordinateNumber" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别">
                  <el-radio-group v-model="form.sex">
                    <el-radio label="1" size="mini">男</el-radio>
                    <el-radio label="0" size="mini">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                              <el-form-item label="入职时间">
                                  <el-date-picker v-model="form.entryTime" type="date" placeholder="选择日期" size="small"
                                      style="width: 99%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss">
                                  </el-date-picker>
                              </el-form-item>
                          </el-col> -->
              <!-- <el-col :span="8">
                              <el-form-item label="当前职务">
                                  <el-input v-model="form.currentPosition" size="small" clearable></el-input>
                              </el-form-item>
                          </el-col> -->
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="公司名称">
                  <el-input v-model="form.corporateName" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="部门编号">
                  <el-input v-model="form.departmentCode" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属部门">
                  <el-cascader v-model="form.departLimsId" :options="department"
                    :props="{ label: 'name', value: 'id', checkStrictly: true }" filterable
                    style="width: 100%;"></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="岗位类别">
                  <el-input v-model="form.postType" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="岗位编号">
                  <el-input v-model="form.postCode" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="岗位名称">
                  <el-input v-model="form.postName" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="入集团时间">
                  <el-date-picker v-model="form.groupTime" format="yyyy-MM-dd" placeholder="选择日期" size="small"
                    style="width: 99%;" type="date" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入单位时间">
                  <el-date-picker v-model="form.unitTime" format="yyyy-MM-dd" placeholder="选择日期" size="small"
                    style="width: 99%;" type="date" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="直接上级">
                  <el-input v-model="form.reportingTo" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="劳动关系">
                  <el-radio-group v-model="form.laborRelations">
                    <el-radio label="合同工" size="mini">合同工</el-radio>
                    <el-radio label="正式工" size="mini">正式工</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="试用开始时间">
                  <el-date-picker v-model="form.trialStartTime" format="yyyy-MM-dd" placeholder="选择日期" size="small"
                    style="width: 99%;" type="date" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="试用结束时间">
                  <el-date-picker v-model="form.trialEndTime" format="yyyy-MM-dd" placeholder="选择日期" size="small"
                    style="width: 99%;" type="date" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="text-align: left;">
                <el-form-item label="人员分类">
                  <span style="color: #000;">{{ form.personnelClassification }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="出生日期">
                  <el-date-picker v-model="form.dateBirth" format="yyyy-MM-dd" placeholder="选择日期" size="small"
                    style="width: 99%;" type="date" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="籍贯">
                  <el-input v-model="form.nativePlace" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="民族">
                  <el-input v-model="form.nation" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="证件类型">
                  <el-input v-model="form.idType" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="身份证号">
                  <el-input v-model="form.identityCard" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="年龄">
                  <el-input-number v-model="form.personBasicInfoAge" :max="130" :min="1" controls-position="right"
                    size="small" style="width: 99%;"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="证件有效期">
                  <el-date-picker v-model="form.validityPeriod" format="yyyy-MM-dd" placeholder="选择日期" size="small"
                    style="width: 99%;" type="date" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="婚姻状况">
                  <el-radio-group v-model="form.maritalStatus">
                    <el-radio label='已婚' size="mini">已婚</el-radio>
                    <el-radio label='未婚' size="mini">未婚</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件地址">
                  <el-input v-model="form.idAddress" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="证件详细地址">
                  <el-input v-model="form.idDetailAddress" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="现居地址">
                  <el-input v-model="form.currentAddress" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="现居详细地址">
                  <el-input v-model="form.currentDetailAddress" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="送达地址">
                  <el-input v-model="form.serviceAddress" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="送达详细地址">
                  <el-input v-model="form.serviceDetailAddress" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否退伍军人">
                  <el-radio-group v-model="form.retiredSoldiers">
                    <el-radio label='是' size="mini">是</el-radio>
                    <el-radio label='否' size="mini">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="政治面貌">
                  <el-input v-model="form.politicalStatus" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入党/团时间">
                  <el-date-picker v-model="form.dumplingTime" format="yyyy-MM-dd" placeholder="选择日期" size="small"
                    style="width: 99%;" type="date" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号">
                  <el-input v-model="form.telephone" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="短号">
                  <el-input v-model="form.cornet" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="办公电话">
                  <el-input v-model="form.officePhone" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="公司邮箱">
                  <el-input v-model="form.companyEmail" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="计算机等级">
                  <el-input v-model="form.ncre" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="最高学历">
                  <el-input v-model="form.officialAcademicRedentials" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="最高学位">
                  <el-input v-model="form.highestDegree" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="毕业院校1">
                  <el-input v-model="form.graduatedInstitutions1" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专业1">
                  <el-input v-model="form.major1" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="毕业时间1">
                  <el-date-picker v-model="form.graduationTime1" format="yyyy-MM-dd" placeholder="选择日期" size="small"
                    style="width: 99%;" type="date" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="毕业院校2">
                  <el-input v-model="form.graduatedInstitutions2" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专业2">
                  <el-input v-model="form.major2" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="毕业时间2">
                  <el-date-picker v-model="form.graduationTime2" format="yyyy-MM-dd" placeholder="选择日期" size="small"
                    style="width: 99%;" type="date" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="是否全日制">
                  <el-radio-group v-model="form.fullTime">
                    <el-radio :label="1" size="mini">是</el-radio>
                    <el-radio :label="0" size="mini">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否属于中天">
                  <el-radio-group v-model="form.enroll">
                    <el-radio :label=1 size="mini">是</el-radio>
                    <el-radio :label=0 size="mini">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="XX届大学生">
                  <el-input v-model="form.collegeStudents" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="紧急联系人">
                  <el-input v-model="form.emergencyContact" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="紧急联系电话">
                  <el-input v-model="form.emergencyContactPhone" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="最后更新时间">
                  <el-date-picker v-model="form.lastUpdateTime" format="yyyy-MM-dd" placeholder="选择日期" size="small"
                    style="width: 99%;" type="date" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="18">
                <el-form-item label="个人照片">
                  <el-input v-model="form.pictureUrl" disabled size="small">
                    <el-button v-if="form.pictureUrl" slot="append" icon="el-icon-delete-solid"
                      @click="deleteFile(form.pictureUrl, 'pictureUrl')"></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-upload ref="upload" :action="action" :headers="uploadHeader"
                  :on-success="(response, file, fileList) => onSuccess(response, file, fileList, 'pictureUrl')"
                  :show-file-list="false" style="float: left; margin: 0 10px 0 10px;">
                  <el-button slot="trigger" class="uploadFile" size="mini" type="primary">上传</el-button>
                </el-upload>
                <el-button v-if="form.pictureUrl" class="uploadFile" size="mini" type="primary"
                  @click="downloadFile(form.pictureUrl)">下载</el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="18">
                <el-form-item label="电子签名">
                  <el-input v-model="form.signatureUrl" disabled size="small">
                    <el-button v-if="form.signatureUrl" slot="append" icon="el-icon-delete-solid"
                      @click="deleteFile(form.signatureUrl, 'signatureUrl')"></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-upload ref="upload" :action="action" :headers="uploadHeader"
                  :on-success="(response, file, fileList) => onSuccess(response, file, fileList, 'signatureUrl')"
                  :show-file-list="false" style="float: left; margin: 0 10px 0 10px;">
                  <el-button slot="trigger" class="uploadFile" size="small" type="primary">上传</el-button>
                </el-upload>
                <el-button v-if="form.signatureUrl" class="uploadFile" size="small" type="primary"
                  @click="downloadFile(form.signatureUrl)">下载</el-button>
              </el-col>
            </el-row>
            <!-- <el-row>
                          <el-col :span="20">
                              <el-form-item label="附件资料">
                                  <el-input v-model="form.attachmentInformation" size="small" disabled>
                                      <el-button v-if="form.attachmentInformation" slot="append"
                                          icon="el-icon-delete-solid"
                                          @click="deleteFile(form.attachmentInformation, 'attachmentInformation')"></el-button>
                                  </el-input>
                              </el-form-item>
                          </el-col>
                          <el-col :span="4">
                              <el-upload ref="upload" style="float: left; margin: 0 20px;" :action="action"
                                  :show-file-list="false"
                                  :on-success="(response, file, fileList) => onSuccess(response, file, fileList, 'attachmentInformation')">
                                  <el-button class="uploadFile" slot="trigger" size="mini" type="primary">浏览</el-button>
                              </el-upload>
                              <el-button class="uploadFile" size="mini" type="primary" @click="downloadFile(form.attachmentInformation)">下载</el-button>
                          </el-col>
                      </el-row> -->

            <el-row>
              <el-col :span="20">
                <el-form-item label="附件资料">
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button size="mini" style="float: right;margin-right: 25px" type="primary"
                  @click="annexAdd(0)">新增</el-button>
              </el-col>
            </el-row>
            <el-table :data="annexList" border height="200" style="width: 96%;">
              <el-table-column label="序号" type="index" width="80px">
              </el-table-column>
              <el-table-column label="证件号" prop="idNumber" width="150px">
              </el-table-column>
              <el-table-column label="发证单位" prop="issueUnit" width="150px">
              </el-table-column>
              <el-table-column label="文件名称" prop="fileName" show-overflow-tooltip width="200px">
              </el-table-column>
              <el-table-column label="级别" prop="level" width="150px">
              </el-table-column>
              <el-table-column label="有效期" prop="periodValidity" width="150px">
              </el-table-column>
              <el-table-column label="添加时间" prop="createTime" width="150px">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="150px">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="downloadFile(scope.row.fileName)">下载</el-button>
                  <el-button size="mini" type="text" @click="annexAdd(1, scope.row)">编辑</el-button>
                  <el-button size="mini" type="text" @click="deleteAnnex(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <el-row>
          </el-row>
        </div>
      </div>
    </div>
    <!-- äººå‘˜åˆ†ç±»å¼¹æ¡† -->
    <el-dialog :visible.sync="dialogVisible" title="提示" width="40%" @open="getComparisonList">
      <div style="height: 30vh;">
        <el-row>
          <el-col :span="4">
            äººå‘˜åˆ†ç±»ï¼š
          </el-col>
          <el-col :span="20" style="text-align: left;">
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="v in personnelClassification" :key="v.value" :label="v.value"></el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="clickPersonnelClassificationSure">ç¡® å®š</el-button>
      </span>
    </el-dialog>

    <!-- æ–°å¢žé™„件资料 -->
    <el-dialog :before-close="handleClose" :title="title" :visible.sync="dialogVisible1" width="40%"
      @open="getComparisonList">
      <el-form ref="annex" :model="annex" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="16">
            <el-form-item label="证件号" prop="idNumber">
              <el-input v-model="annex.idNumber" clearable size="small" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="16">
            <el-form-item label="发证单位" prop="issueUnit">
              <el-input v-model="annex.issueUnit" clearable size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="16">
            <el-form-item label="级别" prop="level">
              <el-input v-model="annex.level" clearable size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="16">
            <el-form-item label="有效期" prop="periodValidity">
              <el-date-picker v-model="annex.periodValidity" format="yyyy-MM-dd" placeholder="选择日期" size="small"
                style="width: 99%;" type="date" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="16">
            <el-form-item label="复印件" prop="copy">
              <el-input v-model="annex.copy" clearable size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-top: 15px">
          <el-col :span="16">
            <el-form-item label="原件" prop="original">
              <el-input v-model="annex.original" clearable size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="16">
            <el-form-item label="文件">
              <el-upload :action="action" :headers="uploadHeader" :before-upload="beforeAvatarUpload"
                :on-success="(response, file, fileList) => onSuccess(response, file, fileList, 'fileName')"
                :show-file-list="false">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-upload avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancellation">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="submitForm('annex')">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEmployees,
  getAnnex,
  updateAnnex,
  getAnnexByUserId,
  addAnnex,
  deleteAnnex,
  getCNASPersonnelInfo,
  saveCNASPersonnelInfo,
  deleteCNASFile
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
  dicts: ['personnl_type'],
  props: {
    clickNodeVal: {
      type: Object,
      default: () => { return {} }
    },
  },
  data() {
    return {
      synchronousLoading: false,
      addOrupdate: null,
      title: '',
      annexList: [],
      imageUrl: '',
      annex: {
        userId: '',
        idNumber: '',
        issueUnit: '',
        level: '',
        periodValidity: '',
        copy: '',
        original: '',
        fileName: ''
      },
      rules: {
        idNumber: [
          { required: true, message: '请输入证件号', trigger: 'blur' }
        ],
        issueUnit: [
          { required: true, message: '请输入发证单位', trigger: 'blur' }
        ],
        periodValidity: [
          { required: true, message: '请选择有效期', trigger: 'blur' }
        ]
      },
      dialogVisible1: false,
      form: {
        userId: '',
        name: '',
        account: '',
        currentState: '',
        jobNumber: '',
        subordinateNumber: '',
        sex: '',
        corporateName: '',
        department: '',
        departLimsId: [],
        postType: '',
        postCode: '',
        postName: '',
        groupTime: '',
        unitTime: '',
        reportingTo: '',
        laborRelations: '',
        trialStartTime: '',
        trialEndTime: '',
        personnelClassification: '',
        dateBirth: '',
        nativePlace: '',
        nation: '',
        idType: '',
        identityCard: '',
        age: '',
        validityPeriod: '',
        maritalStatus: '',
        idAddress: '',
        idDetailAddress: '',
        currentAddress: '',
        currentDetailAddress: '',
        serviceAddress: '',
        serviceDetailAddress: '',
        retiredSoldiers: '',
        politicalStatus: '',
        dumplingTime: '',
        telephone: '',
        cornet: '',
        officePhone: '',
        email: '',
        ncre: '',
        officialAcademicRedentials: '',
        highestDegree: '',
        graduatedInstitutions1: '',
        major1: '',
        graduationTime1: '',
        graduatedInstitutions2: '',
        major2: '',
        graduationTime2: '',
        fullTime: '',
        enroll: '',
        collegeStudents: '',
        emergencyContact: '',
        emergencyContactPhone: '',
        lastUpdateTime: '',
        pictureUrl: '',
        signatureUrl: '',
      },
      department: [],
      saveLoading: false,
      dialogVisible: false,
      personnelClassification: [],
      checkList: [],
      successFileList: [], // é˜²æ­¢åŽç«¯å‡ºçŽ°è„æ•°æ®
      isSave: false,
    }
  },
  created() {
    this.init()
  },
  computed: {
    action() {
      return this.javaApi + '/personBasicInfo/saveCNASFile'
    }
  },
  methods: {
    synchronous() {
      console.log('基本信息', this.clickNodeVal);
      this.synchronousLoading = true
      getEmployees({ userId: this.clickNodeVal.userId }).then(res => {
        this.synchronousLoading = false
        this.getUserBasisInfo(this.clickNodeVal.userId)
        this.$message.success("同步成功")

      })
    },
    annexAdd(type, row) {
      if (type === 1) {
        this.title = '编辑附件资料'
        this.addOrupdate = 1
        getAnnex({ id: row.id }).then(res => {
          this.annex = res.data
          this.imageUrl = this.javaApi + '/img/' + res.data.fileName
        })
      } else {
        this.title = '新增附件资料'
        this.addOrupdate = 2
      }
      this.dialogVisible1 = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addAnnex()
        } else {
          return false
        }
      })
    },
    addAnnex() {
      if (this.annex.fileName == "" || this.annex.fileName == null || this.annex.fileName == undefined) {
        this.$message.error("请上传文件")
        return
      }
      this.annex.userId = this.clickNodeVal.userId
      if (this.addOrupdate === 1) {
        updateAnnex(this.annex).then(res => {
          if (res.code == 200) {
            getAnnexByUserId({ userId: this.clickNodeVal.userId }).then(res => {
              this.dialogVisible1 = false
              this.imageUrl = ''
              this.resetForm('annex')
              this.annexList = res.data
              this.$message.success('更新成功！')
            })
          }
        })
      } else {
        this.annex.id = null
        addAnnex(this.annex).then(res => {
          if (res.code == 200) {
            getAnnexByUserId({ userId: this.clickNodeVal.userId }).then(res => {
              this.dialogVisible1 = false
              this.imageUrl = ''
              this.resetForm('annex')
              this.annexList = res.data
              this.$message.success('保存成功')
            })
          }
        })
      }
    },
    deleteAnnex(row) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAnnex(row.id).then(res => {
          this.$message.success('删除成功！')
          this.annexList = this.annexList.filter(item => item.id != row.id)
        })
      })
    },
    beforeAvatarUpload(file) {
      let flag = true
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        flag = false
      }
      if (!flag) {
        return Promise.reject(flag); //正确的终止
      }
    },
    downloadFile(fileName) {
      this.$download.saveAs(fileName, fileName)
    },
    async onSuccess(response, file, fileList, entityVal) {
      if (entityVal == 'fileName') {
        this.annex.fileName = response.data
        this.imageUrl = this.javaApi + '/img/' + response.data
      }
      // åœ¨ä¿å­˜èµ‹å€¼æ–°æ–‡ä»¶
      this.successFileList.push(response.data)
      this.$set(this.form, entityVal, response.data)
    },
    // åˆå§‹åŒ–调用
    init() {
      if (!this.clickNodeVal.userId) {
        let user = JSON.parse(localStorage.getItem('user'))
        this.getUserBasisInfo(user.userId)
        this.clickNodeVal.userId = user.userId
      } else {
        this.getUserBasisInfo(this.clickNodeVal.userId)
      }
    },
    getUserBasisInfo(userId) {
      getCNASPersonnelInfo({ userId }).then(res => {
        this.form = res.data.PersonBasicInfoDto
        this.department = res.data.department
        this.annexList = res.data.annexList
        this.form.departLimsId = res.data.PersonBasicInfoDto.departLimsId.split(',').filter(a => a != "").map(Number)
        console.log('res.data', res);
      })
    },
    async save() {
      this.saveLoading = true
      this.form.userId = this.clickNodeVal.userId
      if (Array.isArray(this.form.departLimsId)) {
        if (this.form.departLimsId.length > 0) {
          this.form.departLimsId = this.form.departLimsId.join(',').trim() + ','
        } else {
          this.form.departLimsId = ''
        }
      }
      saveCNASPersonnelInfo(this.form).then(res => {
        this.saveLoading = false
        this.isSave = true
        this.getUserBasisInfo(this.clickNodeVal.userId)
        this.$message.success('保存成功！')
      })
    },
    // å–人员分类的字典
    getComparisonList() {
      // æ–‡ä»¶çŠ¶æ€
      this.getDicts("personnl_type").then((response) => {
        this.personnelClassification = this.dictToValue(response.data);
        this.checkList = this.form.personnelClassification ? this.form.personnelClassification.split('，') : []
      });
    },
    clickPersonnelClassificationSure() {
      this.dialogVisible = false
      this.form.personnelClassification = this.checkList.filter(m => m).join('，')
    },
    async deleteFile(fileName, entityVal) {
      await deleteCNASFile({ fileName }).then(res => {
        this.$message.success('删除成功！')
        this.$set(this.form, entityVal, null)
        let index = this.successFileList.indexOf(fileName)
        if (index != -1) {
          this.successFileList.splice(index, 1)
        }
      })
    },
    validateFileSize(rule, value, callback) {
      if (!value) {
        return callback(new Error('请上传文件'));
      } else {
        callback();
      }
    },
    cancellation() {
      this.dialogVisible1 = false
      this.imageUrl = ''
      this.resetForm('annex')
    },
    handleClose(done) {
      this.imageUrl = ''
      this.annex = {
        userId: '',
        idNumber: '',
        issueUnit: '',
        level: '',
        periodValidity: '',
        copy: '',
        original: '',
        fileName: ''
      }
      done();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal: {
      handler(newVal, oldVal) {
        if (newVal.userId) {
          this.getUserBasisInfo(newVal.userId)
        }
      },
    }
  }
}
</script>

<style scoped>
>>>.el-form-item {
  margin-bottom: 3px;
}

.el-input {
  border-radius: 15px;
}

.el-icon-picture-outline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.uploadFile {
  margin-top: 2px;
  float: left;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #0f8bf1;
  width: 178px;
  height: 50px;
  text-align: center;
  border: 1px solid #d9d9d9;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/PersonnelList/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,364 @@
<template>
  <div>
    <div class="search-list">
      <span class="search-input">
        <span class="search-label">
          <span style="width: 120px;font-size: 14px;line-height: 32px">人员名称：</span>
          <el-input v-model="entity.name" clearable placeholder="请输入" size="small" style="width: 100%;"
            @keyup.enter.native="refreshTable()">
          </el-input>
        </span>
        <el-button size="small" style="margin-left: 10px" @click="refresh()">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
      </span>
      <span>
        <el-button :loading="synchronousLoading" size="small" type="primary" @click="synchronous"
          :v-show="departId">同步第三方人员信息</el-button>
        <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出</el-button>
        <el-button size="small" type="primary"
          @click="selectUserDia = true, getList(), queryParams.name = '', multipleSelection = []">新建</el-button>
      </span>
    </div>
    <div class="search-table">
      <el-table v-loading="tableLoading" :data="tableData" border height="calc(100vh - 20em)" style="width: 100%;">
        <el-table-column align="center" label="序号" width="60">
          <template v-slot="scope">
            <span>{{ (page.current - 1) * page.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="员工编号" prop="account" width="150"></el-table-column>
        <el-table-column label="姓名" prop="name" width="120"></el-table-column>
        <el-table-column label="入集团时间" prop="groupTime" width="120"></el-table-column>
        <el-table-column label="籍贯" prop="nativePlace" width="120"></el-table-column>
        <el-table-column label="证件号码" prop="identityCard" show-overflow-tooltip width="300"></el-table-column>
        <el-table-column label="证件地址" prop="idAddress" show-overflow-tooltip width="100"></el-table-column>
        <el-table-column label="手机号" prop="telephone" show-overflow-tooltip width="100"></el-table-column>
        <el-table-column label="毕业院校" prop="graduatedInstitutions1" width="100"></el-table-column>
        <el-table-column label="所学专业" prop="major1" width="100"></el-table-column>
        <el-table-column label="毕业时间" prop="graduationTime1" width="100"></el-table-column>
        <el-table-column label="最高学历" prop="officialAcademicRedentials" width="100"></el-table-column>
        <el-table-column label="最高学位" prop="highestDegree" width="100"></el-table-column>
        <el-table-column label="职称" prop="professionalTitle" width="100"></el-table-column>
        <el-table-column label="紧急联系人" prop="emergencyContact" width="120"></el-table-column>
        <el-table-column label="紧急联系电话" prop="emergencyContactPhone" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="downPerson(scope.row)">下载</el-button>
            <el-button size="small" type="text" @click="$emit('updatePerson', scope.row)">编辑
            </el-button>
            <el-button size="small" type="text" @click="deletePerson(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :current-page.sync="page.current" :page-size="page.size"
        :page-sizes="[10, 20, 30, 50, 100]" :total="page.total" layout="->,total, sizes, prev, pager, next, jumper"
        style="margin-top: 16px" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="selectUserDia" title="选择用户" width="70%">
      <div class="search" style="margin-bottom: 9px;">
        <div class="search_thing" style="display: flex;">
          <div class="search_label">用户名：</div>
          <div class="search_input">
            <el-input v-model="queryParams.name" clearable placeholder="请输入" size="small"
              @keyup.enter.native="getList()" style="width: 150px;"></el-input>
          </div>
        </div>
      </div>
      <div v-if="selectUserDia" class="body" style="height: 60vh;">
        <lims-table :tableData="personTableData" :column="column" :tableLoading="tableLoading"
          :height="'calc(100vh - 290px)'" :page="personPage" :isSelection="true"
          :handleSelectionChange="handleSelectionChange"></lims-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectUserDia = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="selectUser">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import limsTable from "@/components/Table/lims-table.vue";
import {
  getEmployees,
  basicInformationOfPersonnelSelectPage,
  delUserDepardLimsId,
  upUserDepardLimsId,
  exportPersonBasicInfo,
  exportPersonBasicInfoById,
  selectUserList,
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
  name: 'PersonnelList',
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: { limsTable },
  props: {
    departId: {
      type: Number,
      default: () => {
        return null;
      }
    },
    isDepartment: {
      type: Boolean,
      default: false
    },
    currentCompaniesList: {
      type: Array,
      default: []
    }
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      entity: {},
      multipleSelection: [],
      synchronousLoading: false,
      page: {
        size: 20,
        current: 1,
      },
      outLoading: false,
      tableLoading: false,
      tableData: [], // äººå‘˜æ€»åˆ—表数据
      selectUserDia: false, // æ·»åŠ äººå‘˜å¼¹æ¡†,
      stateList: [
        {
          value: 1,
          type: 'success',
          label: '启用'
        },
        {
          value: 0,
          type: 'danger',
          label: '停用'
        }
      ],
      queryParams: {
        name: ''
      },
      personTableData: [],
      column: [
        { label: "姓名", prop: "name" },
        { label: "账号", prop: "account" },
        {
          label: "角色",
          prop: "roleName",
        },
        {
          label: "状态", prop: "state", dataType: "tag",
          formatData: (params) => {
            let index = this.stateList.findIndex(
              (item) => item.value == params
            );
            if (index > -1) {
              return this.stateList[index].label;
            } else {
              return null;
            }
          },
          formatType: (params) => {
            let index = this.stateList.findIndex(
              (item) => item.value == params
            );
            if (index > -1) {
              return this.stateList[index].type;
            } else {
              return null;
            }
          },
        },
        { label: "电话号码", prop: "phone" },
      ],
      personPage: {
        total: 0,
        size: 10,
        current: 0,
      },
      tableLoading: false,
    };
  },
  mounted() {
    this.refreshTable();
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    synchronous() {
      console.log('departId', this.departId);
      this.$message.warning("正在同步，请稍后...")
      this.synchronousLoading = true
      getEmployees({ departId: this.departId }).then(res => {
        this.synchronousLoading = false
        this.$message.success("同步成功")
      })
    },
    /**
     * @desc èŽ·å–设备id
     */
    // é‡ç½®
    refresh() {
      this.page = {
        size: 20,
        current: 1,
      };
      this.entity.name = ''
      this.refreshTable();
    },
    // æŸ¥è¯¢äººå‘˜åˆ—表数据
    refreshTable(entity, type) {
      try {
        this.tableLoading = true;
        this.entity.departmentId = this.departId;
        let params = { ...this.page, ...this.entity }
        delete params.total
        basicInformationOfPersonnelSelectPage(params).then(res => {
          this.tableLoading = false;
          if (res.code === 201) {
            return;
          }
          this.page.total = res.data.total;
          this.tableData = res.data.records;
        });
      } catch (e) {
        this.tableLoading = false;
      }
    },
    // åˆ é™¤äººå‘˜
    deletePerson(row) {
      this.$confirm('是否删除当前数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delUserDepardLimsId({ id: row.id }).then(res => {
            if (res.code === 201) {
              return;
            }
            this.$message.success('删除成功');
            this.refreshTable();
          })
            .catch(e => {
              this.$message.error('删除失败');
            });
        })
        .catch(() => {
        });
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.refreshTable();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.refreshTable();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    selectUser() {
      if (!this.currentCompaniesList.length > 0) {
        this.$message.warning("请选择部门！")
        return;
      }
      let selects = this.multipleSelection;
      if (selects.length == 0) {
        this.$message.error('未选择数据');
        return;
      }
      let ids = [];
      selects.forEach(a => {
        ids.push(a.id);
      });
      let str = '';
      this.currentCompaniesList.forEach(a => {
        if (a) {
          str += a + ',';
        }
      });
      this.selectUserDia = false;
      upUserDepardLimsId({
        ids: JSON.stringify(ids),
        id: str
      }).then(res => {
        if (res.code === 201) {
          return;
        }
        this.$message.success('添加成功');
        this.refreshTable();
      });
      this.$emit('refreshTree')
    },
    getList() {
      this.tableLoading = true;
      let param = { ...this.queryParams, ...this.personPage };
      delete param.total;
      selectUserList({ ...param })
        .then((res) => {
          this.tableLoading = false;
          if (res.code === 200) {
            this.personTableData = res.data;
          }
        })
        .catch((err) => {
          this.tableLoading = false;
        });
    },
    pagination({ page, limit }) {
      this.personPage.current = page;
      this.personPage.size = limit;
      this.getList();
    },
    handleDown() {
      this.outLoading = true;
      let entity = this.HaveJson(this.entity)
      exportPersonBasicInfo(entity).then(res => {
        this.outLoading = false;
        if (res.code === 201) {
          return;
        }
        const blob = new Blob([res], { type: 'application/octet-stream' });
        this.$download.saveAs(blob, '人员信息.xlsx')
      });
    },
    downPerson(row) {
      exportPersonBasicInfoById({ id: row.userId }).then(res => {
        this.$download.saveAs(res.data, res.data)
        this.$message.success('下载成功')
      });
    }
  },
  watch: {
    departId: {
      handler(newId, oldId) {
        if (newId) {
          this.page.current = 1
          this.refreshTable();
        }
      }
    }
  }
};
</script>

<style scoped>
.search-list {
  padding: 0 16px 16px;
  display: flex;
  justify-content: space-between;
}

.search-table {
  padding: 0 16px;
}

.search-input {
  display: flex;
}

.search-label {
  display: flex;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/PersonnelTraining/AddInDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,319 @@
<template>
  <div>
    <el-dialog :visible.sync="addTrainingPlanDia" :show="currshowlist" @close="$emit('update:currshowlist', false)"
      title="新增培训计划" width="50%">
      <div class="body">
        <el-form ref="trainingPlan" :model="trainingPlan" label-position="right" label-width="90px"
          :rules="trainingPlanRules">
          <el-row>
            <el-col :span="12">
              <!-- <el-form-item label="培训日期:" prop="trainingDate">
                <el-date-picker v-model="trainingPlan.trainingDate" format="yyyy-MM-dd"
                                placeholder="选择日期" size="small" value-format="yyyy-MM-dd"
                                type="date" style="width: 100%"></el-date-picker>
              </el-form-item> -->
              <el-form-item label="培训月份:" prop="trainingDate">
                <el-select v-model="trainingPlan.trainingDate">
                  <el-option v-for="(v, i) in months" :key="i" :label="v.label" :value="v.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训日期:" prop="trainingDateTwo">
                <el-date-picker v-model="trainingPlan.trainingDateTwo" type="date" value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开始时间:" prop="openingTime">
                <el-time-picker v-model="trainingPlan.openingTime" placeholder="选择时间" size="small" style="width: 100%"
                  value-format="HH:mm:ss"></el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间:" prop="endTime">
                <el-time-picker v-model="trainingPlan.endTime" placeholder="选择时间" size="small" style="width: 100%"
                  value-format="HH:mm:ss"></el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训目标:">
                <el-input v-model="trainingPlan.trainingObjectives" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参加对象:">
                <el-input v-model="trainingPlan.participants" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训内容:" prop="trainingContent">
                <el-input v-model="trainingPlan.trainingContent" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训讲师:" prop="trainingLecturerId">
                <el-select v-model="trainingPlan.trainingLecturerId" multiple clearable filterable placeholder="请选择"
                  size="small" style="width: 100%">
                  <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="课题学分:">
                <el-input type="number" v-model="trainingPlan.projectCredits" label="描述文字" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训地点:">
                <el-input v-model="trainingPlan.placeTraining" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训方式:">
                <el-input v-model="trainingPlan.trainingMode" placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="举办部门:">
                <el-select v-model="trainingPlan.holdingDepartment" placeholder="请选择">
                  <el-option v-for="(v, i) in departLims" :key="i" :label="v.name" :value="v.id"></el-option>
                </el-select>
                <!--
                <el-input
                  v-model="trainingPlan.holdingDepartment"
                  placeholder="请输入"
                  size="small"
                ></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="课时:">
                <el-input type="number" v-model="trainingPlan.classHour" label="描述文字" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAdd">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="submitAdd">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectDepartLims,
  addOrUpdatePersonTrainingDetailed,
} from '@/api/cnas/personnel/personnelInfo.js'
import { selectUserCondition } from "@/api/system/user";
export default {
  props: {
    currshowlist: {
      type: Boolean,
      default: false,
    },
    currentChangeRow: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  name: "Add",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    var trainingLecturerIdValidate = (rule, value, callback) => {
      if (typeof value !== "undefined" && value.length == 0) {
        callback(new Error("请选择讲师"));
      } else {
        callback();
      }
    };
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      departLims: [],
      months: [
        { label: "1月", value: "1月" },
        { label: "2月", value: "2月" },
        { label: "3月", value: "3月" },
        { label: "4月", value: "4月" },
        { label: "5月", value: "5月" },
        { label: "6月", value: "6月" },
        { label: "7月", value: "7月" },
        { label: "8月", value: "8月" },
        { label: "9月", value: "9月" },
        { label: "10月", value: "10月" },
        { label: "11月", value: "11月" },
        { label: "12月", value: "12月" },
      ],
      addTrainingPlanDia: false,
      trainingPlan: {
        id: "",
        planId: "",
        trainingDate: "",
        trainingDateTwo: "",
        classHour: "",
        openingTime: "",
        endTime: "",
        trainingObjectives: "",
        participants: "",
        trainingContent: "",
        trainingLecturerId: undefined,
        projectCredits: "",
        placeTraining: "",
        trainingMode: "",
        holdingDepartment: "",
      },
      trainingPlanRules: {
        trainingDate: [
          { required: true, message: "请选择培训日期", trigger: "change" },
        ],
        trainingDateTwo: [
          { required: true, message: "请选择培训日期", trigger: "change" },
        ],
        openingTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        trainingContent: [
          { required: true, message: "请输入培训内容", trigger: "blur" },
        ],
        trainingLecturerId: [
          {
            required: true,
            validator: trainingLecturerIdValidate,
            trigger: "change",
          },
        ],
      },
      responsibleOptions: [],
    };
  },
  created() {
    this.departLims = [];
    selectDepartLims().then((res) => {
      this.departLims = res.data;
    });
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    showDialog(id) {
      this.trainingPlan.planId = id;
      this.getUserList();
      // this.addTrainingPlanDia = true;
    },
    showEditDialog(row) {
      this.getUserList();
      let data = JSON.parse(JSON.stringify(row));

      console.log(data.trainingLecturerId);
      let list = data.trainingLecturerId.split(/、|，|,|\\s+/);
      this.$set(this.trainingPlan, "trainingLecturerId", list);
      this.$set(this.trainingPlan, "id", data.id);
      this.$set(this.trainingPlan, "trainingDate", data.trainingDate);
      this.$set(this.trainingPlan, "trainingDateTwo", data.trainingDateTwo);
      this.$set(this.trainingPlan, "classHour", data.classHour);
      this.$set(this.trainingPlan, "openingTime", data.openingTime);
      this.$set(this.trainingPlan, "endTime", data.endTime);
      this.$set(
        this.trainingPlan,
        "trainingObjectives",
        data.trainingObjectives
      );
      this.$set(this.trainingPlan, "participants", data.participants);
      this.$set(this.trainingPlan, "projectCredits", data.projectCredits);
      this.$set(this.trainingPlan, "placeTraining", data.placeTraining);
      this.$set(this.trainingPlan, "trainingContent", data.trainingContent);
      this.$set(this.trainingPlan, "trainingMode", data.trainingMode);
      this.$set(this.trainingPlan, "holdingDepartment", data.holdingDepartment);
      this.$set(this.trainingPlan, "planId", data.planId);

      console.log("222", this.trainingPlan);
    },
    // æäº¤æ–°å¢ž
    submitAdd() {
      this.$refs.trainingPlan.validate((valid) => {
        if (valid) {
          // å°†åŸ¹è®­è®²å¸ˆå€¼å°è£…
          this.trainingPlan.trainingLecturerId =
            this.trainingPlan.trainingLecturerId.join(",");
          console.log(
            "this.trainingPlan.trainingLecturerId",
            this.trainingPlan.trainingLecturerId
          );
          const personTrainingDetailed = this.trainingPlan;
          console.log("personTrainingDetailed", personTrainingDetailed);
          addOrUpdatePersonTrainingDetailed(personTrainingDetailed).then((res) => {
            if (res.code == 200) {
              this.$message.success("提交成功");
              this.closeAdd();
              this.dialogVisible = false;
            }
          });
        }
      });
    },
    // å…³é—­å¼¹æ¡†
    closeAdd() {
      this.$refs.trainingPlan.resetFields();
      this.$emit("search");
      this.$emit("searchPlan");
      this.addTrainingPlanDia = false;
    },
    // èŽ·å–负责人信息接口
    getUserList() {
      selectUserCondition().then((res) => {
        if (res.code == 200) {
          this.responsibleOptions = res.data;
        }
      });
    },
  },
  watch: {
    // addTrainingPlanDia(newVal) {
    //   if (newVal) {
    //     this.trainingPlan.planId = null;
    //   }
    // },
    currshowlist(newValue) {
      this.addTrainingPlanDia = this.currshowlist;
      if (!newValue) {
        this.closeAdd();
        this.trainingPlan = {
          id: "",
          planId: "",
          trainingDate: "",
          classHour: "",
          openingTime: "",
          endTime: "",
          trainingObjectives: "",
          participants: "",
          trainingContent: "",
          trainingLecturerId: undefined,
          projectCredits: "",
          placeTraining: "",
          trainingMode: "",
          holdingDepartment: "",
        };
      }
      if (this.currshowlist) {
        this.$nextTick(() => {
          if (this.trainingPlan.trainingLecturerId.length == 0) {
            this.trainingPlan.trainingLecturerId = undefined;
          }
        });
      }
    },
  },
};
</script>

<style scoped></style>

 src/views/CNAS/personnel/personnelInfo/Department/components/PersonnelTraining/Edit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,662 @@
<template>
  <div>
    <div class="page-header">
      <h4><span class="line"></span><span>培训与考核记录</span></h4>
      <div class="btns">
        <el-button size="small" type="primary" @click="submitForm" :disabled="![1, 4].includes(currentRow.state)">{{
          currentRow.assessmentUserId ? '保存' : '提交' }}</el-button>
        <el-button size="small" @click="$emit('goBack')">返回</el-button>
      </div>
    </div>
    <div class="form_title">
      <el-row>
        <el-col :span="5">
          <span class="form_label">课程编号：</span>
          <span> {{ trainingForm.courseCode }} </span>
        </el-col>
        <el-col :span="6">
          <span class="form_label">培训内容：</span>
          <span> {{ trainingForm.trainingContent }} </span>
        </el-col>
        <el-col :span="4">
          <span class="form_label">状态：</span>
          <el-tag v-if="trainingForm.state === 1" type="success">已完成</el-tag>
          <el-tag v-if="trainingForm.state === 2" type="warning">进行中</el-tag>
          <el-tag v-if="trainingForm.state === 3" type="primary">未开始</el-tag>
          <el-tag v-if="trainingForm.state === 4" type="info">已结束</el-tag>
        </el-col>
        <el-col :span="4">
          <span class="form_label">培训讲师：</span>
          <span> {{ trainingForm.trainingLecturerId }} </span>
        </el-col>
        <el-col :span="4">
          <span class="form_label">培训日期：</span>
          <span> {{ trainingForm.trainingDate }} </span>
        </el-col>
      </el-row>
      <el-row style="margin: 15px 0">
        <el-form>
          <el-col :span="12">
            <el-form-item label="考核方式">
              <el-input v-model="trainingForm.assessmentMethod"
                :disabled="currentRow.state == 1 || currentRow.assessmentUserId" :rows="2" placeholder="请输入"
                size="small" style="width: 79%" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="本次培训综合评价">
              <el-input v-model="trainingForm.comprehensiveAssessment"
                :disabled="currentRow.state == 1 || ((currentRow.assessmentUserId !== user.userId) && ![35, 16, 36].includes(user.userId)) || !currentRow.assessmentUserId"
                :rows="2" placeholder="请输入" size="small" style="width: 68%" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评价人">
              <el-select v-model="trainingForm.assessmentUserId"
                :disabled="currentRow.state == 1 || currentRow.assessmentUserId" placeholder="请选择" size="small"
                style="width: 68%">
                <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评价时间">
              <el-date-picker v-model="trainingForm.assessmentDate"
                :disabled="currentRow.state == 1 || ((currentRow.assessmentUserId !== user.userId) && ![35, 16, 36].includes(user.userId)) || !currentRow.assessmentUserId"
                style="width:40%" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="small"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训摘要">
              <el-input v-model="trainingForm.trainingAbstract"
                :disabled="currentRow.state == 1 || currentRow.assessmentUserId" :rows="2" placeholder="请输入"
                size="small" style="width: 79%" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <!-- <el-upload
                ref="upload"
                :action="action"
                :before-upload="beforeUpload"
                :on-error="onError"
                :data="uploadData"
                :headers="uploadHeader"
                :on-success="attachmentUpload"
                >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload> -->
              <el-button type="primary" size="small" @click="attachmentFrame = true">附件</el-button>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12" :offset="12">
            <el-image
              v-if="currentRow.url"
              style="width: 70%; height: 100px"
              :src="javaApi + '/img/' + currentRow.url">
              </el-image>
          </el-col> -->
        </el-form>
      </el-row>
    </div>
    <!-- æ–‡ä»¶é¢„览 -->
    <el-dialog :visible.sync="lookDialogVisible" fullscreen title="查看附件" width="800px">
      <filePreview v-if="lookDialogVisible" :currentFile="{}" :fileUrl="previewFile"
        style="height: 90vh;overflow-y: auto;top: 0" />
    </el-dialog>
    <!-- é™„件弹框 -->
    <el-dialog title="附件" :visible.sync="attachmentFrame" width="70%" border :before-close="handleClose">
      <el-upload ref="upload" :action="action" :before-upload="beforeUpload" :on-error="onError" :data="uploadData"
        :headers="uploadHeader" :on-success="attachmentUpload" style="margin-bottom: 10px">
        <el-button size="small" type="primary" :disabled="currentRow.state == 1">上传附件</el-button>
      </el-upload>
      <el-table ref="fileData" :data="fileData" height="400px">
        <el-table-column label="序号" type="index" width="100" header-align="center" align="center">
        </el-table-column>
        <el-table-column label="文件名称" prop="fileName" header-align="center" align="center">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200px" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="preview(scope.row)">预览</el-button>
            <el-button type="text" size="small" @click="download(scope.row)">下载</el-button>
            <el-button type="text" style="color: red;" size="small" @click="deleteFile(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="attachmentFrame = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="attachmentFrame = false">ç¡® å®š</el-button>
      </span>
    </el-dialog>


    <el-divider>人员详情</el-divider>
    <div>
      <div class="items_center">
        <span>姓名</span>
        <el-input v-model="userName" class="search" placeholder="请输入" size="small"></el-input>
        <el-button size="small" type="primary" @click="getInfo">查询</el-button>
      </div>
      <div class="items_btn">
        <el-button :disabled="currentRow.state === 1" size="small" type="primary" @click="addPerson">新增人员</el-button>
        <el-button :disabled="currentRow.state === 1" size="small" @click="batchDelete">批量删除</el-button>
      </div>
      <el-table :data="trainingTableData" height="calc(100vh - 30em)" stripe style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="姓名" prop="userName"></el-table-column>
        <el-table-column label="工号" prop="account"></el-table-column>
        <el-table-column label="角色" prop="roleName"></el-table-column>
        <el-table-column label="电话号码" prop="phone"></el-table-column>
        <el-table-column label="考核结果" prop="examinationResults">
          <template v-slot="scope">
            <el-select v-model="scope.row.examinationResults" :disabled="currentRow.state === 1" size="small"
              style="width: 100%" @change="updatePersonResult(scope.row)">
              <el-option label="合格" value="合格"></el-option>
              <el-option label="不合格" value="不合格"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="selectUserDia" title="选择用户" width="70%">
      <div class="search" style="margin-bottom: 9px;">
        <div class="search_thing">
          <div class="search_label">用户名：</div>
          <div class="search_input">
            <el-input v-model="queryParams.name" clearable placeholder="请输入" size="small"
              @keyup.enter.native="$refs.ValueTable.selectList()"></el-input>
          </div>
        </div>
      </div>
      <div v-if="selectUserDia" class="body" style="height: 60vh;">
        <lims-table :tableData="tableData" :column="column" :tableLoading="tableLoading" :height="'calc(100vh - 290px)'"
          :page="page" @pagination="pagination" :isSelection="true"
          :handleSelectionChange="handleSelectionChange"></lims-table>
        <!-- <ValueTable ref="ValueTable" :componentData="addUserTableInfo" :isSelectedList="isSelectedList"
          :url="$api.user.selectUserList" /> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectUserDia = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="selectUser">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TableCard from '@/components/TableCard/index.vue';
import limsTable from "@/components/Table/lims-table.vue";
// import ValueTable from '@/components/Table/value-table.vue';
import filePreview from "@/components/Preview/filePreview.vue";
import {
  fileDownLoad,
  deleteFile,
  getFileData,
  trainingAndAssessmentRecordsPage,
  outOfFocusPreservation,
  newPersonnelAddedToTrainingRecords,
  deleteTrainingAndAssessmentRecords,
  trainingAndAssessmentRecordsAdded,
  selectUserList,
} from '@/api/cnas/personnel/personnelInfo.js'
import { selectUserCondition } from "@/api/system/user";
import { mapGetters } from "vuex";
export default {
  name: 'Edit',
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: { limsTable, TableCard, filePreview },
  props: {
    currentRow: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      previewFile: '',
      lookDialogVisible: false,
      user: {},
      fileData: [],
      attachmentFrame: false,
      isSelectedList: [], // ç¦ç”¨çš„多选
      userName: undefined,
      trainingForm: {
        code: '111111',
        date: '2024-10-10',
      },
      uploadData: {},
      trainingColumn: [
        {
          label: '姓名',
          prop: 'userName'
        },
        {
          label: '工号',
          prop: 'account'
        },
        {
          label: '角色',
          prop: 'roleName'
        },
        {
          label: '电话号码',
          prop: 'phone'
        },
        {
          label: '考核结果',
          prop: 'result'
        }
      ],
      trainingTableData: [],
      trainingLoading: false,
      selectUserDia: false, // æ·»åŠ äººå‘˜å¼¹æ¡†
      addUserTableInfo: {
        name: null,
        entity: {
          departLimsId: '1',
          orderBy: {
            field: 'id',
            order: 'asc'
          }
        },
        isIndex: true,
        showSelect: true,
        select: true,
        do: [],
        tagField: {
          state: {
            select: [
              {
                value: 1,
                type: 'success',
                label: '启用'
              },
              {
                value: 0,
                type: 'danger',
                label: '停用'
              }
            ]
          }
        },
        selectField: {},
        upUserDepardLimsIdPower: true
      },
      multipleSelection: [],
      multipleSelections: [],
      userList: [],
      stateList: [
        {
          value: 1,
          type: 'success',
          label: '启用'
        },
        {
          value: 0,
          type: 'danger',
          label: '停用'
        }
      ],
      queryParams: {},
      tableData: [],
      column: [
        { label: "姓名", prop: "name" },
        { label: "账号", prop: "account" },
        {
          label: "角色",
          prop: "roleName",
        },
        {
          label: "状态", prop: "state", dataType: "tag",
          formatData: (params) => {
            let index = this.stateList.findIndex(
              (item) => item.value == params
            );
            if (index > -1) {
              return this.stateList[index].label;
            } else {
              return null;
            }
          },
          formatType: (params) => {
            let index = this.stateList.findIndex(
              (item) => item.value == params
            );
            if (index > -1) {
              return this.stateList[index].type;
            } else {
              return null;
            }
          },
        },
        { label: "电话号码", prop: "phone" },
      ],
      page: {
        total: 0,
        size: 10,
        current: 0,
      },
      tableLoading: false,
    };
  },
  computed: {
    action() {
      return this.javaApi + '/personTraining/fileUpload';
    },
    ...mapGetters(["userId"]),
  },
  mounted() {
    this.trainingForm = JSON.parse(JSON.stringify(this.currentRow))
    this.getInfo()
    this.getUserList()
    this.getFileData(this.trainingForm.id)
    // èŽ·å–当前登录人信息
    this.loginPerson();
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // é™„件预览
    preview(row) {
      let folder = '';
      if (row.fileUrl.includes('xls')) {
        folder = 'excel'
      } else if (row.fileUrl.includes('docx')) {
        folder = 'word'
      } else {
        folder = 'img'
      }
      this.previewFile = this.javaApi + folder + row.fileUrl
      this.$nextTick(() => {
        this.lookDialogVisible = true
      })
    },
    // ä¸‹è½½
    download(row) {
      fileDownLoad({ id: row.id }).then(res => {
        console.log('2123');
        const blob = new Blob([res], { type: row.mime });
        this.$download.saveAs(blob, row.fileName)
      })
    },

    // åˆ é™¤
    deleteFile(row) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFile({ id: row.id }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getFileData(this.trainingForm.id);
        })
      })

    },
    // æŸ¥è¯¢
    getFileData(id) {
      getFileData({ detailedId: id }).then(res => {
        this.fileData = res.data
      })
    },
    // é™„件上传 æˆåŠŸçš„钩子
    attachmentUpload(res, file, fileList) {
      // ç»™å›¾ç‰‡è·¯å¾„赋值
      this.$message.success('上传成功')
      this.currentRow.url = res.data.url
      this.$refs.upload.clearFiles();
      this.getFileData(this.trainingForm.id);
    },
    // å¤±è´¥çš„钩子
    onError(err, file, fileList) {
      this.$message.error('上传失败')
    },
    // ä¸Šä¼ å‰çš„钩子
    beforeUpload(file) {
      // ç»™ä¼ é€’的参数赋值
      this.$set(this.uploadData, "id", this.currentRow.id)
    },
    // å½“前登录人信息 
    loginPerson() {
      this.user = {
        userId: this.userId
      }
    },
    // èŽ·å–当前数据
    async getInfo() {
      this.trainingLoading = true
      trainingAndAssessmentRecordsPage({
        trainingDetailedId: this.currentRow.id,
        userName: this.userName
      }).then(res => {
        if (res.code === 200) {
          this.trainingTableData = res.data
        }
        this.trainingLoading = false
      })
    },
    async updatePersonResult(row) {
      const { code } = await outOfFocusPreservation(row)
      if (code === 200) {
        this.$message.success("操作成功！")
      }
    },
    getList() {
      this.tableLoading = true;
      let param = { ...this.queryParams, ...this.page };
      delete param.total;
      selectUserList({ ...param })
        .then((res) => {
          this.tableLoading = false;
          if (res.code === 200) {
            this.tableData = res.data.records;
            this.page.total = res.data.total;
          }
        })
        .catch((err) => {
          this.tableLoading = false;
        });
    },
    pagination({ page, limit }) {
      this.page.current = page;
      this.page.size = limit;
      this.getList();
    },
    handleSelectionChange(val) {
      this.multipleSelections = val
    },
    addPerson() {
      this.isSelectedList = this.trainingTableData.map(item => item.userId)
      this.getList()
      this.selectUserDia = true;
    },
    selectUser() {
      let selects = this.multipleSelections;
      if (selects.length == 0) {
        this.$message.error('未选择数据');
        return;
      }
      let list = []
      selects.forEach(a => {
        const obj = {
          courseId: this.currentRow.id,
          examinationResults: "",
          userId: a.id
        }
        list.push(obj)
        // this.trainingTableData.push(obj);
      });
      newPersonnelAddedToTrainingRecords(list).then(res => {
        this.isSelectedList = []
        this.selectUserDia = false;
        this.getInfo()
      })
    },
    // æ‰¹é‡åˆ é™¤
    handleSelectionChange(list) {
      this.multipleSelection = list
    },
    batchDelete() {
      console.log('批量删除', this.multipleSelection)
      if (this.multipleSelection.length > 0) {
        let ids = this.multipleSelection.map(item => item.trainingRecordId)
        this.$confirm('是否确认删除所选择的数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let formData = new FormData()
          formData.append('ids', ids)
          deleteTrainingAndAssessmentRecords(formData)
            .then(res => {
              if (res.code == 200) {
                this.$message.success('删除成功');
                this.getInfo()
              }
            });
        }).catch(() => {
          this.$message.warning('取消删除');
        });
      } else {
        this.$message.warning('请选择需要删除的数据')
      }
    },
    handleSizeChange(val) {
      this.search.size = val;
      this.getInfo();
    },
    handleCurrentChange(val) {
      this.search.current = val;
      this.getInfo();
    },
    /**
     * @desc æäº¤è¡¨å•
     */
    async submitForm() {
      console.log('this.currentRow.state', this.currentRow.state);
      if (this.currentRow.state !== 4 && this.currentRow.state !== 1) {
        this.$message.warning("当前状态无法提交/撤销！")
        return
      }
      // å¦‚果等于4 è¡¨ç¤ºè¯¥çŠ¶æ€ä¸ºå·²ç»“束，1 è¡¨ç¤ºå·²å®Œæˆ
      let state = 4
      if (this.currentRow.assessmentUserId == this.user.userId) {
        state = 1
      }
      let data = {
        assessmentMethod: this.trainingForm.assessmentMethod,
        comprehensiveAssessment: this.trainingForm.comprehensiveAssessment,
        trainingDetailedId: this.trainingForm.id,
        assessmentUserId: this.currentRow.assessmentUserId ? this.currentRow.assessmentUserId : this.trainingForm.assessmentUserId,
        assessmentDate: this.trainingForm.assessmentDate,
        state: state,
        trainingAbstract: this.trainingForm.trainingAbstract
      }
      const { code } = await trainingAndAssessmentRecordsAdded(data)
      if (code === 200) {
        this.currentRow.state = state
        this.$message.success("操作成功")
        // this.$emit('refresh',this.currentRow.id)
      }
    },
    getUserList() {
      selectUserCondition().then(res => {
        if (res.code === 201) {
          return
        }
        this.userList = res.data
      })
    },
    handleClose() {
      this.attachmentFrame = false;
    },
  }
};
</script>

<style scoped>
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-bottom: 10px;
}

h4 {
  display: flex;
  align-items: center;
}

h4 .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.form_title {
  font-size: 14px;
  padding: 0 20px;
  margin-bottom: 10px;
}

.el-divider {
  margin: 0 1em 1em 0;
}

.form__input_label {
  width: 90px;
  margin-right: 6px;
  color: #606266;
}

.form__input_label2 {
  width: 210px;
  margin-right: 6px;
  color: #606266;
}

.search_thing {
  display: flex;
  align-items: center
}

.search_label {
  width: 120px;
}

.pagination {
  display: flex;
  justify-content: space-between
}

.items_center {
  float: left;
  width: 50%;
  text-align: left;
}

.items_btn {
  text-align: right;
  width: 50%;
  float: right;
  margin-bottom: 1em;
}

.search {
  width: 180px;
  padding: 0 16px;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/PersonnelTraining/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1012 @@
<!-- äººå‘˜åŸ¹è®­ -->
<template>
  <div class="flex_column">
    <div v-if="!editPlanShow && isDepartment && flag">
      <TableCard title="年度计划表">
        <template v-slot:form>
          <div class="items_center">
            <span>创建人</span>
            <el-input v-model="pagination.compilerName" class="search" placeholder="请输入" size="mini"></el-input>
            <el-button size="mini" type="primary" @click="getYearPlanList(departId)">查询</el-button>
          </div>
          <div>
            <el-button size="mini" type="primary" @click="uploadDia = true">导入</el-button>
          </div>
        </template>
        <template v-slot:table>
          <limsTable :column="yearPlanColumn" :currentChange="currentChange" :height="'130'"
            :table-data="yearPlanTableData" :table-loading="yearLoading" highlightCurrentRow style="padding: 0 15px"
            :page="pagination" @pagination="paginationMetod">
          </limsTable>
        </template>
      </TableCard>
    </div>
    <div v-if="!editPlanShow" class="table">
      <TableCard title="年度计划明细表">
        <template v-slot:form>
          <div class="items_center">
            <span>培训讲师</span>
            <el-input v-model="inDetailForm.trainingLecturerName" class="search" clearable placeholder="请输入"
              size="mini"></el-input>
            <!-- <span>课程编号</span>
            <el-input v-model="inDetailForm.courseCode" class="search" clearable placeholder="请输入" size="small"></el-input> -->
            <span style="margin-right: 4px">培训日期</span>
            <el-date-picker v-model="inDetailForm.trainingDate" clearable format="yyyy-MM-dd" placeholder="选择日期"
              size="mini" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            <el-button size="mini" style="margin-left: 10px" type="primary" @click="searchTable">查询</el-button>
          </div>
          <div style="display: flex; align-items: center">
            <el-button v-if="isDepartment && currentChangeRow && isOperation && flag" size="mini"
              @click="batchDelete">批量删除</el-button>
            <el-button v-if="isDepartment && currentChangeRow && isOperation && flag" size="mini" type="primary"
              @click="addTrainingPlan">新增</el-button>
          </div>
        </template>
        <template v-slot:table>
          <el-tabs v-model="activeName" style="margin-left: 15px">
            <el-tab-pane label="未培训" name="first">
              <limsTable :column="inDetailPlanColumn" :handleSelectionChange="handleSelectionChange"
                :height="tableHeight + ''" :isSelection="true" :table-data="inDetailPlanTableData"
                :table-loading="yearLoading" style="padding: 0 15px" :page="inDetailPagination"
                @pagination="paginationmethod0">
              </limsTable>
            </el-tab-pane>
            <el-tab-pane label="已结束" name="second">
              <limsTable :column="inDetailPlanColumn" :handleSelectionChange="handleSelectionChange"
                :height="tableHeight + ''" :isSelection="true" :table-data="inDetailPlanTableData"
                :table-loading="yearLoading" style="padding: 0 15px" :page="inDetailPagination"
                @pagination="paginationmethod0">
              </limsTable>
            </el-tab-pane>
          </el-tabs>
        </template>
      </TableCard>
    </div>
    <Add ref="addPlan" :currshowlist.sync="addInDetail" :currentChangeRow="currentChangeRow"
      @search="getInDetailPlan(currentRowId, departId)" @searchPlan="refreshYearPlanList(departId2)"></Add>
    <Edit v-if="editPlanShow" ref="editPlan" :currentRow="currentRow" :key="editKey" @refresh="refresh"
      @del="getInDetailPlan(currentRowId, departId)" @goBack="goBack"></Edit>
    <el-dialog :visible.sync="reviewDialog" title="审核" width="30%" @close="reviewRemarks = ''">
      <span>
        å®¡æ ¸å¤‡æ³¨ï¼š
        <el-input v-model="reviewRemarks" type="textarea"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="reviewLoading" @click="handleReview(2)">不通过</el-button>
        <el-button :loading="reviewLoading" type="primary" @click="handleReview(1)">通 è¿‡</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="approvalDialog" title="批准" width="30%" @close="approvalRemarks = ''">
      <span>
        æ‰¹å‡†å¤‡æ³¨ï¼š
        <el-input v-model="approvalRemarks" type="textarea"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="approvalLoading" @click="handleApproval(2)">不批准</el-button>
        <el-button :loading="reviewLoading" type="primary" @click="handleApproval(1)">批 å‡†</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="uploadDia" title="数据导入" width="500px">
      <div style="margin: 0 auto">
        <el-upload ref="upload" :action="javaApi + '/personTraining/personTrainingImport'" :auto-upload="false"
          :before-upload="beforeUpload" :file-list="fileList" :headers="uploadHeader" :limit="1" :on-error="onError"
          :on-success="onSuccess" accept=".xlsx" drag name="file">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadDia = false">取 æ¶ˆ</el-button>
        <el-button :loading="uploading" type="primary" @click="submitUpload()">上 ä¼ </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TableCard from '@/components/TableCard/index.vue';
import limsTable from "@/components/Table/lims-table.vue";
import Add from "./AddInDetail.vue";
import Edit from "./Edit.vue";
import {
  deleteDetail,
  personTrainingSelect,
  queryTheAnnualPlanDetailsTable,
  personTrainingDelete,
  reviewAnnualPersonnelTraining,
  approveAnnualPersonnelTraining,
  exportPersonTrainingRecord,
  claimOfTrainingAndAssessmentRecords,
  exportPersonTraining,
  deleteAnnualPlanDetailTable,
} from '@/api/cnas/personnel/personnelInfo.js'

export default {
  name: "PersonnelTraining",
  components: { Add, limsTable, TableCard, Edit },
  props: {
    flag: {
      type: Boolean,
      default: false,
    },
    departId: {
      type: Number,
      default: () => {
        return null;
      },
    },
    isDepartment: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      currentPlanId: null,
      activeName: "first",
      addInDetail: false,
      departId2: null,
      editKey: 1,
      search: {},
      superviseForm: {},
      inDetailForm: {
        trainingLecturerName: "",
        courseCode: "",
        trainingDate: "",
      },
      yearLoading: false,
      yearPlanTableData: [], // å¹´åº¦è®¡åˆ’表数据
      yearPlanColumn: [
        {
          label: "文件名称",
          width: "160px",
          minWidth: "160px",
          prop: "fileName",
          showOverflowTooltip: true,
        },
        {
          label: "创建时间",
          width: "160px",
          prop: "createTime",
        },
        {
          label: "创建人",
          prop: "createUserName",
        },
        {
          label: "编制人",
          prop: "compilerName",
        },
        {
          label: "编制日期",
          width: "160px",
          prop: "compilationDate",
        },
        {
          label: "审核人",
          prop: "reviewerName",
          minWidth: "100px",
        },
        {
          dataType: "tag",
          label: "审核状态",
          prop: "reviewerStatus",
          width: "100px",
          formatData: (params) => {
            if (params == 1) {
              return "通过";
            } else if (params == 2) {
              return "不通过";
            } else {
              return null;
            }
          },
          formatType: (params) => {
            if (params == 1) {
              return "success";
            } else if (params == 2) {
              return "danger";
            } else {
              return null;
            }
          },
        },
        {
          label: "审核备注",
          prop: "auditRemarks",
          minWidth: "100px",
        },
        {
          label: "审核日期",
          width: "160px",
          prop: "auditDate",
        },
        {
          label: "批准人",
          prop: "approverName",
          minWidth: "100px",
        },
        {
          label: "批准备注",
          prop: "approvalRemarks",
          minWidth: "100px",
        },
        {
          dataType: "tag",
          label: "批准状态",
          minWidth: "100px",
          prop: "approvalStatus",
          formatData: (params) => {
            if (params == 1) {
              return "批准";
            } else if (params == 2) {
              return "不批准";
            } else {
              return null;
            }
          },
          formatType: (params) => {
            if (params == 1) {
              return "success";
            } else if (params == 2) {
              return "danger";
            } else {
              return null;
            }
          },
        },
        {
          label: "批准日期",
          width: "160px",
          prop: "approvalDate",
        },
        {
          dataType: "action",
          width: "180px",
          label: "操作",
          fixed: "right",
          operation: [
            {
              name: "导出",
              type: "text",
              disabled: (row) => {
                if (row.approvalStatus === 1 && row.reviewerStatus === 1) {
                  return false;
                } else {
                  return true;
                }
              },
              clickFun: (row) => {
                this.downLoadPost(row);
              },
            },
            {
              name: "审核",
              type: "text",
              disabled: (row) => {
                if (row.reviewerStatus === 1 || (row.departId == 18 && row.currentId != 10 && row.currentId != 16) || (row.departId == 19 && row.currentId != 35 && row.currentId != 16)) {
                  return true;
                } else {
                  return false;
                }
              },
              clickFun: (row) => {
                this.handleCheck(row.id);
              },
            },
            {
              name: "批准",
              type: "text",
              disabled: (row) => {
                if (row.approvalStatus === 1 || (row.currentId != 11 && row.currentId != 16)) {
                  return true;
                } else {
                  return false;
                }
              },
              clickFun: (row) => {
                this.handleApprove(row.id);
              },
            },
            {
              name: "删除",
              type: "text",
              color: "#f56c6c",
              clickFun: (row) => {
                this.deleteFun(row.id);
              },
            },
          ],
        },
      ],
      inDetailPlanTableData: [], // å¹´åº¦è®¡åˆ’明细表表数据
      inDetailPlanColumn: [
        // {
        //   label: '课程编号',
        //   prop: 'courseCode',
        //   width: '130px',
        // },
        {
          dataType: "tag",
          label: "报名状态",
          width: "100px",
          prop: "whetherClaim",
          isShow: this.flag,
          formatData: (params) => {
            if (params === true) {
              return "已报名";
            } else {
              return "未报名";
            }
          },
          formatType: (params) => {
            if (params === true) {
              return "success";
            } else {
              return "info";
            }
          },
        },
        {
          label: "报名人数",
          prop: "enrollment",
          width: "100px",
          isShow: !this.flag,
        },
        {
          label: "培训目标",
          prop: "trainingObjectives",
          width: "160px",
          minWidth: "160px",
          showOverflowTooltip: true,
        },
        {
          label: "培训内容",
          prop: "trainingContent",
          width: "160px",
          minWidth: "160px",
          showOverflowTooltip: true,
        },
        {
          label: "培训方式",
          prop: "trainingMode",
          width: "140px",
          minWidth: "140px",
          showOverflowTooltip: true,
        },
        {
          dataType: "tag",
          label: "课程状态",
          width: "100px",
          prop: "state",
          formatData: (params) => {
            if (params == 1) {
              return "已完成";
            } else if (params == 2) {
              return "进行中";
            } else if (params == 3) {
              return "未开始";
            } else if (params == 4) {
              return "已结束";
            } else {
              return null;
            }
          },
          formatType: (params) => {
            if (params == 1) {
              return "success";
            } else if (params == 2) {
              return "warning";
            } else if (params == 3) {
              return "primary";
            } else if (params == 4) {
              return "info";
            } else {
              return null;
            }
          },
        },
        {
          label: "参加对象",
          prop: "participants",
          width: "140px",
          minWidth: "140px",
          showOverflowTooltip: true,
        },
        {
          label: "举办部门",
          prop: "holdingDepartmentName",
          width: "140px",
          minWidth: "140px",
          showOverflowTooltip: true,
        },
        {
          label: "培训地点",
          prop: "placeTraining",
          width: "160px",
          minWidth: "160px",
          showOverflowTooltip: true,
        },
        {
          label: "培训讲师",
          prop: "trainingLecturerId",
          width: "120px",
          minWidth: "120px",
          showOverflowTooltip: true,
        },
        {
          label: "培训日期",
          prop: "trainingDateTwo",
          width: "140px",
        },
        {
          label: "开始时间",
          prop: "openingTime",
          width: "120px",
        },
        {
          label: "课时",
          prop: "classHour",
          width: "100px",
        },
        {
          label: "备注",
          prop: "remarks",
          width: "120px",
          minWidth: "120px",
          showOverflowTooltip: true,
        },
        {
          dataType: "action",
          width: "240",
          label: "操作",
          fixed: "right",
          operation: [
            // è¶…过会议开始时间就不能认领了
            {
              name: "报名",
              type: "text",
              clickFun: (row) => {
                this.handleClaim(row);
              },
              disabled: (row) => {
                if (
                  row.whetherClaim === true ||
                  row.trainingDateTwo < this.$moment().format("YYYY-MM-DD")
                ) {
                  return true;
                } else {
                  return false;
                }
              },
            },
            {
              name: "结果明细",
              type: "text",
              clickFun: (row) => {
                this.editInDetail(row);
              },
              showHide: (row) => {
                if (row.isDisabled == 1) {
                  return true;
                } else {
                  return false;
                }
              },
            },
            {
              name: "导出",
              type: "text",
              clickFun: (row) => {
                this.downLoadInDetail(row);
              },
            },
            {
              name: "删除",
              type: "text",
              color: "#f56c6c",
              clickFun: (row) => {
                this.deleteDetail(row);
              },
              showHide: (row) => {
                if (row.isDisabled == 1) {
                  return true;
                } else {
                  return false;
                }
              },
            },
            {
              name: "编辑",
              type: "text",
              clickFun: (row) => {
                this.editDetail(row);
              },
              showHide: (row) => {
                if (row.isDisabled == 1) {
                  return true;
                } else {
                  return false;
                }
              },
            },
          ],
        },
      ],
      pagination: {
        size: 20,
        current: 1,
        total: 0,
        compilerName: "",
      },
      inDetailPagination: {
        size: 20,
        current: 1,
        total: 0,
      },
      editPlanShow: false,
      currentRow: {},
      currentRowId: null, // å½“前选中数据的id
      reviewRemarks: "", // å®¡æ ¸å¤‡æ³¨
      reviewDialog: false, // å®¡æ ¸å¼¹æ¡†
      reviewLoading: false, // å®¡æ ¸æäº¤æŒ‰é’®
      approvalRemarks: "", // å®¡æ ¸å¤‡æ³¨
      approvalDialog: false, // å®¡æ ¸å¼¹æ¡†
      approvalLoading: false, // å®¡æ ¸æäº¤æŒ‰é’®
      multipleSelection: [], // å¹´åº¦æ˜Žç»†è¡¨é€‰ä¸­çš„数据
      uploadDia: false,
      uploading: false,
      isOperation: false,
      token: null,
      fileList: [],
      currentChangeRow: {},
      tableHeight: 0,
    };
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.getTableHeight);
  },
  created() {
    this.getTableHeight();
  },
  mounted() {
    window.addEventListener("resize", this.getTableHeight);
    this.token = {
      token: sessionStorage.getItem("token"),
    };
    if (this.isDepartment) {
      this.getYearPlanList(this.departId);
    } else {
      this.getInDetailPlan("", this.departId);
    }
    console.log("this.flag", this.flag);
  },
  methods: {
    //动态获取表格高度
    getTableHeight() {
      const otherHeight = 548; // å…¶ä½™é«˜åº¦
      const tableH = 50; // è·ç¦»é¡µé¢ä¸‹æ–¹çš„高度
      const tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 200;
      } else {
        this.tableHeight = window.innerHeight - tableH - otherHeight;
      }
    },
    // ç¼–辑明细
    editDetail(row) {
      this.addInDetail = true;
      this.$nextTick(() => {
        this.$refs.addPlan.showEditDialog(row);
      });
    },
    // åˆ é™¤æ˜Žç»†
    deleteDetail(row) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteDetail({ id: row.id }).then((res) => {
          this.$message.success("删除成功");
          this.searchTable();
        });
      });
    },
    searchTable() {
      // å°†é¡µç è®¾ä¸º
      this.inDetailPagination.current = 1
      this.getInDetailPlan(this.currentRowId);
    },
    // æŸ¥è¯¢-年度计划表
    getYearPlanList(userId) {
      const name = this.isDepartment ? "departmentId" : "userId";
      personTrainingSelect({
        [name]: userId,
        size: this.pagination.size,
        current: this.pagination.current,
        compilerName: this.pagination.compilerName
      }).then((res) => {
        if (res.code === 201) return;
        let data = {};
        this.yearPlanTableData = res.data.records;
        this.pagination.total = res.data.total;
        if (this.yearPlanTableData.length > 0) {
          this.currentRowId = this.yearPlanTableData[0].id;
          if (this.currentPlanId) {
            let filterData = this.yearPlanTableData.filter(
              (item) => item.id == this.currentPlanId
            );
            if (filterData.length > 0) {
              data = filterData[0];
            }
          } else {
            data = this.yearPlanTableData[0];
          }
          this.currentChange(data);
        } else {
          this.inDetailPlanTableData = [];
        }
      });
    },
    refreshYearPlanList(departmentId) {
      console.log("刷新主表", departmentId);
      personTrainingSelect({
        departmentId: departmentId,
        size: this.pagination.size,
        current: this.pagination.current,
        compilerName: this.pagination.compilerName
      }).then((res) => {
        if (res.code === 201) return;
        this.yearPlanTableData = res.data.records;
        this.pagination.total = res.data.total;
      });
    },
    currentChange(row) {
      const now = new Date();
      const currentYear = now.getFullYear();
      this.currentChangeRow = row;
      this.currentRowId = row.id;
      if (row.createTime.slice(0, 4) == currentYear) {
        this.isOperation = true;
      } else {
        this.isOperation = false;
      }
      this.currentPlanId = row.id;
      this.getInDetailPlan(row.id);
    },
    getInDetailPlan(id) {
      if (this.inDetailForm.trainingDate === null) {
        this.inDetailForm.trainingDate = "";
      }
      let state = 3;
      if (this.activeName != "first") {
        state = -1;
      }
      const userId = this.isDepartment ? "" : this.departId;
      if (this.currentPlanId) {
        id = this.currentPlanId;
      }
      queryTheAnnualPlanDetailsTable({
        userId,
        size: this.inDetailPagination.size,
        current: this.inDetailPagination.current,
        trainingLecturerName: this.inDetailForm.trainingLecturerName,
        trainingDate: this.inDetailForm.trainingDate,
        courseCode: this.inDetailForm.courseCode,
        departId: this.departId,
        state
      }).then((res) => {
        if (res.code === 201) return;
        this.inDetailPlanTableData = res.data.records;
        this.inDetailPagination.total = res.data.total;
        this.departId2 = res.data.records[0].departId;
      });
    },
    // æ–°å¢žå¹´åº¦è®¡åˆ’明细表
    addTrainingPlan() {
      if (!this.currentRowId) {
        this.$message.warning("请选择一条计划进行新增");
        return;
      }
      this.addInDetail = true;
      this.$nextTick(() => {
        this.$refs.addPlan.showDialog(this.currentRowId);
      });
    },
    // å¹´åº¦è®¡åˆ’表-删除
    deleteFun(id) {
      this.$confirm("此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          personTrainingDelete({ id }).then((res) => {
            this.$message.success("删除成功！");
            this.getYearPlanList(this.departId);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // å¹´åº¦è®¡åˆ’表-审核
    handleCheck(id) {
      this.currentRowId = id;
      this.reviewDialog = true;
    },
    handleReview(status) {
      const personTrainingUpdateDto = {
        id: this.currentRowId,
        remarks: this.reviewRemarks,
        status: status,
      };
      this.reviewLoading = true;
      reviewAnnualPersonnelTraining(personTrainingUpdateDto).then((res) => {
        if (res.code === 200) {
          this.$message.success("提交成功！");
          this.reviewDialog = false;
          this.getYearPlanList(this.departId);
        }
        this.reviewLoading = false;
      })
        .catch(() => {
          this.reviewLoading = false;
        });
    },
    // å¹´åº¦è®¡åˆ’表-批准
    handleApprove(id) {
      this.currentRowId = id;
      this.approvalDialog = true;
    },
    handleApproval(status) {
      const personTrainingUpdateDto = {
        id: this.currentRowId,
        remarks: this.approvalRemarks,
        status: status,
      };
      this.approvalLoading = true;
      approveAnnualPersonnelTraining(personTrainingUpdateDto).then((res) => {
        if (res.code === 200) {
          this.$message.success("提交成功！");
          this.approvalDialog = false;
          this.getYearPlanList(this.departId);
        }
        this.approvalLoading = false;
      })
        .catch(() => {
          this.approvalLoading = false;
        });
    },
    // å¹´åº¦è®¡åˆ’表-下载
    downLoadPost(row) {
      exportPersonTraining({ id: row.id }).then((res) => {
        this.outLoading = false;
        const blob = new Blob([res], { type: "application/msword" });
        this.$download.saveAs(blob, row.fileName + ".docx")
      });
    },
    // å¹´åº¦è®¡åˆ’-导入
    submitUpload() {
      if (this.$refs.upload.uploadFiles.length == 0) {
        this.$message.error("未选择文件");
        return;
      }
      this.uploading = true;
      this.$refs.upload.submit();
      this.uploading = false;
    },
    onSuccess(response, file, fileList) {
      this.$refs.upload.clearFiles();
      this.uploadDia = false;
      this.uploading = false;
      if (response.code == 201) {
        this.$message.error(response.message);
        return;
      }
      this.$message.success("上传成功");
      this.standardList = [];
      this.productList = [];
      this.getYearPlanList(this.departId);
    },
    onError(err, file, fileList) {
      this.$message.error("上传失败");
      this.$refs.upload.clearFiles();
      this.uploading = false;
    },
    beforeUpload(file, fileList) {
      if (
        file.type !=
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      ) {
        this.$message.error("上传文件格式不正确");
        this.$refs.upload.clearFiles();
        return false;
      }
    },
    // å¹´åº¦è®¡åˆ’分页
    paginationMetod({ page, limit }) {
      this.pagination.current = page;
      this.pagination.size = limit;
      this.getYearPlanList();
    },
    // å¹´åº¦è®¡åˆ’明细表-认领、取消认领
    handleClaim(row) {
      this.$confirm("是否确认报名该课程?", "提示", {
        confirmButtonText: "报名",
        cancelButtonText: "取消报名",
        type: "warning",
      })
        .then(() => {
          this.handleClaimFun(true, row.id);
        })
        .catch(() => {
          this.handleClaimFun(false, row.id);
        });
    },
    handleClaimFun(claimAndClaim, rowId) {
      claimOfTrainingAndAssessmentRecords({
        claimAndClaim,
        rowId
      }).then((res) => {
        this.getInDetailPlan(this.currentChangeRow.id);
      });
    },
    // å¹´åº¦è®¡åˆ’明细表-编辑
    editInDetail(row) {
      this.editPlanShow = true;
      this.currentRow = row;
    },
    //
    goBack() {
      this.editPlanShow = false;
      this.getInDetailPlan(this.currentRowId);
    },
    refresh(id) {
      if (this.inDetailForm.trainingDate === null) {
        this.inDetailForm.trainingDate = "";
      }
      const userId = this.isDepartment ? "" : this.departId;
      queryTheAnnualPlanDetailsTable({
        userId,
        size: this.inDetailPagination.size,
        current: this.inDetailPagination.current,
        trainingLecturerName: this.inDetailForm.trainingLecturerName,
        id,
        trainingDate: this.inDetailForm.trainingDate,
        courseCode: this.inDetailForm.courseCode,
        departId: this.departId
      }).then((res) => {
        if (res.code === 201) return;
        this.inDetailPlanTableData = res.data.records;
        this.inDetailPagination.total = res.data.total;
        this.currentRow = this.inDetailPlanTableData.find(
          (item) => item.id == id
        );
        this.editKey += 1;
      });
      console.log("刷新", this.currentRow);
    },
    refresh(id) {
      if (this.inDetailForm.trainingDate === null) {
        this.inDetailForm.trainingDate = "";
      }
      const userId = this.isDepartment ? "" : this.departId;
      queryTheAnnualPlanDetailsTable({
        userId,
        size: this.inDetailPagination.size,
        current: this.inDetailPagination.current,
        id,
        trainingLecturerName: this.inDetailForm.trainingLecturerName,
        trainingDate: this.inDetailForm.trainingDate,
        courseCode: this.inDetailForm.courseCode,
        departId: this.departId
      }).then((res) => {
        if (res.code === 201) return;
        this.inDetailPlanTableData = res.data.records;
        this.inDetailPagination.total = res.data.total;
        this.currentRow = this.inDetailPlanTableData.find(
          (item) => item.id == id
        );
        this.editKey += 1;
      });
      console.log("刷新", this.currentRow);
    },
    // å¹´åº¦è®¡åˆ’明细表-下载
    downLoadInDetail(row) {
      exportPersonTrainingRecord({ id: row.id }).then((res) => {
        this.outLoading = false;
        const blob = new Blob([res], { type: "application/msword" });
        this.$download.saveAs(blob, row.courseCode + "人员培训与考核记录" + ".docx")
      });
    },
    // å¹´åº¦è®¡åˆ’明细表-多选
    handleSelectionChange(list) {
      this.multipleSelection = list;
    },
    // å¹´åº¦æ˜Žç»†è¡¨-删除
    batchDelete() {
      if (this.multipleSelection.length > 0) {
        let ids = [];
        this.multipleSelection.forEach((item) => {
          ids.push(item.id);
        });
        this.$confirm("是否确认删除所选择的数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteAnnualPlanDetailTable({ ids: ids.join(",") }).then((res) => {
              if (res.code == 200) {
                this.$message.success("删除成功");
                this.getInDetailPlan(this.currentRowId);
              }
            });
          })
          .catch(() => {
            this.$message.warning("取消删除");
          });
      } else {
        this.$message.warning("请选择需要删除的数据");
      }
    },
    paginationmethod0({ page, limit }) {
      this.inDetailPagination.current = page;
      this.inDetailPagination.size = limit;
      this.getYearPlanList(this.departId);
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    departId: {
      handler(newId, oldId) {
        this.currentPlanId = null;
        if (this.isDepartment) {
          console.log("主");
          this.getYearPlanList(newId);
        } else {
          this.getInDetailPlan("");
        }
      },
    },
    activeName: {
      handler(newValue, oldValue) {
        this.getInDetailPlan(this.currentRowId);
      },
    },
  },
};
</script>
<style scoped>
.flex_column {
  display: flex;
  height: 80vh;
  flex-direction: column;
  overflow: auto;
  justify-content: space-between;
}

.pagination {
  display: flex;
  justify-content: space-between;
}

.items_center {
  display: flex;
  align-items: center;
}

.date_box {
  margin: 0 5px;
}

.search {
  width: 150px;
  margin: 0 16px;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/Plan/Add.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,172 @@
<template>
    <div class="add">
        <el-dialog :title="isEdit ? '编辑监督计划明细' : '新增监督计划明细'" :visible.sync="dialogVisible" width="800px">
            <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
                <el-col :span="12">
                    <el-form-item label="监督日期" prop="superviseDate">
                        <el-date-picker v-model="ruleForm.superviseDate" format="yyyy-MM-dd" placeholder="选择日期"
                            style="width: 100%;" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="监督目的" prop="superviseDes">
                        <el-input v-model="ruleForm.superviseDes"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="监督项目" prop="superviseProject">
                        <el-input v-model="ruleForm.superviseProject"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="被监督人" prop="supervisePerson">
                        <el-input v-model="ruleForm.supervisePerson"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="监督原因" prop="superviseReason">
                        <el-input v-model="ruleForm.superviseReason"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remarks">
                        <el-input v-model="ruleForm.remarks"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div slot="footer" class="foot">
                <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
                <el-button :loading="loading" type="primary" @click="submitForm">ç¡® å®š</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    yearPlanDetailAdd,
    yearPlanDetailEdit
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
    props: {
        planId: {
            type: Number,
            default: undefined
        }
    },
    data() {
        return {
            loading: false,
            isEdit: false,
            dialogVisible: false,
            ruleForm: {
                id: undefined,
                superviseDate: undefined, // ç›‘督日期
                superviseDes: undefined, // ç›‘督目的
                superviseProject: undefined, // ç›‘督项目
                supervisePerson: undefined, // è¢«ç›‘督人
                superviseReason: undefined, // ç›‘督原因
                remarks: undefined, // å¤‡æ³¨
            },
            rules: {
                superviseDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
                superviseDes: [{ required: true, message: '请输入监督目的', trigger: 'blur' }],
                superviseProject: [{ required: true, message: '请输入监督项目', trigger: 'blur' }],
                supervisePerson: [{ required: true, message: '请输入被监督人', trigger: 'blur' }],
                superviseReason: [{ required: true, message: '请输入监督原因', trigger: 'blur' }],
            }
        }
    },
    methods: {
        formatForm(row) {
            this.ruleForm.id = undefined
            this.ruleForm.planId = row.planId
            this.ruleForm.superviseDate = undefined
            this.ruleForm.superviseDes = undefined
            this.ruleForm.superviseProject = undefined
            this.ruleForm.supervisePerson = undefined
            this.ruleForm.superviseReason = undefined
            this.ruleForm.remarks = undefined
        },
        renderForm(row) {
            this.ruleForm.id = row.id
            this.ruleForm.superviseDate = row.superviseDate
            this.ruleForm.superviseDes = row.superviseDes
            this.ruleForm.superviseProject = row.superviseProject
            this.ruleForm.supervisePerson = row.supervisePerson
            this.ruleForm.superviseReason = row.superviseReason
            this.ruleForm.remarks = row.remarks
        },
        showDialog(row, type) {
            console.log(row)
            if (type) {
                this.isEdit = true
                this.renderForm(row)
            } else {
                this.formatForm(row)
                this.isEdit = false
            }
            this.dialogVisible = true
        },
        closeDialog() {
            this.dialogVisible = false
        },
        async addYearDetail() {
            const { code, data } = await yearPlanDetailAdd(this.ruleForm)
            this.loading = false
            if (code == 200) {
                this.$message({
                    type: 'success',
                    message: '新增成功'
                })
                this.closeDialog()
                this.$emit('submit')
            } else {
                this.$message({
                    type: 'error',
                    message: '新增失败'
                })
            }
        },
        async editYearDetail() {
            const { code, data } = await yearPlanDetailEdit(this.ruleForm)
            this.loading = false
            if (code == 200) {
                this.$message({
                    type: 'success',
                    message: '编辑成功'
                })
                this.closeDialog()
                this.$emit('submit')
            } else {
                this.$message({
                    type: 'error',
                    message: '编辑失败'
                })
            }
        },
        submitForm() {
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    this.loading = true
                    if (this.isEdit) {
                        this.editYearDetail()
                    } else {
                        this.addYearDetail()
                    }
                } else {
                    return false;
                }
            })
        },
    }
}
</script>
<style scoped>
.foot {
    width: 100%;
}

.add>>>.el-dialog__footer {
    padding-right: 20px;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/Plan/UploadExcel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,44 @@
<template>
    <div>
        <el-upload ref="upload" action="#" :before-upload="beforeUpload" :http-request="uploadFile"
            :file-list="fileList" :on-success="uploadFileSuccess" accept=".xls, .xlsx" :limit="1" :auto-upload="true"
            :show-file-list="false">
            <el-button size="small" type="primary">导入</el-button>
        </el-upload>
    </div>
</template>
<script>
import {
    yearPlanDetailImport
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
    data() {
        return {
            fileList: []
        }
    },
    methods: {
        /**
         * @desc ä¸Šä¼ æ–‡ä»¶
         */
        beforeUpload(file) {
            this.fileList = [file]
        },
        /**
         * @desc ä¸Šä¼ è‡³æœåŠ¡å™¨
         */
        async uploadFile() {
            console.log('文件', this.fileList[0])
            let formData = new FormData()
            formData.append('file', this.fileList[0])
            const { code, data } = await yearPlanDetailImport(formData)
            if (code == 200) {
                this.$emit('upload')
            }
        },
        uploadFileSuccess() {
            this.$refs.upload.clearFiles()
        }
    }
}
</script>

 src/views/CNAS/personnel/personnelInfo/Department/components/Plan/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,484 @@
<template>
    <div class="flex_column">
        <div>
            <TableCard title="年度计划表">
                <template v-slot:form>
                    <div class="items_center">
                        <span>编制人</span>
                        <el-input v-model="yearForm.organizationPerson" class="search" placeholder="请输入"
                            size="small"></el-input>
                        <el-button size="small" type="primary" @click="getYearPlanList">查询</el-button>
                        <el-button size="small" @click="clearYear">清空</el-button>
                    </div>
                    <!-- <UploadExcel v-if="isShowButton" @upload="getYearPlanList"></UploadExcel> -->
                    <el-upload ref="upload" v-if="isShowButton" :action="action" :data="uploadData"
                        :headers="uploadHeader" :before-upload="beforeUpload" :on-success="onSuccess">
                        <el-button size="small" type="primary">导入</el-button>
                    </el-upload>




                </template>
                <template v-slot:table>
                    <limsTable ref="yearTable" :column="yearColumnData" :height="'calc(100vh - 38em)'"
                        :highlightCurrentRow="true" :rowClick="rowClick" :table-data="yearTableData"
                        :table-loading="yearLoading" style="margin-top: 0.5em;
                        padding: 0 15px;" :page="yearPage" @pagination="yearPagination">
                    </limsTable>
                </template>
            </TableCard>
        </div>
        <div style="width: 100%; height: 0.5em; background-color: #f5f7fb;"></div>
        <div>
            <TableCard title="年度计划明细表">
                <template v-slot:form>
                    <div class="items_center">
                        <span>监督日期</span>
                        <el-date-picker v-model="yearDetailForm.date" class="date_box" format="yyyy-MM-dd"
                            placeholder="选择日期" size="small" type="date" value-format="yyyy-MM-dd">
                        </el-date-picker>
                        <span>监督项目</span>
                        <el-input v-model="yearDetailForm.project" class="search" placeholder="请输入"
                            size="small"></el-input>
                        <el-button size="small" type="primary" @click="getYearDetailPlanList">查询</el-button>
                        <el-button size="small" @click="clearDetail">清空</el-button>
                    </div>
                    <div>
                        <el-button v-if="isOperation" size="small" type="primary"
                            @click="showDialog('add')">新增</el-button>
                    </div>
                </template>
                <template v-slot:table>
                    <limsTable :column="yearDetailColumnData" :height="'calc(100vh - 38em)'"
                        :table-data="yearDetailTableData" :table-loading="yearDetailLoading"
                        style="margin-top: 18px; padding: 0 15px;" :page="yearDeatilPage"
                        @pagination="yearDeatilPagination">
                    </limsTable>
                </template>
            </TableCard>
        </div>
        <PlanAdd ref="planModal" :planId="planId" @submit="handleForm"></PlanAdd>
    </div>
</template>
<script>
import TableCard from '@/components/TableCard/index.vue';
import PlanAdd from "./Add.vue"
import limsTable from "@/components/Table/lims-table.vue";
import UploadExcel from "./UploadExcel.vue"
import {
    yearPlanList,
    yearPlanDetailList,
    yearPlanDel,
    yearPlanDetailDel,
    yearPlanDetailApproval,
    exportSuperVisePlan
} from '@/api/cnas/personnel/personnelInfo.js'

export default {
    props: {
        departId: {
            type: Number,
            default: null
        }
    },


    components: {
        TableCard,
        PlanAdd,
        limsTable,
        UploadExcel
    },
    data() {
        return {
            uploadData: {},
            isShowButton: false,
            planId: undefined,
            yearForm: {
                organizationPerson: undefined,
            },
            yearTableData: [],  // å¹´è¡¨
            yearPage: {
                curent: 1,
                pageSize: 20,
                total: 0
            },
            yearColumnData: [
                {
                    label: '文件名称',
                    prop: 'fileName',
                    minWidth: '150px'
                }, {
                    label: '编制人',
                    prop: 'organizationPersonName',
                    minWidth: '100'
                }, {
                    label: '编制日期',
                    prop: 'organizationDate',
                    minWidth: '160'
                }, {
                    label: '批准人',
                    prop: 'approvalName',
                    minWidth: '100'
                }, {
                    label: '批准日期',
                    prop: 'approvalDate',
                    minWidth: '160'
                }, {
                    label: '审核人',
                    prop: 'examine'
                }, {
                    dataType: 'tag',
                    label: '批准状态',
                    prop: 'approvalStatus',
                    minWidth: '130',
                    formatData: (params) => {
                        if (params == 1) {
                            return '批准'
                        } else {
                            return '不批准'
                        }
                    },
                    formatType: (params) => {
                        if (params == 1) {
                            return 'success'
                        } else {
                            return 'danger'
                        }
                    }
                }, {
                    label: '创建日期',
                    prop: 'createTime',
                    minWidth: '160'
                }, {
                    label: '创建人',
                    prop: 'createName',
                    minWidth: '100'
                }, {
                    dataType: 'action',
                    minWidth: '160',
                    label: '操作',
                    fixed: 'right',
                    operation: [
                        {
                            name: '导出',
                            type: 'text',
                            clickFun: (row) => {
                                this.downLoadPost(row)
                            }
                        },
                        {
                            name: '批准',
                            type: 'text',
                            disabled: (row) => {
                                if (row.approvalStatus == 1 || (row.departId == 18 && ![12, 11, 16].includes(row.currentId)) || (row.departId == 19 && ![35, 41, 16].includes(row.currentId))) {
                                    return true
                                } else {
                                    return false
                                }
                            },
                            clickFun: (row) => {
                                this.approvalYearPlan(row)
                            }
                        },
                        {
                            name: '删除',
                            type: 'text',
                            color: '#f56c6c',
                            clickFun: (row) => {
                                this.delYearPlan(row.id)
                            }
                        }
                    ]
                }],
            yearLoading: false,
            yearDetailForm: {
                date: undefined,
                project: undefined
            },
            yearDetailTableData: [],    // å¹´æ˜Žç»†è¡¨
            yearDeatilPage: {
                curent: 1,
                pageSize: 20,
                total: 0
            },
            yearDetailColumnData: [
                {
                    label: '监督日期',
                    prop: 'superviseDate'
                }, {
                    label: '监督目的',
                    prop: 'superviseDes'
                }, {
                    label: '被监督人员',
                    prop: 'supervisePerson'
                }, {
                    label: '备注',
                    prop: 'remarks'
                }, {
                    label: '培训日期',
                    prop: 'trainDate'
                }, {
                    label: '创建',
                    prop: 'createBy'
                }, {
                    dataType: 'action',
                    width: '180',
                    label: '操作',
                    operation: [
                        {
                            name: '编辑',
                            type: 'text',
                            clickFun: (row) => {
                                this.$refs.planModal.showDialog(row, true)
                            }
                        },
                        {
                            name: '删除',
                            type: 'text',
                            color: '#f56c6c',
                            clickFun: (row) => {
                                this.delYearPlanDetail(row.id)
                            }
                        }
                    ]
                }
            ],
            yearDetailLoading: false,
            isOperation: false,
        }
    },
    mounted() {
        this.getYearPlanList()
        // this.getPower()
        // this.getYearDetailPlanList()

    },
    computed: {
        action() {
            return this.javaApi + '/superVisePlan/yearPlanDetailImport'
        },
    },
    watch: {
        departId(newValue, oldValue) {
            this.getYearPlanList();
        }
    },
    methods: {
        // ä¸Šä¼ å‰çš„钩子
        beforeUpload(file) {
            let list = file.name.split(".")
            let fileName = list[list.length - 1]
            this.$set(this.uploadData, "suffix", fileName)
        },
        // æˆåŠŸä¹‹åŽçš„钩子
        onSuccess(response, file, fileList) {
            this.getYearPlanList();
            this.$message.success("导入成功")
            this.$refs.upload.clearFiles()
        },
        getPower() {
            let power = JSON.parse(sessionStorage.getItem('power'))
            let up = false
            for (var i = 0; i < power.length; i++) {
                if (power[i].menuMethod == 'yearPlanDetailImport') {
                    up = true
                }
            }
            if (!up) {
                this.isShowButton = false
            } else {
                this.isShowButton = true
            }
        },
        /**
         * @desc æŸ¥è¯¢å¹´åº¦è®¡åˆ’列表
         */
        async getYearPlanList() {
            this.yearLoading = true
            const { code, data } = await yearPlanList({
                current: this.yearPage.curent,
                size: this.yearPage.pageSize,
                organizationPerson: this.yearForm.organizationPerson,
                departId: this.departId
            })
            if (code == 200) {
                this.yearTableData = data.records
                this.yearPage.total = data.total
                if (this.yearTableData.length > 0) {
                    this.rowClick(this.yearTableData[0])
                } else {
                    this.yearDetailTableData = []
                }
            }
            console.log('主表数据', this.yearTableData);
            this.yearLoading = false
        },
        // å¹´è®¡åˆ’分页
        yearPagination({ page, limit }) {
            this.yearPage.current = page;
            this.yearPage.size = limit;
            this.getYearPlanList();
        },
        // å¹´åº¦è®¡åˆ’表格，点击行数据后刷新详情
        rowClick(row) {
            const now = new Date();
            const currentYear = now.getFullYear();
            if (row.createTime.slice(0, 4) == currentYear) {
                this.isOperation = true;
            } else {
                this.isOperation = false;
            }
            this.planId = row.id
            this.getYearDetailPlanList()
        },
        // æ–°å¢ž|编辑完成后做什么
        handleForm() {
            this.getYearDetailPlanList()
        },
        // æ¸…除年
        clearYear() {
            this.$refs.yearTable.setCurrent()
            this.yearForm.organizationPerson = undefined
            this.getYearPlanList()
        },
        // æ¸…除明细
        clearDetail() {
            this.yearDetailForm.date = undefined
            this.yearDetailForm.project = undefined
            this.getYearDetailPlanList()
        },

        /**
         * @desc æŸ¥è¯¢å¹´åº¦è®¡åˆ’明细
         */
        async getYearDetailPlanList() {
            this.yearDetailLoading = true
            const { code, data } = await yearPlanDetailList({
                planId: this.planId,
                current: this.yearDeatilPage.curent,
                size: this.yearDeatilPage.pageSize,
                date: this.yearDetailForm.date,
                project: this.yearDetailForm.project
            })
            if (code == 200) {
                this.yearDetailTableData = data.records
                this.yearDeatilPage.total = data.total
            }
            this.yearDetailLoading = false
        },
        showDialog(operationType, row, type = false) {
            if (operationType === 'add') {
                if (!this.planId) {
                    this.$message.warning('请选择一条计划进行新增')
                    return
                }
            }
            this.$refs.planModal.showDialog({ planId: this.planId, ...row }, type)
        },



        // å¹´æ˜Žç»†è®¡åˆ’分页
        yearDeatilPagination({ page, limit }) {
            this.yearDeatilPage.current = page;
            this.yearDeatilPage.size = limit;
            this.getYearDetailPlanList();
        },
        // åˆ é™¤å¹´è®¡åˆ’
        delYearPlan(id) {
            this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { code } = await yearPlanDel({ id })
                if (code == 200) {
                    this.$message.success('删除成功')
                    this.getYearPlanList()
                    this.getYearDetailPlanList()
                } else {
                    this.$message.error('删除失败')
                }
            })
        },
        // åˆ é™¤å¹´è®¡åˆ’明细
        delYearPlanDetail(id) {
            this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { code } = await yearPlanDetailDel({ id })
                if (code == 200) {
                    this.$message.success('删除成功')
                    this.getYearDetailPlanList()
                } else {
                    this.$message.error('删除失败')
                }
            })
        },
        // æ‰¹å‡†å¹´åº¦è®¡åˆ’
        approvalYearPlan(row) {
            this.$confirm('确认批准该年度计划?', '提示', {
                confirmButtonText: '批准',
                cancelButtonText: '不批准',
                type: 'info'
            }).then(() => {
                this.approvalYearPlanFun(1, row.id)
            }).catch(action => {
                this.approvalYearPlanFun(0, row.id)
            })
        },
        // å¹´åº¦è®¡åˆ’表-下载
        downLoadPost(row) {
            exportSuperVisePlan({ id: row.id }).then(res => {
                this.outLoading = false
                const blob = new Blob([res], { type: 'application/msword' });
                this.$download.saveAs(blob, row.fileName + '.docx')
            })
        },
        async approvalYearPlanFun(approvalStatus, rowId) {
            const { code } = await yearPlanDetailApproval({
                id: rowId,
                approvalStatus: approvalStatus
            })
            if (code == 200) {
                this.$message.success('操作成功！')
                this.getYearPlanList()
            } else {
                this.$message.error('操作成功！')
            }
        }
    }
}
</script>
<style scoped>
.flex_column {
    display: flex;
    height: 80vh;
    flex-direction: column;
    overflow: auto;
    justify-content: space-between;
}

.pagination {
    display: flex;
    justify-content: space-between
}

.items_center {
    display: flex;
    align-items: center;
}

.date_box {
    margin: 0 5px;
}

.search {
    width: 150px;
    padding: 0 16px;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/Add.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,234 @@
<template>
    <div class="add">
        <el-dialog :isEdit="isEdit" :title="isEdit ? '编辑工作监督记录' : '新增工作监督记录'" :visible.sync="dialogVisible" width="800">
            <el-steps v-if="isEdit" :active="active" :align-center="true" finish-status="success">
                <el-step style="cursor: pointer;" title="检测" @click.native="setStep(0)"></el-step>
                <el-step style="cursor: pointer;" title="审批" @click.native="setStep(1)"></el-step>
            </el-steps>
            <SuperviseForm v-show="pageStatus == 0" ref="superviseFormRef" :disabled="active != 0" :departId="departId"
                :isEdit="isEdit" :superviseForm.sync="mainForm.superviseForm" :userList="userList" @addData="addData"
                @close="closeDialog" @submit="submit"></SuperviseForm>
            <ApproveForm v-show="pageStatus == 1" ref="approveFormRef" :approveForm.sync="mainForm.approveForm"
                :disabled="active != 1" :departId="departId" :isEdit="isEdit" :userList="userList" @close="toClose"
                @submit="submit"></ApproveForm>
            <el-result v-show="pageStatus == 2" icon="success" subTitle="处理完成" title="审核完成">
            </el-result>
        </el-dialog>
    </div>
</template>
<script>
import SuperviseForm from './supervise/SuperviseForm.vue'
import ApproveForm from './supervise/ApproveForm.vue'
import {
    selectUserList,
    addOrUpdatePersonSupervisionRecord
} from '@/api/cnas/personnel/personnelInfo.js'
import { dateFormat } from '@/utils/date.js'

export default {
    props: {
        departId: {
            type: Number,
            default: null
        }
    },

    components: {
        SuperviseForm,
        ApproveForm
    },
    data() {
        return {
            active: 0,
            pageStatus: 0,
            isEdit: false,
            dialogVisible: false,
            userList: [],
            id: undefined,
            mainForm: {
                superviseForm: {
                    testerId: undefined,
                    supervisorId: undefined,
                    testItem: undefined,
                    sampleNumber: undefined,
                    detectionDate: undefined,
                    personnel: [],
                    instrumentEquipment: undefined,
                    workingEnvironment: undefined,
                    sampleCollection: undefined,
                    samplePreparation: undefined,
                    testMethod: undefined,
                    testingRecords: undefined,
                    testReport: undefined,
                    evaluationSupervisionSituation: undefined,
                    doNotMeetTheHandlingOpinions: undefined,
                },
                approveForm: {
                    technicalDirector: undefined
                }
            }
        }
    },
    methods: {
        async openDialog(row, type = false) {
            this.dialogVisible = true
            this.isEdit = type
            console.log('type', this.isEdit);
            await this.getUserList()
            if (this.isEdit) {
                // ç¼–辑
                this.loadForm(row)
                this.id = row.id
                console.log(1111);
            } else {
                // æ–°å¢ž
                this.resetForm(row)
                this.id = undefined
                console.log(22222);
            }
            console.log('this.id', this.id);
        },
        /**
         * @desc åŠ è½½è¡¨å•
         */
        loadForm(row) {
            if (row.currentState) {
                this.active = Number(row.currentState)
                this.pageStatus = Number(row.currentState === '2' ? 0 : row.currentState)
            }
            // ç¬¬1æ­¥
            this.mainForm.superviseForm.testerId = row.testerId
            this.mainForm.superviseForm.supervisorId = row.supervisorId
            this.mainForm.superviseForm.testItem = row.testItem
            this.mainForm.superviseForm.sampleNumber = row.sampleNumber
            this.mainForm.superviseForm.detectionDate = row.detectionDate
            // let personList = row.personnel.split(',')
            // this.mainForm.superviseForm.personnel = personList.map(item => {
            //     return Number(item)
            // });
            this.mainForm.superviseForm.personnel = row.personnel
            this.mainForm.superviseForm.instrumentEquipment = row.instrumentEquipment
            this.mainForm.superviseForm.workingEnvironment = row.workingEnvironment
            this.mainForm.superviseForm.sampleCollection = row.sampleCollection
            this.mainForm.superviseForm.samplePreparation = row.samplePreparation
            this.mainForm.superviseForm.testMethod = row.testMethod
            this.mainForm.superviseForm.testingRecords = row.testingRecords
            this.mainForm.superviseForm.testReport = row.testReport
            this.mainForm.superviseForm.evaluationSupervisionSituation = row.evaluationSupervisionSituation
            this.mainForm.superviseForm.doNotMeetTheHandlingOpinions = row.doNotMeetTheHandlingOpinions
            // ç¬¬2æ­¥
            this.mainForm.approveForm.technicalDirector = row.technicalDirector
        },
        /**
         * @desc é‡ç½®è¡¨å•
         */
        resetForm(row) {
            console.log(row)
            this.active = 0
            this.pageStatus = 0
            // ç¬¬1个
            this.mainForm.superviseForm.currentState = undefined
            this.mainForm.superviseForm.testerId = undefined
            this.mainForm.superviseForm.supervisorId = undefined
            this.mainForm.superviseForm.testItem = undefined
            this.mainForm.superviseForm.sampleNumber = undefined
            this.mainForm.superviseForm.detectionDate = undefined
            this.mainForm.superviseForm.personnel = undefined
            this.mainForm.superviseForm.instrumentEquipment = undefined
            this.mainForm.superviseForm.workingEnvironment = undefined
            this.mainForm.superviseForm.sampleCollection = undefined
            this.mainForm.superviseForm.samplePreparation = undefined
            this.mainForm.superviseForm.testMethod = undefined
            this.mainForm.superviseForm.testingRecords = undefined
            this.mainForm.superviseForm.testReport = undefined
            this.mainForm.superviseForm.evaluationSupervisionSituation = undefined
            this.mainForm.superviseForm.doNotMeetTheHandlingOpinions = undefined
            // ç¬¬2个
            this.mainForm.approveForm.technicalDirector = undefined
            console.log('新增', this.mainForm);


        },
        closeDialog() {
            this.dialogVisible = false
        },
        /**
         * @desc èŽ·å–用户信息
         */
        async getUserList() {
            const { code, data } = await selectUserList()
            if (code == 200) {
                this.userList = data
            }
        },
        /**
         * @desc é©³å›ž
         */
        toClose() {
            this.submitFormApi({
                id: this.id,
                currentState: 0,
            })
        },
        /**
         * @desc æ–°å¢ž
         */
        addData(step) {
            let data = this.setParams(step)
            this.submitFormApi(data)
        },
        /**
         * @desc ç¼–辑
         */
        submit(step) {
            let data = this.setParams(step)
            data.id = this.id
            this.submitFormApi(data)
        },
        // è®¾ç½®å‚æ•°
        setParams(step) {
            if (step == 1) {
                let result = this.mainForm.superviseForm
                result.currentState = this.active + 1
                result.technicalDirectorDate = dateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss')
                return result
            }
            if (step == 2) {
                let result = this.mainForm.approveForm
                result.currentState = this.active + 1
                return result
            }
        },
        // å‘服务器发送表单
        async submitFormApi(data) {
            console.log('接口表单', data)
            // å°†éƒ¨é—¨å¸¦å…¥
            if (data.id == null) {
                data.departLimsId = this.departId
            }
            const { code } = await addOrUpdatePersonSupervisionRecord(data)
            if (code == 200) {
                this.$message.success('操作成功')
                this.dialogVisible = false
                this.$emit('submit')
            }
        },
        setStep(e) {
            this.pageStatus = e
        }
    }
}
</script>
<style scoped>
.foot {
    width: 100%;
}

.add>>>.el-dialog__footer {
    padding-right: 20px;
}

.main_right {
    text-align: left;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/control/Step/ConditionForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,145 @@
<template>
    <el-form label-width="160px" :model="form" :disabled="disabled" style="position: relative;" size="small">
        <el-card :body-style="{ height: '350px', overflow: 'auto' }">
            <el-form-item label="部门负责人">
                <el-select v-model="form.departmentHeadId" placeholder="请选择" style="width: 100%">
                    <el-option v-for="(item, index) in userList" :key="index" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="被监督人">
                <el-select v-model="form.supervisedPersonId" placeholder="请选择" style="width: 100%">
                    <el-option v-for="(item, index) in userList" :key="index" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="不符合工作发现途径">
                <el-checkbox-group v-model="form.discoveryApproach">
                    <el-checkbox v-for="(item, index) in checkbox" :key="index" :label="item.value" name="type">{{
                        item.label }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="不符合工作的详细记录">
                <el-input v-model="form.notConformDetails" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="不符合的依据及条款号">
                <el-input v-model="form.nonConformityClause" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
            </el-form-item>
        </el-card>
        <el-form-item label-width="0">
            <div style=" display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    æ“ä½œäººï¼š{{ currentResponsible }}
                </div>
                <div v-if="step == 0 || step == 1">
                    <el-button v-if="step == 1" :disabled="false" @click="cancel">驳回</el-button>
                    <el-button :disabled="false" @click="save">保存</el-button>
                    <el-button type="primary" @click="onSubmit"
                        :disabled="(supervisedPersonId != null && userId != supervisedPersonId) ||
                            ((departId == 18 && ![12, 10, 16].includes(userId)) || (departId == 19 && ![35, 41, 16].includes(userId)))">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    props: {
        departId: {
            type: Number,
            default: () => {
                return null;
            }
        },
        isPermission: {
            type: Boolean,
            default: false,
        },
        supervisedPersonId: {
            type: Number,
            default: null
        },
        currentResponsible: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        userList: {
            type: Array,
            default: () => {
                return []
            }
        },
        step: {
            type: Number,
            default: 0
        },
        condiForm: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    computed: {
        form: {
            get() {
                return this.condiForm
            },
            set(val) {
                this.$emit('update:condiForm', val)
            }
        },
        ...mapGetters(["userId"]),
    },
    data() {
        return {
            checkbox: [
                {
                    label: '管理评审',
                    value: 0
                }, {
                    label: '内部审核',
                    value: 1
                }, {
                    label: '检测过程控制',
                    value: 2
                }, {
                    label: '内部质量控制',
                    value: 3
                }, {
                    label: '内部监督',
                    value: 4
                }, {
                    label: '外部评审/检查',
                    value: 5
                }, {
                    label: '顾客投诉/意见反馈',
                    value: 6
                }, {
                    label: '其他',
                    value: 7
                }
            ],
        }
    },
    created() {
    },
    methods: {
        onSubmit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/control/Step/Inform.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,103 @@
<template>
    <el-form :model="form" label-width="160px" style="position: relative" :disabled="disabled" size="small">
        <el-card :body-style="{ height: '350px', overflow: 'auto' }">
            <el-form-item label="通知客户">
                <el-radio-group v-model="form.whetherInformCustomer">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="恢复工作">
                <el-radio-group v-model="form.whetherResumeWork">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="质量负责人">
                <el-select v-model="form.qualitySupervisorId" placeholder="请选择">
                    <el-option v-for="(item, index) in userList" :key="index" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-card>
        <el-form-item label-width="0">
            <div style=" display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    æ“ä½œäººï¼š{{ currentResponsible }}
                </div>
                <div v-if="step == 4">
                    <el-button @click="cancel">驳回</el-button>
                    <el-button type="primary" @click="onSubmit"
                        :disabled="(departId == 18 && ![12, 10, 16].includes(userId)) || (departId == 19 && ![35, 41, 16].includes(userId))">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    props: {
        departId: {
            type: Number,
            default: () => {
                return null;
            }
        },
        isPermission: {
            type: Boolean,
            default: false,
        },
        currentResponsible: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        userList: {
            type: Array,
            default: []
        },
        step: {
            type: Number,
            default: 0
        },
        inform: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    computed: {
        form: {
            get() {
                return this.inform
            },
            set(val) {
                this.$emit('update:inform', val)
            }
        },
        ...mapGetters(["userId"]),
    },
    data() {
        return {
        }
    },
    created() {
    },
    methods: {
        onSubmit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/control/Step/MeasureForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,110 @@
<template>
    <el-form :model="form" label-width="200px" style="position: relative;" :disabled="disabled" size="small">
        <el-card :body-style="{ height: '350px', overflow: 'auto' }">
            <el-form-item label="责任部门">
                <el-select v-model="form.responsibleDepartmentId" placeholder="请选择" @change="filterUserList">
                    <el-option label="通信产品实验室" :value="18"></el-option>
                    <el-option label="电力产品实验室" :value="19"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="责任人">
                <el-select v-model="form.responsibleDepartmentPersonId" placeholder="请选择">
                    <el-option v-for="(item, index) in userListTwo" :key="index" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="消除不符合工作所采取的措施">
                <el-input v-model="form.treatmentMeasures" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
            </el-form-item>
        </el-card>
        <el-form-item v-if="step == 2" label-width="0px" :disabled="disabled">
            <div style=" display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    æ“ä½œäººï¼š{{ currentResponsible }}
                </div>
                <div>
                    <el-button @click="cancel">驳回</el-button>
                    <el-button type="primary" @click="onSubmit"
                        :disabled="(departId == 18 && ![12, 10, 16].includes(userId)) || (departId == 19 && ![35, 41, 16].includes(userId))">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    props: {
        departId: {
            type: Number,
            default: () => {
                return null;
            }
        },
        isPermission: {
            type: Boolean,
            default: false,
        },
        currentResponsible: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        userList: {
            type: Array,
            default: []
        },
        step: {
            type: Number,
            default: 0
        },
        handleForm: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    computed: {
        form: {
            get() {
                return this.handleForm
            },
            set(val) {
                this.$emit('update:handleForm', val)
            }
        },
        ...mapGetters(["userId"]),
    },
    data() {
        return {
            userListTwo: []
        }
    },
    mounted() {
        this.userListTwo = JSON.parse(JSON.stringify(this.userList))
    },
    created() {
    },
    methods: {
        filterUserList() {
            this.userListTwo = this.userList.filter(item => item.departLimsId.includes(this.form.responsibleDepartmentId))
            if (!this.userListTwo.some(item => item.id == this.form.responsibleDepartmentPersonId)) {
                this.form.responsibleDepartmentPersonId = null
            }
        },
        onSubmit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/control/Step/RectifyForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,101 @@
<template>
    <el-form :model="form" label-width="160px" style="position: relative" :disabled="disabled" size="small">
        <el-card :body-style="{ height: '350px', overflow: 'auto' }">
            <el-form-item label="是否需要采取纠正措施">
                <el-radio-group v-model="form.correctiveMeasure">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="纠正措施处理单跟踪">
                <el-radio-group v-model="form.correctiveMeasureFollowTracks">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="技术负责人">
                <el-select v-model="form.correctiveMeasurePersonId" placeholder="请选择">
                    <el-option v-for="(item, index) in userList" :key="index" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-card>
        <el-form-item label-width="0">
            <div style=" display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    æ“ä½œäººï¼š{{ currentResponsible }}
                </div>
                <div v-if="step == 3">
                    <el-button @click="cancel">驳回</el-button>
                    <el-button type="primary" @click="onSubmit"
                        :disabled="(departId == 18 && ![12, 10, 16].includes(userId)) || (departId == 19 && ![35, 41, 16].includes(userId))">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    props: {
        departId: {
            type: Number,
            default: () => {
                return null;
            }
        },
        isPermission: {
            type: Boolean,
            default: false,
        },
        currentResponsible: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        userList: {
            type: Array,
            default: []
        },
        step: {
            type: Number,
            default: 0
        },
        rectifyForm: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    computed: {
        form: {
            get() {
                return this.rectifyForm
            },
            set(val) {
                this.$emit('update:rectifyForm', val)
            }
        },
        ...mapGetters(["userId"]),
    },
    data() {
        return {
        }
    },
    methods: {
        onSubmit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/control/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,312 @@
<template>
    <div>
        <el-dialog :visible.sync="dialogVisible" title="不符合工作控制单">
            <el-steps :active="active" :align-center="true" finish-status="success">
                <el-step v-for="(item, index) in stepList" :key="index" :title="item.label" style="cursor: pointer;"
                    @click.native="setStep(item.value)"></el-step>
            </el-steps>
            <el-divider></el-divider>
            <ConditionForm v-if="pageStatus == 0" :departId="departId" :isPermission="isPermission"
                :supervisedPersonId="mainForm.condiForm.supervisedPersonId" :condiForm.sync="mainForm.condiForm"
                :currentResponsible="currentResponsible" :disabled="active != 0" :step="active" :userList="userList"
                @nextStep="submit"></ConditionForm>
            <ConditionForm v-if="pageStatus == 1" :departId="departId" :isPermission="isPermission"
                :supervisedPersonId="mainForm.condiForm.supervisedPersonId" :condiForm.sync="mainForm.condiForm"
                :currentResponsible="currentResponsible" :disabled="true" :step="active" :userList="userList"
                @cancel="cancel" @nextStep="submit"></ConditionForm>
            <MeasureForm v-if="pageStatus == 2" :departId="departId" :isPermission="isPermission"
                :currentResponsible="currentResponsible" :disabled="active != 2" :handleForm.sync="mainForm.handleForm"
                :step="active" :userList="userList" @cancel="cancel" @nextStep="submit"></MeasureForm>
            <RectifyForm v-if="pageStatus == 3" :departId="departId" :isPermission="isPermission"
                :currentResponsible="currentResponsible" :disabled="active != 3"
                :rectifyForm.sync="mainForm.rectifyForm" :step="active" :userList="userList" @cancel="cancel"
                @nextStep="submit"></RectifyForm>
            <Inform v-if="pageStatus == 4" :departId="departId" :isPermission="isPermission" :disabled="active != 4"
                :inform.sync="mainForm.inform" :step="active" :userList="userList" @cancel="cancel" @nextStep="submit">
            </Inform>
            <el-result v-if="pageStatus == 5" icon="success" subTitle="处理完成" title="审核完成">
            </el-result>
        </el-dialog>
    </div>
</template>
<script>
import ConditionForm from './Step/ConditionForm.vue'
import MeasureForm from './Step/MeasureForm.vue'
import RectifyForm from './Step/RectifyForm.vue'
import Inform from './Step/Inform.vue'
import {
    selectUserList,
    personSupervisionControlSheetPage,
    addOrUpdatePersonSupervisionControl
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
    props: {
        departId: {
            type: Number,
            default: () => {
                return null;
            }
        },
    },
    components: {
        ConditionForm, MeasureForm, RectifyForm, Inform
    },
    data() {
        return {
            isPermission: true,
            supervisedPersonId: null,
            active: 0,
            pageStatus: 0,
            dialogVisible: false,
            currentResponsible: undefined,
            stepList: [{
                label: '工作情况',
                value: 0
            }, {
                label: '被监督人确认',
                value: 1
            }, {
                label: '处理措施',
                value: 2
            }, {
                label: '纠正措施',
                value: 3
            }, {
                label: '通知客户',
                value: 4
            }
            ],
            supervisionRecordId: undefined,
            controlId: undefined,
            mainForm: {
                condiForm: {
                    departmentHeadId: undefined,
                    supervisedPersonId: undefined,
                    discoveryApproach: [],
                    notConformDetails: undefined,
                    nonConformityClause: undefined,
                    departLimsId: undefined
                },
                handleForm: {
                    responsibleDepartmentPersonId: undefined,
                    treatmentMeasures: undefined,
                    departLimsId: undefined
                },
                rectifyForm: {
                    correctiveMeasure: undefined,
                    correctiveMeasureFollowTracks: undefined,
                    correctiveMeasurePersonId: undefined,
                    departLimsId: undefined
                },
                inform: {
                    whetherInformCustomer: undefined,
                    whetherResumeWork: undefined,
                    qualitySupervisorId: undefined,
                    departLimsId: undefined
                }
            },
            userList: [],
            controlType: undefined
        }
    },
    mounted() {
        this.isPermission = isPermission("isSubmit")
        console.log('权限', this.isPermission);
    },
    methods: {
        /**
         * @desc åˆå§‹åŒ–表单
         */
        initForm() {
            this.mainForm.condiForm.departmentHeadId = undefined
            this.mainForm.condiForm.supervisedPersonId = undefined
            this.mainForm.condiForm.discoveryApproach = []
            this.mainForm.condiForm.notConformDetails = undefined
            this.mainForm.condiForm.nonConformityClause = undefined
            this.mainForm.condiForm.departLimsId = undefined
            this.mainForm.handleForm.responsibleDepartmentPersonId = undefined
            this.mainForm.handleForm.treatmentMeasures = undefined
            this.mainForm.handleForm.departLimsId = undefined
            this.mainForm.rectifyForm.correctiveMeasure = undefined
            this.mainForm.rectifyForm.correctiveMeasureFollowTracks = undefined
            this.mainForm.rectifyForm.correctiveMeasurePersonId = undefined
            this.mainForm.rectifyForm.departLimsId = undefined
            this.mainForm.inform.whetherInformCustomer = undefined
            this.mainForm.inform.whetherResumeWork = undefined
            this.mainForm.inform.qualitySupervisorId = undefined
            this.mainForm.inform.departLimsId = undefined
        },
        /**
         * @desc æ‰“开模态框
         * @param {监督记录id} id
         */
        openDialog(id) {
            this.dialogVisible = true
            this.getUserList()
            this.getControlData(id)
        },
        /**
         * @desc èŽ·å–用户信息
         */
        async getUserList() {
            const { code, data } = await selectUserList()
            if (code == 200) {
                this.userList = data
            }
        },
        /**
         * @desc æŸ¥è¯¢ç›‘督记录控制单
         * @param {监督记录id} id
         */
        async getControlData(id) {
            const { code, data } = await personSupervisionControlSheetPage({ id })
            if (code == 202) {
                this.controlType = '新增'
                this.supervisionRecordId = id
                this.active = 0
                this.pageStatus = 0
                this.controlId = undefined
                this.initForm()
            }
            if (code == 200) {
                this.currentResponsible = data.currentResponsible
                this.controlType = '编辑'
                this.controlId = data.id
                this.active = Number(data.currentState)
                this.pageStatus = Number(data.currentState === 4 ? 0 : data.currentState)
                // ç¬¬1、2步数据
                this.mainForm.condiForm.departmentHeadId = data.departmentHeadId
                this.mainForm.condiForm.supervisedPersonId = data.supervisedPersonId
                this.mainForm.condiForm.notConformDetails = data.notConformDetails
                this.mainForm.condiForm.nonConformityClause = data.nonConformityClause
                this.mainForm.condiForm.departLimsId = data.departLimsId
                // ç¬¬3步数据
                this.mainForm.handleForm.responsibleDepartmentPersonId = data.responsibleDepartmentPersonId
                this.mainForm.handleForm.treatmentMeasures = data.treatmentMeasures
                this.mainForm.handleForm.departLimsId = data.departLimsId
                // ç¬¬4步数据
                this.mainForm.rectifyForm.correctiveMeasure = data.correctiveMeasure
                this.mainForm.rectifyForm.correctiveMeasureFollowTracks = data.correctiveMeasureFollowTracks
                this.mainForm.rectifyForm.correctiveMeasurePersonId = data.correctiveMeasurePersonId
                this.mainForm.rectifyForm.departLimsId = data.departLimsId
                // ç¬¬5步数据
                this.mainForm.inform.whetherInformCustomer = data.whetherInformCustomer
                this.mainForm.inform.whetherResumeWork = data.whetherResumeWork
                this.mainForm.inform.qualitySupervisorId = data.qualitySupervisorId
                this.mainForm.inform.departLimsId = data.departLimsId
                this.supervisionRecordId = data.supervisionRecordId


                this.supervisedPersonId = data.supervisedPersonId
            }
        },
        submit(type) {
            let currentState = undefined
            if (type == 'submit') {
                currentState = this.active + 1
            } else if (type == 'save') {
                currentState = undefined
            }
            if (this.active == 0) {
                let { discoveryApproach, ...condiFormRest } = this.mainForm.condiForm
                let approcahStr = discoveryApproach.join(',')
                this.submitForm({
                    id: this.controlId,
                    supervisionRecordId: this.supervisionRecordId,
                    discoveryApproach: approcahStr,
                    currentState: currentState,
                    discovererDate: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
                    ...condiFormRest
                })
            }
            if (this.active == 1) {
                let { discoveryApproach, ...condiFormRest } = this.mainForm.condiForm
                let approcahStr = discoveryApproach.join(',')
                this.submitForm({
                    id: this.controlId,
                    supervisionRecordId: this.supervisionRecordId,
                    discoveryApproach: approcahStr,
                    currentState: currentState,
                    supervisedPersonDate: this.$moment().format('YYYY-MM-DD'),
                    ...condiFormRest
                })
            }
            if (this.active == 2) {
                let { handleForm } = this.mainForm
                this.submitForm({
                    id: this.controlId,
                    supervisionRecordId: this.supervisionRecordId,
                    currentState: currentState,
                    responsibleDepartmentDate: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
                    ...handleForm
                })
            }
            if (this.active == 3) {
                let { rectifyForm } = this.mainForm
                this.submitForm({
                    id: this.controlId,
                    supervisionRecordId: this.supervisionRecordId,
                    currentState: currentState,
                    correctiveMeasureDate: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
                    ...rectifyForm
                })
            }
            if (this.active == 4) {
                let { inform } = this.mainForm
                this.submitForm({
                    id: this.controlId,
                    supervisionRecordId: this.supervisionRecordId,
                    currentState: currentState,
                    qualitySupervisorDate: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
                    ...inform
                })
            }
        },
        /**
         * @desc æäº¤è¡¨å•
         */
        async submitForm(form) {
            let user = JSON.parse(localStorage.getItem('user'));
            form.responsibleDepartmentId = Number(form.responsibleDepartmentId)
            const { code } = await addOrUpdatePersonSupervisionControl({
                currentResponsible: user.name,
                ...form
            })
            if (this.controlType == '新增') {
                if (code == 200) {
                    this.$message.success('提交成功')
                }
            } else if (this.controlType == '编辑') {
                if (code == 200) {
                    this.$message.success('提交成功')
                }
            }
            this.$emit('getTableData')
            this.dialogVisible = false
        },
        /**
         * @desc é©³å›ž
         */
        cancel() {
            let currentState = this.active - 1
            this.submitForm({
                id: this.controlId,
                supervisionRecordId: this.supervisionRecordId,
                currentState: currentState,
            })
        },
        setStep(e) {
            this.pageStatus = e
        }
    }
}
</script>
<style scoped>
.dialog-footer {
    width: 100%;
}

>>>.el-dialog__footer {
    padding-right: 20px;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/dispose/Step/Fact.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,108 @@
<template>
    <el-form :model="form" :disabled="disabled" label-width="140px" size="small" style="position: relative">
        <el-card :body-style="{ height: '350px', overflow: 'auto' }">
            <el-form-item label="提出部门">
                <!-- <el-select
                    v-model="form.proposingDepartment" 
                    placeholder="请选择"
                    style="width: 100%"
                >
                    <el-option label="通信产品实验室" :value="18"></el-option>
                    <el-option label="电力产品实验室" :value="19"></el-option>
                </el-select> -->
                <el-input :disabled="true" v-model="form.proposingDepartment"></el-input>
            </el-form-item>

            <el-form-item label="人员选择">
                <el-select v-model="form.proposingDepartmentPersonId" placeholder="请选择" style="width: 100%">
                    <el-option v-for="(item, index) in userList" :key="index" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="不合格或偏离描述">
                <el-input type="textarea" v-model="form.descriptionNonconformity" :rows="2" placeholder="请输入内容">
                </el-input>
            </el-form-item>
        </el-card>
        <el-form-item label-width="0">
            <div style="display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    æ“ä½œäººï¼š{{ currentResponsible }}
                </div>
                <div v-if="step == 0">
                    <el-button :disabled="false" @click="cancel">驳回</el-button>
                    <el-button @click="save">保存</el-button>
                    <el-button type="primary" @click="submit"
                        :disabled="(departId == 18 && ![12, 10, 16].includes(userId)) || (departId == 19 && ![35, 41, 16].includes(userId))">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    props: {
        departId: {
            type: Number,
            default: () => {
                return null;
            }
        },
        isPermission: {
            type: Boolean,
            default: false,
        },
        currentResponsible: {
            type: String,
            default: ''
        },
        factForm: {
            type: Object,
            default: () => {
                return {}
            }
        },
        userList: {
            type: Array,
            default: []
        },
        step: {
            type: Number,
            default: 0
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        form: {
            get() {
                this.$set(this.factForm, 'proposingDepartment', '监督员')
                return this.factForm
            },
            set(val) {
                this.$emit('update:factForm', val)
            }
        },
        ...mapGetters(["userId"]),
    },
    data() {
        return {
        }
    },
    methods: {
        submit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/dispose/Step/Measure.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,121 @@
<template>
    <el-form :model="form" :disabled="disabled" label-width="130px" size="small" style="position: relative">
        <el-card :body-style="{ height: '350px', overflow: 'auto' }">
            <el-form-item label="责任部门">
                <!-- <el-select v-model="form.correctiveActionId" placeholder="请选择">
                    <el-option
                        v-for="(item, index) in userList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select> -->
                <el-select @change="filterUserList" v-model="form.causeAnalysisId" placeholder="请选择"
                    style="width: 100%">
                    <el-option label="通信产品实验室" :value="18"></el-option>
                    <el-option label="电力产品实验室" :value="19"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="责任人">
                <el-select v-model="form.correctiveActionId" placeholder="请选择">
                    <el-option v-for="(item, index) in userListTwo" :key="index" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="纠正措施">
                <el-input type="textarea" v-model="form.correctiveMeasure" :rows="2" placeholder="请输入内容">
                </el-input>
            </el-form-item>
            <el-form-item label="提出要求部门确认">
                <el-input type="textarea" v-model="form.requestDepartmentConfirmation" :rows="2" placeholder="请输入内容">
                </el-input>
            </el-form-item>
        </el-card>
        <el-form-item label-width="0">
            <div style="display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    æ“ä½œäººï¼š{{ currentResponsible }}
                </div>
                <div v-if="step == 2">
                    <el-button :disabled="false" @click="cancel">驳回</el-button>
                    <el-button type="primary" @click="submit"
                        :disabled="(departId == 18 && ![12, 10, 16].includes(userId)) || (departId == 19 && ![35, 41, 16].includes(userId))">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    props: {
        departId: {
            type: Number,
            default: () => {
                return null;
            }
        },
        isPermission: {
            type: Boolean,
            default: false,
        },
        currentResponsible: {
            type: String,
            default: ''
        },
        measureForm: {
            type: Object,
            default: {}
        },
        userList: {
            type: Array,
            default: []
        },
        step: {
            type: Number,
            default: 0
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        form: {
            get() {
                return this.measureForm
            },
            set(val) {
                this.$emit('update:measureForm', val)
            }
        },
        ...mapGetters(["userId"]),
    },
    data() {
        return {
            userListTwo: []
        }
    },
    mounted() {
        this.userListTwo = JSON.parse(JSON.stringify(this.userList))
        console.log('this.userListTwo', this.userListTwo);
    },
    methods: {
        filterUserList() {
            this.userListTwo = this.userList.filter(item => item.departLimsId.includes(this.form.causeAnalysisId))
            if (!this.userListTwo.some(item => item.id == this.form.correctiveActionId)) {
                this.form.correctiveActionId = null
            }
        },
        submit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/dispose/Step/Reason.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,122 @@
<template>
    <el-form :model="form" :disabled="disabled" label-width="140px" size="small" style="position: relative;">
        <el-card :body-style="{ height: '350px', overflow: 'auto' }">
            <el-form-item label="责任部门">
                <!-- <el-select
                    v-model="form.causeAnalysisPersonId"
                    placeholder="请选择"
                    style="width: 100%"
                >
                    <el-option
                        v-for="(item, index) in userList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select> -->
                <el-select @change="filterUserList" v-model="form.causeAnalysisId" placeholder="请选择"
                    style="width: 100%">
                    <el-option label="通信产品实验室" :value="18"></el-option>
                    <el-option label="电力产品实验室" :value="19"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="人员选择">
                <el-select v-model="form.causeAnalysisPersonId" placeholder="请选择" style="width: 100%">
                    <el-option v-for="(item, index) in userListTwo" :key="index" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="原因分析">
                <el-input type="textarea" v-model="form.causeAnalysis" :rows="2" placeholder="请输入内容">
                </el-input>
            </el-form-item>
        </el-card>
        <el-form-item label-width="0">
            <div style="display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    <span>操作人：{{ currentResponsible }}</span>
                </div>
                <div v-if="step == 1">
                    <el-button :disabled="false" @click="cancel">驳回</el-button>
                    <el-button type="primary" @click="submit"
                        :disabled="(departId == 18 && ![12, 10, 16].includes(userId)) || (departId == 19 && ![35, 41, 16].includes(userId))">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    props: {
        departId: {
            type: Number,
            default: () => {
                return null;
            }
        },
        isPermission: {
            type: Boolean,
            default: false,
        },
        currentResponsible: {
            type: String,
            default: ''
        },
        userList: {
            type: Array,
            default: []
        },
        reasonForm: {
            type: Object,
            default: {}
        },
        step: {
            type: Number,
            default: 0
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        form: {
            get() {
                return this.reasonForm
            },
            set(val) {
                this.$emit('update:reasonForm', val)
            }
        },
        ...mapGetters(["userId"]),
    },
    data() {
        return {
            userListTwo: []
        }
    },
    mounted() {
        this.userListTwo = JSON.parse(JSON.stringify(this.userList))
    },
    methods: {
        filterUserList() {
            this.userListTwo = this.userList.filter(item => item.departLimsId.includes(this.form.causeAnalysisId))
            if (!this.userListTwo.some(item => item.id == this.form.causeAnalysisPersonId)) {
                this.form.causeAnalysisPersonId = null
            }
        },
        submit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/dispose/Step/Result.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,111 @@
<template>
    <el-form :model="form" :disabled="disabled" label-width="130px" size="small" style="position: relative">
        <el-card :body-style="{ height: '350px', overflow: 'auto' }">
            <el-form-item label="验证部门">
                <!-- <el-select
                v-model="form.verificationDepartmentPersonId" 
                placeholder="请选择"
                style="width: 100%"
            >
                <el-option
                    v-for="(item, index) in userList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                ></el-option>
            </el-select> -->
                <el-input :disabled="true" v-model="form.verificationDepartment"></el-input>
            </el-form-item>

            <el-form-item label="人员选择">
                <el-select v-model="form.verificationDepartmentPersonId" placeholder="请选择" style="width: 100%">
                    <el-option v-for="(item, index) in userList" :key="index" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="实施验证结果">
                <el-input type="textarea" v-model="form.implementationVerificationResults" :rows="2"
                    placeholder="请输入内容">
                </el-input>
            </el-form-item>
        </el-card>
        <el-form-item label-width="0">
            <div style="display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    æ“ä½œäººï¼š{{ currentResponsible }}
                </div>
                <div v-if="step == 3">
                    <el-button :disabled="false" @click="cancel">驳回</el-button>
                    <el-button type="primary" @click="submit"
                        :disabled="(departId == 18 && ![12, 10, 16].includes(userId)) || (departId == 19 && ![35, 41, 16].includes(userId))">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    props: {
        departId: {
            type: Number,
            default: () => {
                return null;
            }
        },
        isPermission: {
            type: Boolean,
            default: false,
        },
        currentResponsible: {
            type: String,
            default: ''
        },
        resultForm: {
            type: Object,
            default: {}
        },
        step: {
            type: Number,
            default: 0
        },
        disabled: {
            type: Boolean,
            default: false
        },
        userList: {
            type: Array,
            default: []
        },
    },
    computed: {
        form: {
            get() {
                this.$set(this.resultForm, 'verificationDepartment', '质量负责人')
                return this.resultForm
            },
            set(val) {
                this.$emit('update:resultForm', val)
            }
        },
        ...mapGetters(["userId"]),
    },
    data() {
        return {
        }
    },
    methods: {
        submit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>
<style scoped></style>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/dispose/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,239 @@
<template>
    <div>
        <el-dialog title="纠错处理单" :visible.sync="dialogVisible">
            <el-steps :active="active" finish-status="success" :align-center="true">
                <el-step style="cursor: pointer;" v-for="(item, index) in stepList" :key="index" :title="item.label"
                    @click.native="setStep(item.value)"></el-step>
            </el-steps>
            <el-divider></el-divider>
            <Fact v-if="pageStatus == 0" :departId="departId" :isPermission="isPermission"
                :factForm.sync="mainForm.factForm" :userList="userList" :currentResponsible="currentResponsible"
                :disabled="active != 0" :step="active" @nextStep="submit" @cancel="cancel"></Fact>
            <Reason v-if="pageStatus == 1" :isPermission="isPermission" :departId="departId"
                :reasonForm.sync="mainForm.reasonForm" :userList="userList" :currentResponsible="currentResponsible"
                :disabled="active != 1" :step="active" @nextStep="submit" @cancel="cancel"></Reason>
            <Measure v-if="pageStatus == 2" :departId="departId" :isPermission="isPermission"
                :measureForm.sync="mainForm.measureForm" :userList="userList" :currentResponsible="currentResponsible"
                :disabled="active != 2" :step="active" @nextStep="submit" @cancel="cancel"></Measure>
            <Result v-if="pageStatus == 3" :departId="departId" :isPermission="isPermission"
                :resultForm.sync="mainForm.resultForm" :userList="userList" :currentResponsible="currentResponsible"
                :disabled="active != 3" :step="active" @nextStep="submit" @cancel="cancel"></Result>
            <!-- <div slot="footer" class="dialog-footer">
                <el-button v-if="active == 4" type="primary" @click="submit(5)">完成</el-button>
            </div> -->
        </el-dialog>
    </div>
</template>
<script>
import Fact from './Step/Fact.vue'
import Reason from './Step/Reason.vue'
import Measure from './Step/Measure.vue'
import Result from './Step/Result.vue'
import { dateFormat } from '@/utils/date.js'
import {
    selectUserList,
    personSupervisionProcessingPage,
    addOrUpdatePersonnelServiceProcessing
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
    props: {
        departId: {
            type: Number,
            default: () => {
                return null;
            }
        },
    },
    components: {
        Fact, Reason, Measure, Result
    },
    data() {
        return {
            isPermission: true,
            active: 0,
            pageStatus: 0,
            dialogVisible: false,
            currentResponsible: undefined,
            stepList: [
                {
                    label: '问题描述',
                    value: 0
                }, {
                    label: '原因分析',
                    value: 1
                }, {
                    label: '纠正措施',
                    value: 2
                }, {
                    label: '验证结果',
                    value: 3
                }
            ],
            supervisionRecordId: undefined,
            processId: undefined,
            mainForm: {
                factForm: {
                    proposingDepartmentPersonId: undefined,
                    descriptionNonconformity: undefined
                },
                reasonForm: {
                    causeAnalysisPersonId: undefined,
                    causeAnalysis: undefined
                },
                measureForm: {
                    correctiveActionId: undefined,
                    correctiveMeasure: undefined,
                    requestDepartmentConfirmation: undefined
                },
                resultForm: {
                    verificationDepartmentPersonId: undefined,
                    implementationVerificationResults: undefined
                }
            },
            userList: [],
        }
    },
    mounted() {
        this.isPermission = isPermission("isSubmit")
        console.log('权限', this.isPermission);
    },
    methods: {
        openDialog(id) {
            this.dialogVisible = true
            this.getUserList()
            this.getProcessData(id)
        },
        /**
         * @desc èŽ·å–用户信息
         */
        async getUserList() {
            const { code, data } = await selectUserList()
            if (code == 200) {
                this.userList = data
            }
        },
        /**
         * @desc æŸ¥è¯¢ç›‘督记录处理单
         * @param {监督记录id} id
         */
        async getProcessData(id) {
            const { code, data } = await personSupervisionProcessingPage({ id })
            if (code == 202) {
                this.controlType = '新增'
                this.supervisionRecordId = id
                this.active = 0
                this.pageStatus = 0
                this.processId = undefined
            }
            if (code == 200) {
                this.currentResponsible = data.currentResponsible
                this.controlType = '编辑'
                this.supervisionRecordId = id
                this.processId = data.processingId
                this.active = Number(data.currentState)
                this.pageStatus = Number(data.currentState === 2 ? 0 : data.currentState)
                // ç¬¬1步数据
                this.mainForm.factForm.proposingDepartmentPersonId = data.proposingDepartmentPersonId
                this.mainForm.factForm.descriptionNonconformity = data.descriptionNonconformity
                // ç¬¬2步数据
                this.mainForm.reasonForm.causeAnalysisPersonId = data.causeAnalysisPersonId
                this.mainForm.reasonForm.causeAnalysis = data.causeAnalysis
                // ç¬¬3步数据
                this.mainForm.measureForm.correctiveActionId = data.correctiveActionId
                this.mainForm.measureForm.correctiveMeasure = data.correctiveMeasure
                this.mainForm.measureForm.requestDepartmentConfirmation = data.requestDepartmentConfirmation
                // ç¬¬4步数据
                this.mainForm.resultForm.verificationDepartmentPersonId = data.verificationDepartmentPersonId
                this.mainForm.resultForm.implementationVerificationResults = data.implementationVerificationResults
            }
        },
        closeDialog() {
            this.dialogVisible = false
        },
        submit(type) {
            let currentState = undefined
            if (type == 'submit') {
                currentState = this.active + 1
            } else if (type == 'save') {
                currentState = undefined
            }
            if (this.active == 0) {
                // ç¬¬1æ­¥
                console.log('第1æ­¥', this.active, currentState)
                let { factForm } = this.mainForm
                this.submitForm({
                    proposingDepartmentDate: dateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss'),
                    currentState: currentState,
                    ...factForm
                })
            } else if (this.active == 1) {
                // ç¬¬2æ­¥
                console.log('第2æ­¥', this.active, currentState)
                let { reasonForm } = this.mainForm
                this.submitForm({
                    causeAnalysisDate: dateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss'),
                    currentState: currentState,
                    ...reasonForm
                })
            } else if (this.active == 2) {
                // ç¬¬3æ­¥
                console.log('第3æ­¥', this.active, currentState)
                let { measureForm } = this.mainForm
                let { requestDepartmentConfirmation, ...measureFormRest } = measureForm
                this.submitForm({
                    correctiveActionDate: dateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss'),
                    currentState: currentState,
                    requestDepartmentConfirmation: requestDepartmentConfirmation ? 1 : 2,
                    ...measureFormRest
                })
            } else if (this.active == 3) {
                // ç¬¬4æ­¥
                console.log('第4æ­¥', this.active, currentState)
                let { resultForm } = this.mainForm
                this.submitForm({
                    verificationDepartmentDate: dateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss'),
                    currentState: currentState,
                    ...resultForm
                })
            }
        },
        /**
         * @desc æäº¤è¡¨å•
         */
        async submitForm(form) {
            console.log('提交表单', form)
            const { code } = await addOrUpdatePersonnelServiceProcessing({
                processingId: this.processId,
                supervisionRecordId: this.supervisionRecordId,
                ...form
            })
            if (this.controlType == '新增') {
                if (code == 200) {
                    this.$message.success('提交成功')
                }
            } else if (this.controlType == '编辑') {
                if (code == 200) {
                    this.$message.success('提交成功')
                }
            }
            this.$emit('getTableData')
            this.dialogVisible = false
        },
        /**
         * @desc é©³å›ž
         */
        cancel() {
            let currentState = this.active - 1
            this.submitForm({
                id: this.processId,
                supervisionRecordId: this.supervisionRecordId,
                currentState: currentState,
            })
        },
        setStep(e) {
            console.log(e)
            this.pageStatus = e
        }
    }
}
</script>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,406 @@
<template>
    <div class="flex_column">
        <div>
            <TableCard :showTitle="false">
                <template v-slot:form>
                    <div class="items_center">
                        <!-- <span>关键字</span>
                        <el-input size="small" class="search" v-model="superviseForm.searchVal" placeholder="请输入"></el-input>
                        <el-button type="primary" size="small">查询</el-button> -->
                        <el-button v-if="multipleSelection.length > 0" slot="reference" size="small" type="danger"
                            @click="delRecords">删除</el-button>
                    </div>
                    <div>
                        <el-button size="small" type="primary" @click="addRecord"
                            v-show="departId && departId != 1">新增</el-button>
                    </div>
                </template>
                <template v-slot:table>
                    <limsTable :column="superviseColumnData" :handleSelectionChange="handleSelectionChange"
                        :height="'calc(100vh - 19em)'" :isSelection="true" :table-data="superviseTableData"
                        :table-loading="superviseLoading" rowKey="id" style="margin-top: 18px; padding: 0 15px;"
                        :page="page" @pagination="pagination">
                        <div slot="action" slot-scope="scope">
                            <el-button type="text" @click="openDownloadDia(scope.row)">
                                <span>导出</span>
                            </el-button>
                            <el-button type="text" @click="openRecord(scope.row)">
                                <span>监督记录</span>
                            </el-button>
                            <el-button type="text" @click="openControl(scope.row.id)"
                                :disabled="scope.row.evaluationSupervisionSituation != '不符合'">
                                <span :style="renderBtn(scope.row.currentStateControl)">控制单</span>
                            </el-button>
                            <el-button type="text" @click="openDispose(scope.row.id)"
                                :disabled="scope.row.correctiveMeasure != '1'">
                                <span :style="renderBtn(scope.row.currentStateProcessing)">处理单</span>
                            </el-button>
                        </div>
                    </limsTable>
                </template>
            </TableCard>
        </div>
        <RecordAdd ref="recordModal" @submit="getTableData" :departId="departId"></RecordAdd>
        <ControlModal ref="controlModal" @getTableData="getTableData" :departId="departId"></ControlModal>
        <DisposeModal ref="disposeModal" @getTableData='getTableData' :departId="departId"></DisposeModal>
        <el-dialog :visible.sync="downloadDialog" title="导出" width="600px">
            <span>
                <el-button :disabled="!download.currentStateControl" plain type="primary"
                    @click="controlDown">控制单导出</el-button>
                <el-button :disabled="!download.currentStateProcessing" plain type="primary"
                    @click="processingDown">处理单导出</el-button>
                <el-button plain type="primary" @click="supervisoryDown">监督记录导出</el-button>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="downloadDialog = false">取 æ¶ˆ</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import TableCard from '@/components/TableCard/index.vue';
import RecordAdd from "./Add.vue"
import limsTable from "@/components/Table/lims-table.vue";
import ControlModal from "./control/index.vue"
import DisposeModal from "./dispose/index.vue"
import {
    personSupervisionRecordPage,
    deletePersonSupervisionRecord,
    exportSupervisionControlSheet,
    exportSupervisionProcessingSheet,
    exportPersonSupervisionRecord
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
    props: {
        isDepartment: {
            type: Boolean,
            default: false
        },
        departId: {
            type: Number,
            default: () => {
                return null;
            }
        },
    },
    components: {
        TableCard,
        RecordAdd,
        limsTable,
        ControlModal,
        DisposeModal
    },
    data() {
        return {
            loading: false,
            page: {
                current: 1,
                pageSize: 20,
                total: 0
            },
            // ç›‘督记录
            superviseForm: {
                searchVal: undefined
            },
            superviseColumnData: [
                // {
                //     label: 'id',
                //     prop: 'id'
                // }, 
                {
                    label: '检测人员',
                    prop: 'testerName',
                    width: 120
                }, {
                    label: '监督人员',
                    prop: 'supervisorName',
                    width: 120
                }, {
                    label: '检验项目',
                    prop: 'testItem',
                    width: 120
                }, {
                    label: '样品编号',
                    prop: 'sampleNumber',
                    width: 120
                }, {
                    label: '检验日期',
                    prop: 'detectionDate',
                    width: 160
                }, {
                    label: '控制单状态',
                    prop: 'currentStateControl',
                    formatData: (item) => {
                        let result = undefined
                        switch (item) {
                            case '0':
                                result = '工作情况'
                                break;
                            case '1':
                                result = '被监督人确认'
                                break;
                            case '2':
                                result = '处理措施'
                                break;
                            case '3':
                                result = '纠正措施'
                                break;
                            case '4':
                                result = '通知客户'
                                break;
                        }
                        return result
                    },
                    width: 140,
                }, {
                    label: '流程单状态',
                    prop: 'currentStateProcessing',
                    formatData: (item) => {
                        let result = undefined
                        switch (item) {
                            case '0':
                                result = '问题描述'
                                break;
                            case '1':
                                result = '原因分析'
                                break;
                            case '2':
                                result = '纠正措施'
                                break;
                            case '3':
                                result = '验证结果'
                                break;
                        }
                        return result
                    },
                    width: 140,
                }, {
                    label: '人员',
                    prop: 'personnel',
                    width: 150
                }, {
                    label: '设备仪器',
                    prop: 'instrumentEquipment',
                    width: 140
                }, {
                    label: '工作环境',
                    prop: 'workingEnvironment',
                    width: 140
                }, {
                    label: '样品采集',
                    prop: 'sampleCollection',
                    width: 140
                }, {
                    label: '样品的准备',
                    prop: 'samplePreparation',
                    width: 140
                }, {
                    label: '检验方法',
                    prop: 'testMethod',
                    width: 120
                }, {
                    label: '检测记录',
                    prop: 'testingRecords',
                    width: 120
                }, {
                    label: '检验报告',
                    prop: 'testReport',
                    width: 120
                }, {
                    label: '监督情况评价',
                    prop: 'evaluationSupervisionSituation',
                    width: 140
                }, {
                    label: '不符合处理意见',
                    prop: 'doNotMeetTheHandlingOpinions',
                    width: 140
                }, {
                    fixed: 'right',
                    dataType: "slot",
                    width: 280,
                    label: '操作',
                    slot: 'action',
                }
            ],
            superviseTableData: [],
            superviseLoading: false,
            multipleSelection: [],
            downloadDialog: false,
            download: {
                currentStateControl: '',
                currentStateProcessing: '',
            },
            downloadId: '',
        }
    },
    mounted() {
        this.getTableData()
    },
    methods: {
        /**
         * @desc èŽ·å–树的人员id
         */
        getDepart() {
            this.getTableData()
        },
        pagination({ page, limit }) {
            this.page.current = page;
            this.page.pageSize = limit;
            this.getTableData();
        },
        // èŽ·å–监督记录
        async getTableData() {
            this.loading = true
            const { code, data } = await personSupervisionRecordPage({
                departLimsId: this.isDepartment ? this.departId : null,
                userId: this.isDepartment ? null : this.departId,
                current: this.page.current,
                size: this.page.pageSize
            })
            if (code == 200) {
                this.superviseTableData = data.records
                this.page.total = data.total
            }
            this.loading = false
        },
        // æ–°å¢žç›‘督记录
        addRecord(row, type = false) {
            this.$refs.recordModal.openDialog({ departId: this.departId, ...row }, type)
        },
        openRecord(row) {
            this.$refs.recordModal.openDialog(row, true)
        },
        // æ‰“开导出弹框
        openDownloadDia(row) {
            this.downloadDialog = true
            this.download = row
            console.log('this.download', this.download.currentStateProcessing, this.download.currentStateControl);
            this.downloadId = row.id
        },
        // æŽ§åˆ¶å•å¯¼å‡º
        controlDown() {
            exportSupervisionControlSheet({ supervisionRecordId: this.downloadId }).then(res => {
                this.outLoading = false
                const blob = new Blob([res], { type: 'application/msword' });
                this.$download.saveAs(blob, '控制单导出' + '.docx')
            })
        },
        // å¤„理单导出
        processingDown() {
            exportSupervisionProcessingSheet({ supervisionRecordId: this.downloadId }).then(res => {
                this.outLoading = false
                const blob = new Blob([res], { type: 'application/msword' });
                this.$download.saveAs(blob, '处理单导出' + '.docx')
            })
        },
        // ç›‘督记录导出
        supervisoryDown() {
            exportPersonSupervisionRecord({ id: this.downloadId }).then(res => {
                this.outLoading = false
                const blob = new Blob([res], { type: 'application/msword' });
                this.$download.saveAs(blob, '监督记录导出' + '.docx')
            })
        },
        // æ˜¾ç¤ºæŽ§åˆ¶å•
        openControl(id) {
            this.$refs.controlModal.openDialog(id)
        },
        // æ˜¾ç¤ºå¤„理单
        openDispose(id) {
            this.$refs.disposeModal.openDialog(id)
        },
        // è¡¨æ ¼å¤šé€‰æ¿€æ´»åŽåšä»€ä¹ˆ
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        /**
         * @desc æ‰¹é‡åˆ é™¤ç›‘督记录
         */
        delRecords() {
            this.$confirm(
                '此操作将删除选中数据, æ˜¯å¦ç»§ç»­?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    console.log(this.multipleSelection)
                    let ids = this.multipleSelection.map((item) => item.id)
                    const code = this.delTableData(ids)
                    this.$message({
                        type: code == 200 ? 'success' : 'error',
                        message: code == 200 ? '删除成功！' : '删除失败！'
                    });
                    this.getTableData()
                })
        },
        // åˆ é™¤api
        async delTableData(ids) {
            const { code } = await this.$axios({
                method: 'delete',
                url: deletePersonSupervisionRecord,
                data: ids
            })
            return code
        },
        // è¡ŒèƒŒæ™¯è‰²
        renderBtn(currentState) {
            let status = Number(currentState)
            let res = {}
            switch (status) {
                case 0:
                    break;
                case 1:
                    res = { color: '#337ecc' }
                    break;
                case 2:
                    res = { color: '#409EFF' }
                    break;
                case 3:
                    res = { color: '#79bbff' }
                    break;
                case 4:
                    res = { color: '#a0cfff' }
                    break;
            }
            return res;
        }
    },
    watch: {
        // ç›‘听点击el-tree的数据，进行数据刷新
        departId: {
            handler(newId, oldId) {
                if (this.isDepartment) {
                    this.getTableData();
                } else {
                    this.getTableData()
                }
            }
        }
    }
}
</script>
<style scoped>
.flex_column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.items_center {
    display: flex;
    align-items: center;
}

.date_box {
    margin: 0 5px;
}

.search {
    width: 150px;
    padding: 0 16px;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/supervise/ApproveForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,84 @@
<template>
    <el-form
        :model="form"
        label-width="100px"
        :disabled="disabled"
        size="small"
    >
        <el-form-item label="技术负责人">
            <el-select 
                v-model="form.technicalDirector" 
                placeholder="请选择" 
                style="width: 100%"
            >
                <el-option
                    v-for="(item, index) in userList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                ></el-option>
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="审批">
            <el-input 
                type="textarea"
                :rows="2" 
                placeholder="请输入"
            ></el-input>
        </el-form-item> -->
        <el-form-item v-if="!disabled" style="text-align: right;">
            <el-button size="small" type="danger" @click="close">驳回</el-button>
            <el-button size="small" type="primary" @click="submit">提交</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    props: {
        userList: {
            type: Array,
            default: () => {
                return []
            }
        },
        approveForm: {
            type: Object,
            default: {}
        },
        isEdit: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        form: {
            get() {
                return this.approveForm
            },
            set(val) {
                this.$emit('approveForm', val)
            }
        }
    },
    data() {
        return {
          
        }
    },
    methods: {
        submit() {
            this.$emit('submit', 2)
        },
        /**
         * @desc é©³å›ž
         */
        close() {
            this.$emit('close', 2)
        }
    }
}
</script>

 src/views/CNAS/personnel/personnelInfo/Department/components/Records/supervise/SuperviseForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,201 @@
<template>
     <el-form
        :model="ruleForm"
        :disabled="disabled"
        label-width="100px"
        size="small"
    >
        <el-row>
            <el-col :span="12">
                <el-form-item label="检测人员">
                    <el-select v-model="ruleForm.testerId" placeholder="请选择" style="width: 100%">
                        <el-option
                            v-for="(item, index) in userList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="监督员">
                    <el-select v-model="ruleForm.supervisorId" placeholder="请选择" style="width: 100%">
                        <el-option
                            v-for="(item, index) in userList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="检测项目">
                    <el-input v-model="ruleForm.testItem" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="样品编号">
                    <el-input v-model="ruleForm.sampleNumber" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="检测日期">
                    <el-date-picker
                        v-model="ruleForm.detectionDate"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                        style="width: 100%;"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="人员">
                    <!-- <el-select 
                        v-model="ruleForm.personnel" 
                        placeholder="请选择" 
                        style="width: 100%"
                        multiple
                    >
                        <el-option
                            v-for="(item, index) in userList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select> -->
                    <el-input v-model="ruleForm.personnel" type="textarea" :rows="2" style="width: 100%" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="仪器设备">
                    <el-input v-model="ruleForm.instrumentEquipment" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="工作环境">
                    <el-input v-model="ruleForm.workingEnvironment" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="样品采集">
                    <el-input v-model="ruleForm.sampleCollection" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="样品的准备">
                    <el-input v-model="ruleForm.samplePreparation" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="检测方法">
                    <el-input v-model="ruleForm.testMethod" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="检测记录">
                    <el-input v-model="ruleForm.testingRecords" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="检测报告">
                    <el-input v-model="ruleForm.testReport" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="监督情况评价">
                    <el-select v-model="ruleForm.evaluationSupervisionSituation" placeholder="请选择" style="width: 100%;">
                        <el-option label="符合" value="符合"></el-option>
                        <el-option label="不符合" value="不符合"></el-option>
                    </el-select>

                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="处理意见">
                    <el-input v-model="ruleForm.doNotMeetTheHandlingOpinions" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col v-show="isEdit && !disabled" :span="24">
                <el-form-item style="text-align: right;">
                    <el-button size="small" @click="close">取消</el-button>
                    <el-button size="small" type="primary" @click="approve">审批</el-button>
                </el-form-item>
            </el-col>
            <el-col v-show="!isEdit" :span="24">
                <el-form-item style="text-align: right;">
                    <el-button size="small" type="primary" @click="addData">提交</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<script>

export default {
    props: {
        isEdit: {
            type: Boolean,
            default: false
        },
        userList: {
            type: Array,
            default: () => {
                return []
            }
        },
        superviseForm: {
            type: Object,
            default: {}
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        ruleForm: {
            get() {
                return this.superviseForm
            },
            set(val) {
                this.$emit('superviseForm', val)
            }
        }
    },
    data() {
        return {
        }
    },
    methods: {
        close() {
            this.$emit('close')
        },
        approve() {
            this.$emit('submit', 1)
        },
        addData() {
            this.$emit('addData', 1)
        }
    }
}
</script>

 src/views/CNAS/personnel/personnelInfo/Department/components/TrainingRecord/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,285 @@
<!-- åŸ¹è®­è®°å½• -->
<template>
  <div>
    <div class="flex_table">
      <div v-if="isDepartment" style="width: 50%">
        <TableCard :showTitle="false">
          <template v-slot:form>
            <div class="items_center">
              <span>姓名</span>
              <el-input v-model="trainingPagination.userName" class="search" clearable placeholder="请输入"
                size="small"></el-input>
              <el-button size="small" type="primary" @click="getPersonnelTraining(departId)">查询</el-button>
            </div>
            <div>
              <!--              <el-button :loading="outLoading" size="small" type="primary" @click="exportExcel">导出</el-button>-->
            </div>
          </template>
          <template v-slot:table>
            <limsTable :column="trainingColumn" :currentChange="currentChange" :height="'calc(100vh - 18em)'"
              :highlightCurrentRow="true" :table-data="trainingTableData" :table-loading="trainingLoading"
              style="padding: 0 15px;" :page="trainingPagination" @pagination="trainingPaginationMethod">
            </limsTable>
          </template>
        </TableCard>
      </div>
      <div :style="`width: ${isDepartment ? '50%' : '100%'};`">
        <TableCard :showTitle="false">
          <template v-slot:form>
            <div class="items_center">
              <span>年份</span>
              <el-date-picker v-model="searchForm.trainingDate" clearable format="yyyy" placeholder="选择年" size="small"
                style="margin: 0 10px" type="year" value-format="yyyy">
              </el-date-picker>
              <el-button size="small" type="primary"
                @click="queryPersonnelDetailsPage(currentChangeRow.userId)">查询</el-button>
              <el-button size="small" type="primary" @click="openDownloadDia(currentChangeRow)">导出</el-button>
            </div>
          </template>
          <template v-slot:table>
            <limsTable :column="trainingPersonColumn" :height="'calc(100vh - 18em)'"
              :table-data="trainingPersonTableData" :table-loading="trainingPersonLoading" style="padding: 0 15px;"
              :page="trainingPersonPagination" @pagination="trainingPersonPaginationMethod">
            </limsTable>
          </template>
        </TableCard>
      </div>
    </div>
  </div>
</template>

<script>
import limsTable from "@/components/Table/lims-table.vue";
import TableCard from "@/components/TableCard/index.vue";
import {
  exportTrainingRecord,
  trainingSelectTrainingRecord,
  queryPersonnelDetails,
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
  components: { TableCard, limsTable },
  props: {
    departId: {
      type: Number,
      default: () => {
        return null;
      }
    },
    isDepartment: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      outLoading: false,
      trainingForm: {},
      trainingColumn: [
        {
          label: '员工编号',
          prop: 'account',
          width: '100'
        }, {
          label: '姓名',
          prop: 'name'
        }, {
          label: '所在部门',
          prop: 'departLimsName',
          width: '150'
        }, {
          label: '职称',
          prop: 'professionalTitle'
        }, {
          label: '最高学历',
          prop: 'officialAcademicRedentials',
          width: '100'
        }, {
          label: '入单位时间',
          prop: 'unitTime',
          width: '150'
        },
        // {
        //   fixed: 'right',
        //   dataType: 'action',
        //   width: 80,
        //   label: '操作',
        //   operation: [
        //     {
        //       name: '导出',
        //       type: 'text',
        //       clickFun: (row) => {
        //         this.openDownloadDia(row)
        //       }
        //     }
        //   ]
        // }
      ],
      trainingTableData: [],
      trainingLoading: false,
      trainingPagination: {
        size: 20,
        total: 0,
        current: 1,
        userName: null
      },
      searchForm: {
        trainingDate: ''
      },
      trainingPersonColumn: [
        {
          label: '培训日期',
          prop: 'trainingDate'
        }, {
          label: '培训内容',
          prop: 'trainingContent'
        }, {
          label: '培训课时',
          prop: 'educationBackground'
        }, {
          label: '课时',
          prop: 'classHour'
        }, {
          label: '培训结果',
          prop: 'examinationResults',
        }, {
          label: '备注',
          prop: 'remarks'
        }
      ],
      trainingPersonTableData: [],
      trainingPersonLoading: false,
      trainingPersonPagination: {
        size: 20,
        current: 1,
        total: 0
      },
      currentChangeRow: '',
    };
  },
  mounted() {
    this.getPersonnelTraining(this.departId);
  },
  methods: {
    // exportExcel() {
    //   this.outLoading = true;
    //   const name = this.isDepartment ? 'departmentId' : 'userId';
    //   this.$axios.get(this.$api.personnel.personTrackRecordExport + `&${name}=` + this.departId, { responseType: 'blob' }).then(res => {
    //     this.outLoading = false;
    //     this.$message.success('导出成功');
    //     const blob = new Blob([res], { type: 'application/octet-stream' });
    //     const url = URL.createObjectURL(blob);
    //     const link = document.createElement('a');
    //     link.href = url;
    //     link.download = '培训记录.xlsx';
    //     link.click();
    //   }).catch(err => {
    //     this.outLoading = false;
    //   })
    // },
    // æŸ¥è¯¢
    refreshTable() {
      this.getPersonnelTraining(this.departId);
    },
    // åŸ¹è®­è®°å½•å¯¼å‡º
    openDownloadDia(row) {
      let date = this.searchForm.trainingDate
      if (!date) {
        date = this.$moment().format('YYYY')
      }
      console.log('date----', date);
      exportTrainingRecord({
        userId: row.userId,
        trainingDate: date
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/msword' });
        this.$download.saveAs(blob, '培训记录导出' + '.docx')
      })
    },
    // èŽ·å–实验室-培训计划列表信息
    getPersonnelTraining(departId) {
      // const name = this.isDepartment ? 'departmentId' : 'userId';
      trainingSelectTrainingRecord({
        departmentId: departId,
        ...this.trainingPagination
      }).then(res => {
        this.trainingTableData = res.data.records;
        this.trainingPagination.total = res.data.total;
        if (this.trainingTableData.length > 0) {
          this.currentChange(this.trainingTableData[0]);
        }
      });
    },
    // èŽ·å–个人-培训计划列表信息
    currentChange(row) {
      this.currentChangeRow = row
      if (row === null) {
        row = this.trainingTableData[0]
      }
      this.queryPersonnelDetailsPage(row.userId)
    },
    queryPersonnelDetailsPage(userId) {
      if (this.searchForm.trainingDate === null) {
        this.searchForm.trainingDate = ''
      }
      queryPersonnelDetails({
        userId,
        ...this.trainingPersonPagination
      }).then(res => {
        this.trainingPersonTableData = res.data.records;
        this.trainingPersonPagination.total = res.data.total;
      });
    },
    // åˆ†é¡µ
    trainingPaginationMethod({ page, limit }) {
      this.trainingPagination.current = page;
      this.trainingPagination.size = limit;
      this.getPersonnelTraining(this.departId);
    },
    // åˆ†é¡µ
    trainingPersonPaginationMethod({ page, limit }) {
      this.trainingPersonPagination.current = page;
      this.trainingPersonPagination.size = limit;
      this.queryPersonnelDetailsPage(this.currentChangeRow.userId);
    },
  },
  watch: {
    departId: {
      handler(newId, oldId) {
        if (this.isDepartment) {
          this.getPersonnelTraining(newId);
        } else {
          this.queryPersonnelDetailsPage(newId)
        }
      }
    }
  }
};
</script>
<style scoped>
>>>.el-form-item {
  margin-bottom: 13px;
}

.flex_table {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.items_center {
  display: flex;
  align-items: center;
}

.search {
  width: 150px;
  padding: 0 6px;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/components/rewardPunishmentRecord/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,316 @@
<!-- å¥–惩记录 -->
<template>
  <div>
    <div style="text-align: left; margin-bottom: 15px;">
      <label>姓名</label>
      <el-input v-model="search.userName" clearable placeholder="请输入关键字" size="small" style="width: 20vh;"></el-input>
      <label style="margin-left: 1em">奖惩日期</label>
      <el-date-picker v-model="search.searchTimeList" :picker-options="pickerOptions" align="right" clearable
        end-placeholder="结束日期" format="yyyy-MM-dd" range-separator="至" size="small" start-placeholder="开始日期"
        style="width: 20%" type="daterange" unlink-panels value-format="yyyy-MM-dd 00:00:00">
      </el-date-picker>
      <el-button size="small" type="primary" @click="getPersonnelTraining(departId)">查询</el-button>
      <div style="float: right;">
        <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出</el-button>
        <el-button size="small" type="primary" @click="dialogVisible = true">新增</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" height="70vh" style="width: 100%">
        <el-table-column label="序号" type="index" width="120">
          <template v-slot="scope">
            <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="员工编号" min-width="180" prop="account">
        </el-table-column>
        <el-table-column label="姓名" min-width="180" prop="userName">
        </el-table-column>
        <el-table-column label="奖惩级别" min-width="180" prop="rewardPunishLevel">
        </el-table-column>
        <el-table-column label="奖惩时间" min-width="180" prop="rewardPunishTime">
        </el-table-column>
        <el-table-column label="奖惩名称" min-width="180" prop="rewardPunishName">
        </el-table-column>
        <el-table-column label="奖惩具体内容" min-width="120" prop="rewardPunishContent">
        </el-table-column>
        <el-table-column label="奖惩单位" min-width="180" prop="rewardPunishWorkUnit">
        </el-table-column>
        <el-table-column label="创建人" min-width="180" prop="createUserName">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template v-slot="scope">
            <el-button size="small" type="text" @click="editForm(scope.row)">编辑</el-button>
            <el-button size="small" type="text" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
        :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="提示" width="50%" @open="getUserList">
      <div style="height: 40vh">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-col :span="12">
            <el-form-item label="员工编号">
              <el-input v-model="form.account" disabled size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工姓名" prop="userName">
              <el-select v-model="form.userName" placeholder="请选择" size="small" style="width: 100%" value-key="id"
                @change="selectUserChange">
                <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="奖惩级别" prop="rewardPunishLevel">
              <el-input v-model="form.rewardPunishLevel" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="奖惩名称" prop="rewardPunishName">
              <el-input v-model="form.rewardPunishName" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="奖惩时间" prop="rewardPunishTime">
              <el-date-picker v-model="form.rewardPunishTime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                size="small" style="width: 100%" type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="奖惩单位" prop="rewardPunishWorkUnit">
              <el-input v-model="form.rewardPunishWorkUnit" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="奖惩内容">
              <el-input v-model="form.rewardPunishContent" :rows="2" size="small" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="saveOrUpdate">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteRewardPunishment,
  addOrUpdateRewardPunishment,
  rewardPunishmentPage
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
  props: {
    departId: {
      type: Number,
      default: () => {
        return null;
      }
    },
    isDepartment: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [],
      search: {
        size: 20,
        current: 1,
        total: 0,
        userName: '',
        searchTimeList: []
      },
      form: {},
      dialogVisible: false,
      outLoading: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      rules: {
        userName: [{
          required: true, message: '请选择员工姓名', trigger: 'change'
        }],
        rewardPunishLevel: [{
          required: true, message: '请输入奖惩级别', trigger: 'blur'
        }],
        rewardPunishName: [{
          required: true, message: '请输入奖惩名称', trigger: 'blur'
        }],
        rewardPunishTime: [{
          required: true, message: '请输入奖惩时间', trigger: 'blur'
        }],
        rewardPunishWorkUnit: [{
          required: true, message: '请输入奖惩单位', trigger: 'blur'
        }]
      },
      responsibleOptions: []
    };
  },
  mounted() {
    this.getPersonnelTraining(this.departId);
  },
  methods: {
    handleSizeChange(val) {
      this.search.size = val
      this.getPersonnelTraining(this.departId);
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.getPersonnelTraining(this.departId);
    },
    async getPersonnelTraining() {
      const { code, data } = await rewardPunishmentPage({
        userId: this.isDepartment ? '' : this.departId,
        departmentId: this.isDepartment ? this.departId : '',
        current: this.search.curent,
        size: this.search.size,
        userName: this.search.userName,
        startTime: this.search.searchTimeList && this.search.searchTimeList[0],
        endTime: this.search.searchTimeList && this.search.searchTimeList[1],
      })
      if (code == 200) {
        this.tableData = data.records
        this.search.total = data.total
      }
    },
    handleDown() {
      this.outLoading = true
      this.$axios.post(this.$api.deviceCheck.rewardPunishmentExport, {
        userId: this.isDepartment ? '' : this.departId,
        departmentId: this.isDepartment ? this.departId : '',
        userName: this.search.userName,
        startTime: this.search.searchTimeList && this.search.searchTimeList[0],
        endTime: this.search.searchTimeList && this.search.searchTimeList[1]
      }, { responseType: 'blob' }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], {
          type: 'application/force-download'
        })
        //将Blob å¯¹è±¡è½¬æ¢æˆå­—符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              // åˆ›å»ºä¸€ä¸ªè¶…链接，将文件流赋进去，然后实现这个超链接的单击事件
              const elink = document.createElement('a')
              elink.download = decodeURI('奖惩记录' + '.xlsx')
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click();
              URL.revokeObjectURL(elink.href) // é‡Šæ”¾URL å¯¹è±¡
              document.body.removeChild(elink)
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            // åˆ›å»ºä¸€ä¸ªè¶…链接，将文件流赋进去，然后实现这个超链接的单击事件
            const elink = document.createElement('a')
            elink.download = decodeURI('奖惩记录' + '.xlsx')
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click();
            URL.revokeObjectURL(elink.href) // é‡Šæ”¾URL å¯¹è±¡
            document.body.removeChild(elink)
            this.$message.success('导出成功')
          }
        }
      })
    },
    // èŽ·å–负责人信息接口
    getUserList() {
      this.$axios.get(this.$api.deviceScope.selectUserList).then(res => {
        if (res.code == 200) {
          this.responsibleOptions = res.data
        }
      })
    },
    selectUserChange(val) {
      this.form.userName = val.name
      this.form.account = val.account
      this.form.userId = val.id
    },
    editForm(row) {
      this.dialogVisible = true
      this.form = { ...row };
    },
    saveOrUpdate() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.dialogVisible = false
          const { code, data } = await addOrUpdateRewardPunishment(this.form)
          if (code == 200) {
            this.$message.success("操作成功！")
            this.getPersonnelTraining(this.departId);
          }
        }
      })
    },
    async deleteRow(row) {
      const { code, data } = await deleteRewardPunishment({
        id: row.id
      })
      if (code == 200) {
        this.$message.success("操作成功！")
        this.getPersonnelTraining(this.departId);
      }
    }
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    departId: {
      handler(newId, oldId) {
        this.getPersonnelTraining(newId);
      }
    },
    dialogVisible(newVal) {
      if (newVal === false) {
        this.form = {}
        this.$refs['form'].clearValidate()
      }
    }
  }
};
</script>

 src/views/CNAS/personnel/personnelInfo/Department/components/trackRecord/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,298 @@
<!-- å·¥ä½œå±¥åŽ† -->
<template>
  <div>
    <div style="text-align: right; margin-bottom: 15px;">
      <el-button v-if="clickNodeVal.userId" size="small" type="primary" @click="dialogVisible = true">添加工作履历</el-button>
      <el-button :loading="outLoading" size="small" type="primary" @click="exportExcel">导出excel</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" height="70vh" style="width: 100%">
        <el-table-column label="序号" type="index" width="120">
          <template v-slot="scope">
            <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="起始日期" min-width="180" prop="startTime">
        </el-table-column>
        <el-table-column label="结束日期" min-width="180" prop="endTime">
        </el-table-column>
        <el-table-column label="工作单位" min-width="120" prop="placeWork">
        </el-table-column>
        <el-table-column label="工作部门" min-width="120" prop="department">
        </el-table-column>
        <el-table-column label="职务" min-width="120" prop="post">
        </el-table-column>
        <el-table-column label="备注" min-width="180" prop="remarks">
        </el-table-column>
        <el-table-column label="创建人" min-width="180" prop="createUser">
        </el-table-column>
        <el-table-column label="创建时间" min-width="180" prop="createTime">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template v-slot="scope">
            <el-button size="small" type="text" @click="downloadFile(scope.row.fileName)">导出</el-button>
            <el-button size="small" type="text" @click="checkFun(scope.row)">查看</el-button>
            <el-button size="small" style="color: red;" type="text" @click="deleteFun(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
        :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="提示" width="45%">
      <div style="height: 30vh;">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="起始日期" prop="startTime">
                <el-date-picker v-model="ruleForm.startTime" format="yyyy-MM-dd" placeholder="选择日期" required
                  size="small" style="width: 99%;" type="date" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束日期">
                <el-date-picker v-model="ruleForm.endTime" format="yyyy-MM-dd" placeholder="选择日期" size="small"
                  style="width: 99%;" type="date" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="工作单位" prop="placeWork">
                <el-input v-model="ruleForm.placeWork" clearable required size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作部门" prop="department">
                <el-input v-model="ruleForm.department" clearable required size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="最高职务" prop="post">
                <el-input v-model="ruleForm.post" clearable required size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="附件资料">
                <el-row>
                  <el-col :span="17"><el-input v-model="ruleForm.fileName" disabled size="small"></el-input></el-col>
                  <el-col :span="7">
                    <el-upload ref="upload" :action="action" :on-change="handleChangePic" :on-success="onSuccess"
                      :show-file-list="false" style="float: left; margin: 0 20px;" :headers="uploadHeader">
                      <el-button slot="trigger" class="uploadFile" size="mini" type="primary">浏览</el-button>
                    </el-upload>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="ruleForm.remarks" clearable size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="saveOrUpdate">{{ isUpdate ? '更 æ–°' : '保 å­˜' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  personTrackRecordExport,
  personTrackRecordUpdate,
  personTrackRecordSave,
  personTrackRecordDelete,
  personTrackRecordSelect,
} from '@/api/cnas/personnel/personnelInfo.js'
export default {
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      tableData: [],
      search: {
        size: 20,
        current: 1,
        total: 0
      },
      dialogVisible: false,
      ruleForm: {
        fileName: '',
        sysFileName: ''
      },
      rules: {
        startTime: [
          { required: true, message: '请输入起始日期', trigger: 'blur' },
          { required: true, message: '请输入起始日期', trigger: 'change' }
        ],
        placeWork: [
          { required: true, message: '请输入工作单位', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请输入工作部门', trigger: 'blur' }
        ],
        post: [
          { required: true, message: '请输入最高职务', trigger: 'blur' }
        ]
      },
      isUpdate: false,
      outLoading: false
    };
  },
  created() {
    this.init();
  },
  computed: {
    action() {
      return this.javaApi + '/personBasicInfo/saveCNASFile'
    }
  },
  methods: {
    downloadFile(fileName) {
      this.$download.saveAs(fileName, fileName)
    },
    handleChangePic(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
    },
    onSuccess(response, file, fileList) {
      if (response.code === 200) {
        this.$set(this.ruleForm, 'fileName', response.data)
      } else {
        this.$message.warning(response.message)
      }
    },
    exportExcel() {
      this.outLoading = true
      let userId = this.clickNodeVal.userId ? this.clickNodeVal.userId : null
      let departmentId = this.clickNodeVal.id ? this.clickNodeVal.id : null
      personTrackRecordExport({
        userId,
        departmentId
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        this.$download.saveAs(blob, '工作履历.xlsx')
      })
    },
    saveOrUpdate() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.isUpdate) {
            personTrackRecordUpdate(this.ruleForm).then(res => {
              if (res.code = 200) {
                this.dialogVisible = false
                this.$message.success('更新成功！')
                this.init()
              }
            })
          } else {
            this.ruleForm.userId = this.clickNodeVal.userId
            personTrackRecordSave(this.ruleForm).then(res => {
              if (res.code = 200) {
                this.dialogVisible = false
                this.$message.success('新增成功！')
                this.init()
              }
            })
          }
        } else {
          return false;
        }
      });
    },
    deleteFun(id) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        personTrackRecordDelete({ id }).then(res => {
          this.$message.success('删除成功！')
          this.init()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val) {
      this.search.size = val
      this.init()
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.init()
    },
    // åˆå§‹åŒ–调用
    init() {
      if (this.clickNodeVal.userId) {
        this.getPersonnelTraining(this.clickNodeVal.userId ? this.clickNodeVal.userId : null, null);
      } else {
        this.getPersonnelTraining(null, this.clickNodeVal.id ? this.clickNodeVal.id : null);
      }
    },
    getPersonnelTraining(userId, departmentId) {
      personTrackRecordSelect({
        userId,
        departmentId,
        ...this.search
      }).then(res => {
        this.tableData = res.data.records
        this.search.total = res.data.total
      })
    },
    checkFun(row) {
      this.ruleForm = { ...row }
      this.dialogVisible = true
      this.isUpdate = true
    }
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.userId) {
        // ç”¨æˆ·id
        this.getPersonnelTraining(newVal.userId, null);
      } else {
        // éƒ¨é—¨id
        this.getPersonnelTraining(null, newVal.id);
      }
    },
    dialogVisible(newVal) {
      if (!newVal) {
        this.isUpdate = false
        this.$refs.ruleForm.resetFields();
        this.ruleForm = {}
      }
    }
  }
};
</script>
<style scoped>
>>>.el-form-item {
  margin-bottom: 13px;
}
</style>

 src/views/CNAS/personnel/personnelInfo/Department/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,152 @@
<template>
  <el-tabs v-model="activeName" :lazy="true" type="border-card">
    <el-tab-pane label="人员基本信息" name="人员基本信息">
      <PersonnelList v-if="activeName === '人员基本信息' && isShowAll" ref="personnelList"
        :currentCompaniesList="currentCompaniesList" :departId="departId" @refreshTree="refreshTree"
        @updatePerson="updatePerson"></PersonnelList>
      <personnelInformation v-if="activeName === '人员基本信息' && !isShowAll" :clickNodeVal="clickNodeVal">
      </personnelInformation>
    </el-tab-pane>
    <el-tab-pane label="培训计划" name="培训计划">
      <PersonnelTraining v-if="activeName === '培训计划'" ref="personnelTraining" :flag="flag" :departId="departId"
        :isDepartment="isDepartment"></PersonnelTraining>
    </el-tab-pane>
    <el-tab-pane label="监督计划" name="监督计划">
      <Plan v-if="activeName === '监督计划'" :departId="departId"></Plan>
    </el-tab-pane>
    <el-tab-pane label="岗位职责" name="岗位职责">
      <job-responsibilities v-if="activeName === '岗位职责'" ref="jobResponsibilities" :departId="departId"
        :isDepartment="isDepartment"></job-responsibilities>
    </el-tab-pane>
    <el-tab-pane label="工作履历" name="工作履历">
      <trackRecord v-if="activeName === '工作履历'" :clickNodeVal="clickNodeVal"></trackRecord>
    </el-tab-pane>
    <el-tab-pane label="奖惩记录" name="奖惩记录">
      <rewardPunishmentRecord v-if="activeName === '奖惩记录'" :departId="departId" :isDepartment="isDepartment">
      </rewardPunishmentRecord>
    </el-tab-pane>
    <el-tab-pane label="培训记录" name="培训记录">
      <training-record v-if="activeName === '培训记录'" ref="trainingRecord" :departId="departId"
        :isDepartment="isDepartment"></training-record>
    </el-tab-pane>
    <el-tab-pane label="监督记录" name="监督记录">
      <Records v-if="activeName === '监督记录'" ref="recordsRef" :departId="departId" :isDepartment="isDepartment">
      </Records>
    </el-tab-pane>
    <el-tab-pane label="任职授权记录" name="任职授权记录">
      <Mandate v-if="activeName === '任职授权记录'" ref="manDateRef" :departId="departId" :isDepartment="isDepartment">
      </Mandate>
    </el-tab-pane>
    <el-tab-pane label="人员能力" name="人员能力">
      <personnel-capacity v-if="activeName === '人员能力'" ref="personnelCapacity" :departId="departId"
        :isDepartment="isDepartment"></personnel-capacity>
    </el-tab-pane>
    <el-tab-pane label="沟通记录" name="沟通记录">
      <Communicate v-if="activeName === '沟通记录'" ref="communicateRef" :departId="departId" :isDepartment="isDepartment">
      </Communicate>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import Plan from './components/Plan/index.vue';
import Records from './components/Records/index.vue';
import Communicate from './components/Communicate/index.vue';
import Mandate from './components/Mandate/index.vue';
import PersonnelList from './components/PersonnelList/index.vue';
import PersonnelTraining from './components/PersonnelTraining/index.vue';
import JobResponsibilities from './components/JobResponsibilities/index.vue';
import TrainingRecord from './components/TrainingRecord/index.vue';
import PersonnelCapacity from './components/PersonnelCapacity/index.vue';
import trackRecord from "./components/trackRecord/index.vue";
import rewardPunishmentRecord from "./components/rewardPunishmentRecord/index.vue";
import PersonnelInformation from "./components/PersonnelInformation/index.vue";

export default {
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    },
    departId: {
      type: Number,
      default: 0
    },
    isDepartment: {
      type: Boolean,
      default: false
    },
    isShowAll: {
      type: Boolean,
      default: false
    },
    currentCompaniesList: {
      type: Array,
      default: []
    }
  },
  components: {
    PersonnelInformation,
    rewardPunishmentRecord,
    trackRecord,
    PersonnelCapacity,
    TrainingRecord,
    JobResponsibilities,
    PersonnelTraining,
    PersonnelList,
    Plan,
    Records,
    Communicate,
    Mandate
  },
  watch: {
    departId: {
      handler(newId, oldId) {
        if (newId) {
          switch (this.activeName) {
            case '沟通记录':
              this.$refs.communicateRef.getDepart(newId);
              break;
            case '任职授权记录':
              this.$refs.manDateRef.getDepart(newId);
              break;
            default:
              break;
          }
        }
      }
    }
  },
  data() {
    return {
      flag: true,
      activeName: '人员基本信息',
    }
  },
  created() {
    // this.flag =  isPermission('personTrainingSelect')
    // console.log('this.flag',this.flag);
  },
  methods: {
    updatePerson(row) {
      this.$parent.updatePerson(row);
    },
    refreshTree() {
      this.$parent.refreshTree();
    },
  }
};
</script>
<style scoped>
.el-tabs>>>.el-tabs--border-card {
  box-shadow: unset;
  border: unset;
}

.flex_column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>

 src/views/CNAS/personnel/personnelInfo/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,298 @@
<template>
  <div class="main">

    <div class="main_left">
      <el-row>
        <el-col :span="20">
          <el-input v-model="search" class="div_left_input" clearable placeholder="输入关键字进行搜索" size="small"
            suffix-icon="el-icon-search" @blur="searchFilter" @clear="searchFilter"
            @keyup.enter.native="searchFilter"></el-input>
        </el-col>
        <el-col :span="4" style="text-align: center;line-height: 30px; margin-top: 14px">
          <el-button circle icon="el-icon-plus" size="mini" type="primary" @click="handleAdd"></el-button>
        </el-col>
      </el-row>
      <el-tree ref="tree" :data="list" :default-expanded-keys="[1]" :expand-on-click-node="false"
        :filter-node-method="filterNode" :props="{ children: 'children', label: 'name' }" highlight-current
        node-key="id" style="height:calc(100% - 80px);overflow-y: scroll;scrollbar-width: none;"
        @node-click="handleNodeClick">
        <div slot-scope="{ node, data }" class="custom-tree-node">
          <el-row style="width: 100%;">
            <el-col :span="22" style="text-align: left;">
              <span><i
                  :class="`node_i ${data.children != undefined && data.children.length > 0 ? 'el-icon-folder-opened' : 'el-icon-tickets'}`"></i>
                {{ data.name }}</span>
            </el-col>
            <el-col v-if="node.level > 1 && data.id !== null" :span="2" style="text-align: right;">
              <el-button size="mini" type="text" @click.stop="remove(node, data)">
                <i class="el-icon-delete"></i>
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-tree>
    </div>
    <div style="width: 10px;"></div>
    <div class="main_right">
      <!-- éƒ¨é—¨ -->
      <Department ref="departRef" :clickNodeVal="clickNodeVal" :currentCompaniesList="currentCompaniesList"
        :departId="departId" :isDepartment="isDepartment" :isShowAll="isShowAll" />
    </div>
    <el-dialog :visible.sync="addDia" title="架构新增" width="400px">
      <div class="body">
        <el-row style="line-height: 50px;">
          <el-col :span="6" style="text-align: right;">
            <span class="required-span">* </span>架构名称：
          </el-col>
          <el-col :offset="1" :span="16">
            <el-input v-model="addOb.name" clearable placeholder="请输入架构名称" size="small"
              @keyup.enter.native="addStandardTree"></el-input>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDia = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="addStandardTree">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Department from './Department/index.vue';
import {
  delDepartmentLims,
  addDepartmentLims,
  selectCNSAPersonTree,
} from '@/api/cnas/personnel/personnelInfo.js'

export default {
  components: {
    Department
  },
  data() {
    return {
      isShowAll: true, //  æ˜¯å¦å±•ç¤ºæ ‡ç­¾æ 
      departId: 0,
      list: [],
      addDia: false,
      addOb: {
        name: '',
        fatherId: ''
      },
      search: '',
      clickNodeVal: {},
      addUserForm: {
        name: ''
      },
      currentCompaniesList: [],
      entity: {
        name: '',
        departLimsId: '',
        orderBy: {
          field: 'id',
          order: 'asc'
        }
      },
      overallRecord: '人员列表',
      isDepartment: false,
    };
  },
  mounted() {
    this.geList();
  },
  methods: {
    remove(node, data) {
      this.$confirm("是否删除该层级", "提示", {
        type: "error"
      }).then(() => {
        this.treeLoad = true
        delDepartmentLims({
          id: data.id
        }).then(res => {
          if (res.code == 201) return
          this.$message.success('已删除')
          this.geList();
        })
      }).catch(e => { })
    },
    addStandardTree() {
      if (this.addOb.name == null || this.addOb.factory == '') {
        this.$message.error('构架名称是必填项')
        return
      }
      addDepartmentLims(this.addOb).then(res => {
        if (res.code === 201) {
          return
        }
        this.$message.success('添加成功')
        this.addDia = false
        this.geList();
        this.addOb.name = ''
        this.addOb.fatherId = ''
      })
    },
    handleAdd() {
      if (this.addOb.fatherId) {
        this.addDia = true;
      } else {
        this.$message.error('请选择一个架构层级')
      }
    },
    // äººå‘˜åˆ—表编辑
    updatePerson(row) {
      const node = this.findNodeById(this.list, row.name);
      if (node) {
        this.handleNodeClick(node);
      } else {
        this.$message.warning('未找到该人员');
      }
    },
    // æ–°å»ºäººå‘˜åŽåˆ·æ–°æ ‘
    refreshTree() {
      this.geList()
    },
    findNodeById(treeData, name) {
      for (let i = 0; i < treeData.length; i++) {
        if (treeData[i].name === name) {
          return treeData[i]; // æ‰¾åˆ°èŠ‚点，返回该节点
        }
        if (treeData[i].children && treeData[i].children.length > 0) {
          const foundNode = this.findNodeById(treeData[i].children, name);
          if (foundNode) {
            return foundNode; // åœ¨å­èŠ‚点中找到，返回该节点
          }
        }
      }
      return null; // æ²¡æœ‰æ‰¾åˆ°èŠ‚点，返回null
    },
    searchFilter() {
      this.$refs.tree.filter(this.search);
    },
    // èŽ·å–æ ‘
    geList() {
      selectCNSAPersonTree().then(res => {
        this.list = res.data;
        if (this.list.length > 0) {
          this.isDepartment = true;
          this.departId = this.list[0].id
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleNodeClick(val, node, el) {
      //树的值
      this.clickNodeVal = val;
      // å­˜å‚¨çˆ¶çº§èŠ‚点级数
      if (node) {
        this.getNodeParent(node);
        this.clickNodeVal.level = node.level;
        this.clickNodeVal.parent = node.parent.data;
      }
      this.entity.departLimsId = val.id;
      this.addOb.fatherId = val.id;
      // æ˜¯å¦æ˜¾ç¤ºè®¾å¤‡è¯¦æƒ…
      this.isShowAll = val.id !== null;
      if (val.id) {    // å¦‚果是实验室
        this.departId = val.id;
        this.isDepartment = true;
      }
      if (val.userId) { // æ˜¯äººå‘˜
        this.departId = val.userId;
        this.isDepartment = false
      }
    },
    getNodeParent(val) {
      if (val.parent != null) {
        this.currentCompaniesList[val.level - 1] = val.data.id;
        this.selectTree += ' - ' + val.label;
        this.getNodeParent(val.parent);
      }
    }
  }
};
</script>

<style scoped>
.custom-tree-node {
  width: 80%;
  line-height: 32px;
}

.custom-tree-node .el-icon-delete {
  color: #3A7BFA;
  opacity: 0;
  font-size: 15px;
}

.custom-tree-node:hover .el-icon-delete {
  opacity: 1;
}

.node_i {
  color: orange;
  font-size: 18px;
}

.main {
  display: flex;
  padding-top: 10px;
  box-sizing: border-box;
}

.main_left {
  background: #ffffff;
  text-align: center;
  height: calc(100vh - 6.5em);
  width: 240px;
  border-radius: 15px;
}

.main_right {
  width: calc(100% - 240px);
  border-radius: 15px;
}

.div_left_input {
  margin: 15px 0;
  width: 90%;
}

>>>.el-tabs--border-card>.el-tabs__header .el-tabs__item {
  border: 0 none;
}

>>>.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
  color: black;
}

>>>.el-tabs--border-card>.el-tabs__header {
  border-bottom: none;
}

.search {
  background-color: #fff;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.search_thing {
  width: 350px;
  display: flex;
  align-items: center;
}

.search_label {
  width: 110px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 110px);
}
</style>

 src/views/CNAS/resourceDemand/device/component/acceptanceForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,192 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible"
      title="仪器设备验收单" width="80%" @close="resetForm">
      <el-form ref="modelForm" :model="form" :rules="rules" label-width="180px">
        <el-col :span="12">
          <el-form-item label="到货日期：" prop="arrivalDate">
            <el-date-picker v-model="form.arrivalDate" type="date" placeholder="选择日期" size="small" format="yyyy-MM-dd"
              style="width: 100%" value-format="yyyy-MM-dd" :disabled="operationType === 'view'">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="金额：" prop="goldAmount">
            <el-input v-model="form.goldAmount" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修单位：" prop="maintenanceunit">
            <el-input v-model="form.maintenanceunit" :disabled="operationType === 'view'" clearable
              size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收设备主机和备件情况：" prop="spareParts">
            <el-input v-model="form.spareParts" :disabled="operationType === 'view'" clearable size="small"
              type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="安装、调试情况：" prop="installationDebugging">
            <el-input v-model="form.installationDebugging" :disabled="operationType === 'view'" clearable size="small"
              type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="验收情况：" prop="checkSituation">
            <el-input v-model="form.checkSituation" :disabled="operationType === 'view'" clearable size="small"
              type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接收签字：" prop="receivingSignature">
            <el-input v-model="form.receivingSignature" :disabled="operationType === 'view'" clearable
              size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="厂家代表：" prop="producer">
            <el-input v-model="form.producer" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接收人：" prop="recipient">
            <el-input v-model="form.recipient" :disabled="operationType === 'view'" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接收日期：" prop="recipientDate">
            <el-date-picker v-model="form.recipientDate" type="date" placeholder="选择日期" size="small" format="yyyy-MM-dd"
              style="width: 100%" value-format="yyyy-MM-dd" :disabled="operationType === 'view'">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 æ¶ˆ</el-button>
        <el-button v-if="operationType !== 'view'" :loading="submitFormLoading" type="primary" @click="submitForm">ç¡®
          è®¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDeviceAcceptance,
  addDeviceAcceptance,
  updateDeviceAcceptance,
} from '@/api/cnas/resourceDemand/device.js'
import { selectUserCondition } from "@/api/system/user";
export default {
  name: "acceptance-form",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      dialogVisible: false,
      submitFormLoading: false,
      form: {
        arrivalDate: '',
        goldAmount: '',
        maintenanceunit: '',
        spareParts: '',
        installationDebugging: '',
        checkSituation: '',
        receivingSignature: '',
        producer: '',
        recipient: '',
        recipientDate: '',
        deviceId: '',
      },
      operationType: '',
      rules: {
        arrivalDate: [{ required: true, message: '请选择到货日期', trigger: 'change' }],
      },
      userList: [],
    }
  },
  mounted() {

  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æ‰“开弹框
    openDialog(type, id, deviceId) {
      this.dialogVisible = true
      this.operationType = type
      this.form.acceptanceId = id
      this.form.deviceId = deviceId
      this.getUserList()
      if (this.form.acceptanceId) {
        this.searchInfo()
      }
    },
    // æŸ¥è¯¢è¯¦æƒ…
    searchInfo() {
      getDeviceAcceptance({ acceptanceId: this.form.acceptanceId }).then(res => {
        if (res.code === 200) {
          this.form = { ...res.data }
        }
      }).catch(error => {
        console.error(error)
      })
    },
    // æäº¤è¡¨å•
    submitForm() {
      this.$refs.modelForm.validate((valid) => {
        if (valid) {
          if (this.operationType === 'add') {
            addDeviceAcceptance(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success('新增成功')
                this.resetForm()
              }
              this.submitFormLoading = false
            }).catch(err => {
              this.submitFormLoading = false
            })
          } else {
            updateDeviceAcceptance(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success('修改成功')
                this.resetForm()
              }
              this.submitFormLoading = false
            }).catch(err => {
              this.submitFormLoading = false
            })
          }
        }
      })
    },
    // å…³é—­å¼¹æ¡†
    resetForm() {
      this.dialogVisible = false
      this.$emit('closeDialog')
    },
    getUserList() {
      selectUserCondition().then(res => {
        let data = [];
        res.data.forEach((a) => {
          data.push({
            label: a.name,
            value: a.id,
          });
        });
        this.userList = data
      })
    },
  },
}
</script>

<style scoped>
.form-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
</style>

 src/views/CNAS/resourceDemand/device/component/acquisitionConfig.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,754 @@
<template>
  <div class="data-acquisition-config">
    <div>
      <el-row class="title">
        <el-col :span="6" style="padding-left: 20px;text-align: left;">数采配置</el-col>
        <el-col :span="18" style="text-align: right;">
          <el-button size="small" type="primary" @click="fileConfiguration">文件配置</el-button>
          <el-button size="small" @click="$parent.closeDataVue()">
            <span style="color: #3A7BFA;">返回</span>
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table">
      <el-table :data="tableList.slice(
        (page.current - 1) * page.size,
        page.current * page.size
      )
        " border tooltip-effect="dark" style="width: 74%;" height="100%" :span-method="spanMethod">
        <el-table-column type="index" label="序号" align="center" width="65"></el-table-column>
        <el-table-column prop="deviceName" align="center" min-width="100" label="设备名称"></el-table-column>
        <el-table-column prop="fileType" align="center" label="文件后缀"></el-table-column>
        <el-table-column prop="collectUrl" align="center" min-width="100" show-overflow-tooltip
          label="采集地址"></el-table-column>
        <el-table-column prop="storageUrl" align="center" min-width="100" show-overflow-tooltip
          label="存储地址"></el-table-column>
        <el-table-column prop="ip" align="center" label="IP地址" min-width="100"></el-table-column>
        <el-table-column prop="sample" align="center" label="检验对象" show-overflow-tooltip
          min-width="150"></el-table-column>
        <el-table-column prop="inspectionItemClass" align="center" label="检验项分类" min-width="120"></el-table-column>
        <el-table-column prop="inspectionItem" align="center" label="检验项" min-width="100"></el-table-column>
        <el-table-column prop="inspectionItemSubclass" align="center" label="检验子项" min-width="100"></el-table-column>
        <el-table-column prop="referx" align="center" label="参照X" min-width="100"></el-table-column>
        <el-table-column prop="x" align="center" label="X"></el-table-column>
        <el-table-column prop="refery" align="center" label="参照Y" min-width="100"></el-table-column>
        <el-table-column prop="y" align="center" label="Y"></el-table-column>
        <el-table-column prop="anotherName" align="center" label="别名" min-width="100"></el-table-column>
        <el-table-column prop="matchingName" align="center" label="匹配名称" min-width="100"></el-table-column>
        <el-table-column prop="formula" align="center" label="公式"></el-table-column>
        <el-table-column prop="section" fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="dataConfig(scope.row)">数采配置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page" v-if="tableList.length > 0">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page.current"
        :page-sizes="[10, 20, 30, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
        :total="tableList.length">
      </el-pagination>
    </div>
    <el-dialog title="数采配置" :visible.sync="dialogVisible3" width="920px" :before-close="closeForm">
      <el-form :model="configForm" label-position="top" size="small" ref="configForm" label-width="100px"
        class="demo-ruleForm">
        <el-table :data="domains" style="width: 100%" height="300">
          <el-table-column label="序号" type="index" width="80">
            <template v-slot="scope">
              {{ getIndexWithAlphabet(scope.$index) }}
            </template>
          </el-table-column>
          <el-table-column prop="referx" label="参照X" min-width="140">
            <template v-slot="scope">
              <el-input style="width: 100%" v-model="scope.row.referx"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="x" label="X" min-width="100">
            <template v-slot="scope">
              <el-input style="width: 100%" v-model="scope.row.x"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="refery" label="参照Y" min-width="140">
            <template v-slot="scope">
              <el-input style="width: 100%" v-model="scope.row.refery"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="y" label="Y" min-width="100">
            <template v-slot="scope">
              <el-input style="width: 100%" v-model="scope.row.y"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="anotherName" label="别名" min-width="140">
            <template v-slot="scope">
              <el-input style="width: 100%" v-model="scope.row.anotherName"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="matchingName" label="匹配名称" min-width="140">
            <template v-slot="scope">
              <el-input style="width: 100%" v-model="scope.row.matchingName"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template v-slot="scope">
              <el-button @click.prevent="removeDomain(scope.row)" size="small" type="text">删除</el-button>
              <el-button @click="addDomain" size="small" type="text">新增</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="fomItem2">
          <el-form-item class="fomItemInput1">
            <template v-slot="label">
              å…¬å¼ï¼š
              <el-tooltip v-for="(formula, key) in formulas" class="itemFomItem" effect="dark"
                :content="formula.content" :key="key" placement="top">
                <label>{{ formula.label }}()</label>
              </el-tooltip>
              <el-input type="textarea" autosi:autosize="{ minRows: 2, maxRows: 4}" ze placeholder="请输入内容"
                v-model="configForm.formula" @change="evalResult">
              </el-input>
            </template>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-button @click="closeForm">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="submitForm3" :loading="upLoad3">ç¡® å®š</el-button>
        </el-row>
      </span>
    </el-dialog>
    <el-dialog title="数采配置" :visible.sync="dialogVisible4" width="400px">
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">
          <span style="color:red;margin-right: 4px;">*</span>IP：
        </div>
        <el-input size="small" placeholder="请输入" clearable v-model="configForm.ip"></el-input>
      </div>
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">
          <span style="color:red;margin-right: 4px;">*</span>采集地址：
        </div>
        <el-input size="small" placeholder="请输入" clearable v-model="configForm.collectUrl"></el-input>
      </div>
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">储存地址：</div>
        <el-input size="small" placeholder="请输入" clearable v-model="configForm.storageUrl"></el-input>
      </div>
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">
          <span style="color:red;margin-right: 4px;">*</span>文件后缀：
        </div>
        <el-select v-model="configForm.fileType" size="small" placeholder="请选择" style="width: 100%;">
          <el-option v-for="item in fileTypeOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">委托字段：</div>
        <el-input size="small" placeholder="请输入" clearable v-model="configForm.entrustCode"></el-input>
      </div>
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">样品字段：</div>
        <el-input size="small" placeholder="请输入" clearable v-model="configForm.sampleCode"></el-input>
      </div>
      <div class="search_thing" style="margin-bottom: 14px;">
        <div class="search_label">文件名称：</div>
        <el-input size="small" placeholder="请输入" clearable v-model="configForm.dbFileName"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-button @click="dialogVisible4 = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="submitForm4" :loading="upLoad4">ç¡® å®š</el-button>
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryDataAcquisitionConfiguration,
  saveDataAcquisitionConfiguration,
  deleteDataAcquisitionConfiguration,
} from '@/api/cnas/resourceDemand/device.js'
export default {
  name: "dataAcquisitionConfig",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  props: {
    deviceId: {
      type: Number,
      default: () => []
    }
  },
  mounted() {
    this.init();
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      formulas: [
        {
          label: "MAX",
          content: "求参数最大值，参数个数最少两个，如：MAX(A1,B2)"
        },
        {
          label: "MIN",
          content: "求参数最小值，参数个数最少两个，如：MIN(A1,B2)"
        },
        {
          label: "SUM",
          content: "求和，参数个数最少两个，如：SUM(A1,B2)"
        },
        {
          label: "ABS",
          content: "求绝对值，参数个数最少一个，如：ABS(A1)"
        },
        {
          label: "AVERAGE",
          content: "求平均值，参数个数最少两个个，如：AVERAGE(A1,B2)"
        },
        {
          label: "MEDIAN",
          content: "求中值，参数个数最少两个个，如：MEDIAN(A1,B2)"
        },
      ],
      dialogVisible4: false,
      tableList: [],
      page: {
        current: 1,
        size: 20
      },
      dialogVisible3: false,
      configForm: {
        formula: "",
        collectUrl: "",
        storageUrl: "",
        entrustCode: "",
        sampleCode: "",
        dbFileName: "",
        fiberOpticRibbon: ""
      },
      domains: [
        {
          referx: "",
          refery: "",
          x: "",
          y: "",
          anotherName: "",
          matchingName: ""
        }
      ],
      upLoad3: false,
      upLoad4: false,
      fileTypeOptions: [
        { label: "csv", value: ".csv" },
        { label: "db", value: ".db" },
        { label: "mdb", value: ".mdb" },
        { label: "word", value: ".docx" },
        { label: "excel", value: ".xlsx" },
        { label: "txt", value: ".txt" },
        { label: "png", value: ".png" }
      ],
      spanList: [],
      specialSpanList: [],
      spanConfig: {
        special: {
          main: "inspectionItemSubclass",
          rows: [
            {
              name: "deviceName",
              index: 1
            },
            {
              name: "fileType",
              index: 2
            },
            {
              name: "collectUrl",
              index: 3
            },
            {
              name: "storageUrl",
              index: 4
            },
            {
              name: "ip",
              index: 5
            },
            {
              name: "inspectionItem",
              index: 6
            },
            {
              name: "inspectionItemSubclass",
              index: 7
            },
            {
              name: "formula",
              index: 13
            },
            {
              name: "section",
              index: 14
            }
          ]
        }
      },
      deleteList: []
    };
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    getIndexWithAlphabet(index) {
      const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      const letterIndex = index % 26;
      return alphabet.charAt(letterIndex) + (index + 1);
    },
    rowspan(spanArr, position, spanName) {
      this.tableList.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1);
          position = 0;
        } else {
          if (
            this.tableList[index][spanName] ===
            this.tableList[index - 1][spanName]
          ) {
            spanArr[position] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            position = index;
          }
        }
      });
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // ä¸€èˆ¬çš„合并行
      if (
        this.spanConfig != undefined &&
        this.spanConfig.rows &&
        this.spanConfig.rows.length > 0
      ) {
        let i = null;
        let obj = this.spanConfig.rows.find((item, index) => {
          i = index;
          return item.index == columnIndex;
        });
        if (obj) {
          const _row = this.spanList[i].arr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      }
      // ç‰¹æ®Šçš„合并行
      if (
        this.spanConfig != undefined &&
        this.spanConfig.special &&
        this.spanConfig.special.main &&
        this.spanConfig.special.rows &&
        this.spanConfig.special.rows.length > 0
      ) {
        let i = null;
        let obj = this.spanConfig.special.rows.find((item, index) => {
          i = index;
          return item.index == columnIndex;
        });
        if (obj) {
          const _row = this.specialSpanList[i].arr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      }
    },
    fileConfiguration() {
      this.dialogVisible4 = true;
      if (this.tableList[0]) {
        this.$set(this.configForm, "fileType", this.tableList[0].fileType);
        this.$set(this.configForm, "collectUrl", this.tableList[0].collectUrl);
        this.$set(this.configForm, "storageUrl", this.tableList[0].storageUrl);
        this.$set(this.configForm, "ip", this.tableList[0].ip);
        this.$set(
          this.configForm,
          "entrustCode",
          this.tableList[0].entrustCode
        );
        this.$set(
          this.configForm,
          "sampleCode",
          this.tableList[0].sampleCode
        );
        this.$set(
          this.configForm,
          "dbFileName",
          this.tableList[0].dbFileName
        );
        this.$set(
          this.configForm,
          "fiberOpticRibbon",
          this.tableList[0].fiberOpticRibbon
        )
      }
    },
    init() {
      queryDataAcquisitionConfiguration({ deviceId: this.deviceId, isDevice: false }).then(res => {
        this.tableList = res.data;
        this.tableList.forEach(i => {
          let isIncludes = false
          if (i.formula && i.formula != "") {
            this.formulas.forEach(j => {
              if (i.formula.includes(j.label)) {
                isIncludes = true
              }
            })
          }
          if (!isIncludes && i.formula) {
            i.formula = i.formula.slice(1, -1)
          }
          i.sample = i.sample
            .replace(/"/g, "")
            .replace(/],/g, "；")
            .replace(/\[/g, "")
            .replace(/]/g, "");
        });
        if (this.tableList[0]) {
          this.$set(this.configForm, "fileType", this.tableList[0].fileType);
          this.$set(
            this.configForm,
            "collectUrl",
            this.tableList[0].collectUrl
          );
          this.$set(
            this.configForm,
            "storageUrl",
            this.tableList[0].storageUrl
          );
          this.$set(this.configForm, "ip", this.tableList[0].ip);
          this.$set(
            this.configForm,
            "entrustCode",
            this.tableList[0].entrustCode
          );
          this.$set(
            this.configForm,
            "sampleCode",
            this.tableList[0].sampleCode
          );
          this.$set(
            this.configForm,
            "dbFileName",
            this.tableList[0].dbFileName
          );
          this.$set(
            this.configForm,
            "fiberOpticRibbon",
            this.tableList[0].fiberOpticRibbon
          )
        }
        // ä¸€èˆ¬çš„合并行
        if (
          this.spanConfig != undefined &&
          this.spanConfig.rows &&
          this.spanConfig.rows.length > 0
        ) {
          this.spanList = [];
          this.spanConfig.rows.forEach((item, index) => {
            this.spanList.push({
              arr: [],
              position: 0
            });
            this.rowspan(
              this.spanList[index].arr,
              this.spanList[index].position,
              item.name
            );
          });
        }
        // ç‰¹æ®Šçš„合并行
        if (
          this.spanConfig != undefined &&
          this.spanConfig.special &&
          this.spanConfig.special.main &&
          this.spanConfig.special.rows &&
          this.spanConfig.special.rows.length > 0
        ) {
          this.specialSpanList = [];
          this.spanConfig.special.rows.forEach((item, index) => {
            this.specialSpanList.push({
              arr: [],
              position: 0
            });
            this.rowspan(
              this.specialSpanList[index].arr,
              this.specialSpanList[index].position,
              this.spanConfig.special.main
            );
          });
        }
      });
    },
    submitForm4() {
      const obj = Object.assign({
        deviceId: this.deviceId,
        fileType: this.configForm.fileType,
        collectUrl: this.configForm.collectUrl,
        storageUrl: this.configForm.storageUrl,
        ip: this.configForm.ip,
        isDevice: true,
        entrustCode: this.configForm.entrustCode,
        sampleCode: this.configForm.sampleCode,
        dbFileName: this.configForm.dbFileName,
        fiberOpticRibbon: this.configForm.fiberOpticRibbon
      });
      this.upLoad4 = true;
      saveDataAcquisitionConfiguration({ deviceId: this.deviceId, ...obj }).then(res => {
        if (res.code == 200) {
          // this.tableList = res.data;
          this.dialogVisible4 = false;
          this.init();
          this.$message.success("操作成功");
        }
        this.upLoad4 = false;
      })
        .catch(err => {
          this.upLoad4 = false;
        });
    },
    dataConfig(row) {
      this.configForm = {
        deviceId: row.deviceId,
        inspectionItem: row.inspectionItem.trim(),
        inspectionItemSubclass: row.inspectionItemSubclass,
        structureItemParameterId: row.structureItemParameterId,
        inspectionItemClass: row.inspectionItemClass,
      };
      this.dialogVisible3 = true;
      queryDataAcquisitionConfiguration({
        deviceId: this.deviceId,
        inspectionItem: row.inspectionItem.trim(),
        isDevice: true,
        inspectionItemSubclass: row.inspectionItemSubclass.trim(),
        inspectionItemClass: row.inspectionItemClass.trim(),
        structureItemParameterId: row.structureItemParameterId
      }).then(res => {
        const data = res.data;
        if (data[0]) {
          this.domains.splice(0, 1);
          let formula = data[0].formula
          let isIncludes = false
          if (formula && formula != "") {
            for (let key in this.formulas) {
              if (formula.includes(this.formulas[key].label)) {
                isIncludes = true
              }
            }
          }
          if (!isIncludes && formula) {
            let formulaValue = formula.slice(1, -1)
            this.$set(this.configForm, "formula", formulaValue);
          } else {
            this.$set(this.configForm, "formula", data[0].formula);
          }
          data.forEach(i => {
            this.domains.push({
              referx: i.referx,
              refery: i.refery,
              x: i.x,
              y: i.y,
              anotherName: i.anotherName,
              matchingName: i.matchingName,
              id: i.id
            });
          });
        }
      });
    },
    submitForm3() {
      this.$refs.configForm.validate(valid => {
        // è¡¨å•æ ¡éªŒ
        if (valid) {
          this.domains.forEach(item => {
            const isEmpty = Object.values(item).every(val => val === "");
            if (isEmpty) {
              this.$message.error("请填写参照数据");
            }
          });
          this.domains.forEach((i, index) => {
            let isIncludes = false
            if (this.configForm.formula && this.configForm.formula !== "") {
              for (let formula in this.formulas) {
                if (this.configForm.formula.includes(this.formulas[formula].label)) {
                  isIncludes = true
                }
              }
            }
            if (isIncludes === false && this.configForm.formula !== "" && this.configForm.formula !== undefined) {
              i.formula = "(" + this.configForm.formula + ")";
            } else {
              i.formula = this.configForm.formula;
            }
            i.deviceId = this.deviceId;
            i.inspectionItem = this.configForm.inspectionItem;
            i.inspectionItemSubclass = this.configForm.inspectionItemSubclass;
            i.structureItemParameterId = this.configForm.structureItemParameterId;
            i.inspectionItemClass = this.configForm.inspectionItemClass;
            i.serialNumber = this.getIndexWithAlphabet(index)
          });
          saveDataAcquisitionConfiguration({
            deviceId: this.deviceId,
            dataConfigList: this.domains,
            isDevice: false
          }).then(res => {
            this.dialogVisible3 = false;
            this.domains = [
              {
                referx: "",
                refery: "",
                x: "",
                y: "",
                id: ""
              }
            ];
            if (this.deleteList.length > 0) {
              deleteDataAcquisitionConfiguration({ ids: this.deleteList.join() }).then(res => {
                if (res.code == 200) {
                  this.init();
                }
              });
            }
            this.init();
            this.$message.success("添加成功");
          });
        } else {
          return false;
        }
      });
    },
    removeDomain(item) {
      // åˆ é™¤å…¬å¼formItem
      const index = this.domains.indexOf(item);
      if (index !== -1 && this.domains.length > 1) {
        if (item.id) {
          this.deleteList.push(item.id);
          this.domains.splice(index, 1);
        } else {
          this.domains.splice(index, 1);
        }
      } else {
        this.$message.error("不允许删除最后一条数据！");
      }
    },
    addDomain() {
      // æ·»åŠ å…¬å¼formItem
      this.domains.push({
        referx: "",
        refery: "",
        x: "",
        y: "",
        id: ""
      });
    },
    evalResult(val) {
      this.configForm.formula = val;
      // æ ¹æ®å…¬å¼è®¡ç®—出结果
    },
    sizeChange(val) {
      this.page.size = val;
    },
    currentChange(val) {
      this.page.current = val;
    },
    closeForm() {
      this.deleteList = [];
      this.domains = [
        {
          referx: "",
          refery: "",
          x: "",
          y: "",
          id: ""
        }
      ];
      this.dialogVisible3 = false;
      this.$refs.configForm.resetFields();
    }
  }
};
</script>

<style scoped>
.itemFomItem {
  margin-left: 20px;
}

.search_thing {
  width: 350px;
  display: flex;
  align-items: center;
}

.search_label {
  width: 110px;

  font-size: 14px;
  text-align: right;
}

.data-acquisition-config {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;

  .title {
    height: 60px;
    line-height: 60px;
  }
}

.page {
  width: 100%;
  height: 30px;
  text-align: right;
  margin-top: 10px;
}

.table {
  margin-top: 10px;
  background-color: #fff;
  width: calc(100vw - 1em);
  height: calc(100vh - 18em);
}

.fomItem1 {
  display: flex;
  height: 74px;
}

.fomItem2 {
  display: flex;
  width: 100%;
}

.fomItemInput {
  width: 180px;
  margin-right: 6px;
}

.fomItemInput1 {
  width: 100%;
  margin-right: 6px;
}

>>>.el-form-item__label {
  padding-bottom: 0 !important;
}
</style>

 src/views/CNAS/resourceDemand/device/component/borrow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,651 @@
<!-- è®¾å¤‡å€Ÿç”¨ -->
<template>
  <div>
    <div class="search">
      <div class="search_thing">
        <div class="search_label">流程编号：</div>
        <div><el-input size="small" placeholder="请输入" clearable v-model="queryParams.processNumber"
            @keyup.enter.native="refreshTable()"></el-input></div>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" @click="refresh()">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
      </div>
      <div class="btns">
        <el-button size="small" type="primary" @click="add">新增</el-button>
                <el-button size="small" type="primary" @click="handleDown" :loading="outLoading">导出</el-button>
      </div>
    </div>
    <div class="tables" style="margin-top: 10px;">
      <lims-table :tableData="tableData" :column="column" :tableLoading="tableLoading" :height="'calc(100vh - 290px)'"
        :page="page" @pagination="pagination"></lims-table>
      <!-- <ValueTable ref="ValueTable" :url="$api.deviceBorrow.deviceBorrowPage"
        :delUrl="$api.deviceBorrow.deleteDeviceBorrow" :componentData="componentData" :key="upIndex" /> -->
    </div>
    <el-dialog title="仪器设备领(借)用登记" top="5vh" :visible.sync="dialogVisible" width="60%">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step style="cursor:pointer" v-for="(v, i) in steps" :title="v" :key="i"
          @click.native="choiceStep(i)"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <div v-show="currentStepClick === 0">
          <el-card style="margin-top: 1em; height: 51vh; overflow-y: scroll;">
            <!-- æ–°å¢žè®¾å¤‡äº‹è®°å½•å¡ç‰‡ -->
            <el-row>
              <el-col :span="12">
                <el-form-item label="编号：" prop="processNumber">
                  <el-input v-model="form.processNumber" size="small" :disabled="currentStep > 0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备名称：">
                  <el-input v-model="form.deviceName" size="small" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="管理编号：" prop="unifyNumber">
                  <el-input v-model="form.unifyNumber" size="small" :disabled="currentStep > 0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="借用人：" prop="recipientUser">
                  <el-select v-model="form.recipientUser" filterable placeholder="请选择" clearable size="small"
                    style="width: 100%;" :disabled="currentStep > 0">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="借用人联系方式：" prop="borrowerContactInformation" label-width="150px">
                  <el-input v-model="form.borrowerContactInformation" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="借用日期：" prop="recipientTime">
                  <el-date-picker v-model="form.recipientTime" type="date" placeholder="选择日期" size="small"
                    format="yyyy-MM-dd" style="width: 100%" value-format="yyyy-MM-dd" :disabled="currentStep > 0">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="借用时状态：">
                  <el-radio-group v-model="form.recipientState" :disabled="currentStep !== 0">
                    <el-radio :label="0">合格</el-radio>
                    <el-radio :label="1">ç»´ä¿®</el-radio>
                    <el-radio :label="2">停用</el-radio>
                    <el-radio :label="3">报废</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="相关附件：" prop="fileName">
                  <el-input v-model="form.fileName" disabled size="small"
                    :style="`width: ${currentStep == 0 ? '88%' : '100%'};`">
                    <el-button slot="append" v-if="currentStep === 0" icon="el-icon-delete-solid"
                      @click="deleteFile"></el-button>
                  </el-input>
                  <el-upload ref="upload" style="float: right;" :action="action" :show-file-list="false"
                    :on-success="onSuccess" :disabled="currentStep !== 0" :headers="uploadHeader">
                    <el-button style="position: relative;top: -4px" class="uploadFile" slot="trigger" size="small"
                      type="primary" v-if="currentStep === 0">附件上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下环节责任人：" prop="nextUser">
                  <el-select v-model="form.nextUser" filterable placeholder="请选择" clearable size="small"
                    style="width: 100%;" :disabled="currentStep !== 0">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.submitOperationUser }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.submitOperationTime }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 1">
          <el-card style="margin-top: 1em; height: 51vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="12">
                <el-form-item label="归还人：" prop="rebackUser"
                  :rules="[{ required: currentStep === 1, message: '请输入归还人', trigger: 'change' }]">
                  <!-- <el-input v-model="form.rebackUser" size="small" :disabled="currentStep !== 1"></el-input> -->
                  <el-select v-model="form.rebackUser" filterable placeholder="请选择" clearable size="small"
                    style="width: 50%;" :disabled="currentStep !== 1">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="归还日期：" prop="rebackTime"
                  :rules="[{ required: currentStep === 1, message: '请选择归还日期', trigger: 'change' }]">
                  <el-date-picker v-model="form.rebackTime" :disabled="currentStep !== 1" type="date" placeholder="选择日期"
                    size="small" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接收状况：">
                  <el-radio-group v-model="form.receiveState" :disabled="currentStep !== 1">
                    <el-radio :label="0">合格</el-radio>
                    <el-radio :label="1">ç»´ä¿®</el-radio>
                    <el-radio :label="2">停用</el-radio>
                    <el-radio :label="3">报废</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备负责人：" prop="deviceUser"
                  :rules="[{ required: currentStep === 1, message: '请选择设备负责人', trigger: 'change' }]">
                  <!-- <el-input v-model="form.deviceUser" size="small" :disabled="currentStep !== 1"></el-input> -->
                  <el-select v-model="form.deviceUser" filterable placeholder="请选择" clearable size="small"
                    style="width: 50%;" :disabled="currentStep !== 1">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注：">
                  <el-input type="textarea" v-model="form.note" :disabled="currentStep !== 1" size="small"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.receiveOperationUser }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.receiveOperationTime }}
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitForm('3reject')" v-if="currentStep !== 0 && currentStep !== 2">驳回</el-button>
        <el-button @click="submitForm('2save')" v-if="currentStep === 0">保存</el-button>
        <el-button type="primary" v-if="currentStep !== 2" @click="submitForm('1submit')">{{ currentStep === 0 ? '提交' :
          '通过'
          }}</el-button>
      </span>
    </el-dialog>
    <el-dialog title="流程跟踪" top="5vh" :visible.sync="dialogVisible0" width="60%">
      <el-table :data="deviceLogs" style="width: 100%">
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column prop="operator" label="操作人" width="180">
        </el-table-column>
        <el-table-column prop="operationTime" label="操作日期" width="180">
        </el-table-column>
        <el-table-column prop="operationType" label="提交类型">
        </el-table-column>
        <el-table-column prop="operationContent" label="操作内容">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import limsTable from "@/components/Table/lims-table.vue";
import { dateFormat } from '@/utils/date'
import {
  saveDeviceBorrow,
  deleteCNASFile,
  getDeviceBorrow,
  deviceBorrowExport,
  deleteDeviceBorrow,
  deviceBorrowPage,
} from '@/api/cnas/resourceDemand/device.js'
import { selectUserCondition } from "@/api/system/user";
import { mapGetters } from "vuex";
export default {
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    limsTable
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisible0: false,
      currentStep: 0, // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
      currentStepClick: 0, // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
      steps: ['借出', '借用'],
      responsibleOptions: [], // ä¸‹çŽ¯èŠ‚负责人list
      form: {
        processNumber: null,
        deviceName: null,
        unifyNumber: null,
        recipientUser: null,
        recipientTime: null,
        nextUser: null,
        rebackUser: null,
        rebackTime: null,
        receiveState: null,
        deviceUser: null,
        fileName: null,
      },
      rules: {
        processNumber: [{ required: true, message: '请输入编号', trigger: 'blur' }],
        deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
        unifyNumber: [{ required: true, message: '请输入管理编号', trigger: 'blur' }],
        recipientUser: [{ required: true, message: '请输入借用人', trigger: 'blur' }],
        borrowerContactInformation: [{ required: true, message: '请输入借用人联系方式', trigger: 'blur' }],
        recipientTime: [{ required: true, message: '请选择借用日期', trigger: 'change' }],
        nextUser: [{ required: true, message: '请选择下环节负责人', trigger: 'change' }],
      },
      deviceLogs: [],
      outLoading: false,
      recipientStateList: [{
        value: 0,
        type: 'success',
        label: '合格'
      }, {
        value: 1,
        type: 'warning',
        label: 'ç»´ä¿®'
      }, {
        value: 2,
        type: 'info',
        label: '停用'
      }, {
        value: 3,
        type: 'danger',
        label: '报废'
      }],
      queryParams: {},
      tableData: [],
      column: [
        { label: "流程编号", prop: "processNumber" },
        { label: "设备名称", prop: "deviceName" },
        {
          label: "管理编号",
          prop: "unifyNumber"
        },
        { label: "借用人", prop: "recipientUser" },
        { label: "借用人联系方式", prop: "borrowerContactInformation", width: '140px' },
        { label: "借用日期", prop: "recipientTime" },
        {
          label: "借用时状态", prop: "recipientState", dataType: "tag",
          formatData: (params) => {
            return this.recipientStateList.find((m) => m.value == params).label;
          },
          formatType: (params) => {
            return this.recipientStateList.find((m) => m.value == params).type;
          },
        },
        { label: "借出人", prop: "submitUser" },
        { label: "借出日期", prop: "createTime" },
        {
          label: "当前状态", prop: "nowState"
        },
        { label: "当前责任人", prop: "nowUser" },
        { label: "附件", prop: "fileName" },
        {
          dataType: "action",
          fixed: "right",
          label: "操作",
          operation: [
            {
              name: "查看",
              type: "text",
              clickFun: (row) => {
                this.lookDetail(row);
              },
            },
            {
              name: "删除",
              type: "text",
              clickFun: (row) => {
                this.handleDelete(row);
              },
            },
            {
              name: "流程跟踪",
              type: "text",
              clickFun: (row) => {
                this.handleLookList(row);
              },
            },
          ],
        },
      ],
      page: {
        total: 0,
        size: 10,
        current: 0,
      },
      tableLoading: false,
    }
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        thisqueryParams.deviceId = this.clickNodeVal.value
        this.refreshTable()
      }
    },
    dialogVisible(newVal) {
      if (!newVal) {
        this.form = {}
        this.currentStep = 0 // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
        this.currentStepClick = 0 // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
        this.$refs['form'].clearValidate()
      }
    }
  },
  computed: {
    ...mapGetters(["nickName"]),
    action() {
      return this.javaApi + '/personBasicInfo/saveCNASFile'
    }
  },
  mounted() {
    this.queryParams.deviceId = this.clickNodeVal.value
    this.getUserList()
    this.refreshTable()
  },
  methods: {
    getList() {
      this.tableLoading = true;
      let param = { ...this.queryParams, ...this.page };
      delete param.total;
      deviceBorrowPage({ ...param })
        .then((res) => {
          this.tableLoading = false;
          if (res.code === 200) {
            this.tableData = res.data.records;
            this.page.total = res.data.total;
          }
        })
        .catch((err) => {
          this.tableLoading = false;
        });
    },
    pagination({ page, limit }) {
      this.page.current = page;
      this.page.size = limit;
      this.getList();
    },
    refresh() {
      this.queryParams = {};
      this.page.current = 1;
      this.getList();
    },
    refreshTable() {
      this.page.current = 1;
      this.getList();
    },
    choiceStep(index) {
      this.currentStepClick = index
    },
    //提交表单
    async submitForm(saveState) {
      this.$refs.form.validate((valid) => {
        if (valid === true || saveState !== '1submit') {
          // ç»™å½“前环节设置创建人与时间
          let user = JSON.parse(localStorage.getItem('user'))
          const dateTime = dateFormat(new Date())
          // èŽ·å–当前环节操作人与日期
          switch (this.currentStep) {
            case 0:
              this.form.submitOperationUser = this.nickName
              this.form.submitOperationTime = dateTime
              break
            case 1:
              this.form.receiveOperationUser = this.nickName
              this.form.receiveOperationTime = dateTime
              break
            default:
              break
          }
          // èŽ·å–当前环节负责人
          switch (saveState === '3reject' ? this.currentStep - 1 : this.currentStep) {
            case 0:
              this.form.nowUser = this.form.nextUser
              break
            default:
              break
          }
          let currentStepAction;
          // è®¾ç½®è¯¥æ“ä½œåˆ¤æ–­æ˜¯å¦ä¸ºæäº¤ï¼Œä¿å­˜ï¼Œé©³å›žï¼Œé€šè¿‡
          switch (saveState) {
            // æäº¤ï¼Œé€šè¿‡
            case '1submit':
              currentStepAction = this.currentStep + 1
              break
            // ä¿å­˜
            case '2save':
              currentStepAction = this.currentStep
              break
            // é©³å›ž
            case '3reject':
              currentStepAction = this.currentStep - 1
              break
            default:
              break
          }
          // èŽ·å–当前状态
          this.form.nowState = currentStepAction === 2 ? '关闭' : this.steps[currentStepAction]
          this.form.deviceId = this.clickNodeVal.value
          delete this.form.deviceLogs
          saveDeviceBorrow(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success('提交成功')
              this.dialogVisible = false
              this.refreshTable()
            }
          })
        } else {
          let step = this.steps[this.currentStep]
          this.$message.warning(step + '  æµç¨‹ä¸­æœ‰å¿…填项未填！');
        }
      });
    },
    deleteFile() {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCNASFile({ fileName: this.form.fileName }).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    onSuccess(response, file, fileList) {
      if (response.code == 200) {
        // åœ¨ä¿å­˜èµ‹å€¼æ–°æ–‡ä»¶
        this.form.fileName = file.name
        this.form.url = response.data
      } else {
        this.$message.error(response.message)
      }
    },
    // èŽ·å–负责人信息接口
    getUserList() {
      selectUserCondition().then(res => {
        if (res.code == 200) {
          this.responsibleOptions = res.data
        }
      })
    },
    // æŸ¥çœ‹è¯¦æƒ…
    lookDetail(row) {
      getDeviceBorrow({ id: row.id }).then(res => {
        if (res.code == 200) {
          this.form = res.data
          this.form.deviceName = this.clickNodeVal.label
          this.form.deviceId = this.clickNodeVal.value
          this.deviceLogs = res.data.deviceLogs
          let i = this.steps.findIndex(item => item == row.nowState)
          if (i == -1) {
            this.currentStep = 2
            this.currentStepClick = 0
          } else {
            this.currentStep = i
            this.currentStepClick = i
          }
          console.log(this.currentStepClick)
          this.dialogVisible = true
        }
      })
    },
    // æ–°å¢ž
    add() {
      this.dialogVisible = true
      this.form = {
        processNumber: null,
        deviceName: null,
        unifyNumber: null,
        recipientUser: null,
        recipientTime: null,
        nextUser: null,
        rebackUser: null,
        rebackTime: null,
        receiveState: null,
        deviceUser: null,
        fileName: null,
      }
      this.form.deviceName = this.clickNodeVal.label
      this.form.deviceId = this.clickNodeVal.value
    },
    //导出
    handleDown() {
      this.outLoading = true
      deviceBorrowExport({ deviceId: this.clickNodeVal.value }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], {
          type: 'application/force-download'
        })
        const filename = decodeURI(this.clickNodeVal.label + '设备借出统计' + '.xlsx')
        this.$download.saveAs(blob, filename)
      })
    },
    handleLookList(row) {
      getDeviceBorrow({ id: row.id }).then(res => {
        if (res.code == 200) {
          this.deviceLogs = res.data.deviceLogs
          this.dialogVisible0 = true
        }
      })
    },
    handleDelete(row) {
      this.$confirm("是否删除该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteDeviceBorrow({ id: row.id }).then((res) => {
            this.$message.success("删除成功");
            this.refresh();
          });
        })
        .catch(() => { });
    },
  },
}
</script>

<style scoped>
h4 {
  font-weight: 400;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

h4 .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.tables {
  width: 100%;
  height: calc(100vh - 15em);
}

.search {
  background-color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 10px;
}

.search_thing {
  display: flex;
  align-items: center;
  height: 40px;
}

.search_label {
  width: 70px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 120px);
}

.btns {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(0, -50%);
}

.btns_thing {
  position: absolute;
  right: 230px;
  top: 50%;
  transform: translate(0, -50%);
}

.form .search_label {
  width: 120px;
}

.el-radio {
  margin-right: 10px;
}

.el-radio-group {
  width: 100%;
  display: flex;
  margin-top: 12px;
}
</style>

 src/views/CNAS/resourceDemand/device/component/calibration.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,805 @@
<!-- è®¾å¤‡æ ¡å‡† -->
<template>
  <div>
    <div class="btnS">
      <el-button size="small" type="primary" @click="calibrationMaintenance()">校准项目维护</el-button>
      <el-button size="small" type="primary" @click="add('add')">添加校准记录</el-button>
      <el-button size="small" type="primary" @click="handleDown">导出Excel</el-button>
    </div>
    <div class="tables" style="margin-top: 16px;">
      <el-table :data="tableData" height="calc(100vh - 20em)">
        <el-table-column label="序号" type="index" width="120">
          <template v-slot="scope">
            <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="记录编号" min-width="150" prop="processNumber"></el-table-column>
        <el-table-column label="校准机构" min-width="150" prop="unitOfMeasure"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="校准结论" min-width="150" prop="status">
          <template v-slot="scope">
            {{ scope.row.status === '0yes' ? '合格' : scope.row.status === '1no' ? '不合格' : '其他' }}
          </template>
        </el-table-column>
        <el-table-column label="校准证书编号" min-width="150" prop="certificateSerialNumber"></el-table-column>
        <el-table-column label="说明" min-width="150" prop="remark" show-overflow-tooltip></el-table-column>
        <el-table-column label="校准日期" min-width="150" prop="calibrationDate"></el-table-column>
        <el-table-column label="下次校准日期" min-width="150" prop="nextCalibrationDate"></el-table-column>
        <el-table-column label="确认日期" min-width="150" prop="confirmDate"></el-table-column>
        <el-table-column label="登记人" min-width="150" prop="createUser"></el-table-column>
        <el-table-column label="登记日期" min-width="150" prop="createTime"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="150">
          <template #default="{ row }">
            <el-button size="small" type="text" @click="handleAttachmentClick(row)">附件</el-button>
            <!-- <el-button size="small" type="text" @click="handleViewClick('view', row)">查看</el-button> -->
            <el-button size="small" type="text" @click="handleViewClick('add', row)">编辑</el-button>
            <el-button size="small" type="text" @click="handleDeleteClick(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
                     :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" style="margin-right: 5%;"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- æ–‡ä»¶é¢„览 -->
    <el-dialog
        :visible.sync="lookDialogVisible"
        fullscreen
        title="查看附件" width="800px">
      <filePreview v-if="lookDialogVisible" :currentFile="{}"
                   :fileUrl="previewFile" style="height: 90vh;overflow-y: auto;top: 0"/>
    </el-dialog>
    <!-- é™„件弹框 -->
    <el-dialog
        title="附件"
        :visible.sync="dialogVisibleFile"
        width="60%"
    >
      <el-upload
          ref="upload"
          style="margin-top: 5px;margin-bottom: 10px;"
          :action="action"
          :data="uploadData"
          :headers="uploadHeader"
          :before-upload="beforeUpload"
          :on-success="onSuccess"
      >
        <el-button type="primary" size="small" :loading="upLoading">上传附件</el-button>
      </el-upload>
      <el-table
          :data="fileData"
          border
          height="400px"
          style="width: 100%">
        <el-table-column label="序号" type="index" width="240px">
        </el-table-column>
        <el-table-column label="文件名称" prop="fileName">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="preview(scope.row)">预览</el-button>
            <el-button type="text" @click="download(scope.row)">下载</el-button>
            <el-button type="text" @click="delFile(scope.row)" style="color: red;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleFile = false">关 é—­</el-button>
      </span>
    </el-dialog>



    <!-- æ ¡å‡†é¡¹ç›®ç»´æŠ¤ -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible0" title="校准项目维护"
               top="5vh" width="70%">
      <h4>
        <span style="display: flex;align-items: center;"><span class="line"></span><span>设备校准参数维护</span></span>
        <el-button :loading="addCalibrateLoading" size="small" type="primary" @click="addCalibrate">æ·» åŠ </el-button>
      </h4>
      <div>
        <el-form ref="form0" :model="form0" :rules="form0Rules"
                 label-position="right" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="计量参数:" prop="measurementParameter">
                <el-input v-model="form0.measurementParameter" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="量程范围:" prop="rangeOfMeasurement">
                <el-input v-model="form0.rangeOfMeasurement" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最大允许误差:" prop="maxPermissibleError">
                <el-input v-model="form0.maxPermissibleError" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="判定标准:" prop="judgmentCriteria">
                <el-input v-model="form0.judgmentCriteria" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <h4>
        <span style="display: flex;align-items: center;"><span class="line"></span><span>设备校准参数</span></span>
      </h4>
      <!-- è®¾å¤‡æ ¡å‡†å‚数表格 -->
      <el-table ref="calibrateTable" v-loading="calibrateParamsLoading" :data="calibrateParams"
                max-height="450"
                stripe style="width: 100%">
        <el-table-column label="编号" type="index" width="80"></el-table-column>
        <el-table-column label="计量参数" prop="measurementParameter"></el-table-column>
        <el-table-column label="量程范围" prop="rangeOfMeasurement"></el-table-column>
        <el-table-column label="最大允许误差" prop="maxPermissibleError"></el-table-column>
        <el-table-column label="判定标准" prop="judgmentCriteria"></el-table-column>
        <el-table-column label="创建人" prop="createdBy"></el-table-column>
        <el-table-column label="创建时间" prop="creationTime"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- æ·»åŠ æ ¡å‡†è®°å½• -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible1" title="校准记录"
               top="5vh"
               width="80%" @close="resetCalibrationRecord">
      <div style="height: 70vh;overflow-y: auto;overflow-x: hidden;">
        <h4>
          <div style="display: flex;align-items: center;">
            <span class="line"></span>
            <span>添加设备校准记录</span>
          </div>
        </h4>
        <el-form ref="calibrationRecord" :model="calibrationRecord"
                 :rules="formRules" label-position="right" label-width="120px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="校准服务机构:" prop="unitOfMeasure">
                <el-input v-model="calibrationRecord.unitOfMeasure" :disabled="operationType === 'view'"
                          size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="校准日期:" prop="calibrationDate">
                <el-date-picker v-model="calibrationRecord.calibrationDate" :disabled="operationType === 'view'"
                                format="yyyy-MM-dd"
                                placeholder="选择日期"
                                size="small"
                                style="width: 90%" type="date"
                                value-format="yyyy-MM-dd" @change="getNextCalibrationDate">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="下次校准日期:" label-width="140px">
                <el-date-picker v-model="calibrationRecord.nextCalibrationDate" disabled
                                format="yyyy-MM-dd" placeholder="选择日期" size="small" style="width: 90%"
                                type="date" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计算器具:" prop="calculatingApparatus">
                <el-input v-model="calibrationRecord.calculatingApparatus" :disabled="operationType === 'view'"
                          size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计算标准量程:" prop="standardRange">
                <el-input v-model="calibrationRecord.standardRange" :disabled="operationType === 'view'" size="small"
                          style="width: 90%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="计量标准不确定度:" label-width="140px" prop="calibrationStandardUncertainty">
                <el-input v-model="calibrationRecord.calibrationStandardUncertainty" :disabled="operationType === 'view'" size="small"
                          style="width: 90%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所依据文件:" prop="byDocument">
                <el-input v-model="calibrationRecord.byDocument" :disabled="operationType === 'view'"
                          size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证书编号:" prop="certificateSerialNumber">
                <el-input v-model="calibrationRecord.certificateSerialNumber" :disabled="operationType === 'view'" size="small"
                          style="width: 90%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="状态:" label-width="140px" prop="status" required>
                <el-radio-group v-model="calibrationRecord.status" :disabled="operationType === 'view'">
                  <el-radio label="0yes">合格</el-radio>
                  <el-radio label="1no">不合格</el-radio>
                  <el-radio label="2other">其他</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="确认日期:">
                <el-date-picker v-model="calibrationRecord.confirmDate" :disabled="operationType === 'view'"
                                format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" size="small" style="width: 100%"
                                type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注:">
                <el-input v-model="calibrationRecord.remark" :disabled="operationType === 'view'" :rows="3" size="small" style="width: 96%"
                          type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <h4>
          <span style="display: flex;align-items: center;">
            <span class="line"></span><span>校准条目确认结果</span>
          </span>
        </h4>
        <el-table ref="calibrateTable" :data="calibrateParams" border>
          <el-table-column label="编号" type="index" width="60"></el-table-column>
          <el-table-column label="计量参数" prop="measurementParameter"></el-table-column>
          <el-table-column label="量程范围" prop="rangeOfMeasurement"></el-table-column>
          <el-table-column label="最大允许误差" prop="maxPermissibleError"></el-table-column>
          <el-table-column label="判定标准" prop="judgmentCriteria"></el-table-column>
          <el-table-column label="是否校准" prop="isCalibration">
            <template slot="header" slot-scope="scope">
              <span class="required-span">* </span>是否校准
            </template>
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.isCalibration" :disabled="operationType === 'view'">
                <el-radio label="0yes">是</el-radio>
                <el-radio label="1no">否</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="判定结果" min-width="140" prop="result">
            <template slot="header" slot-scope="scope">
              <span class="required-span">* </span>判定结果
            </template>
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.result" :disabled="operationType === 'view'" @input="checkRadio()">
                <el-radio label="0yes">合格</el-radio>
                <el-radio label="1no">不合格</el-radio>
                <el-radio label="2other">其他</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="单项结果说明" prop="singleResultStatement">
            <template slot-scope="scope">
              <el-input v-model="scope.row.singleResultStatement" :disabled="operationType === 'view'"
                        size="small"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="operationType === 'add'" @click="dialogVisible1 = false">取 æ¶ˆ</el-button>
        <el-button v-if="operationType === 'add'" :loading="addRecordLoading" type="primary"
                   @click="addRecord">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  deviceMetricRecordPage,
  showDeviceMetricsCopy,
  deleteDeviceMetricRecord,
  deviceMetricRecordExport,
  deleteCNASFile,
  selectDeviceMetric,
  deleteDeviceMetrics,
  addOrUpdateDeviceMetricRecord,
  saveOrUpdateDeviceMetric, downLoadDeviceCalibrationFile, getDeviceCalibrationFile, delDeviceCalibrationFile
} from '@/api/cnas/resourceDemand/device.js'
import { mapGetters } from "vuex";
import filePreview from "@/components/Preview/filePreview.vue";
export default {
  components: {filePreview},
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      value: "",
      calibrateParams: [],
      calibrateParamsLoading: false,
      addCalibrateLoading: false,
      previewFile: '',
      lookDialogVisible: false,
      recordId: null,
      uploadData: {},
      fileData: [],
      dialogVisibleFile: false,
      calibrationRecord: {
        unitOfMeasure: '', // è®¡é‡å•ä½
        calibrationDate: null, // æ ¡å‡†æ—¥æœŸ
        nextCalibrationDate: null, // ä¸‹æ¬¡æ ¡å‡†æ—¥æœŸ
        calculatingApparatus: '', // è®¡ç®—器具
        confirmDate: null, // ç¡®è®¤æ—¥æœŸ
        standardRange: '', // è®¡ç®—标准量程
        calibrationStandardUncertainty: '', // è®¡é‡æ ‡å‡†ä¸ç¡®å®šåº¦
        byDocument: '', // ä¾æ®æ–‡ä»¶
        certificateSerialNumber: '', // è¯ä¹¦ç¼–号
        status: '', // çŠ¶æ€
        remark: '', // å¤‡æ³¨
        systemFileName: '', //
        fileName: '', //
      },
      formRules: {
        unitOfMeasure: [{ required: true, message: '请输入校准服务机构', trigger: 'blur' }],
        calibrationDate: [{ required: true, message: '请选择校准日期', trigger: 'change' }],
        calculatingApparatus: [{ required: true, message: '请输入计算器具', trigger: 'blur' }],
        standardRange: [{ required: true, message: '请输入计算标准量程', trigger: 'blur' }],
        calibrationStandardUncertainty: [{ required: true, message: '请输入计量标准不确定度', trigger: 'blur' }],
        byDocument: [{ required: true, message: '请输入所依据文件', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
      },
      tableData: [],
      dialogVisible0: false,
      dialogVisible1: false,
      form0: {
        measurementParameter: '', // è®¡é‡å‚æ•°
        rangeOfMeasurement: '',
        maxPermissibleError: '',
        judgmentCriteria: '',
        createdBy: '',
        action: '',
        deviceId: null
      },
      form0Rules: {
        measurementParameter: [
          { required: true, message: '请输入计量参数', trigger: 'blur' }
        ],
        rangeOfMeasurement: [
          { required: true, message: '请输入量程范围', trigger: 'blur' }
        ],
        maxPermissibleError: [
          { required: true, message: '请输入最大允许误差', trigger: 'blur' }
        ],
        judgmentCriteria: [
          { required: true, message: '请输入判定标准', trigger: 'blur' }
        ],
      },
      addRecordLoading: false,
      upLoading: false,
      operationType: '',
      search: {
        size: 20,
        current: 1,
        total: 0
      },
    }
  },
  // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
  computed: {
    ...mapGetters(["nickName"]),
    action() {
      return this.javaApi + '/personBasicInfo/saveDeviceCalibrationFile'
    }
  },
  mounted() {
    //获取操作记录信息
    this.getTableList(this.clickNodeVal.value) // èŽ·å–设备校准列表数据
  },
  methods: {
    preview(row) {
      let list = row.fileUrl.split('.')
      let suffix = list[list.length - 1]
      if(suffix.toLowerCase().includes("pdf")) {
        let link = document.createElement('a')
        let url = this.javaApi + 'word' + row.fileUrl
        console.log(url);
        link.href = url
        link.target= '_blank'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }else{
        let url = ''
        if(suffix.toLowerCase().includes('docx')) {
          url = this.javaApi + 'word' + row.fileUrl
        }else if(suffix.toLowerCase().includes('xls')) {
          url = this.javaApi + 'excel' + row.fileUrl
        }else{
          url = this.javaApi + 'img' + row.fileUrl
        }
        this.previewFile = url
        this.$nextTick(() => {
          this.lookDialogVisible = true
        })
      }
    },
    download(row) {
      downLoadDeviceCalibrationFile({id: row.id}).then(res => {
        const blob = new Blob([res],{type: row.mime})
        this.$download.saveAs(blob, row.fileName)
      })
    },
    delFile(row) {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDeviceCalibrationFile({id: row.id}).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getFileData(this.recordId);
        })
      })
    },
    handleAttachmentClick(row) {
      // æ¨¡æ‹Ÿä¸‹è½½é™„件
      // const imageUrl = this.javaApi + '/img/' + row.systemFileName; // å›¾ç‰‡ URL
      // file.downloadIamge(imageUrl,row.fileName)
      this.recordId = row.id
      this.dialogVisibleFile = true
      this.getFileData(row.id)
    },
    getFileData(id) {
      getDeviceCalibrationFile({id: id}).then(res =>{
        this.fileData = res.data
      })
    },
    //状态判定
    checkRadio() {
      let resultList = this.calibrateParams.map(ele => ele.result)
      if (resultList && resultList.filter(ele => ele == '1no').length > 0) {
        this.calibrationRecord.status = '1no'
      } else if (resultList && resultList.filter(ele => ele == '2other').length == resultList.length) {
        this.calibrationRecord.status = '2other'
      } else if (resultList && resultList.filter(ele => ele == '0yes').length == resultList.length) {
        this.calibrationRecord.status = '0yes'
      }
    },
    getNextCalibrationDate(val) {
      let oneYearLaterDate = new Date(val)
      oneYearLaterDate.setFullYear(oneYearLaterDate.getFullYear() + 1);
      oneYearLaterDate.setDate(oneYearLaterDate.getDate() - 1);
      // let obj = oneYearLaterDate.toISOString().split('T')[0];
      this.calibrationRecord.nextCalibrationDate = oneYearLaterDate
    },
    handleSizeChange(val) {
      this.search.size = val
      this.getTableList(this.clickNodeVal.value);
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.getTableList(this.clickNodeVal.value);
    },
    getTableList(deviceId) {
      deviceMetricRecordPage({ deviceId, type: 'calibrate', ...this.search }).then(res => {
        this.tableData = res.data.records
        this.search.total = res.data.total
      })
    },
    // æ·»åŠ æ ¸æŸ¥è®°å½•
    add(type) {
      this.operationType = type
      this.dialogVisible1 = true
      this.getXmsg()
    },
    // æŸ¥çœ‹ç¼–辑详情
    handleViewClick(type, row) {
      showDeviceMetricsCopy({ id: row.id, type: 'calibrate' }).then(res => {
        this.calibrateParams = res.data
      })
      this.calibrationRecord = { ...row }
      this.operationType = type
      this.dialogVisible1 = true
    },
    // è¡¨æ ¼åˆ é™¤æ“ä½œ
    handleDeleteClick(row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDeviceMetricRecord({ id: row.id }).then(res => {
          this.getTableList(this.clickNodeVal.value) // èŽ·å–设备校准列表数据
          this.$message.success('删除成功！')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    //导出
    handleDown() {
      this.outLoading = true
      deviceMetricRecordExport({
        deviceId: this.clickNodeVal.value,
        type: 'calibrate'
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        this.$download.saveAs(blob, '设备校准.xlsx')
      })
    },
    // æ ¡å‡†é¡¹ç›®ç»´æŠ¤
    calibrationMaintenance() {
      this.dialogVisible0 = true
      this.getXmsg();
    },
    // èŽ·å–设备校准参数table信息
    async getXmsg() {
      this.calibrateParamsLoading = true
      try {
        await selectDeviceMetric({ deviceId: this.clickNodeVal.value, type: 'calibrate' }).then(res => {
          if (res.code == 200) {
            this.calibrateParams = res.data
          }
          this.calibrateParamsLoading = false
        })
      } catch (e) {
        console.log('getXmsg---', e)
        this.calibrateParamsLoading = false
      }
    },
    // æ ¡å‡†é¡¹ç›®ç»´æŠ¤-删除设备校准参数
    handleDelete(row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDeviceMetrics({ id: row.id }).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功!');
            this.getXmsg();
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      })
    },
    // æäº¤é¡¹ç›®æ ¡å‡†ç»´æŠ¤
    addCalibrate() {
      this.$refs['form0'].validate((valid) => {
        if (valid) {
          // ä¿å­˜
          this.calibrateParamsLoading = true
          this.addCalibrateLoading = true
          this.form0.deviceId = this.clickNodeVal.value;
          this.form0.createdBy = this.nickName;
          this.form0.type = 'calibrate'
          saveOrUpdateDeviceMetric(this.form0).then(res => {
            if (res.code == 200) {
              this.$message.success('保存成功')
              this.$refs['form0'].resetFields()
              this.getXmsg() // åˆ·æ–°è®¾å¤‡æ ¡å‡†å‚数表格
            }
            this.calibrateParamsLoading = false
            this.addCalibrateLoading = false
          }).catch(() => {
            this.addCalibrateLoading = false
          })
        } else {
          this.addCalibrateLoading = false
          this.$message.warning('有必填项未填');
        }
      })
    },
    // æäº¤æ ¡å‡†è®°å½•
    addRecord() {
      this.$refs['calibrationRecord'].validate((valid) => {
        if (valid) {
          try {
            if (this.calibrateParams.some(m => m.isCalibration === undefined)) {
              this.$message.error('请选择是否校准')
              return
            }
            if (!this.calibrateParams.every(m => m.result !== undefined)) {
              this.$message.error('请选择判定结果')
              return
            }
            this.addRecordLoading = true
            this.calibrationRecord.deviceId = this.clickNodeVal.value;
            this.calibrationRecord.createUser = this.nickName
            this.calibrationRecord.type = 'calibrate'
            this.calibrationRecord.deviceMetricsCopyList = this.calibrateParams
            this.calibrationRecord.deviceMetricsCopyList.forEach(m => {
              delete m.creationTime
            })
            delete this.calibrationRecord.createTime
            addOrUpdateDeviceMetricRecord(this.calibrationRecord).then(res => {
              if (res.code == 200) {
                this.$message.success('添加成功')
                this.dialogVisible1 = false
                this.getTableList(this.clickNodeVal.value)
              }
              this.addRecordLoading = false
            }).catch((err) => {
              this.addRecordLoading = false
            })
          } catch (e) {
            console.log('addRecord---', e)
            this.addRecordLoading = false
          }
        } else {
          this.$message.warning('有必填项未填');
        }
      })
    },
    resetCalibrationRecord() {
      this.$refs.calibrationRecord.resetFields()
    },
    // ä¸Šä¼ é™„件
    handleSuccessUp(response, file) {
      if (response.code == 200) {
        // åœ¨ä¿å­˜èµ‹å€¼æ–°æ–‡ä»¶
        this.calibrationRecord.fileName = file.name
        this.calibrationRecord.systemFileName = response.data
        this.upLoading = false;
      } else {
        this.upLoading = false;
        this.$message.error(response.message)
      }
    },
    beforeUpload(file) {
      let list = file.name.split('.')
      let suffix = list[list.length - 1]

      console.log(suffix);
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        this.upLoading = true;
        this.$set(this.uploadData,'id',this.recordId)
        this.$set(this.uploadData,'suffix',suffix)
        return true;
      }
    },
    onSuccess(response,file,fileList) {
      if(response.code == 200) {
        this.$message.success("上传成功")
        this.upLoading = false
        this.$refs.upload.clearFiles()
        this.getFileData(this.recordId)
      } else {
        this.$message.error(response.msg)
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    // end
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getTableList(newVal.value);
      }
    },
    dialogVisible1(newVal) {
      if (newVal === false) {
        this.calibrateParams = []
        this.calibrationRecord = {
          unitOfMeasure: '', // è®¡é‡å•ä½
          calibrationDate: null, // æ ¡å‡†æ—¥æœŸ
          nextCalibrationDate: null, // ä¸‹æ¬¡æ ¡å‡†æ—¥æœŸ
          calculatingApparatus: '', // è®¡ç®—器具
          standardRange: '', // è®¡ç®—标准量程
          calibrationStandardUncertainty: '', // è®¡é‡æ ‡å‡†ä¸ç¡®å®šåº¦
          byDocument: '', // ä¾æ®æ–‡ä»¶
          certificateSerialNumber: '', // è¯ä¹¦ç¼–号
          status: '', // çŠ¶æ€
          remark: '', // å¤‡æ³¨
        }
      }
    }
  }
}

</script>
<style scoped>
.tables {
  width: 100%;
  height: calc(100vh - 230px);
}

.search {
  background-color: #fff;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
}

.search_thing {
  display: flex;
  align-items: center;
  height: 40px;
}

.search_label {
  width: 70px;
  font-size: 14px;
  text-align: right;
  margin-right: 10px;
}

.search_input {
  width: calc(100% - 110px);
}

.btnS {
  text-align: right;
  margin-top: 10px;
}

h4 {
  font-weight: 400;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

h4 .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.check {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.check_thing {
  flex: 0 0 calc(20% - 10px);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.check_label {
  font-size: 14px;
  margin-bottom: 5px;
}

.check_data .check_input {
  width: 100%;
}

.el-table {
  font-size: 14px;
  color: #333;
}

.el-table thead {
  background-color: #f5f5f5;
}
</style>

 src/views/CNAS/resourceDemand/device/component/check-and-accept.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,934 @@
<!-- è®¾å¤‡éªŒæ”¶ -->
<template>
  <div>
    <div class="search">
      <div class="search_thing">
        <div class="search_label">流程编号：</div>
        <div class="search_input"><el-input v-model="search.processNumber" clearable placeholder="请输入" size="small"
            @keyup.enter.native="getDeviceAList(clickNodeVal.value)"></el-input></div>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" @click="resetSearch">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="getDeviceAList(clickNodeVal.value)">查 è¯¢</el-button>
      </div>
      <div class="btns">
        <el-button size="small" type="primary" @click="dialogVisible = true">添加验收</el-button>
        <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出</el-button>
      </div>
    </div>
    <div class="tables" style="margin-top: 10px;">
      <el-table ref="table" :data="tableDataAlist" height="100%" v-loading="tableLoading">
        <el-table-column label="序号" type="index" width="60">
          <template v-slot="scope">
            <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="流程编号" min-width="150" prop="processNumber" show-overflow-tooltip/>
        <el-table-column label="设备名称" min-width="140" prop="deviceName" show-overflow-tooltip/>
        <el-table-column label="管理编号" min-width="140" prop="managementNumber" show-overflow-tooltip/>
        <el-table-column label="序列号" min-width="80" prop="serialNumber" />
        <el-table-column label="提交者" min-width="100" prop="submitUser" />
        <el-table-column label="提交日期" min-width="150" prop="createTime" />
        <el-table-column label="当前状态" min-width="140" prop="currentState" />
        <el-table-column label="当前负责人" min-width="120" prop="currentResponsible" />
        <el-table-column fixed="right" label="操作" min-width="140">
          <template #default="{ row }">
            <el-button size="small" type="text" @click="handleAttachmentClick(row)">附件</el-button>
            <el-button size="small" type="text" @click="handleViewClick(row)">查看</el-button>
            <el-button size="small" type="text" @click="handleDeleteClick(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
        :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- æ·»åŠ è®¾å¤‡æ•…障记录 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="仪器设备验收记录"
      width="60%" @open="openRecordAcceptance">
      <el-steps :active="currentStep" finish-status="success">
        <el-step v-for="(v, i) in steps" :key="i" :title="v" style="cursor:pointer"
          @click.native="choiceStep(i)"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <div v-show="currentStepClick === 0">
          <el-card style="margin-top: 1em; height: 56vh; overflow-y: scroll;">
            <!-- æ–°å¢žè®¾å¤‡äº‹è®°å½•å¡ç‰‡ -->
            <el-row>
              <el-col :span="24">
                <el-form-item label="流程编号：" prop="processNumber">
                  <el-input v-model="form.processNumber" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备名称：">
                  <el-input v-model="form.deviceName" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生产厂家：">
                  <el-input v-model="form.manufacturer" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备型号：">
                  <el-input v-model="form.specificationModel" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="管理编号：">
                  <el-input v-model="form.managementNumber" disabled size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请输入序列号', trigger: 'blur' }]" label="序列号："
                  prop="serialNumber">
                  <el-input v-model="form.serialNumber" :disabled="currentStep !== 0" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请输入设备类别', trigger: 'change' }]" label="设备类别："
                  prop="deviceClass">
                  <el-radio-group v-model="form.deviceClass" :disabled="currentStep !== 0">
                    <el-radio label="0precision">精密型设备</el-radio>
                    <el-radio label="1conventional">常规设备</el-radio><br />
                    <el-radio label="2auxiliary_class">辅助类设备</el-radio>
                    <el-radio label="4environmental">环境类设备</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请输入开箱前检查外包装有无破损', trigger: 'blur' }]" label="开箱前检查外包装有无破损：" label-width="220px"
                  prop="checkOuterPackaging">
                  <el-input v-model="form.checkOuterPackaging" :disabled="currentStep !== 0" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="相关附件：" prop="fileName">
                  <el-input v-model="form.fileName" :style="`width: ${currentStep == 0 ? '88%' : '100%'};`" disabled
                    size="small">
                    <el-button v-if="currentStep === 0" slot="append" icon="el-icon-delete-solid"
                      @click="deleteFile"></el-button>
                  </el-input>
                  <el-upload ref="upload" :action="action" :on-success="onSuccess" :show-file-list="false"
                    style="float: right;">
                    <el-button v-if="currentStep === 0" slot="trigger" class="uploadFile" size="small"
                      style="position: relative;top: -4px" type="primary">附件上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请选择下环节责任人', trigger: 'change' }]" label="下环节责任人："
                  prop="submitNextPesponsible">
                  <el-select v-model="form.submitNextPesponsible" :disabled="currentStep !== 0" clearable filterable
                    placeholder="请选择下环节负责人" size="small" style="width: 50%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: currentStep === 0, message: '请输入设备开箱验收结论', trigger: 'change' }]" label="设备开箱验收结论：" label-width="150px"
                  prop="unpackingAcceptanceConclusion">
                  <el-radio-group v-model="form.unpackingAcceptanceConclusion" :disabled="currentStep !== 0">
                    <el-radio :label="'0qualified'">合格</el-radio>
                    <el-radio :label="'1unqualified'">不合格，缺少备件供应商补发</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div style="margin-bottom: 20px; width: 100%;">
                  <label>备件确认：</label>
                  <el-button v-if="currentStep === 0" size="small" style="float: right;"
                    type="primary" @click="addTableRow('sparePartsConfirmationList')">增加行</el-button>
                </div>
                <el-table :data="form.sparePartsConfirmationList" border stripe style="width: 100%; min-height: 30vh">
                  <el-table-column label="序号" prop="序号" type="index" width="80" />
                  <el-table-column label="名称" min-width="120" prop="name">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 0" v-model="scope.row.name" size="small"></el-input>
                      <label v-else>{{ scope.row.name }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量" min-width="120" prop="number">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 0" v-model="scope.row.number" size="small"></el-input>
                      <label v-else>{{ scope.row.number }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" min-width="120" prop="note">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 0" v-model="scope.row.note" size="small"></el-input>
                      <label v-else>{{ scope.row.note }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column v-if="currentStep === 0" fixed="right" label="操作" width="90">
                    <template slot-scope="scope">
                      <el-button icon="el-icon-delete" type="text"
                        @click="deleteRow(scope.$index, scope.row, 'sparePartsConfirmationList')">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24">
                <div style="margin: 20px 0; width: 100%;">
                  <label>文件类确认：</label>
                  <el-button v-if="currentStep === 0" size="small" style="float: right;"
                    type="primary" @click="addTableRow('fileClassConfirmationList')">增加行</el-button>
                </div>
                <el-table :data="form.fileClassConfirmationList" border stripe style="width: 100%; min-height: 30vh">
                  <el-table-column label="序号" prop="序号" type="index" width="80" />
                  <el-table-column label="应有册数" min-width="120" prop="expectedCopies">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 0" v-model="scope.row.expectedCopies" size="small"></el-input>
                      <label v-else>{{ scope.row.expectedCopies }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column label="实际收到册数" min-width="120" prop="actualCopies">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 0" v-model="scope.row.actualCopies" size="small"></el-input>
                      <label v-else>{{ scope.row.actualCopies }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column v-if="currentStep === 0" fixed="right" label="操作" width="90">
                    <template v-slot="scope">
                      <el-button icon="el-icon-delete" type="text"
                        @click="deleteRow(scope.$index, scope.row, 'fileClassConfirmationList')">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24" style="margin-top: 10px;">
                <el-form-item label="备注：" label-width="90px">
                  <el-input v-model="form.submitRemarks" :disabled="currentStep !== 0" size="small"
                    type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.submitOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.submitDate }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 1">
          <el-card style="margin-top: 1em; height: 56vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="复核意见：" prop="accidentDescription">
                  <el-input v-model="form.unpackingReviewOpinion" :disabled="currentStep !== 1" size="small"
                    type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 1, message: '请输入下环节责任人', trigger: 'change' }]" label="下环节责任人："
                  prop="unpackingNextPesponsible">
                  <el-select v-model="form.unpackingNextPesponsible" :disabled="currentStep !== 1" clearable filterable
                    placeholder="请选择下环节负责人" size="small" style="width: 50%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.unpackingOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.unpackingDate }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 2">
          <el-card style="margin-top: 1em; height: 56vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 2, message: '请输入安装位置', trigger: 'blur' }]" label="安装位置："
                  prop="installLocation">
                  <el-input v-model="form.installLocation" :disabled="currentStep !== 2" clearable placeholder="请输入安装位置"
                    size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注：">
                  <el-input v-model="form.installRemarks" :disabled="currentStep !== 2" size="small"
                    type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 2, message: '请输入下环节责任人', trigger: 'blur' }]" label="下环节责任人："
                  prop="installNextPesponsible">
                  <el-select v-model="form.installNextPesponsible" :disabled="currentStep !== 2" clearable filterable
                    placeholder="请选择下环节负责人" size="small" style="width: 50%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div style="margin-bottom: 20px; width: 100%;">
                  <label>安装验收记录</label>
                  <el-button v-if="currentStep === 2" size="small" style="float: right;"
                    type="primary" @click="addTableRow('installationAcceptanceRecordList')">增加行</el-button>
                </div>
                <el-table :data="form.installationAcceptanceRecordList" border stripe
                  style="width: 100%; min-height: 30vh">
                  <el-table-column label="序号" prop="序号" type="index" width="80" />
                  <el-table-column label="项目" min-width="120" prop="installationProject">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 2" v-model="scope.row.installationProject"
                        size="small"></el-input>
                      <label v-else>{{ scope.row.installationProject }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column label="安装情况" min-width="120" prop="installationSituation">
                    <template v-slot="scope">
                      <el-input v-if="currentStep === 2" v-model="scope.row.installationSituation"
                        size="small"></el-input>
                      <label v-else>{{ scope.row.installationSituation }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column label="安装完成" min-width="120" prop="installationCompleted">
                    <template v-slot="scope">
                      <el-select v-if="currentStep === 2" v-model="scope.row.installationCompleted" placeholder="请选择">
                        <el-option label="是" value="0yes"></el-option>
                        <el-option label="否" value="1no"></el-option>
                      </el-select>
                      <label v-else>{{ scope.row.installationCompleted === '0yes' ? '是' :
                        scope.row.installationCompleted === '1no' ? '否' : '' }}</label>
                    </template>
                  </el-table-column>
                  <el-table-column v-if="currentStep === 2" fixed="right" label="操作" width="90">
                    <template slot-scope="scope">
                      <el-button icon="el-icon-delete" type="text"
                        @click="deleteRow(scope.$index, scope.row, 'installationAcceptanceRecordList')">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.installOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.installDate }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 3">
          <el-card style="margin-top: 1em; height: 56vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 3, message: '请输入复合意见', trigger: 'blur' }]" label="复合意见："
                  prop="installationAcceptanceCompoundOpinion">
                  <el-input v-model="form.installationAcceptanceCompoundOpinion" :disabled="currentStep !== 3"
                    size="small" type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 3, message: '请输入下环节负责人', trigger: 'change' }]" label="下环节责任人："
                  prop="installationAcceptanceNextPesponsible">
                  <el-select v-model="form.installationAcceptanceNextPesponsible" :disabled="currentStep !== 3" clearable
                    filterable placeholder="请选择下环节负责人" size="small" style="width: 50%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.installationAcceptanceOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.installationAcceptanceDate }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 4">
          <el-card style="margin-top: 1em; height: 56vh; overflow-y: scroll;">
            <div style="margin-bottom: 20px; width: 100%;">
              <label>验收核查记录：</label>
              <el-button v-if="currentStep === 4" size="small" style="float: right;"
                type="primary" @click="addTableRow('acceptanceCheckRecordList')">增加行</el-button>
            </div>
            <el-table :data="form.acceptanceCheckRecordList" border style="width: 100%; min-height: 30vh">
              <el-table-column label="序号" prop="sequence" width="80">
              </el-table-column>
              <el-table-column label="仪器模块" min-width="120" prop="instrumentModule">
                <template v-slot="scope">
                  <el-input v-if="currentStep === 4" v-model="scope.row.instrumentModule" size="small"></el-input>
                  <label v-else>{{ scope.row.instrumentModule }}</label>
                </template>
              </el-table-column>
              <el-table-column label="核查参数" min-width="120" prop="verificationParameter">
                <template v-slot="scope">
                  <el-input v-if="currentStep === 4" v-model="scope.row.verificationParameter" size="small"></el-input>
                  <label v-else>{{ scope.row.verificationParameter }}</label>
                </template>
              </el-table-column>
              <el-table-column label="可接收限" min-width="120" prop="acceptableLimit">
                <template v-slot="scope">
                  <el-input v-if="currentStep === 4" v-model="scope.row.acceptableLimit" size="small"></el-input>
                  <label v-else>{{ scope.row.acceptableLimit }}</label>
                </template>
              </el-table-column>
              <el-table-column label="核查结果" min-width="120" prop="verificationResult">
                <template v-slot="scope">
                  <el-input v-if="currentStep === 4" v-model="scope.row.verificationResult" size="small"></el-input>
                  <label v-else>{{ scope.row.verificationResult }}</label>
                </template>
              </el-table-column>
              <el-table-column label="核查结论" min-width="120" prop="verificationConclusion">
                <template v-slot="scope">
                  <el-select v-if="currentStep === 4" v-model="scope.row.verificationConclusion" placeholder="请选择">
                    <el-option label="符合" value="0accordWith"></el-option>
                    <el-option label="不符合" value="1inconformity"></el-option>
                  </el-select>
                  <label v-else>{{ scope.row.verificationConclusion }}</label>
                </template>
              </el-table-column>
              <el-table-column v-if="currentStep === 4" fixed="right" label="操作" width="90">
                <template slot-scope="scope">
                  <el-button size="small" type="text"
                    @click="deleteRow(scope.$index, scope.row, 'acceptanceCheckRecordList')">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-form-item :rules="[{ required: currentStep === 4, message: '请输入设备开箱验收结论', trigger: 'change' }]" label="设备开箱验收结论："
              label-width="150px" prop="acceptanceCheckUnpackingConclusion">
              <el-radio-group v-model="form.acceptanceCheckUnpackingConclusion" :disabled="currentStep !== 4">
                <el-radio :label="'0qualified'">合格</el-radio>
                <el-radio :label="'1unqualified'">不合格，缺少备件供应商补发</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :rules="[{ required: currentStep === 4, message: '请输入下环节责任人', trigger: 'change' }]" label="下环节责任人："
              prop="acceptanceCheckNextPesponsible">
              <el-select v-model="form.acceptanceCheckNextPesponsible" :disabled="currentStep !== 4" clearable
                filterable placeholder="请选择下环节负责人" size="small" style="width: 50%;">
                <el-option v-for="item in responsibleOptions" :key="item.value" :label="item.label" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.acceptanceCheckOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.acceptanceCheckDate }}
            </el-col>
          </el-row>
        </div>
        <div v-show="currentStepClick === 5">
          <el-card style="margin-top: 1em; height: 56vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item :rules="[{ required: currentStep === 5, message: '请输入审核意见', trigger: 'blur' }]" label="审核意见："
                  prop="acceptanceAuditAuditOpinion">
                  <el-input v-model="form.acceptanceAuditAuditOpinion" :disabled="currentStep !== 5" size="small"
                    type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.acceptanceAuditOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.acceptanceAuditDate }}
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="currentStep !== 0 && currentStep !== 6" @click="submitForm('3reject')">驳回</el-button>
        <el-button v-if="currentStep === 0" @click="submitForm('2save')">保存</el-button>
        <el-button v-if="currentStep !== 6" type="primary" @click="submitForm('1submit')">{{ currentStep === 0 ? '提交' :
          '通过'
          }}</el-button>
      </span>
    </el-dialog>
  </div>
  <!-- æŸ¥å•ç¼–辑框 -->
</template>

<script>
import { dateFormat } from '@/utils/date'
import file from "@/utils/file";
import {
  deleteCNASFile, deleteIncidentReport,
  deleteIncidentReportAll, getShowIncidentReport, incidentReportExport, incidentReportPage,
  saveIncidentReportData,
  selectDeviceByCode
} from "@/api/cnas/resourceDemand/device";
import {selectUserCondition} from "@/api/system/user";
import {mapGetters} from "vuex";

export default {
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      //事故设备信息
      tableDataAlist: [], // æ›´æ”¹å˜é‡åç§°
      tableLoading: false,
      dialogVisible: false,
      rules: {
        quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
      },
      currentStep: 0, // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
      currentStepClick: 0, // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
      steps: ['提交', '开箱验收复核', '安装验收检查', '安装验收复核', '验收核查', '验收核查审核'],
      form: {
        sparePartsConfirmationList: [], // å¤‡ä»¶ç¡®è®¤List
        fileClassConfirmationList: [], // æ–‡ä»¶ç¡®è®¤List
        installationAcceptanceRecordList: [], // å®‰è£…验收记录
        acceptanceCheckRecordList: [], // éªŒæ”¶æ ¸æŸ¥è®°å½•
        fileName: '', // æ–‡ä»¶åç§°
        systemFileName: '', // ç³»ç»Ÿæ–‡ä»¶åç§°
      },
      outLoading: false,
      responsibleOptions: [], // ä¸‹çŽ¯èŠ‚负责人list
      isUpdate: false,
      search: {
        size: 20,
        current: 1,
        total: 0,
        processNumber: '',
      },
    }
  },
  computed: {
    action() {
      return this.javaApi + '/personBasicInfo/saveCNASFile'
    },
    ...mapGetters(["nickName"]),
  },
  mounted() {
    // èŽ·å–设备事故信息
    this.getDeviceAList(this.clickNodeVal.value);
    window.excelClosed = this.closed
  },
  methods: {
    handleSizeChange(val) {
      this.search.size = val
      this.getDeviceAList(this.clickNodeVal.value);
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.getDeviceAList(this.clickNodeVal.value);
    },
    deleteFile() {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCNASFile({fileName: this.form.systemFileName}).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    onSuccess(response, file, fileList) {
      if (response.code == 200) {
        // åœ¨ä¿å­˜èµ‹å€¼æ–°æ–‡ä»¶
        this.form.fileName = file.name
        this.form.systemFileName = response.data
      } else {
        this.$message.error(response.message)
      }
    },
    addTableRow(value) {
      switch (value) {
        // å¤‡ä»¶ç¡®è®¤
        case 'sparePartsConfirmationList':
          const obj = Object.assign({
            name: '',
            number: null,
            note: ''
          })
          this.form.sparePartsConfirmationList.push(obj)
          break
        // æ–‡ä»¶ç¡®è®¤List
        case 'fileClassConfirmationList':
          const obj1 = Object.assign({
            expectedCopies: '',
            actualCopies: '',
          })
          this.form.fileClassConfirmationList.push(obj1)
          break
        // å®‰è£…验收记录
        case 'installationAcceptanceRecordList':
          const obj2 = Object.assign({
            installationProject: '',
            installationSituation: '',
            installationCompleted: ''
          })
          this.form.installationAcceptanceRecordList.push(obj2)
          break
        // éªŒæ”¶æ ¸æŸ¥è®°å½•
        case 'acceptanceCheckRecordList':
          const obj3 = Object.assign({
            instrumentModule: '',
            verificationParameter: '',
            acceptableLimit: '',
            verificationResult: '',
            verificationConclusion: ''
          })
          this.form.acceptanceCheckRecordList.push(obj3)
        default:
          break
      }
    },
    deleteRow(index, row, type) {
      switch (type) {
        // å¤‡ä»¶ç¡®è®¤
        case 'sparePartsConfirmationList':
          if (row.sparePartsId) {
            deleteIncidentReportAll({sparePartsId: row.sparePartsId}).then(res => { });
          }
          this.form.sparePartsConfirmationList.splice(index, 1)
          this.$message.success('删除成功！')
          break
        // æ–‡ä»¶ç¡®è®¤List
        case 'fileClassConfirmationList':
          if (row.fileId) {
            deleteIncidentReportAll({fileId: row.fileId}).then(res => { });
          }
          this.form.fileClassConfirmationList.splice(index, 1)
          this.$message.success('删除成功！')
          break
        // å®‰è£…验收记录
        case 'installationAcceptanceRecordList':
          if (row.installId) {
            deleteIncidentReportAll({installId: row.installId}).then(res => { });
          }
          this.form.installationAcceptanceRecordList.splice(index, 1)
          this.$message.success('删除成功！')
          break
        // éªŒæ”¶æ ¸æŸ¥è®°å½•
        case 'acceptanceCheckRecordList':
          if (row.acceptanceCheckId) {
            deleteIncidentReportAll({acceptanceCheckId: row.acceptanceCheckId}).then(res => { });
          }
          this.form.acceptanceCheckRecordList.splice(index, 1)
          this.$message.success('删除成功！')
        default:
          break
      }
    },
    choiceStep(index) {
      this.currentStepClick = index
    },
    openRecordAcceptance() {
      // èŽ·å–设备基础信息
      selectDeviceByCode({id: this.clickNodeVal.value}).then(res => {
        this.form.deviceName = res.data.deviceName
        this.form.manufacturer = res.data.manufacturer
        this.form.specificationModel = res.data.specificationModel
        this.form.managementNumber = res.data.managementNumber
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      });
      // èŽ·å–负责人信息
      this.getUserList()
    },
    //提交表单
    async submitForm(saveState) {
      this.$refs.form.validate((valid) => {
        if (valid === true || saveState !== '1submit') {
          // ç»™å½“前环节设置创建人与时间
          const dateTime = dateFormat(new Date())
          // èŽ·å–当前环节操作人与日期
          switch (this.currentStep) {
            case 0:
              this.form.submitOperatingPersonnel = this.nickName
              this.form.submitDate = dateTime
              break
            case 1:
              this.form.unpackingOperatingPersonnel = this.nickName
              this.form.unpackingDate = dateTime
              break
            case 2:
              this.form.installOperatingPersonnel = this.nickName
              this.form.installDate = dateTime
              break
            case 3:
              this.form.installationAcceptanceOperatingPersonnel = this.nickName
              this.form.installationAcceptanceDate = dateTime
              break
            case 4:
              this.form.acceptanceCheckOperatingPersonnel = this.nickName
              this.form.acceptanceCheckDate = dateTime
              break
            case 5:
              this.form.acceptanceAuditOperatingPersonnel = this.nickName
              this.form.acceptanceAuditDate = dateTime
              break
            default:
              break
          }
          // èŽ·å–当前环节负责人
          switch (saveState === '3reject' ? this.currentStep - 1 : this.currentStep) {
            case 0:
              this.form.currentResponsible = this.form.submitNextPesponsible
              break
            case 1:
              this.form.currentResponsible = this.form.unpackingNextPesponsible
              break
            case 2:
              this.form.currentResponsible = this.form.installNextPesponsible
              break
            case 3:
              this.form.currentResponsible = this.form.installationAcceptanceNextPesponsible
              break
            case 4:
              this.form.currentResponsible = this.form.acceptanceCheckNextPesponsible
              break
            default:
              break
          }
          let currentStepAction;
          // è®¾ç½®è¯¥æ“ä½œåˆ¤æ–­æ˜¯å¦ä¸ºæäº¤ï¼Œä¿å­˜ï¼Œé©³å›žï¼Œé€šè¿‡
          switch (saveState) {
            // æäº¤ï¼Œé€šè¿‡
            case '1submit':
              currentStepAction = this.currentStep + 1
              break
            // ä¿å­˜
            case '2save':
              currentStepAction = this.currentStep
              break
            // é©³å›ž
            case '3reject':
              currentStepAction = this.currentStep - 1
              break
            default:
              break
          }
          // èŽ·å–当前状态
          this.form.currentState = currentStepAction === 6 ? '关闭' : this.steps[currentStepAction]
          this.form.deviceId = this.clickNodeVal.value
          saveIncidentReportData(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success('提交成功')
              this.getDeviceAList(this.clickNodeVal.value);
              this.dialogVisible = false
            }
          })
        } else {
          let step = this.steps[this.currentStep]
          this.$message.warning(step + '  æµç¨‹ä¸­æœ‰å¿…填项未填！');
        }
      });
    },
    // èŽ·å–负责人信息接口
    getUserList() {
      selectUserCondition().then(res => {
        if (res.code == 200) {
          this.responsibleOptions = res.data
        }
      })
    },
    resetSearch() {
      this.search = {
        size: 20,
          current: 1,
          total: 0,
          processNumber: '',
      }
      this.getDeviceAList(this.clickNodeVal.value);
    },
    // èŽ·å–设备事故信息(根据从vuex中获取到的设备名称id进行数据查询)
    getDeviceAList(deviceId) {
      this.tableLoading = true
      incidentReportPage({deviceId: deviceId, size:this.search.size, current:this.search.current, processNumber: this.search.processNumber}).then(res => {
        this.tableLoading = false
        if (res.code == 200) {
          this.tableDataAlist = res.data.records
          this.search.total = res.data.total
        }
      }).catch(err => {
        this.tableLoading = false
      })
    },
    //table äº‹ä»¶å¤„理开始处
    // ä¸‹è½½é™„件
    handleAttachmentClick(row) {
      this.$download.saveAs(row.systemFileName, row.fileName)
    },
    handleViewClick(row) {
      getShowIncidentReport({id: row.id}).then(res => {
        this.form = { ...res.data }
        // å¦‚果索引为6表示全部通过
        this.currentStep = this.steps.indexOf(this.form.currentState) === -1 ? 6 : this.steps.indexOf(this.form.currentState)
        this.currentStepClick = this.currentStep === 6 ? 0 : this.currentStep
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      })
      this.dialogVisible = true
    },
    handleDeleteClick(row) {
      this.$confirm('此操作将删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteIncidentReport({id: row.id}).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getDeviceAList(this.clickNodeVal.value);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //导出
    handleDown() {
      this.outLoading = true
      incidentReportExport({deviceId: this.clickNodeVal.value}).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        this.$download.saveAs(blob, '设备验收.xlsx')
      })
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getDeviceAList(newVal.value);
      }
    },
    dialogVisible(newVal) {
      if (!newVal) {
        this.form = {
          sparePartsConfirmationList: [], // å¤‡ä»¶ç¡®è®¤List
          fileClassConfirmationList: [], // æ–‡ä»¶ç¡®è®¤List
          installationAcceptanceRecordList: [], // å®‰è£…验收记录
          acceptanceCheckRecordList: [], // éªŒæ”¶æ ¸æŸ¥è®°å½•
          fileName: '', // æ–‡ä»¶åç§°
          systemFileName: '', // ç³»ç»Ÿæ–‡ä»¶åç§°
        }
        this.currentStep = 0 // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
        this.currentStepClick = 0 // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
        this.$refs['form'].clearValidate()
      }
    }
  }
}
function downloadImage(url) {
  const link = document.createElement('a');
  link.href = url;
  link.download = 'attachment.jpg'; // æ–‡ä»¶å
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
</script>

<style scoped>
>>>.el-radio {
  color: #606266;
  font-weight: 500;
  cursor: pointer;
  margin-right: 0px;
  width: 10em;
}

.tables {
  width: 100%;
  height: calc(100vh - 17em);
}

.search {
  margin-top: 10px;
  background-color: #fff;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
}

.search_thing {
  display: flex;
  align-items: center;
  height: 40px;
}

.search_label {
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 120px);
}

.btns {
  position: absolute;
  right: 0px;
  top: 40%;
  transform: translate(0, -50%);
  /* text-align: right; */
}

.search_thing {
  display: flex;
  margin-bottom: 10px;
}

.search_label {
  /* width: 150px; */
  text-align: right;
  padding-right: 10px;
}

.search_input {
  flex-grow: 1;
}

.line {
  width: 20px;
  height: 1px;
  background-color: #ccc;
  display: inline-block;
  margin-right: 10px;
}

.form .search_label {
  width: 120px;
}
</style>

 src/views/CNAS/resourceDemand/device/component/check.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,704 @@
<!-- è®¾å¤‡æ ¸æŸ¥ -->
<template>
  <div>
    <div class="btns">
      <el-button size="small" type="primary" @click="calibrationMaintenance()">核查项目维护</el-button>
      <el-button size="small" type="primary" @click="add('add')">添加核查记录</el-button>
      <el-button size="small" type="primary" @click="downLoadPost">导出Excel</el-button>
    </div>
    <div class="tables" style="margin-top: 16px;">
      <el-table :data="tableData" height="calc(100vh - 20em)">
        <el-table-column label="序号" type="index" width="120">
          <template v-slot="scope">
            <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="记录编号" min-width="150" prop="processNumber"></el-table-column>
        <el-table-column label="核查机构" min-width="150" prop="calibrationInstitution"
          show-overflow-tooltip></el-table-column>
        <el-table-column label="核查结论" min-width="150" prop="status">
          <template v-slot="scope">
            {{ scope.row.status === '0yes' ? '合格' : scope.row.status === '1no' ? '不合格' : '其他' }}
          </template>
        </el-table-column>
        <el-table-column label="核查证书编号" min-width="150" prop="certificateSerialNumber"></el-table-column>
        <el-table-column label="说明" min-width="150" prop="remark" show-overflow-tooltip></el-table-column>
        <el-table-column label="核查日期" min-width="150" prop="calibrationDate"></el-table-column>
        <el-table-column label="下次核查日期" min-width="150" prop="nextCalibrationDate"></el-table-column>
        <el-table-column label="登记人" min-width="150" prop="createUser"></el-table-column>
        <el-table-column label="登记日期" min-width="150" prop="createTime"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="150">
          <template #default="{ row }">
            <el-button size="small" type="text" @click="handleAttachmentClick(row)">附件</el-button>
            <el-button size="small" type="text" @click="handleViewClick('view', row)">查看</el-button>
            <el-button size="small" type="text" @click="handleDeleteClick(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
        :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" style="margin-right: 5%;"
        @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>

    <!-- æ ¡å‡†é¡¹ç›®ç»´æŠ¤ -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible0" title="核查项目维护"
               top="5vh" width="70%">
      <h4>
        <span style="display: flex;align-items: center;"><span class="line"></span><span>设备核查参数维护</span></span>
        <el-button :loading="addCalibrateLoading" size="small" type="primary" @click="addCalibrate">æ·» åŠ </el-button>
      </h4>
      <div>
        <el-form ref="form0" :model="form0" :rules="form0Rules"
                 label-position="right" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="核查参数:" prop="measurementParameter">
                <el-input v-model="form0.measurementParameter" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="核查范围:" prop="rangeOfMeasurement">
                <el-input v-model="form0.rangeOfMeasurement" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最大允许误差:" prop="maxPermissibleError">
                <el-input v-model="form0.maxPermissibleError" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="判定标准:" prop="judgmentCriteria">
                <el-input v-model="form0.judgmentCriteria" clearable placeholder="请输入" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <h4>
        <span style="display: flex;align-items: center;"><span class="line"></span><span>设备核查参数</span></span>
      </h4>
      <!-- è®¾å¤‡æ ¡å‡†å‚数表格 -->
      <el-table ref="calibrateTable" v-loading="calibrateParamsLoading" :data="calibrateParams"
                max-height="450"
                stripe style="width: 100%">
        <el-table-column label="编号" type="index" width="80"></el-table-column>
        <el-table-column label="核查参数" prop="measurementParameter"></el-table-column>
        <el-table-column label="核查范围" prop="rangeOfMeasurement"></el-table-column>
        <el-table-column label="最大允许误差" prop="maxPermissibleError"></el-table-column>
        <el-table-column label="判定标准" prop="judgmentCriteria"></el-table-column>
        <el-table-column label="创建人" prop="createdBy"></el-table-column>
        <el-table-column label="创建时间" prop="creationTime"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- æ·»åŠ æ ¸æŸ¥è®°å½• -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible1" title="核查记录" :before-close="handleClose"
               top="5vh"
               width="80%" @close="resetcalibrationRecord">
      <div class="dialog-content">
        <h4>
          <span style="display: flex;align-items: center;">
           <span class="line"></span>
            <span>添加设备核查记录</span>
          </span>
        </h4>
        <el-form ref="calibrationRecord" :model="calibrationRecord" :rules="formRules"
                 label-position="right" label-width="120px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="核查人:" prop="unitOfMeasure">
                <el-input v-model="calibrationRecord.unitOfMeasure" :disabled="operationType === 'view'"
                          size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核查日期:" prop="calibrationDate">
                <el-date-picker v-model="calibrationRecord.calibrationDate" :disabled="operationType === 'view'" format="yyyy-MM-dd" placeholder="选择日期"
                                size="small"
                                style="width: 90%" type="date" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="下次核查日期:" label-width="140px" prop="nextCalibrationDate">
                <el-date-picker v-model="calibrationRecord.nextCalibrationDate" :disabled="operationType === 'view'" :picker-options="{ disabledDate: this.disabledDate }"
                                format="yyyy-MM-dd"
                                placeholder="选择日期"
                                size="small" style="width: 90%" type="date"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="核查器具:" prop="calculatingApparatus">
                <el-input v-model="calibrationRecord.calculatingApparatus" :disabled="operationType === 'view'"
                          size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核查标准量程:" prop="standardRange">
                <el-input v-model="calibrationRecord.standardRange" :disabled="operationType === 'view'" size="small"
                          style="width: 90%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="核查标准不确定度:" label-width="140px" prop="calibrationStandardUncertainty">
                <el-input v-model="calibrationRecord.calibrationStandardUncertainty" :disabled="operationType === 'view'" size="small"
                          style="width: 90%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="核查指导书:" prop="byDocument">
                <el-input v-model="calibrationRecord.byDocument" :disabled="operationType === 'view'"
                          size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检查报告编号:" prop="certificateSerialNumber">
                <el-input v-model="calibrationRecord.certificateSerialNumber" :disabled="operationType === 'view'" size="small"
                          style="width: 90%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核查总结论:" label-width="140px" prop="status">
                <el-radio-group v-model="calibrationRecord.status" :disabled="operationType === 'view'">
                  <el-radio label="0yes">合格</el-radio>
                  <el-radio label="1no">不合格</el-radio>
                  <el-radio label="2other">其他</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="附件：" prop="fileName">
                <el-input v-model="calibrationRecord.fileName" :style="`width: ${operationType === 'add' ? '90%' : '100%'};}`" disabled
                          size="small">
                  <el-button v-if="operationType === 'add'" slot="append" icon="el-icon-delete-solid"
                             @click="deleteFile"></el-button>
                </el-input>
                <el-upload v-if="operationType === 'add'" ref="upload" :action="action" :before-upload="beforeUpload" :headers="uploadHeader"
                           :limit="1" :on-error="onError" :on-success="handleSuccessUp"
                           :show-file-list="false"
                           style="float: right;">
                  <el-button :loading="upLoading" size="small" style="position: relative; top: -4px;"
                             type="primary">附件上传
                  </el-button>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注:">
                <el-input v-model="calibrationRecord.remark" :disabled="operationType === 'view'" :rows="3" size="small"
                          style="width: 96%" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <h4>
          <span style="display: flex;align-items: center;">
            <span class="line"></span><span>核查条目确认结果</span>
          </span>
        </h4>
        <el-table ref="calibrateTable" :data="calibrateParams" stripe style="width: 100%;">
          <el-table-column label="编号" type="index" width="80"></el-table-column>
          <el-table-column label="核查参数" prop="measurementParameter" width="150"></el-table-column>
          <el-table-column label="核查范围" prop="rangeOfMeasurement" width="150"></el-table-column>
          <el-table-column label="最大允许误差" prop="maxPermissibleError" width="150"></el-table-column>
          <el-table-column label="判定标准" prop="judgmentCriteria" width="150"></el-table-column>
          <el-table-column label="是否核查" prop="isCalibration">
            <template slot="header" slot-scope="scope">
              <span class="required-span">* </span>是否核查
            </template>
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.isCalibration" :disabled="operationType === 'view'">
                <el-radio label="0yes">是</el-radio>
                <el-radio label="1no">否</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="判定结果" prop="result">
            <template slot="header" slot-scope="scope">
              <span class="required-span">* </span>判定结果
            </template>
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.result" :disabled="operationType === 'view'" @input="checkRadio()">
                <el-radio label="0yes">合格</el-radio>
                <el-radio label="1no">不合格</el-radio>
                <el-radio label="2other">其他</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="单项结果说明" prop="singleResultStatement">
            <template slot-scope="scope">
              <el-input v-model="scope.row.singleResultStatement" :disabled="operationType === 'view'" size="small"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer" style="float: right;margin-top: 10px">
          <el-button v-if="operationType === 'add'" @click="handleClose">取 æ¶ˆ</el-button>
          <el-button v-if="operationType === 'add'" type="primary" @click="addRecord">ç¡® å®š</el-button>
        </span>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import file from '@/utils/file';
import { mapGetters } from "vuex";
import {
  addOrUpdateDeviceMetricRecord, deleteCNASFile, deleteDeviceMetricRecord, deleteDeviceMetrics,
  deviceMetricRecordExport,
  deviceMetricRecordPage,
  saveOrUpdateDeviceMetric,
  selectDeviceMetric, showDeviceMetricsCopy
} from "@/api/cnas/resourceDemand/device";
export default {
  components: {},
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      search: {
        size: 20,
        current: 1,
        total: 0
      },
      calibrateParamsLoading: false,
      addCalibrateLoading: false,
      form0: {
        measurementParameter: '', // è®¡é‡å‚æ•°
        rangeOfMeasurement: '',
        maxPermissibleError: '',
        judgmentCriteria: '',
        createdBy: '',
        action: '',
        deviceId: null
      },
      form0Rules: {
        measurementParameter: [
          { required: true, message: '请输入计量参数', trigger: 'blur' }
        ],
        rangeOfMeasurement: [
          { required: true, message: '请输入量程范围', trigger: 'blur' }
        ],
        maxPermissibleError: [
          { required: true, message: '请输入最大允许误差', trigger: 'blur' }
        ],
        judgmentCriteria: [
          { required: true, message: '请输入判定标准', trigger: 'blur' }
        ],
      },
      dialogVisible0: false,
      calibrationRecord: {
        unitOfMeasure: '', // æ ¸æŸ¥äºº
        calibrationDate: '', // æ ¸æŸ¥æ—¥æœŸ
        nextCalibrationDate: '', // ä¸‹æ¬¡æ ¸æŸ¥æ—¥æœŸ
        calculatingApparatus: '', // æ ¸æŸ¥å™¨å…·
        standardRange: '', // æ ¸æŸ¥æ ‡å‡†é‡ç¨‹
        calibrationStandardUncertainty: '', // æ ¸æŸ¥æ ‡å‡†ä¸ç¡®å®šåº¦
        byDocument: '', // æ ¸æŸ¥æŒ‡å¯¼ä¹¦
        certificateSerialNumber: '', // æ£€æŸ¥æŠ¥å‘ŠæŒ‡å¯¼ä¹¦
        fileName: '', // é™„件
        status: '', // æ ¸æŸ¥æ€»ç»“论
        remark: '', // å¤‡æ³¨
      },
      formRules: {
        unitOfMeasure: [{ required: true, message: '请输入核查人', trigger: 'blur' }],
        calibrationDate: [{ required: true, message: '请选择核查日期', trigger: 'change' }],
        nextCalibrationDate: [{ required: true, message: '请选择下次核查日期', trigger: 'change' }],
        calculatingApparatus: [{ required: true, message: '请输入核查器具', trigger: 'blur' }],
        standardRange: [{ required: true, message: '请输入核查标准量程', trigger: 'blur' }],
        calibrationStandardUncertainty: [{ required: true, message: '请输入核查标准不确定度', trigger: 'blur' }],
        byDocument: [{ required: true, message: '请输入核查指导书', trigger: 'blur' }],
        certificateSerialNumber: [{ required: true, message: '请输入检查报告指导书', trigger: 'blur' }],
        status: [{ required: true, message: '请选择核查总结论', trigger: 'change' }]
      },
      calibrateParams: [],
      tableData: [],
      operationType: '',
      dialogVisible1: false,
      formData: {
        person: '',
        data1: '',
        name: '',
      },
      upLoading: false
    }
  },
  // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
  computed: {
    ...mapGetters(["nickName"]),
    action() {
      return this.javaApi + '/personBasicInfo/saveCNASFile'
    }
  },
  mounted() {
    this.getTableList(this.clickNodeVal.value) // èŽ·å–设备核查列表数据
  },
  methods: {
    //状态判定
    checkRadio() {
      let resultList = this.calibrateParams.map(ele => ele.result)
      if (resultList && resultList.filter(ele => ele == '1no').length > 0) {
        this.calibrationRecord.status = '1no'
      } else if (resultList && resultList.filter(ele => ele == '2other').length == resultList.length) {
        this.calibrationRecord.status = '2other'
      } else if (resultList && resultList.filter(ele => ele == '0yes').length == resultList.length) {
        this.calibrationRecord.status = '0yes'
      }
    },
    //下次核查日期:禁用在核查日期前的日期
    disabledDate(time) {
      let selectDate = this.calibrationRecord.calibrationDate
      if (selectDate) {
        let oldDate = new Date(selectDate)
        return time <= oldDate.getTime()
      }
      return false
    },
    handleSizeChange(val) {
      this.search.size = val
      this.getTableList(this.clickNodeVal.value);
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.getTableList(this.clickNodeVal.value);
    },
    // èŽ·å–设备校准参数table信息
    async getXmsg() {
      this.calibrateParamsLoading = true
      try {
        await selectDeviceMetric({deviceId: this.clickNodeVal.value, type: 'examine'}).then(res => {
          if (res.code == 200) {
            this.calibrateParams = res.data
          }
          this.calibrateParamsLoading = false
        })
      } catch (e) {
        this.calibrateParamsLoading = false
      }
    },
    // æ ¡å‡†é¡¹ç›®ç»´æŠ¤
    calibrationMaintenance() {
      this.dialogVisible0 = true
      this.getXmsg();
    },
    addCalibrate() {
      this.$refs['form0'].validate((valid) => {
        if (valid) {
          // ä¿å­˜
          this.calibrateParamsLoading = true
          this.addCalibrateLoading = true
          this.form0.deviceId = this.clickNodeVal.value;
          this.form0.createdBy = this.nickName;
          this.form0.type = 'examine'
          saveOrUpdateDeviceMetric(this.form0).then(res => {
            if (res.code == 200) {
              this.$message.success('保存成功')
              this.$refs['form0'].resetFields()
              this.getXmsg() // åˆ·æ–°è®¾å¤‡æ ¡å‡†å‚数表格
            }
            this.calibrateParamsLoading = false
            this.addCalibrateLoading = false
          })
        } else {
          this.addCalibrateLoading = false
          this.$message.warning('有必填项未填');
        }
      })
    },
    // æŸ¥è¯¢è®¾å¤‡æ ¸æŸ¥åˆ—表
    getTableList(deviceId) {
      deviceMetricRecordPage({deviceId: deviceId, size: this.search.size, current: this.search.current, type: 'examine'}).then(res => {
        this.tableData = res.data.records
        this.search.total = res.data.total
      })
    },
    // æäº¤è¦æ·»åŠ çš„记录
    addRecord() {
      this.$refs['calibrationRecord'].validate((valid) => {
        if (valid) {
          try {
            if (this.calibrateParams.some(m => m.isCalibration === undefined)) {
              this.$message.error('请选择是否核查')
              return
            }
            if (!this.calibrateParams.every(m => m.result !== undefined)) {
              this.$message.error('请选择判定结果')
              return
            }
            this.addRecordLoading = true
            this.calibrationRecord.deviceId = this.clickNodeVal.value;
            this.calibrationRecord.createUser = this.nickName
            this.calibrationRecord.deviceMetricsCopyList = this.calibrateParams
            this.calibrationRecord.deviceMetricsCopyList.forEach(ele => {
              delete ele.creationTime
            })
            this.calibrationRecord.type = 'examine'
            addOrUpdateDeviceMetricRecord(this.calibrationRecord).then(res => {
              if (res.code == 200) {
                this.$message.success('添加成功')
                this.dialogVisible1 = false
                this.getTableList(this.clickNodeVal.value)
              }
              this.addRecordLoading = false
            })
          } catch (e) {
            console.log('addRecord---', e)
            this.addRecordLoading = false
          }
        } else {
          this.$message.warning('有必填项未填');
        }
      })
    },
    handleClose(done) {
      this. calibrationRecord = {
        unitOfMeasure: '', // æ ¸æŸ¥äºº
        calibrationDate: '', // æ ¸æŸ¥æ—¥æœŸ
        nextCalibrationDate: '', // ä¸‹æ¬¡æ ¸æŸ¥æ—¥æœŸ
        calculatingApparatus: '', // æ ¸æŸ¥å™¨å…·
        standardRange: '', // æ ¸æŸ¥æ ‡å‡†é‡ç¨‹
        calibrationStandardUncertainty: '', // æ ¸æŸ¥æ ‡å‡†ä¸ç¡®å®šåº¦
        byDocument: '', // æ ¸æŸ¥æŒ‡å¯¼ä¹¦
        certificateSerialNumber: '', // æ£€æŸ¥æŠ¥å‘ŠæŒ‡å¯¼ä¹¦
        fileName: '', // é™„件
        status: '', // æ ¸æŸ¥æ€»ç»“论
        remark: '', // å¤‡æ³¨
      }
      this.dialogVisible1 = false
    },
    resetcalibrationRecord() {
      this.$refs.calibrationRecord.resetFields()
    },
    // é™„件上传
    handleSuccessUp(response, file) {
      if (response.code == 200) {
        // åœ¨ä¿å­˜èµ‹å€¼æ–°æ–‡ä»¶
        this.calibrationRecord.fileName = file.name
        this.calibrationRecord.systemFileName = response.data
        this.upLoading = false;
      } else {
        this.$message.error(response.message)
      }
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        this.upLoading = true;
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    deleteFile() {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCNASFile({fileName: this.form.systemFileName}).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // end
    handleAttachmentClick(row) {
      this.$download.saveAs(row.systemFileName, row.fileName)
    },
    // æ·»åŠ æ ¸æŸ¥è®°å½•
    add(type) {
      this.operationType = type
      this.dialogVisible1 = true
      this.getXmsg()
    },
    // æŸ¥çœ‹è¯¦æƒ…
    handleViewClick(type, row) {
      showDeviceMetricsCopy({id: row.id, type: 'examine'}).then(res => {
        this.calibrateParams = res.data
      })
      this.calibrationRecord = { ...row }
      this.operationType = type
      this.dialogVisible1 = true
    },

    // è¡¨æ ¼åˆ é™¤æ“ä½œ
    handleDeleteClick(row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDeviceMetricRecord({id: row.id}).then(res => {
          this.getTableList(this.clickNodeVal.value) // èŽ·å–设备校准列表数据
          this.$message.success('删除成功！')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDeviceMetrics({id: row.id}).then(res => {
          this.getXmsg();
          this.$message.success('删除成功！')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    downLoadPost() {
      this.outLoading = true
      deviceMetricRecordExport({deviceId: this.clickNodeVal.value}).then(res => {
        this.outLoading = false
        const blob = new Blob([res],{ type: 'application/msword' });
        this.$download.saveAs(blob, '设备核查.xlsx')
      })
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getTableList(newVal.value);
      }
    },
  }
}

function downloadImage(url, name) {
  const link = document.createElement('a');
  link.href = url;
  link.download = name; // æ–‡ä»¶å
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
</script>
<style scoped>
.dialog-content {
  max-height: 70vh;
  /* è®¾ç½®æœ€å¤§é«˜åº¦ */
  overflow-y: auto;
  /* å¯ç”¨åž‚直滚动 */
}

.tables {
  width: 100%;
  height: calc(100vh - 230px);
}

.search {
  background-color: #fff;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
}

.search_thing {
  display: flex;
  align-items: center;
  height: 40px;
}

.search_label {
  width: 70px;
  font-size: 14px;
  text-align: right;
  margin-right: 10px;
}

.search_input {
  width: calc(100% - 110px);
}

.btns {
  text-align: right;
  margin-top: 10px;
}

h4 {
  font-weight: 400;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

h4 .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.check {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.check_thing {
  flex: 0 0 calc(20% - 10px);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.check_label {
  font-size: 14px;
  margin-bottom: 5px;
}

.check_data .check_input {
  width: 100%;
}

.el-table {
  font-size: 14px;
  color: #333;
}

.el-table thead {
  background-color: #f5f5f5;
}
</style>

 src/views/CNAS/resourceDemand/device/component/device-overview.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,386 @@
<!-- è®¾å¤‡æ€»è§ˆ -->
<style scoped>
.title {
  height: 60px;
  line-height: 60px;
}

.search {
  background-color: #fff;
  height: 50px;
  display: flex;
  align-items: center;
}

.search_thing {
  width: 350px;
  display: flex;
  align-items: center;
}

.search_label {
  width: 110px;
  font-size: 14px;
  text-align: left;
}

.search_input {
  width: calc(100% - 110px);
}

.table {
  background-color: #fff;
  width: calc(100% - 40px);
  height: calc(100vh - 17em);
  /* padding: 10px; */
  overflow-y: auto;
}

.card {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, 380px);
  justify-content: start;
  grid-gap: 16px;
  min-height: 300px;
}

.card li {
  width: 380px;
  height: 165px;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #EEEEEE;
  margin: 0 !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 16px;
  font-size: 14px;
  color: #666666;
  position: relative;
  overflow: hidden;
}

.card li .img {
  width: 114px;
  height: 114px;
  border-radius: 16px;
  margin-right: 24px;
}

.list-left .list-left-info {
  line-height: 36px;
  display: flex;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.circles {
  position: absolute;
  width: 70px;
  height: 70px;
  right: 0;
  top: 0;
  z-index: 0;
}

.circles .circle {
  border-radius: 50%;
  opacity: 0.2;
}

.circle0,
.circle1,
.circle2 {
  width: 60px;
  height: 60px;
  position: absolute;
}

.circle3 {
  width: 16px;
  height: 16px;
  position: absolute;
}

.circle0 {
  bottom: 6px;
  left: 0;
}

.circle1 {
  bottom: 0;
  right: -30px;
}

.circle2 {
  left: 0;
  top: -30px;
}

.circle3 {
  top: 0;
  right: 0;
}

.success .circle {
  background: #34BD66;
}

.danger .circle {
  background: #FF3838;
}

.warning .circle {
  background: #FBB247;
}
.info .circle {
  background: #909399;
}
</style>

<template>
  <div class="role_manage">
    <div style="margin-top: 10px">
      <el-form :model="entity" inline label-position="right">
        <el-form-item label="状态:">
          <el-select v-model="entity.deviceStatus" placeholder="全部" size="small" clearable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称:">
          <el-input size="small" placeholder="请输入" clearable v-model="entity.deviceName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="refresh()">重 ç½®</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary"
          @click="currentPage = 1, keyMap = {}, list = [], finishLoding = false, refreshTable()">查 è¯¢</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table" v-loading="loading">
      <scroll-pagination @load="refreshTable()" :finishLoding="finishLoding" :list="list"
        v-if="list.length > 0 || loading">
        <ul class="card">
          <li v-for="(m, i) in list" :key="i">
            <el-image class="img" :src="javaApi + '/img/' + m.imageUpload">
              <div slot="error" class="image-error" style="width: 112px;
            height: 112px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #EEEEEE;">
                <i class="el-icon-picture-outline" style="font-size:30px;color:#666666;"></i>
              </div>
            </el-image>
            <div class="list-left">
              <div class="list-left-info">
                <span class="label">设备名称：</span>
                <span style="color:#3A7BFA;
              font-size: 16px;
              display: inline-block;
              width: 129px;
              word-break: break-all;" class="text-truncate" :title="m.deviceName">{{ m.deviceName ? m.deviceName : '无' }}</span>
              </div>
              <div class="list-left-info">
                <span class="label">规格型号：</span>
                <span style="color:#333333;font-size: 16px;">{{ m.specificationModel ? m.specificationModel : '无'
                  }}</span>
              </div>
              <div class="list-left-info">
                <span class="label">状态：</span>
                <el-tag :type="m.type" v-if="m.deviceStatusName">{{ m.deviceStatusName }}</el-tag>
                <span v-else style="color:#333333;font-size: 16px;">无</span>
              </div>
            </div>
            <div class="circles" :class="m.type">
              <div class="circle0 circle"></div>
              <div class="circle1 circle"></div>
              <div class="circle2 circle"></div>
              <div class="circle3 circle"></div>
            </div>
          </li>
        </ul>
      </scroll-pagination>
      <div v-if="list.length < 1 && !loading" style="color:#909399;font-size:14px;text-align: center;margin-top:200px">
        æš‚无数据
      </div>
    </div>
  </div>
</template>

<script>
import ScrollPagination from '@/components/index/scroll-paging.vue'
import {selectDeviceParameter} from "@/api/cnas/resourceDemand/device";
export default {
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    ScrollPagination
  },
  data() {
    return {
      entity: {
        deviceStatus: null,
        deviceName: null,
      },
      options: [],
      list: [],
      currentPage: 1, // å½“前页
      pageSize: 16, // ä¸€é¡µ16条
      total: '',
      loading: true, // ç»„件loading的展示,默认为true
      finishLoding: false, // åŠ è½½å®Œæˆï¼Œæ˜¾ç¤ºå·²ç»æ²¡æœ‰æ›´å¤šäº†
      keyMap: {},
      laboratoryNameIsNull: false,
    }
  },
  created() {
    this.selectEnumByCategory()
    this.keyMap = {};
    this.currentPage = 1;
    this.list = [];
    this.clickSidebar(this.clickNodeVal)
  },
  methods: {
    refreshTable() {
      const key = `_${this.currentPage}`
      const value = this.keyMap[key]
      // å¦‚æžœvalue存在，表示缓存有值，那么阻止请求
      if (value) {
        return
      }
      // value不存在，表示第一次请求,设置占位
      this.keyMap[key] = 'temp'
      if (this.currentPage == 1) {
        this.loading = true
      }
      if(this.list.length==0){
          this.finishLoding = false;
      }
      selectDeviceParameter({
        laboratoryNameIsNull: this.laboratoryNameIsNull,
        current: this.currentPage,
        size: this.pageSize,
        ...this.entity
      }).then(res => {
        if (res.code == 200) {
          this.total = res.data.total
          let list = res.data.records.map(m => {
            switch (m.deviceStatus) {
              case 0:
                // æ­£å¸¸
                m.type = 'success'
                break;
              case 1:
                // ç»´ä¿®
                m.type = 'warning'
                break;
              case 2:
                // åœç”¨
                m.type = 'danger'
                break;
              case 3:
                // æŠ¥åºŸ
                m.type = 'info'
                break;
            }
            this.options.forEach(j => {
              if (m.deviceStatus == j.value) {
                m.deviceStatusName = j.label
              }
            })
            return m;
          })
          if (list.length == 0) {
            this.finishLoding = true;
          } else {
            if (list.length < this.pageSize) {
              this.finishLoding = true;
            }
            this.list = this.list.concat(list)
            if (this.total == this.list.length) {
              this.finishLoding = true;
            }
            this.currentPage++;
          }
        }
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    refresh() {
      this.keyMap = {};
      this.currentPage = 1;
      this.list = [];
      this.finishLoding = false;
      this.entity = {
        deviceStatus: null,
        deviceName: null,
        orderBy: { field: "id", order: "asc" }
      };
      this.refreshTable()
    },
    // èŽ·å–å­—å…¸
    selectEnumByCategory() {
      // è®¾å¤‡çŠ¶æ€
      this.getDicts("device_status").then((response) => {
        this.options = this.dictToValue(response.data);
      });
    },
    // ç‚¹å‡»ä¾§è¾¹æ åˆ·æ–°
    clickSidebar(clickNodeVal) {
      this.laboratoryNameIsNull = false
      // æ˜¯å¦å­˜åœ¨value，存在value代表为三级
      if (!clickNodeVal.value) {
        this.finishLoding = false;
        this.keyMap = {};
        this.currentPage = 1;
        this.list = [];
        this.entity.laboratoryName = null
        this.entity.storagePoint = null
        // ç­‰äºŽ1代表为树的一级，label为部门
        if (clickNodeVal.label == '其他') {
          this.laboratoryNameIsNull = true
          this.refreshTable();
          return
        }
        if (clickNodeVal.level == 1) {
          this.entity.laboratoryName = clickNodeVal.label
          // ç­‰äºŽäºŒçº§ã€‚label为存储地点
        } else if (clickNodeVal.level == 2) {
          // å…¶ä»–表示没有配置实验室，只配置了地点
          if (clickNodeVal.parent.label == '其他') {
            this.laboratoryNameIsNull = true
          } else {
            this.entity.laboratoryName = clickNodeVal.parent.label
          }
          this.entity.storagePoint = clickNodeVal.label
        }
        this.refreshTable();
      }
    }
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      this.clickSidebar(newVal)
    }
  }
}
</script>

 src/views/CNAS/resourceDemand/device/component/equipmentAcceptance.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,317 @@
<template>
  <div>
    <div>
      <div style="margin: 10px 0;text-align: right">
        <el-button size="small" type="primary" @click="handleForm('add')">新增</el-button>
      </div>
      <div>
        <el-table ref="yearTable" v-loading="yearTableDetailDataLoading" :data="yearTableDetailData"
          height="calc(100vh - 18em)" style="width: 100% ;">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index"
            width="70"></el-table-column>
          <el-table-column label="到货日期" min-width="150" prop="arrivalDate"></el-table-column>
          <el-table-column label="金额" min-width="100" prop="goldAmount"></el-table-column>
          <el-table-column label="维修单位" min-width="150" prop="maintenanceunit"></el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column align="center" label="操作" min-width="180">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="handleForm('edit', scope.row.acceptanceId)">编辑</el-button>
              <el-button size="small" type="text" @click="handleForm('view', scope.row.acceptanceId)">查看</el-button>
              <el-button size="small" type="text" @click="record(scope.row)">附件</el-button>
              <el-button size="small" type="text" @click="handleDownOne(scope.row.acceptanceId)">导出</el-button>
              <el-button size="small" style="color: #f56c6c" type="text"
                @click="deleteFun(scope.row.acceptanceId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
        </el-pagination>
      </div>
    </div>
    <acceptance-form v-if="applicationForm" ref="applicationForm" @closeDialog="closeDialog"></acceptance-form>
    <!--上传报告-->
    <el-dialog :visible.sync="filesDialogVisible" title="附件" width="80%" @closed="closeFilesLook">
      <div style="display: flex;justify-content: space-between;">
        <el-upload ref='upload' :action="fileAction" :auto-upload="true" :before-upload="fileBeforeUpload"
          :data="{ acceptanceId: acceptanceId }" :headers="uploadHeader" :on-error="onError"
          :on-success="handleSuccessUp" :show-file-list="false"
          accept='.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar' style="width: 80px !important;">
          <el-button size="small" style="height: 38px" type="primary">附件上传</el-button>
        </el-upload>
      </div>
      <div>
        <limsTable ref="yearTable" :column="columnData" :height="'calc(100vh - 30em)'" :highlightCurrentRow="true"
          :table-data="tableData" :table-loading="tableLoading" style="margin-top: 0.5em;" :page="pagination1">
        </limsTable>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="lookDialogVisible" fullscreen title="查看附件" top="5vh" width="800px">
      <filePreview v-if="lookDialogVisible" :currentFile="{}" :fileUrl="fileUrl"
        style="height: 90vh;overflow-y: auto;" />
    </el-dialog>
  </div>
</template>

<script>
import AcceptanceForm from "./acceptanceForm.vue";
import limsTable from "@/components/Table/lims-table.vue";
import filePreview from "@/components/Preview/filePreview.vue";
import {
  pageDeviceAcceptance,
  getDeviceAcceptanceFileList,
  delDeviceAcceptanceFileList,
  exportDeviceAcceptance,
  delDeviceAcceptance,
} from '@/api/cnas/resourceDemand/device.js'
export default {
  name: "equipment-acceptance",
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: { filePreview, limsTable, AcceptanceForm },
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      pagination1: {
        size: 10,
        current: 1,
        total: 0,
      },
      yearTableDetailDataLoading: false,
      yearTableDetailData: [],
      applicationForm: false,
      filesDialogVisible: false,
      columnData: [
        {
          label: '文件名称',
          prop: 'fileName',
          minWidth: '150px'
        },
        {
          dataType: 'action',
          minWidth: '100',
          label: '操作',
          fixed: 'right',
          operation: [
            {
              name: '预览',
              type: 'text',
              clickFun: (row) => {
                this.handleLook(row)
              }
            },
            {
              name: '下载',
              type: 'text',
              clickFun: (row) => {
                this.upload(row)
              }
            },
            {
              name: '删除',
              type: 'text',
              color: '#f56c6c',
              clickFun: (row) => {
                this.delete(row)
              }
            }
          ]
        }
      ],
      tableData: [],
      tableLoading: false,
      acceptanceId: '', // ä¸Šä¼ é™„件当前行的id
      currentInfo: {},
      lookDialogVisible: false,
      fileUrl: ''
    }
  },
  mounted() {
    this.getYearTableDetailData(this.clickNodeVal.value)
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢
    getYearTableDetailData(deviceId) {
      this.yearTableDetailDataLoading = true
      pageDeviceAcceptance({
        current: this.pagination1.current,
        size: this.pagination1.size,
        deviceId: deviceId,
      }).then(res => {
        if (res.code == 200) {
          this.yearTableDetailData = res.data.records
          this.pagination1.total = res.data.total
        }
        this.yearTableDetailDataLoading = false
      }).catch(err => {
        this.yearTableDetailDataLoading = false
      })
    },
    handleForm(type, id) {
      this.applicationForm = true
      this.$nextTick(() => {
        this.$refs.applicationForm.openDialog(type, id, this.clickNodeVal.value)
      })
    },
    closeDialog() {
      this.applicationForm = false
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // æ‰“开报告弹框
    record(row) {
      this.filesDialogVisible = true
      this.acceptanceId = row.acceptanceId
      this.searchTableList()
    },
    // æŸ¥è¯¢é™„件列表
    searchTableList() {
      this.tableLoading = true
      getDeviceAcceptanceFileList({ acceptanceId: this.acceptanceId }).then(res => {
        this.tableLoading = false
        this.tableData = res.data
      }).catch(err => {
        this.tableLoading = false
        console.log('err---', err);
      })
    },
    // æŸ¥çœ‹æ–‡ä»¶
    handleLook(row) {
      this.currentInfo = row
      this.lookDialogVisible = true
      const state = /\.(jpg|jpeg|png|gif)$/i.test(this.currentInfo.fileUrl)
      if (state) {
        this.fileUrl = this.javaApi + '/img/' + this.currentInfo.fileUrl
      } else {
        this.fileUrl = this.javaApi + '/word/' + this.currentInfo.fileUrl
      }
    },
    // ä¸‹è½½
    upload(row) {
      this.$download.saveAs(row.fileUrl, row.fileName)
    },
    // åˆ é™¤
    delete(row) {
      this.$confirm('此操作将删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true
        delDeviceAcceptanceFileList({ acceptanceFileId: row.acceptanceFileId }).then(res => {
          this.tableLoading = false
          this.$message.success('删除成功')
          this.searchTableList()
        }).catch(err => {
          this.tableLoading = false
          console.log('err---', err);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // ä¸Šä¼ é™„件
    fileBeforeUpload(file) {
      let flag = true
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        flag = false
      }
      if (!flag) {
        return Promise.reject(flag); //正确的终止
      }
    },
    onError(err, file, fileList, type) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    handleSuccessUp(response,) {
      this.upLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功');
        this.searchTableList()
      }
    },
    closeFilesLook() {
      this.filesDialogVisible = false
    },
    // åˆ†é¡µ
    handleSizeChange1(val) {
      this.pagination1.size = val
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // åˆ†é¡µ
    handleCurrentChange1(val) {
      this.pagination1.current = val
      this.getYearTableDetailData(this.clickNodeVal.value)
    },
    // å¯¼å‡º
    handleDownOne(id) {
      this.outLoading = true
      exportDeviceAcceptance({ acceptanceId: id }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        this.$download.saveAs(blob, '设备验收.doc')
      })
    },
    // åˆ é™¤
    deleteFun(id) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDeviceAcceptance({ acceptanceId: id }).then(res => {
          this.$message.success('删除成功！');
          this.getYearTableDetailData(this.clickNodeVal.value);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getYearTableDetailData(newVal.value);
      }
    },
  },
  computed: {
    fileAction() {
      return this.javaApi + '/deviceAcceptance/uploadDeviceAcceptanceFile'

    }
  },
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-search {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>

 src/views/CNAS/resourceDemand/device/component/fault.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,701 @@
<!-- è®¾å¤‡æ•…éšœ -->
<template>
  <div>
    <div class="search">
      <div class="search_thing">
        <div class="search_label">流程编号：</div>
        <div>
          <el-input size="small" placeholder="请输入" clearable v-model="search.processNumber" style="width: 100%;"
            @keyup.enter.native="getTableList(clickNodeVal.value)">
          </el-input>
        </div>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" @click="resetSearch">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="getTableList(clickNodeVal.value)">查 è¯¢</el-button>
      </div>
      <div class="btns">
        <el-button size="small" type="primary" @click="dialogVisible = true, addRecode()">新建</el-button>
        <el-button size="small" type="primary" @click="handleDown" :loading="outLoading">导出</el-button>
      </div>
    </div>
    <div>
      <div class="tables" style="margin-top: 16px;">
        <el-table :data="faultParam" style="width: 100%" height="calc(100vh - 20em)">
          <!-- è¡¨æ ¼åˆ— -->
          <el-table-column header-align="center" align="center" width="70" prop="prop" label="序号"
            type="index"></el-table-column>
          <el-table-column prop="processNumber" label="流程编号" min-width="180"></el-table-column>
          <el-table-column prop="deviceName" label="设备名称" min-width="150"></el-table-column>
          <el-table-column prop="managementNumber" label="统一编号" min-width="150"></el-table-column>
          <el-table-column prop="faultSituation" label="故障情况" min-width="130"></el-table-column>
          <el-table-column prop="submitPerson" label="提交人" min-width="130"></el-table-column>
          <el-table-column prop="createTime" label="提交日期" min-width="150"></el-table-column>
          <el-table-column prop="currentState" label="当前状态" min-width="130"></el-table-column>
          <el-table-column prop="currentResponsible" label="当前责任人" width="180"></el-table-column>
          <!-- æ“ä½œæŒ‰é’® -->
          <el-table-column label="操作" fixed="right" min-width="150">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="showDetailsDialog(scope.row)">查看详情</el-button>
              <el-button type="text" size="small" @click="handleDeleteClick(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
          style="margin-right: 5%;" :page-sizes="[10, 20, 30, 50, 100]" :page-size="search.size"
          layout="->,total, sizes, prev, pager, next, jumper" :total="search.total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="新增维修记录" top="5vh" :visible.sync="dialogVisible" width="60%" @open="openRecordAcceptance"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step v-for="(v, i) in steps" style="cursor:pointer" :title="v" :key="i"
          @click.native="choiceStep(i)"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" label-position="right" label-width="120px">
        <!-- æäº¤ -->
        <div v-show="currentStepClick == 0">
          <el-card style="margin-top: 1em;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="流程编号:">
                  <el-input v-model="form.processNumber" size="small" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备名称:">
                  <el-input v-model="form.deviceName" size="small" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规格型号:">
                  <el-input v-model="form.specificationModel" size="small" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备编号:">
                  <el-input v-model="form.managementNumber" size="small" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="准确度量值:" prop="measureOfAccuracy"
                  :rules="[{ required: currentStep === 0, message: '请输入准确度量值', trigger: 'blur' }]">
                  <el-input v-model="form.measureOfAccuracy" size="small" :disabled="currentStep !== 0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="故障日期:" prop="faultDate">
                  <el-date-picker v-model="form.faultDate" type="date" placeholder="选择日期" size="small"
                    format="yyyy-MM-dd" style="width: 100%" value-format="yyyy-MM-dd" :disabled="currentStep !== 0">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="要求修复日期:" prop="requestRepairDate">
                  <el-date-picker v-model="form.requestRepairDate" :picker-options="{ disabledDate: this.disabledDate }"
                    type="date" placeholder="选择日期" size="small" format="yyyy-MM-dd" style="width: 100%"
                    value-format="yyyy-MM-dd" :disabled="currentStep !== 0">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="故障情况:" prop="faultSituation"
                  :rules="[{ required: currentStep === 0, message: '请输入故障情况', trigger: 'blur' }]">
                  <el-input v-model="form.faultSituation" type="textarea" size="small"
                    :disabled="currentStep !== 0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="相关附件:">
                  <el-input v-model="form.fileName" :disabled="true" size="small" style="width: 80%;">
                    <el-button slot="append" icon="el-icon-delete-solid" @click="deleteFile"
                      :disabled="currentStep !== 0"></el-button>
                  </el-input>
                  <el-upload ref="upload" style="float: right;" :action="action" :show-file-list="false"
                    :on-success="handleSuccess">
                    <el-button style="position: relative;top: -4px;" class="uploadFile" slot="trigger" size="small"
                      type="primary" :disabled="currentStep !== 0">附件上传
                    </el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下环节负责人:" prop="submitNextPesponsible"
                  :rules="[{ required: currentStep === 0, message: '请输入下环节负责人', trigger: 'change' }]">
                  <el-select v-model="form.submitNextPesponsible" placeholder="请选择下环节负责人" size="small"
                    style="width: 100%" :disabled="currentStep !== 0">
                    <el-option v-for="(v, i) in users" :label="v.name" :value="v.name" :key="i"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.submitOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.submitDate }}
            </el-col>
          </el-row>
        </div>
        <!-- è®¾å¤‡ç®¡ç†å‘˜æ„è§ -->
        <div v-show="currentStepClick == 1">
          <el-card style="margin-top: 1em; height: 45vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="维修方式及费用:" prop="methodCost"
                  :rules="[{ required: currentStep === 1, message: '请输入维修方式及费用', trigger: 'blur' }]">
                  <el-input v-model="form.methodCost" type="textarea" size="small"
                    :disabled="currentStep !== 1"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="审核意见:" prop="adminAuditOption"
                  :rules="[{ required: currentStep === 1, message: '请输入审核意见', trigger: 'blur' }]">
                  <el-input v-model="form.adminAuditOption" type="textarea" size="small"
                    :disabled="currentStep !== 1"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下环节负责人:" prop="adminNextPesponsible"
                  :rules="[{ required: currentStep === 1, message: '请输入下环节负责人', trigger: 'change' }]">
                  <el-select v-model="form.adminNextPesponsible" placeholder="请选择下环节负责人" size="small"
                    style="width: 100%" :disabled="currentStep !== 1">
                    <el-option v-for="(v, i) in users" :label="v.name" :value="v.name" :key="i"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.adminOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.adminDate }}
            </el-col>
          </el-row>
        </div>
        <!-- æŠ€æœ¯è´Ÿè´£äººæ„è§ -->
        <div v-show="currentStepClick == 2">
          <el-card style="margin-top: 1em; height: 45vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="审核意见:" prop="technicalAuditOption"
                  :rules="[{ required: currentStep === 2, message: '请输入审核意见', trigger: 'blur' }]">
                  <el-input v-model="form.technicalAuditOption" type="textarea" size="small"
                    :disabled="currentStep !== 2"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下环节负责人:" prop="technicalNextPesponsible"
                  :rules="[{ required: currentStep === 2, message: '请输入下环节负责人', trigger: 'change' }]">
                  <el-select v-model="form.technicalNextPesponsible" placeholder="请选择下环节负责人" size="small"
                    style="width: 100%" :disabled="currentStep !== 2">
                    <el-option v-for="(v, i) in users" :label="v.name" :value="v.name" :key="i"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.technicalOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.technicalDate }}
            </el-col>
          </el-row>
        </div>
        <!-- ç»´ä¿®æƒ…况记录 -->
        <div v-show="currentStepClick == 3">
          <el-card style="margin-top: 1em; height: 45vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="维修情况:" prop="maintainSituation"
                  :rules="[{ required: currentStep === 3, message: '请输入维修情况', trigger: 'blur' }]">
                  <el-input v-model="form.maintainSituation" type="textarea" size="small"
                    :disabled="currentStep !== 3"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下环节负责人:" prop="maintainNextPesponsible"
                  :rules="[{ required: currentStep === 3, message: '请输入下环节负责人', trigger: 'change' }]">
                  <el-select v-model="form.maintainNextPesponsible" placeholder="请选择下环节负责人" size="small"
                    style="width: 100%" :disabled="currentStep !== 3">
                    <el-option v-for="(v, i) in users" :label="v.name" :value="v.name" :key="i"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.maintainOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.maintainDate }}
            </el-col>
          </el-row>
        </div>
        <!-- ç»´ä¿®åŽçš„确认 -->
        <div v-show="currentStepClick == 4">
          <el-card style="margin-top: 1em; height: 45vh; overflow-y: scroll;">
            <el-row>
              <el-col :span="24">
                <el-form-item label="验收、确认、校准情况:" prop="checkCalSituation" label-width="200"
                  :rules="[{ required: currentStep === 4, message: '请输入验收、确认、校准情况', trigger: 'blur' }]">
                  <el-input v-model="form.checkCalSituation" type="textarea" size="small" style="width: 100%"
                    :disabled="currentStep !== 4"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.afterMaintenanceOperatingPersonnel }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.afterMaintenanceDate }}
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitForm('3reject')" v-if="currentStep !== 0 && currentStep !== 5"
          :loading="sumbitLoading1">驳回</el-button>
        <el-button @click="submitForm('2save')" v-if="currentStep === 0" :loading="sumbitLoading2">保存</el-button>
        <el-button type="primary" v-if="currentStep !== 5" @click="submitForm('1submit')" :loading="sumbitLoading3">
          {{ currentStep === 0 ? '提交' : '通过' }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from '@/utils/date'
import { mapGetters } from "vuex";
import {
  addOrUpdateDeviceFaultOne,
  deleteCNASFile, deleteDeviceFaultOne,
  deviceFaultOnePage, exportRewardAndPunishmentRecords,
  selectDeviceByCode
} from "@/api/cnas/resourceDemand/device";
import {selectUserCondition} from "@/api/system/user";
export default {
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      search: {
        size: 20,
        current: 1,
        total: 0,
        processNumber: ''
      },
      users: [],
      currentStep: 0,
      currentStepClick: 0,
      steps: ['提交', '设备管理员意见', '技术负责人意见', '维修情况记录', '维修后的确认'],
      outLoading: false,
      form: {},
      faultParam: [],
      dialogVisible: false,
      sumbitLoading1: false,
      sumbitLoading2: false,
      sumbitLoading3: false,
    }
  },
  computed: {
    ...mapGetters(["nickName"]),
    action() {
      return this.javaApi + '/personBasicInfo/saveCNASFile'
    }
  },
  mounted() {
    this.getTableList(this.clickNodeVal.value)
  },
  methods: {
    //要求修复日期:禁用在故障日期前的日期
    disabledDate(time) {
      let selectDate = this.form.faultDate
      if (selectDate) {
        let selectTime = new Date(selectDate).getTime() - 28800000
        return time < selectTime
      }
      return false
    },
    //提交表单
    async submitForm(saveState) {
      let currentStepAction;
      // è®¾ç½®è¯¥æ“ä½œåˆ¤æ–­æ˜¯å¦ä¸ºæäº¤ï¼Œä¿å­˜ï¼Œé©³å›žï¼Œé€šè¿‡ å¼€å¯loding
      switch (saveState) {
        // æäº¤ï¼Œé€šè¿‡
        case '1submit':
          currentStepAction = this.currentStep + 1
          this.sumbitLoading1 = true
          break
        // ä¿å­˜
        case '2save':
          currentStepAction = this.currentStep
          this.sumbitLoading2 = true
          break
        // é©³å›ž
        case '3reject':
          currentStepAction = this.currentStep - 1
          this.sumbitLoading3 = true
          break
        default:
          break
      }
      this.$refs.form.validate((valid) => {
        if (valid === true || saveState !== '1submit') {
          // ç»™å½“前环节设置创建人与时间
          const dateTime = dateFormat(new Date())
          // èŽ·å–当前环节操作人与日期
          switch (this.currentStep) {
            case 0:
              this.form.submitUser = this.nickName
              this.form.submitOperatingPersonnel = this.nickName
              this.form.submitDate = dateTime
              break
            case 1:
              this.form.adminOperatingPersonnel = this.nickName
              this.form.adminDate = dateTime
              break
            case 2:
              this.form.technicalOperatingPersonnel = this.nickName
              this.form.technicalDate = dateTime
              break
            case 3:
              this.form.maintainOperatingPersonnel = this.nickName
              this.form.maintainDate = dateTime
              break
            case 4:
              this.form.afterMaintenanceOperatingPersonnel = this.nickName
              this.form.afterMaintenanceDate = dateTime
              break
            default:
              break
          }
          // èŽ·å–当前环节负责人
          switch (saveState === '3reject' ? this.currentStep - 1 : this.currentStep) {
            case 0:
              this.form.currentResponsible = this.form.submitOperatingPersonnel
              break
            case 1:
              this.form.currentResponsible = this.form.departmentOperatingPersonnel
              break
            case 2:
              this.form.currentResponsible = this.form.measuringRoomOperatingPersonnel
              break
            case 3:
              this.form.currentResponsible = this.form.approvalOperatingPersonnel
              break
            default:
              break
          }
          // èŽ·å–当前状态
          this.form.currentState = currentStepAction === 5 ? '关闭' : this.steps[currentStepAction]
          this.form.deviceId = this.clickNodeVal.value
          addOrUpdateDeviceFaultOne(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success('提交成功')
              this.getTableList(this.clickNodeVal.value)
              this.dialogVisible = false
            }
            this.closeLoading()
          })
        } else {
          let step = this.steps[this.currentStep]
          this.$message.warning(step + '  æµç¨‹ä¸­æœ‰å¿…填项未填！');
          this.closeLoading()
        }
      });
    },
    closeLoading() {
      this.sumbitLoading1 = false
      this.sumbitLoading2 = false
      this.sumbitLoading3 = false
    },
    openRecordAcceptance() {
      // èŽ·å–设备基础信息
      selectDeviceByCode({id: this.clickNodeVal.value}).then(res => {
        this.form.deviceName = res.data.deviceName
        this.form.manufacturer = res.data.manufacturer
        this.form.specificationModel = res.data.specificationModel
        this.form.managementNumber = res.data.managementNumber
      });
      // èŽ·å–负责人信息
      this.getUserList()
    },
    // èŽ·å–负责人信息接口
    getUserList() {
      selectUserCondition().then((res) => {
        this.users = res.data;
      });
    },
    handleSizeChange(val) {
      this.search.size = val
      this.getTableList(this.clickNodeVal.value);
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.getTableList(this.clickNodeVal.value);
    },
    deleteFile() {
      this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCNASFile({fileName: this.form.systemFileName}).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    choiceStep(index) {
      this.currentStepClick = index
    },
    //文档
    handleSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.form.fileName = response.data
        this.$message.success('上传成功')
      } else {
        this.$message.error(response.msg)
      }
    },
    onError(error, file, fileList) {
      // æ–‡ä»¶ä¸Šä¼ å¤±è´¥æ—¶çš„处理逻辑
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        return true;
      }
    },
    resetSearch() {
      this.search = {
        size: 20,
        current: 1,
        total: 0,
        processNumber: '',
      }
      this.getTableList(this.clickNodeVal.value);
    },
    //获取所有信息
    getTableList(deviceId) {
      const params = {
        deviceId: deviceId,
        size: this.search.size,
        current: this.search.current,
        processNumber: this.search.processNumber,
      }
      deviceFaultOnePage(params).then(res => {
        if (res.code == 200) {
          this.faultParam = res.data.records
          this.search.total = res.data.total
        }
      })
    },
    //导出
    handleDown() {
      this.outLoading = true
      exportRewardAndPunishmentRecords({deviceId: this.clickNodeVal.value}).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        this.$dowmload.saveAs(blob, '设备故障表.xlsx')
      })
    },
    selectAllByOne(row) {
      this.dialogVisible = true;
      this.formData = this.HaveJson(row);
    },
    //添加记录按钮
    addRecode() {
      this.currentStep = 0;
      this.currentStepClick = 0;
    },
    //查看详情
    showDetailsDialog(row) {
      this.form = { ...row }
      this.currentStep = this.steps.indexOf(this.form.currentState) === -1 ? 5 : this.steps.indexOf(this.form.currentState)
      this.currentStepClick = this.currentStep === 5 ? 0 : this.currentStep
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.dialogVisible = true
    },
    //删除操作
    handleDeleteClick(index, row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDeviceFaultOne({id: row.id}).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getTableList(this.clickNodeVal.value)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getTableList(newVal.value);
      }
    },
    dialogVisible(newVal) {
      if (!newVal) {
        this.form = {}
        this.closeLoading()
        this.currentStep = 0 // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
        this.currentStepClick = 0 // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
        this.$refs['form'].clearValidate()
      }
    }
  }
}
</script>

<style scoped>
h4 {
  font-weight: 400;
  font-size: 16px;
  /* display: flex;
  justify-content: space-between; */
  margin: 10px 0;
}

/*
保存提交按钮样式
*/
h4 .title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h4 .title .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.tables {
  width: 100%;
  height: calc(100vh - 230px);
}

.el-from {
  max-width: 400px;
  margin: 0 auto;
}

.form-row {
  display: flex;
  justify-content: space-between;
}

.dialogBottom {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
}

.form-operation {
  display: flex;
  justify-content: center;
}

.form-item {
  display: flex;
  margin-right: 100px;
}

.label {
  margin-right: 20px;
  line-height: 40px;
}

.value {
  font-weight: normal;
  line-height: 40px;
}

.form-row .el-form-item {
  flex: 1;
  /* æ¯ä¸ªè¡¨å•é¡¹å æ®ç›¸åŒæ¯”例的空间 */
  margin-right: 100px;
  /* å¯é€‰ï¼šä¸ºå³ä¾§å…ƒç´ æ·»åŠ é—´è· */
}

.search {
  background-color: #fff;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
}

.search_thing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}

.search_label {
  width: 70px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 120px);
}

.btns {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(0, -50%);
}

.form .search_label {
  width: 120px;
}
</style>

 src/views/CNAS/resourceDemand/device/component/files.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1141 @@
<!-- è®¾å¤‡æ¡£æ¡ˆ -->
<template>
  <div class="page">
    <div class="page-header">
      <h4><span class="line"></span><span>设备档案</span></h4>
      <div class="btns">
        <el-button type="primary" size="small" @click="openEditForm" style="">修订档案</el-button>
        <el-button type="primary" size="small" @click="dialogVisible1 = true" style="">添加附件</el-button>
        <el-button type="primary" size="small" @click="deviceDialog = true" style="">查看设备二维码</el-button>
<!--        <el-button type="primary" size="small" @click="handleDownOne" style="">导出</el-button>-->
      </div>
    </div>
    <el-divider></el-divider>
    <div class="main_div">
      <el-row :gutter="20">
        <el-col :span="6">
          <!-- åŠ æ—¶é—´æˆ³é¿å…æµè§ˆå™¨ç¼“存问题 -->
          <el-image :src="`${javaApi}/img/${Mdata.imageUpload}`" fit="fill" :key="'personalPicture' + timeStamp"
                    style="width: 200px;height: 300px;border: 1px solid #000;border-radius: 10px;margin-left: 30px;margin-top: 20px;">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" style="font-size: 40px;"></i>
            </div>
          </el-image>
        </el-col>
        <el-col :span="8">
          <div class="form-item">
            <label>设备名称</label>
            <!-- <p>{{ Mdata.deviceName }}</p> -->
            <el-tooltip
              class="item"
              :content="Mdata.deviceName"
            >
              <span class="text-ellipsis" >{{ Mdata.deviceName }}</span>
            </el-tooltip>
          </div>
          <div class="form-item">
            <label>设备类型</label>
            <p>{{ Mdata.largeCategory }}</p>
          </div>

          <div class="form-item">
            <label>管理编号</label>
            <p>{{ Mdata.managementNumber }}</p>
          </div>
          <div class="form-item">
            <label>所属部门</label>
            <p>{{ Mdata.laboratoryName }}</p>
          </div>
          <div class="form-item">
            <label>生产厂家</label>
            <!-- <p>{{ Mdata.manufacturer }}</p> -->
            <el-tooltip
              class="item"
              :content="Mdata.manufacturer"
            >
              <span class="text-ellipsis" >{{ Mdata.manufacturer }}</span>
            </el-tooltip>
          </div>
          <div class="form-item">
            <label>资产编码</label>
            <p class="text-ellipsis">{{ Mdata.assetCode }}</p>
          </div>

          <div class="form-item">
            <label>出厂日期</label>
            <p>{{ Mdata.acquisitionDate | formaterDateTime }}</p>
          </div>
          <div class="form-item">
            <label>启用日期</label>
            <p>{{ Mdata.activationDate | formaterDateTime }}</p>
          </div>
          <div class="form-item">
            <label>核准周期(月)</label>
            <p>{{ Mdata.calibrationDate }}</p>
          </div>

          <div class="form-item">
            <label>报废时间</label>
            <p>{{ handleData() }}</p>
          </div>
          <div class="form-item">
            <label>准确度量值</label>
            <el-tooltip
              class="item"
              :content="Mdata.technicalIndicators"
            >
              <span class="text-ellipsis">{{ Mdata.technicalIndicators }}</span>
            </el-tooltip>
            <!-- <p>{{ Mdata.technicalIndicators }}</p> -->
          </div>
          <div class="form-item">
            <label>维修记录</label>
            <p>{{ handleData() }}</p>
          </div>
          <div class="form-item">
            <label>被授权人</label>
            <p>{{ Mdata.authorizedPersonName }}</p>
          </div>

        </el-col>
        <el-col :span="10">
          <div class="form-item">
            <label>规格型号</label>
            <p>{{ Mdata.specificationModel }}</p>
          </div>
          <!-- <div class="form-item">
          <label>细类</label>
          <p>{{ handleData() }}</p>
        </div> -->
          <div class="form-item">
            <label>出厂编号</label>
            <p>{{ Mdata.factoryNo }}</p>
          </div>
          <div class="form-items">
            <label>设备状态</label>
            <el-radio-group v-model="Mdata.deviceStatus" style="margin-left: 10px;">
              <el-radio :label="0"  :disabled="Mdata.deviceStatus != 0">正常</el-radio>
              <el-radio :label="1"  :disabled="Mdata.deviceStatus != 1">ç»´ä¿®</el-radio>
              <el-radio :label="2"  :disabled="Mdata.deviceStatus != 2">停用</el-radio>
              <el-radio :label="3"  :disabled="Mdata.deviceStatus != 3">报废</el-radio>
            </el-radio-group>
          </div>
          <div class="form-item">
            <label>存放点</label>
            <p>{{ Mdata.storagePoint }}</p>
          </div>
          <div class="form-item">
            <label>产地</label>
            <p>{{ Mdata.origin }}</p>
          </div>
          <div class="form-item">
            <label>检验项</label>
            <el-tooltip
              class="item"
              effect="dark"
              :content="Mdata.insProductItem"
              placement="top"
            >
              <span class="text-ellipsis" >{{ Mdata.insProductItem }}</span>
            </el-tooltip>
          </div>
          <div class="form-item">
            <label>购置日期</label>
            <p>{{ Mdata.acquisitionDate | formaterDateTime }}</p>
          </div>

          <div class="form-item">
            <label>最近溯源日期</label>
            <p>{{ Mdata.lastCalibrationDate | formaterDateTime }}</p>
          </div>
          <div class="form-item">
            <label>采购费用(元)</label>
            <p>{{ Mdata.unitPrice }}</p>
          </div>
          <div class="form-item">
            <label>停用时间</label>
            <p>{{ Mdata.nextCalibrationDate | formaterDateTime }}</p>
          </div>
          <div class="form-item">
            <label>设备负责人</label>
            <p>{{ Mdata.equipmentManagerName }}</p>
          </div>
          <div class="form-item">
            <label>验收记录</label>
            <p>{{ handleData() }}</p>
          </div>
          <div class="form-item">
            <label>核准证书</label>
            <p>{{ Mdata.calibrateNo }}</p>
          </div>
        </el-col>
      </el-row>
      <h4 style="margin-bottom: 10px;margin-top: 10px;"><span class="line"></span><span>附件和相关文档</span></h4>
      <el-table height="200px" :data="tableDataA">
        <el-table-column header-align="center" align="center" prop="prop" label="序号" type="index" width="60" />
        <el-table-column prop="documentType" label="类型" min-width="100">
          <template v-slot="scope">
            {{ scope.row.documentType === '0' ? '附件' : scope.row.documentType === '1' ? '文档' : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" min-width="150" />
        <el-table-column prop="number" label="编号" min-width="150" />
        <el-table-column prop="version" label="版本" min-width="80" />
        <el-table-column prop="quantity" label="份数" min-width="80" />
        <el-table-column prop="pageCount" label="页码" min-width="80" />
        <el-table-column prop="provider" label="提供者" min-width="150" />
        <el-table-column prop="provideDate" label="提供日期" min-width="150" />
        <el-table-column prop="comments" label="备注" min-width="150" />
        <el-table-column fixed="right" label="操作" min-width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleAttachmentClick(scope.row)">下载附件</el-button>
            <el-button type="text" size="small" @click="handleViewClick(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="handleDeleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- ä¿®è®¢ -->
    <el-dialog title="修订档案" top="5vh" :visible.sync="dialogVisible" width="70%" @open="openFileRevisionDialog"
               :before-close="handleClose">
      <el-row style="display:flex;justify-content: space-around;">
        <!-- å·¦è¾¹å¸ƒå±€ -->
        <el-col :span="7">
          <el-col>
            <!-- å›¾ç‰‡ -->
            <el-image class="img" style="width:100%;height: 320px;margin-bottom:16px"
                      :src="javaApi + '/img/' + editData.imageUpload">
              <div slot="error" class="image-error" style="width: calc(100% - 2px);
            height: 318px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #EEEEEE;">
                <i class="el-icon-picture-outline" style="font-size:60px;color:#666666;"></i>
              </div>
            </el-image>
            <!-- è¡¨å• -->
            <el-form :model="editData" label-width="120px" ref="rules1" :rules="rules1">
              <el-form-item label="仪器名称:" prop="deviceName">
                <el-input v-model="editData.deviceName" size="small"></el-input>
              </el-form-item>
              <el-form-item label="仪器名称EN:" prop="enDeviceName">
                <el-input v-model="editData.enDeviceName" size="small"></el-input>
              </el-form-item>
              <el-form-item label="规格型号:" prop="specificationModel">
                <el-input v-model="editData.specificationModel" size="small"></el-input>
              </el-form-item>
              <el-form-item label="生产厂家:">
                <el-input v-model="editData.manufacturer" size="small"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-col>
        <!-- ä¸­é—´å¸ƒå±€ -->
        <el-col :span="7">
          <el-form :model="editData" label-width="116px" ref="rules2" :rules="rules1">
            <el-form-item label="校准服务机构:">
              <el-input v-model="editData.calibrationServices" disabled size="small"></el-input>
            </el-form-item>
            <el-form-item label="资产编码:">
              <el-input v-model="editData.assetCode" size="small"></el-input>
            </el-form-item>
            <el-form-item label="产地:">
              <el-input v-model="editData.origin" size="small"></el-input>
            </el-form-item>
            <el-form-item label="出厂编号:">
              <el-input v-model="editData.factoryNo" size="small"></el-input>
            </el-form-item>
            <el-form-item label="管理编号:" prop="managementNumber">
              <el-input v-model="editData.managementNumber" size="small"></el-input>
            </el-form-item>
            <el-form-item label="购置日期:">
              <el-date-picker style="width:100%" v-model="editData.acquisitionDate" type="date" format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="启用日期:" prop="activationDate">
              <el-date-picker style="width:100%" v-model="editData.activationDate" type="date" format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="负责人:">
              <el-select v-model="editData.equipmentManager" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in responsiblePersonList" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="存放点:">
              <el-input v-model="editData.storagePoint" size="small"></el-input>
            </el-form-item>
            <el-form-item label="技术指标:">
              <el-input v-model="editData.technicalIndicators" :rows="7" type="textarea" size="small"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- å³è¾¹å¸ƒå±€ -->
        <el-col :span="7">
          <el-form :model="editData" label-width="140px" ref="ruleForm" :rules="rules1">
            <!-- å®žéªŒå®¤åˆ—表 -->
            <el-form-item label="所属部门:">
              <el-select v-model="editData.subordinateDepartmentsId" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in subordinateDepartmentsList" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="检测项目:">
              <el-cascader v-model="editData.insProductIds" :options="options" :show-all-levels="false" :props="props"
                           placeholder="请选择" size="small" style="width:100%;" :collapse-tags="true" separator="," filterable
                           clearable></el-cascader>
            </el-form-item>
            <!-- <el-form-item label="最近校准日期:">
              <el-date-picker style="width:100%" v-model="Mdata.latestTraceability" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期">
              </el-date-picker>
            </el-form-item> -->
            <!-- <el-form-item label="下次校准日期:">
              <el-date-picker style="width:100%" v-model="Mdata.nextCalibrationDate" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss" type="date" size="small" placeholder="选择日期">
              </el-date-picker>
            </el-form-item> -->
            <el-form-item label="设备类型:">
              <el-select v-model="editData.largeCategory" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in equipmentList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单价(万元):">
              <el-input v-model="editData.unitPrice" size="small"></el-input>
            </el-form-item>
            <el-form-item label="当前状态:" prop="deviceStatus">
              <el-select v-model="editData.deviceStatus" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="校准周期（月）:" prop="calibrationDate">
              <el-input v-model="editData.calibrationDate" size="small"></el-input>
            </el-form-item>
            <el-form-item label="被授权人:">
              <el-select v-model="editData.authorizedPerson" multiple  placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in responsiblePersonList" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="图片:">
              <!-- <div
                style="border: 1px solid #DCDFE6;border-radius:4px;height:32px;lineHeight:32px;display:flex;justify-content: space-around;font-size: 13px;">
                <div v-show="Mdata.imageName" class="picName">{{ Mdata.imageName }}</div>
                <el-upload :action="action" :on-success="handleSuccessUpImg2" :show-file-list="false"
                  accept='image/jpg,image/jpeg,image/png' :headers="headers" :on-change="beforeUpload"
                  :on-error="onError" ref='upload'>
                  <el-button type="text" style="height:30px;padding-top:8px"><span v-if="Mdata.imageName"></span></el-button>
                </el-upload>
              </div> -->

              <div>
                <div v-show="editData.imageName" class="picName">{{ editData.imageName }}</div>
                <el-upload :action="action" :on-success="handleSuccessUpImg2" :show-file-list="false"
                           accept='image/jpg,image/jpeg,image/png' :headers="uploadHeader" :on-change="beforeUpload"
                           :on-error="onError" ref='upload' class="avatar-uploader"
                >
                  <img v-if="editData.imageUpload" :src="javaApi + '/img/' + editData.imageUpload" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-button @click="handleClose">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="submitForm" :loading="upLoad">ç¡® å®š</el-button>
        </el-row>
      </span>
    </el-dialog>
    <el-dialog title="添加设备附件" top="5vh" v-if="dialogVisible1" :visible.sync="dialogVisible1" width="40%">
      <el-form ref="form" :model="addFile" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="维护类型：">
              <el-radio-group v-model="addFile.documentType">
                <el-radio :label="0">附件</el-radio>
                <el-radio :label="1">文档</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="档案名称：">
              <el-input size="small" placeholder="请输入" clearable v-model="addFile.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库号/资产编号:">
              <el-input size="small" placeholder="请输入" clearable v-model="addFile.number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本：">
              <el-input size="small" placeholder="请输入" clearable v-model="addFile.version"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="份数：">
              <el-input-number v-model="addFile.quantity" controls-position="right" style="width: 100%;" size="small"
                               :min="0" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="页码：">
              <el-input-number v-model="addFile.pageCount" controls-position="right" style="width: 100%;" size="small"
                               :min="0" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提供者：">
              <el-input size="small" placeholder="请输入" clearable v-model="addFile.provider"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归档日期：">
              <el-date-picker type="date" style="width:100%" placeholder="请选择日期" size="small" v-model="addFile.archiveDate"
                              format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input type="textarea" :rows="2" size="small" v-model="addFile.comments"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件：" style="float: left;">
              <el-upload class="upload-demo" :action="action" :headers="uploadHeader" ref="uploadFile" :on-error="onError"
                         :on-remove="handleRemove" :on-success="onSuccess" :before-remove="beforeRemove" multiple :limit="1"
                         :on-exceed="handleExceed" :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-button @click="dialogVisible1 = false" size="small">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="saveRecord" size="small" :loading="isLoading">{{ isAddFileUpdate == true ?
            '更新' :
            'ç¡® å®š' }}</el-button>
        </el-row>
      </span>
    </el-dialog>
    <el-dialog title="设备二维码" :visible.sync="deviceDialog" top="5vh" width="30%">
      <div style="width:90%;text-align: right;">
        <el-button type="primary" size="mini" @click="clickGeneratePicture">下载图片</el-button>
        <el-button type="primary" size="mini" @click="labelPrint">标签打印</el-button>
      </div>
      <div class="device-main" ref="deviceQrCode" id="deviceCode">
        <div class="device-center">
          <p class="device-title">{{ Mdata.deviceName }}</p>
          <div class="device-footer">
            <div>
              <vueQr class="qr-code"
                :text="'https://zttx-lims.ztt.cn:8021/lims/qr/qrScan?code=' + Mdata.managementNumber + '&type=device'"
                :size="200" :margin="10"></vueQr>
            </div>
            <div class="device-number">
              <span class="device-text">设备编码:</span>
              <span class="device-text">{{ Mdata.managementNumber }}</span>
            </div>
            <div class="device-name">
              <span class="device-text">设备型号:</span>
              <span class="device-text">{{ Mdata.specificationModel }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { MessageBox } from 'element-ui'
import fileDownload from '@/utils/file'
import vueQr from 'vue-qr'
import PrintJS from 'print-js'
import domtoimage from 'dom-to-image';
import {
  deleteCNASFile,
  updateDocument,
  addDocument,
  deleteDocumentById,
  selectDeviceByCode,
  upDeviceParameter,
  exportDeviceFile,
  getInsProduction, getListByDId,
} from '@/api/cnas/resourceDemand/device.js'
import { selectUserCondition } from "@/api/system/user";
import {
  obtainItemParameterList,
} from '@/api/cnas/resourceDemand/device.js'
export default {
  filters: {
    formaterDateTime(dateTime) {
      if (dateTime === undefined || dateTime === null || dateTime === '') {
        return dateTime
      }
      return dateTime.split(" ")[0]
    }
  },
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    vueQr
  },
  data() {
    return {
      deviceDialog: false,//查看设备二维码弹框
      rules1: {
        deviceName: [
          { required: true, message: '请输入仪器名称', trigger: 'blur' },
        ],
        enDeviceName: [
          { required: true, message: '请输入仪器名称EN', trigger: 'blur' },
        ],
        specificationModel: [
          { required: true, message: '请输入规格型号', trigger: 'blur' },
        ],
        managementNumber: [
          { required: true, message: '请输入管理编号', trigger: 'blur' },
        ],
        activationDate: [
          { required: true, message: '请输入校准有效期', trigger: 'blur' },
        ],
        deviceStatus: [
          { required: true, message: '请输入当前状态', trigger: 'blur' },
        ],
        calibrationDate: [
          { required: true, message: '请输入校准周期(月)', trigger: 'blur' },
        ],
        subordinateDepartmentsId: [
          { required: true, message: '请选择所属部门', trigger: 'change' },
        ]
      },
      // dateForm: {

      // },
      fileList: [], // æ·»åŠ é™„件上传文件列表
      timeStamp: '', // ç»™å›¾ç‰‡æ·»åŠ key，在每次加载页面的时候新建时间戳
      equipmentManager: [],
      formLabelWidth: '100px',
      dialogVisible1: false,
      recordNumber: '',
      inLoading: false, // æŽ§åˆ¶ä¸Šä¼ æŒ‰é’®åŠ è½½çŠ¶æ€
      isLoading: false, // æŽ§åˆ¶ç¡®å®šæŒ‰é’®åŠ è½½çŠ¶æ€
      formData: {},
      tableDataA: [],
      num: 1,
      //添加附件数据收集
      addFile: {
        documentType: '', // ç»´æŠ¤ç±»åž‹
        provideDate: null, // å½’档日期
        name: '', // æ¡£æ¡ˆåç§°
        number: '', // åº“号/资产编号
        version: '', // ç‰ˆæœ¬
        quantity: 1, // ä»½æ•°
        pageCount: 1, // é¡µç 
        provider: '', // æä¾›è€…
        comments: "", // å¤‡æ³¨
        fileName: "", // æ–‡ä»¶åŽŸåç§°
        systemFileName: "", // ç³»ç»Ÿç”Ÿæˆåç§°
      },
      componentData: {
        entity: { name: "", orderBy: { field: "id", order: "asc" } },
        page: { current: "1", size: "80" }
      },
      upIndex: 0,
      dialogVisible: false,
      upLoad: false,
      responsiblePersonList: [],
      subordinateDepartmentsList: [],
      options: [],
      equipmentList: [],
      deviceStatusList: [],
      props: { multiple: true, emitPath: false, value: 'id', label: 'name' },
      // æ”¶é›†è®¾å¤‡æ¡£æ¡ˆæ•°æ®
      Mdata: {
        deviceName: null
      },
      isAddFileUpdate: false,
      editData: {
        authorizedPerson: [],
      },
    }
  },
  computed: {
    action() {
      return this.javaApi + '/deviceScope/uploadFile'
    }
  },
  mounted() {
    // æ”¶é›†æ•°æ®
    this.getList(this.clickNodeVal.value)
    // èŽ·å–相关文档的数据
    this.getPage()
    this.timeStamp = Date.now()
  },
  methods: {
    /**
   * å°†é¡µé¢æŒ‡å®šèŠ‚点内容转为图片
   * 1.拿到想要转换为图片的内容节点DOM；
   * 2.转换，拿到转换后的canvas
   * 3.转换为图片
   */
    clickGeneratePicture() {
      const _than = this
      domtoimage.toPng(_than.$refs.deviceQrCode, { quality: 1, width: 440, }).then(function (dataUrl) {
        // å°†è½¬æ¢åŽçš„图像数据存储为 data URL
        fileDownload.downloadIamge(dataUrl, _than.Mdata.deviceName)
      });
    },
    //打印设备二维码
    labelPrint() {
      PrintJS({
        printable: 'deviceCode',//页面
        type: "html",//文档类型
        maxWidth: 360,
        css: ['/static/css/device-print.css'],
        style: '@page { size: auto;  margin: 0mm;}',
        targetStyles: ["*"], // ä½¿ç”¨dom的所有样式，很重要
      });
    },
    openFileRevisionDialog() {
      // èŽ·å–档案修订负责人下拉框数据
      this.selectDevicePrincipal()
      // èŽ·å–档案修订所属部门下拉框数据
      this.obtainItemParameterList()
      // èŽ·å–档案修订设备状态下拉框数据
      this.selectEnumByCategory()
      // èŽ·å–档案修订检验项目级联弹框数据
      this.getInsProductIds()
    },
    //附件和相关文档事件
    handleAttachmentClick(row) {
      console.log(row)
      if (row.fileName) {
        this.$download.saveAs(row.fileName)
      } else {
        this.$message.warning('未上传文件！')
      }
    },
    handleViewClick(row) {
      this.isAddFileUpdate = true
      this.addFile = { ...row }
      this.dialogVisible1 = true
      if (row.fileName) {
        const obj = Object.assign({
          name: row.fileName,
          url: row.fileName,
          status: 'success',
          uid: Date.now(),
        })
        this.fileList.push(obj)
      }
    },
    handleDeleteClick(row) {
      // åˆ é™¤é€»è¾‘
      MessageBox.confirm('确定要删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteDocumentById({ id: row.id }).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getPage()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    saveRecord() {
      //转换数据
      this.addFile.deviceId = this.clickNodeVal.value
      let obj = this.addFile.systemFileName
      this.addFile.systemFileName = obj.name
      this.addFile.fileName = obj.url

      // æ›´æ–°
      if (this.isAddFileUpdate) {
        updateDocument(this.addFile).then(res => {
          if (res.code == 200) {
            this.$message.success('更新成功')
            this.dialogVisible1 = false;
            this.getPage()
          }
        })
      } else {
        // æ–°å¢ž
        addDocument(this.addFile).then(res => {
          if (res.code == 200) {
            this.$message.success('保存成功')
            this.dialogVisible1 = false;
            this.getPage()
          }
        })
      }
    },
    onSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.addFile.systemFileName = response.data
        this.addFile.fileName = file.name
      } else {
        this.$refs.uploadFile.clearFiles()
        this.$message.error('上传失败：' + response.message)
      }
    },
    handleRemove(file, fileList) {
      this.deleteFile(this.addFile.systemFileName)
    },
    deleteFile(fileName) {
      deleteCNASFile({ fileName }).then(res => {
        this.$message.success('删除成功！')
      })
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 ä¸ªæ–‡ä»¶ï¼Œæœ¬æ¬¡é€‰æ‹©äº† ${files.length} ä¸ªæ–‡ä»¶ï¼Œå…±é€‰æ‹©äº† ${files.length + fileList.length} ä¸ªæ–‡ä»¶`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // èŽ·å–相关文档数据的api
    getPage() {
      getListByDId({ id: this.clickNodeVal.value }).then(res => {
        if (res.code == 200)
          this.tableDataA = res.data
      })
    },
    // æ”¶é›†æ•°æ®
    getList(id) {
      selectDeviceByCode({ id }).then(res => {
        // å°†åˆ†ç±»åˆ—表的信息存起来
        if (res.code == 200) {
          this.Mdata = res.data;
          this.Mdata.insProductIds = this.Mdata.insProductIds.split(',')
          if (this.Mdata.authorizedPerson) {
            this.Mdata.authorizedPerson = JSON.parse(this.Mdata.authorizedPerson)
          }
        }
      });
    },
    handleData(m) {
      if (m) {
        return m
      } else {
        return '-'
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    //打开修订档案弹框
    openEditForm() {
      this.editData = JSON.parse(JSON.stringify(this.Mdata))
      this.$nextTick(() => {
        this.dialogVisible = true
      })
    },
    //修订档案
    submitForm() {
      let flag = true
      this.$refs['rules1'].validate((valid) => {
        if (!valid) {
          flag = false;
          return false;
        }
      });
      this.$refs['rules2'].validate((valid) => {
        if (!valid) {
          flag = false;
          return false;
        }
      });
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          flag = false;
          return false;
        }
      });
      if (!flag) {
        return;
      }
      delete this.editData.createTime
      delete this.editData.updateTime
      delete this.editData.createUser
      delete this.editData.updateUser
      delete this.editData.orderBy
      const formData = this.HaveJson(this.editData)
      formData.userAllow = this.equipmentManager.toString();
      formData.insProductIds = Array.isArray(formData.insProductIds) ? formData.insProductIds.join(',') : '';
      if (formData.authorizedPerson.length === 0) {
        formData.authorizedPerson = ''
      } else {
        formData.authorizedPerson = JSON.stringify(formData.authorizedPerson)
      }
      this.upLoad = true;
      upDeviceParameter(formData).then(res => {
        this.$message.success('修改成功')
        this.upLoad = false
        this.getList(this.clickNodeVal.value)
        this.dialogVisible = false
      }).catch(e => {
        this.$message.error('修改失败')
        this.dialogVisible = false
        this.upLoad = false
      })
    },
    // å¯¼å‡º
    handleDownOne(row) {
      this.outLoading = true
      exportDeviceFile({ deviceId: this.clickNodeVal.value }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        this.$download.saveAs(blob, '设备档案卡.doc')
      })
    },
    handleSuccessUpImg2(response) {
      if (response.code == 200) {
        this.$nextTick(() => {
          this.editData.imageUpload = response.data.url;
          this.editData.imageName = response.data.name;
          console.log(this.javaApi + 'img/' + this.editData.imageUpload);

        })
      }
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    // èŽ·å–负责人列表
    selectDevicePrincipal() {
      selectUserCondition().then(res => {
        this.responsiblePersonList = res.data;
      })
    },
    obtainItemParameterList() {
      obtainItemParameterList().then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.laboratoryName,
            value: a.id
          })
        })
        this.subordinateDepartmentsList = data
      })
    },
    getInsProductIds() {
      getInsProduction().then(res => {
        this.options = res.data.map((m, i) => {
          m.id = m.name;
          return m
        })
        this.options.forEach(item => {
          if (item.children.length == 0) {
            item.children = null;
          } else {
            item.children.forEach(m => {
              if (m.children.length == 0) {
                m.children = null;
              } else {
                m.children.forEach(n => {
                  if (n.children && n.children.length == 0) {
                    n.children = null;
                  }
                })
              }
            })
          }
        })
      })
    },
    // èŽ·å–å­—å…¸
    selectEnumByCategory() {
      // è®¾å¤‡çŠ¶æ€
      this.getDicts("device_status").then((response) => {
        this.deviceStatusList = this.dictToValue(response.data)
        this.deviceStatusList.forEach(a => {
          if (!isNaN(a.value)) {
            a.value = parseInt(a.value)
          }
        })
      });
      // è®¾å¤‡åˆ†ç±»
      this.getDicts("device_type").then((response) => {
        this.equipmentList = this.dictToValue(response.data);
      });
    },
  },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getList(newVal.value)
        this.getPage()
      }
    },
    dialogVisible1(newVal) {
      if (newVal == false) {
        this.isAddFileUpdate = false
        this.addFile = {}
        this.fileList = []
      }
    }
  }
}
</script>

<style scoped>
.main_div {
  height: calc(100vh - 15em);
  overflow-y: auto;
  overflow-x: hidden;
}

.page {
  width: 100%;
  height: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

h4 {
  display: flex;
  align-items: center;
}

h4 .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.tables {
  width: 100%;
}

.el-image {
  position: relative;
}

.el-icon-picture-outline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.form-item {
  line-height: 34px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.text-ellipsis {
  display: inline-block;
  width: 200px;
  /* æˆ–者您可以设置一个具体的宽度值 */
  box-sizing: border-box;
  /* ç¡®ä¿padding和border不影响元素的总宽度 */
  white-space: nowrap;
  /* ç¦æ­¢æ–‡æœ¬æ¢è¡Œ */
  text-overflow: ellipsis;
  /* ä½¿ç”¨çœç•¥å·è¡¨ç¤ºè¢«æˆªæ–­çš„文本 */
  overflow: hidden;
  /* éšè—è¶…出容器的内容 */
}

.form-items {
  line-height: 34px;
  /* display: flex; */
  /* align-items: center;  */
  margin-left: 15%;
  font-size: 14px;
}


.form-item label {
  min-width: 130px;
  display: inline-block;
  text-align: right;
  margin-right: 20px;
  color: #999;
}

.form-item p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* è¿™é‡Œè®¾ç½®ä½ æƒ³è¦çš„行数 */
  -webkit-box-orient: vertical;
}

.btns {
  display: flex;
  align-items: center;
}

.search_thing,
.check_thing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.search_label,
.check_label {
  width: 120px;
}

.search_input,
.check_data,
.check_input {
  flex-grow: 1;
}

.avatar-uploader .el-upload {
  border: 1px dashed #190505;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.device-main {
  width: 90%;
  margin: 0px 5%;
  height: 500px;
  padding: 25px 0px;
  background-color: #fff;
}

.device-center {
  width: 90%;
  height: 490px;
  margin: 0px 5%;
  border-radius: 15px;
  background-color: #fff;
  overflow: hidden;
  /* box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.3); */
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3))
}

.device-title {
  position: relative;
  top: 20px;
  z-index: 2;
  font-size: clamp(1rem, 0.582rem + 1.59vw, 1.475rem);
  font-weight: bold;
  color: #4f6ab2;
  width: 100%;
  height: 90px;
  line-height: 100px;
  text-align: center;
}

.device-footer {
  width: 100%;
  height: 420px;
  background-color: #3361d0;
  position: relative
}

.device-footer::after {
  content: "";
  width: 100%;
  height: 70px;
  position: absolute;
  top: -30px;
  border-radius: 0 0 50% 50%;
  background-color: #fff;
}

.device-footer .qr-code {
  width: 55%;
  height: 200px;
  position: relative;
  top: 60px;
  left: 22.5%;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
}

.device-number {
  width: 80%;
  height: 20px;
  margin-left: 20%;
  position: relative;
  top: 80px;
}

.device-text {
  color: #fff;
  font-weight: bold;
  font-size: 100%;
}

.device-name {
  width: 80%;
  margin-left: 20%;
  height: 20px;
  position: relative;
  top: 90px;
}
</style>

在上述文件截断后对比
src/views/CNAS/resourceDemand/device/component/maintenance.vue
src/views/CNAS/resourceDemand/device/component/management.vue
src/views/CNAS/resourceDemand/device/component/operationInstruction.vue
src/views/CNAS/resourceDemand/device/component/operationOverview.vue
src/views/CNAS/resourceDemand/device/component/record.vue
src/views/CNAS/resourceDemand/device/component/resource-reservation.vue
src/views/CNAS/resourceDemand/device/component/state.vue
src/views/CNAS/resourceDemand/device/index.vue
src/views/CNAS/systemManagement/measuresDealRisks/components/hazardIdentificationRiskAssessment.vue
src/views/business/inspectionOrder/add.vue
src/views/business/inspectionOrder/index.vue
src/views/standard/standardLibrary/index.vue
src/views/structural/capabilityAndLaboratory/capability/index.vue
src/views/structural/capabilityAndLaboratory/laboratory/index.vue