src/api/qualityManagement/nonconformingManagement.js

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

// æŸ¥è¯¢ä¸åˆæ ¼ç®¡ç†åˆ—表
export function qualityUnqualifiedListPage(query) {
    return request({
        url: '/quality/qualityUnqualified/listPage',
        method: 'get',
        params: query,
    })
  return request({
    url: "/quality/qualityUnqualified/listPage",
    method: "get",
    params: query,
  });
}
// æ–°å¢žä¸åˆæ ¼ç®¡ç†åˆ—表
export function qualityUnqualifiedAdd(query) {
    return request({
        url: '/quality/qualityUnqualified/add',
        method: 'post',
        data: query,
    })
  return request({
    url: "/quality/qualityUnqualified/add",
    method: "post",
    data: query,
  });
}
// ä¿®æ”¹ä¸åˆæ ¼ç®¡ç†åˆ—表
export function qualityUnqualifiedUpdate(query) {
    return request({
        url: '/quality/qualityUnqualified/update',
        method: 'post',
        data: query,
    })
  return request({
    url: "/quality/qualityUnqualified/update",
    method: "post",
    data: query,
  });
}
// ä¸åˆæ ¼å¤„理
export function qualityUnqualifiedDeal(query) {
  return request({
    url: "/quality/qualityUnqualified/deal",
    method: "post",
    data: query,
  });
}
// åˆ é™¤ä¸åˆæ ¼ç®¡ç†åˆ—表
export function qualityUnqualifiedDel(query) {
    return request({
        url: '/quality/qualityUnqualified/del',
        method: 'delete',
        data: query,
    })
  return request({
    url: "/quality/qualityUnqualified/del",
    method: "delete",
    data: query,
  });
}
// æŸ¥è¯¢ä¸åˆæ ¼ç®¡ç†ä¿¡æ¯
export function getQualityUnqualifiedInfo(query) {
    return request({
        url: '/quality/qualityUnqualified/' + query,
        method: 'get',
        data: query,
    })
}
  return request({
    url: "/quality/qualityUnqualified/" + query,
    method: "get",
    data: query,
  });
}

 src/api/safeProduction/accidentReportingRecord.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,36 @@

import request from "@/utils/request";

// åˆ†é¡µæŸ¥è¯¢
export function safeAccidentListPage(query) {
  return request({
    url: "/safeAccident/page",
    method: "get",
    params: query,
  });
}


export function safeAccidentAdd(query) {
    return request({
        url: '/safeAccident',
        method: 'post',
        data: query
    })
}

export function safeAccidentUpdate(query) {
    return request({
        url: '/safeAccident',
        method: 'put',
        data: query
    })
}

export function safeAccidentDel(ids) {
    return request({
        url: '/safeAccident/' + ids,
        method: 'delete',
        data: ids
    })
}

 src/api/safeProduction/dangerInvestigation.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,61 @@
// å‘货台账页面接口
import request from "@/utils/request";

// åˆ†é¡µæŸ¥è¯¢
export function dangerInvestigationListPage(query) {
  return request({
    url: "/safeHidden/page",
    method: "get",
    params: query,
  });
}

// æ–°å¢žå®‰å…¨è§„程与资质管理
export function safeHiddenAdd(query) {
    return request({
        url: '/safeHidden',
        method: 'post',
        data: query
    })
}
// ä¿®æ”¹å®‰å…¨è§„程与资质管理
export function safeHiddenUpdate(query) {
    return request({
        url: '/safeHidden',
        method: 'put',
        data: query
    })
}
// åˆ é™¤å®‰å…¨è§„程与资质管理
export function safeHiddenDel(ids) {
    return request({
        url: '/safeHidden/' + ids,
        method: 'delete',
        data: ids
    })
}

// æŸ¥è¯¢é™„件列表
export function fileListPage(query) {
  return request({
    url: "/safeHiddenFile/listPage",
    method: "get",
    params: query,
  });
}
// æ·»åŠ é™„件
export function safeHiddenFileAdd(query) {
    return request({
        url: '/safeHiddenFile/add',
        method: 'post',
        data: query
    })
}
// åˆ é™¤é™„件
export function safeHiddenFileDel(ids) {
    return request({
        url: '/safeHiddenFile/del',
        method: 'delete',
        data: ids
    })
}

 src/api/safeProduction/emergencyPlanReview.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,35 @@
// å‘货台账页面接口
import request from "@/utils/request";

// åˆ†é¡µæŸ¥è¯¢
export function safeContingencyPlanListPage(query) {
  return request({
    url: "/safeContingencyPlan/page",
    method: "get",
    params: query,
  });
}

export function safeContingencyPlanAdd(query) {
    return request({
        url: '/safeContingencyPlan',
        method: 'post',
        data: query
    })
}

export function safeContingencyPlanUpdate(query) {
    return request({
        url: '/safeContingencyPlan',
        method: 'put',
        data: query
    })
}

export function safeContingencyPlanDel(ids) {
    return request({
        url: '/safeContingencyPlan/' + ids,
        method: 'delete',
        data: ids
    })
}

 src/api/safeProduction/hazardousMaterialsControl.js

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

export function safeHazardRecordListPage(query) {
  return request({
    url: "/safeHazardRecord/page",
    method: "get",
    params: query,
  });
}

export function safeHazardRecordDel(ids) {
    return request({
        url: '/safeHazardRecord/' + ids,
        method: 'delete',
        data: ids
    })
}
// æ–°å¢žå±é™©æºå°è´¦
export function safeHazardRecordAdd(query) {
    return request({
        url: '/safeHazardRecord/borrow',
        method: 'post',
        data: query
    })
}

export function safeHazardRecordUpdate(query) {
    return request({
        url: '/safeHazardRecord/return',
        method: 'put',
        data: query
    })
}

 src/api/safeProduction/safetyTrainingAssessment.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,70 @@

import request from "@/utils/request";

// åˆ†é¡µæŸ¥è¯¢
export function safeTrainingListPage(query) {
  return request({
    url: "/safeTraining/page",
    method: "get",
    params: query,
  });
}


export function safeTrainingAdd(query) {
    return request({
        url: '/safeTraining',
        method: 'post',
        data: query
    })
}

export function safeTrainingUpdate(query) {
    return request({
        url: '/safeTraining',
        method: 'put',
        data: query
    })
}

export function safeTrainingDel(ids) {
    return request({
        url: '/safeTraining/' + ids,
        method: 'delete',
        data: ids
    })
}
// å¯¼å‡º
export function safeTrainingExport(query) {
    return request({
        url: '/safeTraining/export',
        method: 'post',
        data: query,
        responseType: 'blob'
    })
}

// æŸ¥è¯¢é™„件列表
export function safeTrainingFileListPage(query) {
  return request({
    url: "/safeTrainingFile/listPage",
    method: "get",
    params: query,
  });
}
// æ·»åŠ é™„件
export function safeTrainingFileAdd(query) {
    return request({
        url: '/safeTrainingFile/add',
        method: 'post',
        data: query
    })
}
// åˆ é™¤é™„件
export function safeTrainingFileDel(ids) {
    return request({
        url: '/safeTrainingFile/del',
        method: 'delete',
        data: ids
    })
}

 src/api/salesManagement/deliveryLedger.js

@@ -18,6 +18,14 @@
    data: query,
  });
}
// ä¿®æ”¹å‘货台账
export function deductStock(query) {
  return request({
    url: "/shippingInfo/deductStock",
    method: "post",
    data: query,
  });
}

// åˆ é™¤å‘货台账
export function delDeliveryLedger(query) {

 src/api/viewIndex.js

@@ -1,157 +1,189 @@
// é¦–页接口
import request from '@/utils/request'
import request from "@/utils/request";

// é”€å”®-采购-库存数据
export const getBusiness = () => {
    return request({
        url: '/home/business',
        method: 'get'
    })
}
  return request({
    url: "/home/business",
    method: "get",
  });
};
// å®¢æˆ·åˆåŒé‡‘额分析
export const analysisCustomerContractAmounts = () => {
    return request({
        url: '/home/analysisCustomerContractAmounts',
        method: 'get'
    })
}
  return request({
    url: "/home/analysisCustomerContractAmounts",
    method: "get",
  });
};
// è´¨æ£€åˆ†æž
export const qualityStatistics = () => {
    return request({
        url: '/home/qualityStatistics',
        method: 'get'
    })
}
  return request({
    url: "/home/qualityStatistics",
    method: "get",
  });
};
// åº”收应付统计
export const statisticsReceivablePayable = (query) => {
    return request({
        url: '/home/statisticsReceivablePayable',
        method: 'get',
        params: query
    })
}
  return request({
    url: "/home/statisticsReceivablePayable",
    method: "get",
    params: query,
  });
};
// å¾…办事项
export const homeTodos = () => {
    return request({
        url: '/home/todos',
        method: 'get'
    })
}
  return request({
    url: "/home/todos",
    method: "get",
  });
};

// çº¿å½¢å›¾
export const getAmountHalfYear = () => {
    return request({
        url: '/sales/ledger/getAmountHalfYear',
        method: 'get'
    })
}
  return request({
    url: "/sales/ledger/getAmountHalfYear",
    method: "get",
  });
};

// å„生产订单的完成进度统计
// /home/progressStatistics
export const getProgressStatistics = ()=>{
    return request({
        url: '/home/progressStatistics',
        method: 'get'
    })
}
export const getProgressStatistics = () => {
  return request({
    url: "/home/progressStatistics",
    method: "get",
  });
};

//在制品周转情况
//home/workInProcessTurnover
export const getWorkInProcessTurnover = () => {
    return request({
        url: '/home/workInProcessTurnover',
        method: 'get'
    })
}
  return request({
    url: "/home/workInProcessTurnover",
    method: "get",
  });
};

// å®¢æˆ·è¥æ”¶è´¡çŒ®æ•°å€¼åˆ†æž
export const customerRevenueAnalysis = (params) => {
    return request({
        url: '/home/customerRevenueAnalysis',
        method: 'get',
        params
    })
}
  return request({
    url: "/home/customerRevenueAnalysis",
    method: "get",
    params,
  });
};

// å‘˜å·¥-客户-供应商总数
export const summaryStatistics = () => {
    return request({
        url: '/home/summaryStatistics',
        method: 'get'
    })
}
  return request({
    url: "/home/summaryStatistics",
    method: "get",
  });
};

// å„部门人员分布
export const deptStaffDistribution = () => {
    return request({
        url: '/home/deptStaffDistribution',
        method: 'get'
    })
}
  return request({
    url: "/home/deptStaffDistribution",
    method: "get",
  });
};

// ä¾›åº”商采购排名
export const supplierPurchaseRanking = (query) => {
    return request({
        url: '/home/supplierPurchaseRanking',
        method: 'get',
        params: query
    })
}
  return request({
    url: "/home/supplierPurchaseRanking",
    method: "get",
    params: query,
  });
};

// å®¢æˆ·é‡‘额贡献排名
export const customerContributionRanking = (query) => {
    return request({
        url: '/home/customerContributionRanking',
        method: 'get',
        params: query
    })
}
  return request({
    url: "/home/customerContributionRanking",
    method: "get",
    params: query,
  });
};

// å„产品大类分布
export const productCategoryDistribution = () => {
    return request({
        url: '/home/productCategoryDistribution',
        method: 'get'
    })
}
  return request({
    url: "/home/productCategoryDistribution",
    method: "get",
  });
};

// äº§å“é”€å”®é‡‘额分析
export const productSalesAnalysis = () => {
    return request({
        url: '/home/productSalesAnalysis',
        method: 'get'
    })
}
  return request({
    url: "/home/productSalesAnalysis",
    method: "get",
  });
};

// åŽŸææ–™é‡‡è´­é‡‘额占比
export const rawMaterialPurchaseAmountRatio = () => {
    return request({
        url: '/home/rawMaterialPurchaseAmountRatio',
        method: 'get'
    })
}
  return request({
    url: "/home/rawMaterialPurchaseAmountRatio",
    method: "get",
  });
};

// é”€å”®/采购/储存产品数
export const salesPurchaseStorageProductCount = () => {
    return request({
        url: '/home/salesPurchaseStorageProductCount',
        method: 'get'
    })
}
  return request({
    url: "/home/salesPurchaseStorageProductCount",
    method: "get",
  });
};

// äº§å“å‡ºå…¥åº“分析（可传 productType: 1 åŽŸææ–™ 2 åŠæˆå“ 3 æˆå“ï¼‰
export const productInOutAnalysis = (params) => {
    return request({
        url: '/home/productInOutAnalysis',
        method: 'get',
        params
    })
}
  return request({
    url: "/home/productInOutAnalysis",
    method: "get",
    params,
  });
};

// äº§å“å‘¨è½¬å¤©æ•°
export const productTurnoverDays = () => {
    return request({
        url: '/home/productTurnoverDays',
        method: 'get'
    })
}
  return request({
    url: "/home/productTurnoverDays",
    method: "get",
  });
};

// æ”¶æ”¯å¯¹æ¯”分析
export const incomeExpenseAnalysis = () => {
  return request({
    url: "/home/incomeExpenseAnalysis",
    method: "get",
  });
};

// åˆ©æ¶¦è¶‹åŠ¿åˆ†æž
export const profitTrendAnalysis = () => {
  return request({
    url: "/home/profitTrendAnalysis",
    method: "get",
  });
};

// æœˆåº¦æ”¶å…¥
export const getMonthlyIncome = () => {
  return request({
    url: "/home/monthlyIncome",
    method: "get",
  });
};

// æœˆåº¦æ”¯å‡º
export const getMonthlyExpenditure = () => {
  return request({
    url: "/home/monthlyExpenditure",
    method: "get",
  });
};

 src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue

@@ -197,10 +197,6 @@
              <div v-if="!activity.isShen" class="node-reason">
                <span>审批意见：</span>{{ activity.approveNodeReason }}
              </div>
              <div v-if="!activity.isShen" class="node-reason">
                <span>签名：</span>
                                <img :src="activity.urlTem" class="signImg" alt="" v-if="activity.urlTem"/>
              </div>
              <div v-else-if="activity.isShen">
                <el-form-item
                  :prop="'activities.' + index + '.approveNodeReason'"

 src/views/collaborativeApproval/approvalProcess/index.vue

@@ -45,7 +45,7 @@
          type="danger"
          plain
          @click="handleDelete"
          v-if="currentApproveType !== 7"
          v-if="currentApproveType !== 5 && currentApproveType !== 6 && currentApproveType !== 7"
        >删除</el-button>
      </div>
    </div>

 src/views/collaborativeApproval/knowledgeBase/index.vue

@@ -46,11 +46,13 @@
    </div>

    <!-- æ–°å¢ž/编辑知识弹窗 -->
    <el-dialog
    <FormDialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="800px"
      :close-on-click-modal="false"
      :width="'800px'"
      @close="closeKnowledgeDialog"
      @confirm="submitForm"
      @cancel="closeKnowledgeDialog"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
@@ -115,7 +117,14 @@
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="创建人" prop="creator">
              <el-input v-model="form.creator" placeholder="请输入创建人" />
              <el-select v-model="form.creator" placeholder="请选择创建人" style="width: 100%" filterable>
                <el-option
                  v-for="user in userList"
                  :key="user.userId"
                  :label="user.nickName"
                  :value="user.nickName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -125,20 +134,16 @@
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    </FormDialog>

    <!-- æŸ¥çœ‹çŸ¥è¯†è¯¦æƒ…弹窗 -->
    <el-dialog
    <FormDialog
      v-model="viewDialogVisible"
      title="知识详情"
      width="900px"
      :close-on-click-modal="false"
      :width="'900px'"
      @close="closeViewDialog"
      @confirm="handleViewDialogConfirm"
      @cancel="closeViewDialog"
    >
      <div class="knowledge-detail">
        <el-descriptions :column="2" border>
@@ -183,7 +188,7 @@
          <h4>关键要点</h4>
          <div class="key-points">
            <el-tag
              v-for="(point, index) in currentKnowledge.keyPoints.split(',')"
              v-for="(point, index) in currentKnowledge.keyPoints?.split(',') || []"
              :key="index"
              type="success"
              style="margin-right: 8px; margin-bottom: 8px;"
@@ -219,24 +224,19 @@
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="copyKnowledge">复制知识</el-button>
          <!-- <el-button type="success" @click="markAsFavorite">收藏@</el-button> -->
        </span>
      </template>
    </el-dialog>
    </FormDialog>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { onMounted, ref, reactive, toRefs, getCurrentInstance, computed } from "vue";
import { onMounted, ref, reactive, toRefs, getCurrentInstance, computed, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PIMTable from "@/components/PIMTable/PIMTable.vue";
import FormDialog from '@/components/Dialog/FormDialog.vue';
import { listKnowledgeBase, delKnowledgeBase,addKnowledgeBase,updateKnowledgeBase } from "@/api/collaborativeApproval/knowledgeBase.js";
import useUserStore from '@/store/modules/user';
import { userListNoPageByTenantId } from '@/api/system/user.js';

// è¡¨å•éªŒè¯è§„则
const rules = {
@@ -302,6 +302,9 @@

// è¡¨å•å¼•ç”¨
const formRef = ref();
// ç”¨æˆ·ç›¸å…³
const userStore = useUserStore();
const userList = ref([]);

// è¡¨æ ¼åˆ—配置
const tableColumn = ref([
@@ -389,6 +392,15 @@
  }
]);

// ç›‘听对话框打开，获取用户列表
watch(dialogVisible, (newVal) => {
  if (newVal) {
    userListNoPageByTenantId().then((res) => {
      userList.value = res.data || [];
    });
  }
});

// ç”Ÿå‘½å‘¨æœŸ
onMounted(() => {
  getList();
@@ -414,7 +426,7 @@
  .then(res => {
    tableLoading.value = false;
    tableData.value = res.data.records
    page.total = res.data.total;
    page.value.total = res.data.total;
  }).catch(err => {
    tableLoading.value = false;
  })
@@ -437,7 +449,7 @@
  dialogType.value = type;
  if (type === "add") {
    dialogTitle.value = "新增知识";
    // é‡ç½®è¡¨å•
    // é‡ç½®è¡¨å•ï¼Œé»˜è®¤åˆ›å»ºäººä¸ºå½“前用户
    Object.assign(form.value, {
      title: "",
      type: "",
@@ -446,7 +458,7 @@
      problem: "",
      solution: "",
      keyPoints: "",
      creator: "",
      creator: userStore.nickName || "",
      usageCount: 0
    });
  } else if (type === "edit" && row) {
@@ -550,6 +562,39 @@
  });
};

// å…³é—­çŸ¥è¯†è¡¨å•å¯¹è¯æ¡†
const closeKnowledgeDialog = () => {
  // æ¸…空表单数据，默认创建人为当前用户
  Object.assign(form.value, {
    id: undefined,
    title: "",
    type: "",
    scenario: "",
    efficiency: "",
    problem: "",
    solution: "",
    keyPoints: "",
    creator: userStore.nickName || "",
    usageCount: 0
  });
  // æ¸…除表单验证状态
  if (formRef.value) {
    formRef.value.clearValidate();
  }
  dialogVisible.value = false;
};

// å…³é—­æŸ¥çœ‹è¯¦æƒ…对话框
const closeViewDialog = () => {
  viewDialogVisible.value = false;
};

// å¤„理查看详情对话框确认（执行复制操作）
const handleViewDialogConfirm = () => {
  copyKnowledge();
  closeViewDialog();
};

// æäº¤çŸ¥è¯†è¡¨å•
const submitForm = async () => {
  try {
@@ -559,7 +604,7 @@
      addKnowledgeBase({...form.value}).then(res => {
        if(res.code == 200){
          ElMessage.success("添加成功");
          dialogVisible.value = false;
          closeKnowledgeDialog();
          getList();
        }
      }).catch(err => {
@@ -569,7 +614,7 @@
      updateKnowledgeBase({...form.value}).then(res => {
        if(res.code == 200){
          ElMessage.success("更新成功");
          dialogVisible.value = false;
          closeKnowledgeDialog();
          getList();
        }
      }).catch(err => {

 src/views/collaborativeApproval/notificationManagement/meetApplication/index.vue

@@ -127,7 +127,7 @@
            <el-option
                v-for="person in employees"
                :key="person.id"
                :label="`${person.staffName} (${person.postName})`"
                :label="`${person.staffName}${person.postName ? ` (${person.postName})` : ''}`"
                :value="person.id"
            />
          </el-select>
@@ -307,7 +307,7 @@
    size: -1,
    staffState: 1
  }).then(res => {
    employees.value = res.data.records.sort((a, b) => a.postName.localeCompare(b.postName))
    employees.value = res.data.records.sort((a, b) => (a.postName || '').localeCompare(b.postName || ''))
  })
})
</script>

 src/views/collaborativeApproval/notificationManagement/meetExamine/index.vue

@@ -240,7 +240,7 @@
    it.participants = staffList.value.filter(staff => staffs.some(id=>id === staff.id)).map(staff => {
      return {
        id: staff.id,
        name: `${staff.staffName}(${staff.postName})`
        name:  `${staff.staffName}${staff.postName ? ` (${staff.postName})` : ''}`
      }
    })


 src/views/collaborativeApproval/notificationManagement/meetPublish/index.vue

@@ -239,7 +239,7 @@
    it.participants = staffList.value.filter(staff => staffs.some(id=>id === staff.id)).map(staff => {
      return {
        id: staff.id,
        name: `${staff.staffName}(${staff.postName})`
        name: `${staff.staffName}${staff.postName ? ` (${staff.postName})` : ''}`
      }
    })


 src/views/collaborativeApproval/notificationManagement/summary/index.vue

@@ -214,7 +214,7 @@
    it.participants = staffList.value.filter(staff => staffs.some(id => id === staff.id)).map(staff => {
      return {
        id: staff.id,
        name: `${staff.staffName}(${staff.postName})`
        name:  `${staff.staffName}${staff.postName ? ` (${staff.postName})` : ''}`
      }
    })


 src/views/collaborativeApproval/sealManagement/index.vue

@@ -82,7 +82,14 @@
    </el-card>

    <!-- ç”¨å°ç”³è¯·å¯¹è¯æ¡† -->
    <el-dialog v-model="showSealApplyDialog" title="申请用印" width="600px">
    <FormDialog
      v-model="showSealApplyDialog"
      title="申请用印"
      :width="'600px'"
      @close="closeSealApplyDialog"
      @confirm="submitSealApplication"
      @cancel="closeSealApplyDialog"
    >
      <el-form :model="sealForm" :rules="sealRules" ref="sealFormRef" label-width="100px">
        <el-form-item label="申请编号" prop="applicationNum">
          <el-input v-model="sealForm.applicationNum" placeholder="请输入申请编号" />
@@ -119,13 +126,7 @@
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showSealApplyDialog = false">取消</el-button>
          <el-button type="primary" @click="submitSealApplication">提交申请</el-button>
        </span>
      </template>
    </el-dialog>
    </FormDialog>

    <!-- è§„章制度发布对话框 -->
    <!-- <el-dialog v-model="showRegulationDialog" :title="operationType === 'add' ? '发布制度' : '编辑制度'" width="800px">
@@ -177,10 +178,17 @@
    </el-dialog> -->

    <!-- ç”¨å°è¯¦æƒ…对话框 -->
    <el-dialog v-model="showSealDetailDialog" title="用印申请详情" width="700px">
    <FormDialog
      v-model="showSealDetailDialog"
      title="用印申请详情"
      :width="'700px'"
      @close="closeSealDetailDialog"
      @confirm="closeSealDetailDialog"
      @cancel="closeSealDetailDialog"
    >
      <div v-if="currentSealDetail" class="mb10">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="申请编号">{{ currentSealDetail.id }}</el-descriptions-item>
          <el-descriptions-item label="申请编号">{{ currentSealDetail.applicationNum }}</el-descriptions-item>
          <el-descriptions-item label="申请标题">{{ currentSealDetail.title }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ currentSealDetail.createUserName }}</el-descriptions-item>
          <el-descriptions-item label="所属部门">{{ currentSealDetail.department }}</el-descriptions-item>
@@ -194,10 +202,17 @@
          <el-descriptions-item label="申请原因" :span="2">{{ currentSealDetail.reason }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
    </FormDialog>

    <!-- è§„章制度详情对话框 -->
    <el-dialog v-model="showRegulationDetailDialog" title="规章制度详情" width="800px">
    <FormDialog
      v-model="showRegulationDetailDialog"
      title="规章制度详情"
      :width="'800px'"
      @close="closeRegulationDetailDialog"
      @confirm="handleRegulationDetailConfirm"
      @cancel="closeRegulationDetailDialog"
    >
      <div v-if="currentRegulationDetail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="制度编号">{{ currentRegulationDetail.id }}</el-descriptions-item>
@@ -216,10 +231,17 @@
          <el-button type="success" @click="resetForm(currentRegulationDetail)">确认查看</el-button>
        </div>
      </div>
    </el-dialog>
    </FormDialog>

    <!-- ç‰ˆæœ¬åŽ†å²å¯¹è¯æ¡† -->
    <el-dialog v-model="showVersionHistoryDialog" title="版本历史" width="800px">
    <FormDialog
      v-model="showVersionHistoryDialog"
      title="版本历史"
      :width="'800px'"
      @close="closeVersionHistoryDialog"
      @confirm="closeVersionHistoryDialog"
      @cancel="closeVersionHistoryDialog"
    >
      <el-table :data="versionHistory" style="width: 100%;margin-bottom: 10px">
        <el-table-column prop="version" label="版本号" width="100" />
        <el-table-column prop="updateTime" label="更新时间" width="180" />
@@ -232,10 +254,17 @@
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    </FormDialog>

    <!-- é˜…读状态对话框 -->
    <el-dialog v-model="showReadStatusDialog" title="阅读状态" width="800px">
    <FormDialog
      v-model="showReadStatusDialog"
      title="阅读状态"
      :width="'800px'"
      @close="closeReadStatusDialog"
      @confirm="closeReadStatusDialog"
      @cancel="closeReadStatusDialog"
    >
      <el-table :data="readStatusList" style="width: 100%;margin-bottom: 10px">
        <el-table-column prop="employee" label="员工姓名" width="120" />
        <el-table-column prop="department" label="所属部门" width="150" />
@@ -249,7 +278,7 @@
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    </FormDialog>
  </div>
</template>

@@ -263,7 +292,8 @@
import { getUserProfile, userListNoPageByTenantId } from '@/api/system/user.js'
import useUserStore from '@/store/modules/user'
import { userLoginFacotryList } from "@/api/system/user.js"
import {staffOnJobListPage} from "@/api/personnelManagement/staffOnJob.js";
import {staffOnJobListPage} from "@/api/personnelManagement/staffOnJob.js"
import FormDialog from '@/components/Dialog/FormDialog.vue'

// å“åº”式数据
const currentUser = ref(null)
@@ -434,7 +464,7 @@
    addSealApplication(sealForm).then(res => {
      if(res.code == 200){
        ElMessage.success('申请提交成功')
        showSealApplyDialog.value = false
        closeSealApplyDialog()
        getSealApplicationList()
        Object.assign(sealForm, {
        applicationNum: '',
@@ -447,12 +477,53 @@
      })
      }
    }).catch(err => {
      ElMessage.error(err.msg)
      console.log(err.msg)
    })
  
  } catch (error) {
    ElMessage.error('请完善申请信息')
  }
}
// å…³é—­ç”¨å°ç”³è¯·å¯¹è¯æ¡†
const closeSealApplyDialog = () => {
  // æ¸…空表单数据
  Object.assign(sealForm, {
    applicationNum: '',
    title: '',
    sealType: '',
    reason: '',
    approveUserId: '',
    urgency: 'normal',
    status: 'pending'
  })
  // æ¸…除表单验证状态
  if (sealFormRef.value) {
    sealFormRef.value.clearValidate()
  }
  showSealApplyDialog.value = false
}
// å…³é—­ç”¨å°è¯¦æƒ…对话框
const closeSealDetailDialog = () => {
  showSealDetailDialog.value = false
}
// å…³é—­è§„章制度详情对话框
const closeRegulationDetailDialog = () => {
  showRegulationDetailDialog.value = false
}
// å¤„理规章制度详情确认
const handleRegulationDetailConfirm = () => {
  // å¦‚æžœtableData>0，执行确认查看操作
  if (currentRegulationDetail.value && tableData.value && tableData.value.length > 0) {
    resetForm(currentRegulationDetail.value)
  }
  closeRegulationDetailDialog()
}
// å…³é—­ç‰ˆæœ¬åŽ†å²å¯¹è¯æ¡†
const closeVersionHistoryDialog = () => {
  showVersionHistoryDialog.value = false
}
// å…³é—­é˜…读状态对话框
const closeReadStatusDialog = () => {
  showReadStatusDialog.value = false
}
// æ–°å¢ž
const handleAdd = () => {
@@ -735,6 +806,13 @@
  })
}

// åˆ†é¡µå˜åŒ–处理
const paginationChange = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getSealApplicationList();
};

// ç›‘听对话框打开，获取用户列表
watch(showSealApplyDialog, (newVal) => {
  if (newVal) {

 src/views/personnelManagement/employeeRecord/components/NewOrEditFormDia.vue

@@ -179,7 +179,6 @@
    contractTerm: 0,
    contractStartTime: "",
    contractEndTime: "",
    staffState: "",
    sysPostId: undefined,
    sysDeptId: undefined,
  },
@@ -215,6 +214,9 @@
      form.value = {...res.data}
      if (form.value.sysPostId === 0) {
        form.value.sysPostId = undefined
      }
      if (form.value.sysDeptId === 0) {
        form.value.sysDeptId = undefined
      }
      // ç¼–辑时也计算一次合同年限
      calculateContractTerm();
@@ -260,9 +262,11 @@
  if (!form.value.sysPostId) {
    form.value.sysPostId = 0;
  }
  if (!form.value.sysDeptId) {
    form.value.sysDeptId = 0;
  }
  proxy.$refs.formRef.validate(valid => {
    if (valid) {
      form.value.staffState = 1
      if (operationType.value === "add") {
        createStaffOnJob(form.value).then(res => {
          proxy.$modal.msgSuccess("提交成功");

 src/views/procurementManagement/invoiceEntry/components/Modal.vue

@@ -411,13 +411,15 @@
                    item.futureTicketsAmount !== undefined ? item.futureTicketsAmount : (item.taxInclusiveTotalPrice || 0)
                );

                // æ–°å¢žæ—¶ï¼šæœ¬æ¬¡å¼€ç¥¨é»˜è®¤ä¸å¡«ï¼ˆ0），避免一打开就把“未来票数”扣成 0
                item.ticketsNum = 0;
                item.ticketsAmount = 0;

                // é¡µé¢å±•ç¤ºçš„“未来票数/未来票金额”默认展示原始未来值
                item.futureTickets = item.tempFutureTickets;
                item.futureTicketsAmount = item.tempFutureTicketsAmount;
                // æ–°å¢žæ—¶ï¼šæœ¬æ¬¡å¼€ç¥¨æ•°é»˜è®¤ = æœªæ¥ç¥¨æ•°ï¼ˆä¸”不能大于未来票数）
                item.ticketsNum = Number(item.tempFutureTickets || 0);
                // è”动计算本次开票金额、未来票数、未来票金额
                const unitPrice = Number(item.taxInclusiveUnitPrice || 0);
                item.ticketsAmount = Number((item.ticketsNum * unitPrice).toFixed(2));
                item.futureTickets = Number((item.tempFutureTickets - item.ticketsNum).toFixed(2));
                item.futureTicketsAmount = Number(
                    (item.tempFutureTicketsAmount - item.ticketsAmount).toFixed(2)
                );
            });
            
            form.productData = allProductData;
@@ -426,7 +428,7 @@
            const totalAmount = allProductData.reduce((sum, item) => {
                return sum + (Number(item.ticketsAmount) || 0);
            }, 0);
            form.invoiceAmount = totalAmount.toFixed(2);
            form.invoiceAmount = Number(totalAmount.toFixed(2));
            
            // å­˜å‚¨é€‰ä¸­çš„合同数据
            selectedContracts.value = selectedRows;
@@ -467,11 +469,11 @@
        row.ticketsNum = Number(row.tempFutureTickets || 0);
    }
    // è®¡ç®—本次来票金额
    row.ticketsAmount = (row.ticketsNum * row.taxInclusiveUnitPrice).toFixed(2)
    row.ticketsAmount = Number((Number(row.ticketsNum) * Number(row.taxInclusiveUnitPrice || 0)).toFixed(2));
    // è®¡ç®—未来票数
    row.futureTickets = (row.tempFutureTickets - row.ticketsNum).toFixed(2)
    row.futureTickets = Number((Number(row.tempFutureTickets || 0) - Number(row.ticketsNum || 0)).toFixed(2));
    // è®¡ç®—未来票金额
    row.futureTicketsAmount = (row.tempFutureTicketsAmount - row.ticketsAmount).toFixed(2)
    row.futureTicketsAmount = Number((Number(row.tempFutureTicketsAmount || 0) - Number(row.ticketsAmount || 0)).toFixed(2));
    calculateinvoiceAmount();
};

@@ -494,12 +496,12 @@
        proxy.$modal.msgWarning("本次开票数不能大于未来票数");
        row.ticketsNum = Number(row.tempFutureTickets || 0);
        // é‡æ–°è®¡ç®—本次来票金额
        row.ticketsAmount = (row.ticketsNum * row.taxInclusiveUnitPrice).toFixed(2);
        row.ticketsAmount = Number((Number(row.ticketsNum) * Number(row.taxInclusiveUnitPrice || 0)).toFixed(2));
    }
    // è®¡ç®—未来票数
    row.futureTickets = (row.tempFutureTickets - row.ticketsNum).toFixed(2)
    row.futureTickets = Number((Number(row.tempFutureTickets || 0) - Number(row.ticketsNum || 0)).toFixed(2));
    // è®¡ç®—未来票金额
    row.futureTicketsAmount = (row.tempFutureTicketsAmount - row.ticketsAmount).toFixed(2)
    row.futureTicketsAmount = Number((Number(row.tempFutureTicketsAmount || 0) - Number(row.ticketsAmount || 0)).toFixed(2));
    calculateinvoiceAmount();
};

@@ -510,7 +512,7 @@
            invoiceAmountTotal += Number(item.ticketsAmount);
        }
    });
    form.invoiceAmount = invoiceAmountTotal.toFixed(2);
    form.invoiceAmount = Number(invoiceAmountTotal.toFixed(2));
};

const open = async (type, selectedRows) => {
@@ -518,9 +520,15 @@
    
    // å¦‚果是批量操作，设置标题
    if (Array.isArray(selectedRows) && selectedRows.length > 1) {
        modalOptions.title = `批量新增 (${selectedRows.length}条)`;
        modalOptions.value = {
            ...(modalOptions.value || {}),
            title: `批量新增 (${selectedRows.length}条)`,
        };
    } else {
        modalOptions.title = type === "add" ? "新增" : "编辑";
        modalOptions.value = {
            ...(modalOptions.value || {}),
            title: type === "add" ? "新增" : "编辑",
        };
    }
    
    // å¦‚果是单个操作，获取id

 src/views/procurementManagement/invoiceEntry/index.vue

@@ -112,6 +112,8 @@
  gePurchaseListPage,
  {
    purchaseContractNumber: undefined,
    // åªæŸ¥è¯¢å·²å®¡æ‰¹é€šè¿‡ï¼ˆæˆ–指定状态为 3）的记录
    approvalStatus: 3,
  },
  [
    {

 src/views/procurementManagement/paymentEntry/index.vue

@@ -261,7 +261,6 @@
  {
    label: "供应商名称",
    prop: "supplierName",
    width:240
  },
    {
        label: "付款状态",
@@ -282,7 +281,6 @@
        label: "产品大类",
        prop: "productCategory",
        showOverflowTooltip: true,
        width: 100
    },
    {
        label: "规格型号",
@@ -293,7 +291,6 @@
  {
    label: "已付款金额(元)",
    prop: "ticketsTotal",
    width: 120,
    formatData: (params) => {
      return params ? parseFloat(params).toFixed(2) : 0;
    },
@@ -301,7 +298,6 @@
  {
    label: "待付款金额(元)",
    prop: "pendingTicketsTotal",
    width: 120,
    formatData: (params) => {
      return params ? parseFloat(params).toFixed(2) : 0;
    },
@@ -327,6 +323,8 @@
  searchForm: {
    supplierNameOrContractNo: "",
    status: false,
    // åªæŸ¥è¯¢å®¡æ‰¹çŠ¶æ€ä¸º 3 çš„记录
    approvalStatus: 3,
  },
  form: {
    purchaseContractNumber: "",

 src/views/productionManagement/productionCosting/index.vue

@@ -1,45 +1,40 @@
<template>
    <div class="app-container">
        <div class="search_form">
            <div>
                <span class="search_title">生产日期：</span>
                <el-date-picker v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
                                                placeholder="请选择" clearable @change="changeDaterange" />
                <span class="search_title ml10">生产人：</span>
                <el-input
                    v-model="searchForm.schedulingUserName"
                    style="width: 240px"
                    placeholder="请输入"
                    @change="handleQuery"
                    clearable
                    prefix-icon="Search"
                />
                <span class="search_title ml10">合同号：</span>
                <el-input
                    v-model="searchForm.salesContractNo"
                    style="width: 240px"
                    placeholder="请输入"
                    @change="handleQuery"
                    clearable
                    prefix-icon="Search"
                />
                <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
                >搜索</el-button
                >
        <div class="content-layout">
            <!-- å·¦ä¾§å°è´¦ + é¡¶éƒ¨ç­›é€‰ -->
            <div class="left-panel">
                <div class="left-header">
                    <!-- <div class="left-title">生产台账</div> -->
                    <el-radio-group v-model="dateType" size="small" @change="handleDateTypeChange">
                        <el-radio-button label="day">日</el-radio-button>
                        <el-radio-button label="month">月</el-radio-button>
                    </el-radio-group>
					
                </div>
                <PIMTable
                    rowKey="id"
                    :column="leftTableColumn"
                    :tableData="leftTableData"
                    :tableLoading="tableLoading"
                    @rowClick="handleLeftRowClick"
                ></PIMTable>
            </div>
            <div>
                <el-button @click="handleOut">导出</el-button>

            <!-- å³ä¾§æ˜Žç»†ï¼ˆåŽŸæœ‰å†…容） -->
            <div class="right-panel">
                <div class="header-filters">
                        <el-button @click="handleOut" class="ml10">导出</el-button>
                    </div>
                    <PIMTable
                        rowKey="id"
                        :column="tableColumn"
                        :tableData="tableData"
                        :page="page"
                        :tableLoading="tableLoading"
                        style="margin-right: 20px;"
                        @pagination="pagination"
                    ></PIMTable>
            </div>
        </div>
        <div class="table_list">
            <PIMTable
                rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :tableLoading="tableLoading"
                @pagination="pagination"
            ></PIMTable>
        </div>
    </div>
</template>
@@ -119,8 +114,36 @@
        width: 100,
    },
]);

// å·¦ä¾§æ±‡æ€»å°è´¦åˆ—（生产人、产量、工资、合格率）
const leftTableColumn = ref([
    {
        label: "生产人",
        prop: "schedulingUserName",
        width: 120,
    },
    {
        label: "产量",
        prop: "finishedNum",
        width: 100,
    },
    {
        label: "工资",
        prop: "wages",
        width: 100,
    },
    {
        label: "合格率",
        prop: "qualifiedRate",
        width: 100,
    },
]);

const tableData = ref([]);
const tableLoading = ref(false);
const leftTableData = ref([]);
// æ—¥ / æœˆ åˆ‡æ¢ï¼ˆé»˜è®¤æŒ‰æ—¥ï¼‰
const dateType = ref("day");
const page = reactive({
    current: 1,
    size: 100,
@@ -165,12 +188,50 @@
const getList = () => {
    tableLoading.value = true;
    const params = { ...searchForm.value, ...page };
    params.dateType = dateType.value;
    params.entryDate = undefined
    productionAccountingListPage(params).then((res) => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
        const records = res.data.records || [];
        tableData.value = records;
        page.total = res.data.total || 0;
        buildLeftTableData(records);
    });
};

// æž„建左侧汇总台账（按生产人汇总产量、工资等）
const buildLeftTableData = (records) => {
    const map = {};
    records.forEach((item) => {
        const key = item.schedulingUserName || "未知";
        if (!map[key]) {
            map[key] = {
                id: key,
                schedulingUserName: key,
                finishedNum: 0,
                wages: 0,
                qualifiedRate: item.qualifiedRate ?? null,
            };
        }
        map[key].finishedNum += Number(item.finishedNum || 0);
        map[key].wages += Number(item.wages || 0);
        if (item.qualifiedRate != null) {
            map[key].qualifiedRate = item.qualifiedRate;
        }
    });
    leftTableData.value = Object.values(map);
};

// å·¦ä¾§æ—¥/月切换
const handleDateTypeChange = () => {
    // è¿™é‡Œåªä½œä¸ºç­›é€‰æ¡ä»¶çš„一部分，直接重新查询列表
    handleQuery();
};

// ç‚¹å‡»å·¦ä¾§è¡Œï¼Œåˆ·å³ä¾§æ˜Žç»†ï¼ˆæŒ‰ç”Ÿäº§äººè¿‡æ»¤ï¼‰
const handleLeftRowClick = (row) => {
    searchForm.value.schedulingUserName = row.schedulingUserName || "";
    handleQuery();
};

// å¯¼å‡º
@@ -193,4 +254,53 @@
});
</script>

<style scoped lang="scss"></style>
<style scoped lang="scss">
.content-layout {
  display: flex;
  gap: 16px;
}

.left-panel {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.right-panel {
  flex: 0 0 50%;
  max-width: 49%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.left-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.left-title {
  font-size: 16px;
  color: #ffffff;
}

.header-filters {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
  gap: 8px;
}

.search_title {
  color: #ffffff;
}

.ml10 {
  margin-left: 10px;
}
</style>

 src/views/productionManagement/productionDispatching/components/formDia.vue

@@ -111,7 +111,7 @@

<script setup>
import {ref} from "vue";
import {getStaffJoinInfo, staffJoinAdd, staffJoinUpdate} from "@/api/personnelManagement/onboarding.js";
// import {getStaffJoinInfo, staffJoinAdd, staffJoinUpdate} from "@/api/personnelManagement/onboarding.js";
import {userListNoPageByTenantId} from "@/api/system/user.js";
import {productionDispatch} from "@/api/productionManagement/productionOrder.js";
import useUserStore from "@/store/modules/user.js";

 src/views/productionManagement/productionOrder/index.vue

@@ -50,6 +50,7 @@
                :tableData="tableData"
                :page="page"
                :tableLoading="tableLoading"
                :row-class-name="tableRowClassName"
                @pagination="pagination">
        <template #completionStatus="{ row }">
          <el-progress
@@ -163,6 +164,12 @@
      width: 120,
    },
    {
      label: "交付日期",
      prop: "deliveryDate",
      formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
      width: 120,
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
@@ -228,6 +235,21 @@
    if (p < 50) return "#e6a23c";
    if (p < 80) return "#409eff";
    return "#67c23a";
  };

  // æ·»åŠ è¡¨è¡Œç±»åæ–¹æ³•
  const tableRowClassName = ({ row }) => {
    const diff = row.deliveryDaysDiff;

    if (diff === 15) {
      return 'yellow';
    } else if (diff === 10) {
      return 'pink';
    } else if (diff === 2) {
      return 'purple';
    } else if (diff < 2) {
      return 'red';
    }
  };

  // ç»‘定工艺路线弹框
@@ -388,4 +410,21 @@
<style scoped lang="scss">
.search_form{
  align-items: start;
}</style>
}

::v-deep .yellow {
  background-color: #FAF0DE;
}

::v-deep .pink {
  background-color: #FAE1DE;
}

::v-deep .red {
  background-color: #f80202;
}

::v-deep .purple{
  background-color: #F4DEFA;
}
</style>

 src/views/productionManagement/productionProcess/index.vue

@@ -30,7 +30,9 @@
           class="mb10">
        <el-button type="primary"
                   @click="showNewModal">新增工序</el-button>
        <el-button type="info" plain @click="handleImport">导入</el-button>
        <el-button type="info"
                   plain
                   @click="handleImport">导入</el-button>
        <el-button type="danger"
                   @click="handleDelete"
                   :disabled="selectedRows.length === 0"
@@ -53,19 +55,17 @@
                  v-model:visible="isShowEditModal"
                  :record="record"
                  @completed="getList" />
    <ImportDialog
      ref="importDialogRef"
      v-model="importDialogVisible"
      title="导入工序"
      :action="importAction"
      :headers="importHeaders"
      :auto-upload="false"
      :on-success="handleImportSuccess"
      :on-error="handleImportError"
      @confirm="handleImportConfirm"
      @download-template="handleDownloadTemplate"
      @close="handleImportClose"
    />
    <ImportDialog ref="importDialogRef"
                  v-model="importDialogVisible"
                  title="导入工序"
                  :action="importAction"
                  :headers="importHeaders"
                  :auto-upload="false"
                  :on-success="handleImportSuccess"
                  :on-error="handleImportError"
                  @confirm="handleImportConfirm"
                  @download-template="handleDownloadTemplate"
                  @close="handleImportClose" />
  </div>
</template>

@@ -74,7 +74,12 @@
  import NewProcess from "@/views/productionManagement/productionProcess/New.vue";
  import EditProcess from "@/views/productionManagement/productionProcess/Edit.vue";
  import ImportDialog from "@/components/Dialog/ImportDialog.vue";
  import { listPage, del, importData, downloadTemplate } from "@/api/productionManagement/productionProcess.js";
  import {
    listPage,
    del,
    importData,
    downloadTemplate,
  } from "@/api/productionManagement/productionProcess.js";
  import { getToken } from "@/utils/auth";

  const data = reactive({
@@ -93,7 +98,7 @@
      label: "工序名称",
      prop: "name",
    },
   

    {
      label: "工资定额",
      prop: "salaryQuota",
@@ -102,7 +107,7 @@
      label: "备注",
      prop: "remark",
    },
     {
    {
      label: "更新时间",
      prop: "updateTime",
    },
@@ -137,9 +142,10 @@
    total: 0,
  });
  const { proxy } = getCurrentInstance();
  

  // å¯¼å…¥ç›¸å…³é…ç½®
  const importAction = import.meta.env.VITE_APP_BASE_API + "/productProcess/importData";
  const importAction =
    import.meta.env.VITE_APP_BASE_API + "/productProcess/importData";
  const importHeaders = { Authorization: "Bearer " + getToken() };

  // æŸ¥è¯¢åˆ—表
@@ -235,7 +241,7 @@
  };

  // å¯¼å…¥æˆåŠŸ
  const handleImportSuccess = (response) => {
  const handleImportSuccess = response => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess("导入成功");
      importDialogVisible.value = false;
@@ -249,7 +255,7 @@
  };

  // å¯¼å…¥å¤±è´¥
  const handleImportError = (error) => {
  const handleImportError = error => {
    proxy.$modal.msgError("导入失败：" + (error.message || "未知错误"));
  };


 src/views/qualityManagement/finalInspection/components/filesDia.vue

@@ -26,20 +26,14 @@
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :page="page"
          :tableLoading="tableLoading"
          :isSelection="true"
          @selection-change="handleSelectionChange"
          @pagination="paginationSearch"
          height="500"
      >
      </PIMTable>
            <pagination
                style="margin: 10px 0"
                v-show="total > 0"
                @pagination="paginationSearch"
                :total="total"
                :page="page.current"
                :limit="page.size"
            />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDia">取消</el-button>
@@ -64,7 +58,6 @@
  qualityInspectFileDel,
  qualityInspectFileListPage
} from "@/api/qualityManagement/qualityInspectFile.js";
import Pagination from "@/components/PIMTable/Pagination.vue";
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])

@@ -94,8 +87,8 @@
const page = reactive({
    current: 1,
    size: 100,
    total: 0,
});
const total = ref(0);
const tableData = ref([]);
const fileList = ref([]);
const tableLoading = ref(false);
@@ -116,9 +109,9 @@
    getList();
};
const getList = () => {
  qualityInspectFileListPage({inspectId: currentId.value}).then(res => {
  qualityInspectFileListPage({inspectId: currentId.value, ...page}).then(res => {
    tableData.value = res.data.records;
        total.value = res.data.total;
        page.total = res.data.total;
  })
}
// è¡¨æ ¼é€‰æ‹©æ•°æ®

 src/views/qualityManagement/finalInspection/components/formDia.vue

@@ -155,7 +155,7 @@
    process: [{ required: true, message: "请输入", trigger: "blur" }],
    checkName: [{ required: false, message: "请输入", trigger: "blur" }],
    productId: [{ required: true, message: "请输入", trigger: "blur" }],
    productModelId: [{ required: false, message: "请选择", trigger: "change" }],
    productModelId: [{ required: true, message: "请选择", trigger: "change" }],
    testStandardId: [{required: false, message: "请选择指标", trigger: "change"}],
    unit: [{ required: false, message: "请输入", trigger: "blur" }],
    quantity: [{ required: true, message: "请输入", trigger: "blur" }],

 src/views/qualityManagement/nonconformingManagement/components/formDia.vue

@@ -9,14 +9,6 @@
      <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="状态：" prop="inspectState">
              <el-select v-model="form.inspectState">
                <el-option label="待处理" :value="0" />
                <el-option label="已处理" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类别：" prop="inspectType">
              <el-select v-model="form.inspectType">
                <el-option label="原材料检验" :value="0" />
@@ -43,7 +35,10 @@
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格型号：" prop="model">
              <el-input v-model="form.model" placeholder="请输入" clearable/>
              <el-select v-model="form.model" placeholder="请选择" clearable :disabled="operationType === 'edit'"
                          filterable readonly @change="handleChangeModel">
              <el-option v-for="item in modelOptions" :key="item.id" :label="item.model" :value="item.id" />
            </el-select>
            </el-form-item>
          </el-col>
        </el-row>
@@ -126,7 +121,7 @@

<script setup>
import {ref} from "vue";
import {productTreeList} from "@/api/basicData/product.js";
import {modelList, productTreeList} from "@/api/basicData/product.js";
import {
  getQualityUnqualifiedInfo,
  qualityUnqualifiedAdd,
@@ -150,7 +145,6 @@
    quantity: "",
    checkCompany: "",
    checkResult: "",
    inspectState: '',
    inspectType: '',
    defectivePhenomena: '',
    dealResult: '',
@@ -160,7 +154,7 @@
    process: [{ required: true, message: "请输入", trigger: "blur" }],
    checkName: [{ required: false, message: "请输入", trigger: "blur" }],
    productId: [{ required: true, message: "请输入", trigger: "blur" }],
    model: [{ required: false, message: "请输入", trigger: "blur" }],
    model: [{ required: true, message: "请输入", trigger: "blur" }],
    unit: [{ required: false, message: "请输入", trigger: "blur" }],
    quantity: [{ required: true, message: "请输入", trigger: "blur" }],
    checkCompany: [{ required: false, message: "请输入", trigger: "blur" }],
@@ -169,6 +163,7 @@
});
const { form, rules } = toRefs(data);
const productOptions = ref([]);
const modelOptions = ref([])

// æ‰“开弹框
const openDialog = (type, row) => {
@@ -178,7 +173,8 @@
  getProductOptions();
  if (operationType.value === 'edit') {
    getQualityUnqualifiedInfo(row.id).then(res => {
      form.value = {...res.data}
      const { inspectState, ...rest } = (res.data || {})
      form.value = { ...rest }
    })
  }
}
@@ -189,6 +185,9 @@
};
const getModels = (value) => {
  form.value.productName = findNodeById(productOptions.value, value);
  modelList({ id: value }).then((res) => {
    modelOptions.value = res;
  })
};
const findNodeById = (nodes, productId) => {
  for (let i = 0; i < nodes.length; i++) {
@@ -222,13 +221,15 @@
const submitForm = () => {
  proxy.$refs.formRef.validate(valid => {
    if (valid) {
      // çŠ¶æ€å­—段不在表单填写，也不传给后端
      const { inspectState, ...payload } = (form.value || {})
      if (operationType.value === "add") {
        qualityUnqualifiedAdd(form.value).then(res => {
        qualityUnqualifiedAdd(payload).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          closeDia();
        })
      } else {
        qualityUnqualifiedUpdate(form.value).then(res => {
        qualityUnqualifiedUpdate(payload).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          closeDia();
        })

 src/views/qualityManagement/nonconformingManagement/components/inspectionFormDia.vue

@@ -9,14 +9,6 @@
      <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="状态：" prop="inspectState">
              <el-select v-model="form.inspectState">
                <el-option label="待处理" :value="0" />
                <el-option label="已处理" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类别：" prop="inspectType">
              <el-select v-model="form.inspectType" disabled>
                <el-option label="原材料检验" :value="0" />
@@ -131,8 +123,7 @@
import {productTreeList} from "@/api/basicData/product.js";
import {
  getQualityUnqualifiedInfo,
  qualityUnqualifiedAdd,
  qualityUnqualifiedUpdate
  qualityUnqualifiedDeal
} from "@/api/qualityManagement/nonconformingManagement.js";
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])
@@ -152,7 +143,6 @@
    quantity: "",
    checkCompany: "",
    checkResult: "",
    inspectState: '',
    inspectType: '',
    defectivePhenomena: '',
    dealResult: '',
@@ -186,7 +176,8 @@
  getProductOptions();
  if (operationType.value === 'edit') {
    getQualityUnqualifiedInfo(row.id).then(res => {
      form.value = {...res.data}
      const { inspectState, ...rest } = (res.data || {})
      form.value = { ...rest }
    })
  }
}
@@ -230,17 +221,12 @@
const submitForm = () => {
  proxy.$refs.formRef.validate(valid => {
    if (valid) {
      if (operationType.value === "add") {
        qualityUnqualifiedAdd(form.value).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          closeDia();
        })
      } else {
        qualityUnqualifiedUpdate(form.value).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          closeDia();
        })
      }
      // çŠ¶æ€å­—段不在表单填写，也不传给后端；处理统一走 /deal æŽ¥å£
      const { inspectState, ...payload } = (form.value || {})
      qualityUnqualifiedDeal(payload).then(() => {
        proxy.$modal.msgSuccess("提交成功");
        closeDia();
      })
    }
  })
}

 src/views/qualityManagement/nonconformingManagement/index.vue

@@ -185,6 +185,7 @@
        clickFun: (row) => {
          openForm("edit", row);
        },
        disabled: (row) => row.inspectState === 1,
      },
      {
        name: "处理",
@@ -192,6 +193,7 @@
        clickFun: (row) => {
          openInspectionForm("edit", row);
        },
        disabled: (row) => row.inspectState === 1,
      },
    ],
  },
@@ -247,12 +249,20 @@

// æ‰“开弹框
const openForm = (type, row) => {
  if (type !== 'add' && row?.inspectState === 1) {
    proxy.$modal.msgWarning("已处理的数据不能再编辑");
    return;
  }
  nextTick(() => {
    formDia.value?.openDialog(type, row)
  })
};
// æ‰“开处理弹框
const openInspectionForm = (type, row) => {
  if (row?.inspectState === 1) {
    proxy.$modal.msgWarning("已处理的数据不能再处理");
    return;
  }
  nextTick(() => {
    inspectionFormDia.value?.openDialog(type, row)
  })

 src/views/qualityManagement/processInspection/components/filesDia.vue

@@ -26,20 +26,14 @@
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :page="page"
          :tableLoading="tableLoading"
          :isSelection="true"
          @selection-change="handleSelectionChange"
          @pagination="paginationSearch"
          height="500"
      >
      </PIMTable>
            <pagination
                style="margin: 10px 0"
                v-show="total > 0"
                @pagination="paginationSearch"
                :total="total"
                :page="page.current"
                :limit="page.size"
            />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDia">取消</el-button>
@@ -60,7 +54,6 @@
  qualityInspectFileDel,
  qualityInspectFileListPage
} from "@/api/qualityManagement/qualityInspectFile.js";
import Pagination from "@/components/PIMTable/Pagination.vue";
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])

@@ -98,8 +91,8 @@
const page = reactive({
    current: 1,
    size: 100,
    total: 0,
});
const total = ref(0);
const tableData = ref([]);
const fileList = ref([]);
const tableLoading = ref(false);
@@ -120,9 +113,9 @@
    getList();
};
const getList = () => {
  qualityInspectFileListPage({inspectId: currentId.value}).then(res => {
  qualityInspectFileListPage({inspectId: currentId.value, ...page}).then(res => {
    tableData.value = res.data.records;
        total.value = res.data.total;
        page.total = res.data.total;
  })
}
// è¡¨æ ¼é€‰æ‹©æ•°æ®

 src/views/qualityManagement/processInspection/components/formDia.vue

@@ -162,7 +162,7 @@
    process: [{ required: true, message: "请输入工序", trigger: "blur" }],
    checkName: [{ required: false, message: "请输入", trigger: "blur" }],
    productId: [{ required: true, message: "请输入", trigger: "blur" }],
    productModelId: [{ required: false, message: "请选择", trigger: "change" }],
    productModelId: [{ required: true, message: "请选择", trigger: "change" }],
    testStandardId: [{required: false, message: "请选择指标", trigger: "change"}],
    unit: [{ required: false, message: "请输入", trigger: "blur" }],
    quantity: [{ required: true, message: "请输入", trigger: "blur" }],

 src/views/qualityManagement/rawMaterialInspection/components/filesDia.vue

@@ -26,20 +26,14 @@
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :page="page"
          :tableLoading="tableLoading"
          :isSelection="true"
          @selection-change="handleSelectionChange"
          @pagination="paginationSearch"
          height="500"
      >
      </PIMTable>
            <pagination
                style="margin: 10px 0"
                v-show="total > 0"
                @pagination="paginationSearch"
                :total="total"
                :page="page.current"
                :limit="page.size"
            />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDia">取消</el-button>
@@ -60,7 +54,6 @@
  qualityInspectFileDel,
  qualityInspectFileListPage
} from "@/api/qualityManagement/qualityInspectFile.js";
import Pagination from "@/components/PIMTable/Pagination.vue";
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])

@@ -97,8 +90,8 @@
const page = reactive({
    current: 1,
    size: 100,
    total: 0,
});
const total = ref(0);
const tableData = ref([]);
const fileList = ref([]);
const tableLoading = ref(false);
@@ -122,7 +115,7 @@
const getList = () => {
  qualityInspectFileListPage({inspectId: currentId.value, ...page}).then(res => {
    tableData.value = res.data.records;
        total.value = res.data.total;
        page.total = res.data.total;
  })
}
// è¡¨æ ¼é€‰æ‹©æ•°æ®

 src/views/qualityManagement/rawMaterialInspection/components/formDia.vue

@@ -175,7 +175,7 @@
    supplier: [{required: true, message: "请输入", trigger: "blur"}],
    checkName: [{required: false, message: "请输入", trigger: "blur"}],
    productId: [{required: true, message: "请输入", trigger: "blur"}],
    productModelId: [{required: false, message: "请选择产品型号", trigger: "change"}],
    productModelId: [{required: true, message: "请选择产品型号", trigger: "change"}],
    testStandardId: [{required: false, message: "请选择指标", trigger: "change"}],
    unit: [{required: false, message: "请输入", trigger: "blur"}],
    quantity: [{required: true, message: "请输入", trigger: "blur"}],

 src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue

@@ -51,8 +51,8 @@
  itemHeight: 12,
  textStyle: { color: '#B8C8E0', fontSize: 14 },
  data: [
    { name: '出库', itemStyle: { color: '#4EE4FF' } },
    { name: '入库', itemStyle: { color: '#00D68F' } },
    { name: '出库', itemStyle: { color: 'rgba(11, 137, 254, 1)' } },
    { name: '入库', itemStyle: { color: 'rgba(11, 249, 254, 1)' } },
  ],
}


 src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <PanelHeader title="产品采购金额分析" />
    <PanelHeader title="采购品分布" />
    <div class="main-panel panel-item-customers">
      <CarouselCards :items="cardItems" :visible-count="3" />
      <div class="pie-chart-wrapper">

 src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <PanelHeader title="产品销售金额分析" />
    <PanelHeader title="销售品分布" />
    <div class="main-panel panel-item-customers">
      <CarouselCards :items="cardItems" :visible-count="3" />
      <div class="pie-chart-wrapper">

 src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <PanelHeader title="客户金额贡献排名" />
    <PanelHeader title="客户贡献排名" />
    <div class="panel-item-customers">
      <div class="switch-container">
        <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />

 src/views/reportAnalysis/financialAnalysis/components/DateTypeSwitch.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,94 @@
<template>
  <el-radio-group
    v-model="currentValue"
    class="date-type-switch"
    @change="handleChange"
  >
    <el-radio-button :label="1">周</el-radio-button>
    <el-radio-button :label="2">月</el-radio-button>
    <el-radio-button :label="3">季度</el-radio-button>
  </el-radio-group>
</template>

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

const props = defineProps({
  modelValue: {
    type: Number,
    default: 1, // é»˜è®¤é€‰ä¸­"周"
  },
})

const emit = defineEmits(['update:modelValue', 'change'])

const currentValue = ref(props.modelValue)

// ç›‘听外部值变化
watch(
  () => props.modelValue,
  (newVal) => {
    currentValue.value = newVal
  }
)

// å¤„理值变化
const handleChange = (value) => {
  emit('update:modelValue', value)
  emit('change', value)
}
</script>

<style scoped>
.date-type-switch {
  display: inline-flex;
}

/* æœªé€‰ä¸­çŠ¶æ€çš„样式 */
.date-type-switch :deep(.el-radio-button__inner) {
  background-color: rgba(26, 88, 176, 0.3);
  color: rgba(184, 200, 224, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 0;
  padding: 6px 20px;
  font-size: 14px;
  transition: all 0.3s;
}

/* ç¬¬ä¸€ä¸ªæŒ‰é’®å·¦ä¾§åœ†è§’ */
.date-type-switch :deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* æœ€åŽä¸€ä¸ªæŒ‰é’®å³ä¾§åœ†è§’ */
.date-type-switch :deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* æŒ‰é’®ä¹‹é—´çš„分隔线 */
.date-type-switch :deep(.el-radio-button:not(:last-child) .el-radio-button__inner) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* é€‰ä¸­çŠ¶æ€çš„样式 */
.date-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: linear-gradient(180deg, #3378ff 0%, #00a4ed 100%);
  color: #ffffff;
  border-color: rgba(51, 120, 255, 0.8);
  box-shadow: none;
}

/* æ‚¬åœæ•ˆæžœ */
.date-type-switch :deep(.el-radio-button__inner:hover) {
  color: rgba(184, 200, 224, 1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* é€‰ä¸­çŠ¶æ€æ‚¬åœ */
.date-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner:hover) {
  background: linear-gradient(180deg, #4e8aff 0%, #4ee4ff 100%);
  color: #ffffff;
}
</style>

 src/views/reportAnalysis/financialAnalysis/components/PanelHeader.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,33 @@
<template>
  <div class="panel-header">
    <span class="panel-title">{{ title }}</span>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true,
    default: ''
  }
})
</script>

<style scoped>
.panel-header {
  background-image: url("@/assets/BI/kehuhetongback@2x.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.panel-title {
  width: 100%;
  font-weight: 500;
  font-size: 16px;
  color: #D9ECFF;
  padding-left: 46px;
  line-height: 36px;
}
</style>

 src/views/reportAnalysis/financialAnalysis/components/ProductTypeSwitch.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,98 @@
<template>
  <el-radio-group
    v-model="currentValue"
    class="product-type-switch"
    @change="handleChange"
  >
    <el-radio-button
      v-for="opt in options"
      :key="opt.label"
      :label="opt.label"
    >
      {{ opt.text }}
    </el-radio-button>
  </el-radio-group>
</template>

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

const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: 1, // é»˜è®¤é€‰ä¸­ç¬¬ä¸€ä¸ª
  },
  // å¯é…ç½®é€‰é¡¹ï¼Œé»˜è®¤æ˜¯åŽŸç»„件的「原材料 / åŠæˆå“ / æˆå“ã€
  options: {
    type: Array,
    default: () => [
      { label: 1, text: '原材料' },
      { label: 3, text: '半成品' },
      { label: 2, text: '成品' },
    ],
  },
})

const emit = defineEmits(['update:modelValue', 'change'])

const currentValue = ref(props.modelValue)

watch(
  () => props.modelValue,
  (newVal) => {
    currentValue.value = newVal
  }
)

const handleChange = (value) => {
  emit('update:modelValue', value)
  emit('change', value)
}
</script>

<style scoped>
.product-type-switch {
  display: inline-flex;
}

.product-type-switch :deep(.el-radio-button__inner) {
  background-color: rgba(26, 88, 176, 0.3);
  color: rgba(184, 200, 224, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 0;
  padding: 6px 20px;
  font-size: 14px;
  transition: all 0.3s;
}

.product-type-switch :deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.product-type-switch :deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.product-type-switch :deep(.el-radio-button:not(:last-child) .el-radio-button__inner) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.product-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: linear-gradient(180deg, #3378ff 0%, #00a4ed 100%);
  color: #ffffff;
  border-color: rgba(51, 120, 255, 0.8);
  box-shadow: none;
}

.product-type-switch :deep(.el-radio-button__inner:hover) {
  color: rgba(184, 200, 224, 1);
  border-color: rgba(255, 255, 255, 0.3);
}

.product-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner:hover) {
  background: linear-gradient(180deg, #4e8aff 0%, #4ee4ff 100%);
  color: #ffffff;
}
</style>

 src/views/reportAnalysis/financialAnalysis/components/center-bottom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,107 @@
<template>
  <div>
    <PanelHeader title="利润趋势" />
    <div class="main-panel panel-item-customers">
      <Echarts
        ref="chart"
        :chartStyle="chartStyle"
        :grid="grid"
        :legend="barLegend"
        :series="barSeries1"
        :tooltip="tooltip"
        :xAxis="xAxis1"
        :yAxis="yAxis1"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
        style="height: 260px"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import { profitTrendAnalysis } from '@/api/viewIndex.js'

const chartStyle = { width: '100%', height: '150%' }
const grid = { left: '3%', right: '4%', bottom: '3%', top: '4%', containLabel: true }
const barLegend = { show: false, textStyle: { color: '#B8C8E0' }, data: ['利润'] }
const barSeries1 = ref([
  {
    name: '利润',
    type: 'bar',
    barGap: 0,
    barWidth: 30,
    emphasis: { focus: 'series' },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0, y: 1, x2: 0, y2: 0,
        colorStops: [
          { offset: 0, color: 'rgba(0,164,237,0)' },
          { offset: 1, color: '#4EE4FF' },
        ],
      },
    },
    data: [],
  },
])

const xAxis1 = ref([
  {
    type: 'category',
    axisTick: { show: false },
    axisLabel: { color: '#B8C8E0' },
    data: [],
  },
])

const tooltip = {
  trigger: 'axis',
  axisPointer: { type: 'shadow' },
  formatter(params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div>${item.marker} ${item.seriesName}: ${item.value} å…ƒ</div>`
    })
    return result
  },
}

const yAxis1 = [{ type: 'value', axisLabel: { color: '#B8C8E0' } }]

const fetchData = () => {
  profitTrendAnalysis()
    .then((res) => {
      if (res.code === 200 && Array.isArray(res.data)) {
        const list = res.data
        xAxis1.value[0].data = list.map((d) => d.name)
        barSeries1.value[0].data = list.map((d) => parseFloat(d.value) || 0)
      }
    })
    .catch((err) => {
      console.error('获取利润趋势分析失败:', err)
    })
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 428px;
}
</style>


 src/views/reportAnalysis/financialAnalysis/components/center-center.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,191 @@
<template>
  <div>
    <!-- è®¾å¤‡ç»Ÿè®¡ -->
    <div class="equipment-stats">
      <div class="equipment-header">
        <img
          src="@/assets/BI/shujutongjiicon@2x.png"
          alt="图标"
          class="equipment-icon"
        />
        <span class="equipment-title">收支对比分析</span>
      </div>
      <Echarts
        ref="chart"
        :chartStyle="chartStyle"
        :grid="grid"
        :legend="lineLegend"
        :series="lineSeries"
        :tooltip="tooltip"
        :xAxis="xAxis1"
        :yAxis="yAxis1"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
        style="height: 260px"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import Echarts from '@/components/Echarts/echarts.vue'
import { incomeExpenseAnalysis } from '@/api/viewIndex.js'

const chartStyle = { width: '100%', height: '100%' }
const grid = {
  left: '3%',
  right: '4%',
  bottom: '3%',
  top: '16%',
  containLabel: true,
}

const lineLegend = {
  show: true,
  top: '2%',
  left: 'center',
  itemGap: 24,
  itemWidth: 12,
  itemHeight: 12,
  textStyle: { color: '#B8C8E0', fontSize: 14 },
  data: [
    { name: '收入', itemStyle: { color: 'rgba(11, 137, 254, 1)' } },
    { name: '支出', itemStyle: { color: 'rgba(11, 249, 254, 1)' } },
  ],
}

const xAxis1 = ref([
  {
    type: 'category',
    data: [],
    axisTick: { show: false },
    axisLine: { show: false, lineStyle: { color: 'rgba(184, 200, 224, 0.3)' } },
    axisLabel: { color: '#B8C8E0', fontSize: 12 },
    splitLine: { show: false, lineStyle: { type: 'dashed', color: 'rgba(184, 200, 224, 0.2)' } },
  },
])

const yAxis1 = [
  {
    type: 'value',
    name: '单位: å…ƒ',
    nameTextStyle: { color: '#B8C8E0', fontSize: 12, padding: [0, 0, 0, 0] },
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: { color: '#B8C8E0', fontSize: 12 },
    splitLine: { lineStyle: { color: '#B8C8E0' } },
  },
]

const lineSeries = ref([
  {
    name: '收入',
    type: 'line',
    smooth: false,
    showSymbol: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: { color: 'rgba(11, 137, 254, 1)', width: 2 },
    itemStyle: { color: 'rgba(11, 137, 254, 1)', borderWidth: 0 },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(11, 137, 254, 0.40)' },
        { offset: 1, color: 'rgba(11, 137, 254, 0.05)' },
      ]),
    },
    data: [],
    emphasis: { focus: 'series' },
  },
  {
    name: '支出',
    type: 'line',
    smooth: false,
    showSymbol: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: { color: 'rgba(11, 249, 254, 1)', width: 2 },
    itemStyle: { color: 'rgba(11, 249, 254, 1)', borderWidth: 0 },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(11, 249, 254, 0.5)' },
        { offset: 1, color: 'rgba(11, 249, 254, 0.05)' },
      ]),
    },
    data: [],
    emphasis: { focus: 'series' },
  },
])

const tooltip = {
  trigger: 'axis',
  axisPointer: { type: 'line' },
  formatter(params) {
    let result = params[0].axisValue + '<br/>'
    params.forEach((item) => {
      result += `${item.marker} ${item.seriesName}: ${item.value} å…ƒ<br/>`
    })
    return result
  },
}

const fetchData = () => {
  incomeExpenseAnalysis()
    .then((res) => {
      if (res.code === 200 && Array.isArray(res.data)) {
        const list = res.data
        xAxis1.value[0].data = list.map((d) => d.date)
        lineSeries.value[0].data = list.map((d) => Number(d.income) || 0)
        lineSeries.value[1].data = list.map((d) => Number(d.expense) || 0)
      }
    })
    .catch((err) => {
      console.error('获取收支对比分析失败:', err)
    })
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.equipment-stats {
  border: 1px solid #1a58b0;
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.equipment-header {
  font-weight: 500;
  font-size: 21px;
  display: flex;
  border-bottom: 1px solid;
  border-image: linear-gradient(
      270deg,
      rgba(0, 126, 255, 0) 0%,
      rgba(0, 126, 255, 0.4549) 35%,
      #007eff 78%,
      #007eff 100%
    )
    1;
  padding-bottom: 2px;
}

.equipment-title {
  font-weight: 500;
  font-size: 18px;
  background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 50px;
}

.equipment-icon {
  width: 50px;
  height: 50px;
}
</style>

 src/views/reportAnalysis/financialAnalysis/components/center-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,308 @@
<template>
  <div>
    <!-- é¡¶éƒ¨æ”¶æ”¯å¡ç‰‡ -->
    <div class="finance-cards">
      <!-- æœˆåº¦æ”¶å…¥ -->
      <div class="finance-card income-card">
        <div class="icon-box">
          <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
        </div>
        <div class="card-body">
          <div class="card-left">
            <div class="card-title">月度收入</div>
            <div class="card-amount">
              <span>{{ formatAmountWanNumber(income.amount) }}</span>
              <span v-if="isWanAmount(income.amount)" class="card-amount-unit">万</span>
            </div>
          </div>
          <div class="card-right">
            <div class="metric-row">
              <span class="metric-label">回款率</span>
              <span class="metric-value" :class="metricClass(income.repayRate)">
                {{ formatPercent(income.repayRate.value) }}
                <span class="arrow">{{ metricArrow(income.repayRate) }}</span>
              </span>
            </div>
            <div class="metric-row">
              <span class="metric-label">逾期数</span>
              <span class="metric-value metric-up">
                {{ formatAmountWanNumber(income.overdueCount) }}
                <span
                  v-if="isWanAmount(income.overdueCount)"
                  class="metric-unit"
                >
                  ä¸‡
                </span>
              </span>
            </div>
            <div class="metric-row">
              <span class="metric-label">逾期率</span>
              <span class="metric-value" :class="metricClass(income.overdueRate)">
                {{ formatPercent(income.overdueRate.value) }}
                <span class="arrow">{{ metricArrow(income.overdueRate) }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- æœˆåº¦æ”¯å‡º -->
      <div class="finance-card expense-card">
        <div class="icon-box">
          <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
        </div>
        <div class="card-body">
          <div class="card-left">
            <div class="card-title">月度支出</div>
            <div class="card-amount">
              <span>{{ formatAmountWanNumber(expense.amount) }}</span>
              <span v-if="isWanAmount(expense.amount)" class="card-amount-unit">万</span>
            </div>
          </div>
          <div class="card-right">
            <div class="metric-row">
              <span class="metric-label">付款率</span>
              <span class="metric-value" :class="metricClass(expense.netProfit)">
                {{ formatPercent(expense.netProfit.value) }}
                <span class="arrow">{{ metricArrow(expense.netProfit) }}</span>
              </span>
            </div>
            <div class="metric-row">
              <span class="metric-label">毛利润</span>
              <span class="metric-value metric-down">
                {{ formatAmountWanNumber(expense.grossProfit) }}
                <span
                  v-if="isWanAmount(expense.grossProfit)"
                  class="metric-unit"
                >
                  ä¸‡
                </span>
              </span>
            </div>
            <div class="metric-row">
              <span class="metric-label">利润率</span>
              <span class="metric-value" :class="metricClass(expense.profitRate)">
                {{ formatPercent(expense.profitRate.value) }}
                <span class="arrow">{{ metricArrow(expense.profitRate) }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getMonthlyIncome, getMonthlyExpenditure } from '@/api/viewIndex'

const income = ref({
  amount: 0,
  repayRate: { value: 0, trend: 0 },
  overdueCount: 0,
  overdueRate: { value: 0, trend: 0 },
})

const expense = ref({
  amount: 0,
  netProfit: { value: 0, trend: 0 },
  grossProfit: 0,
  profitRate: { value: 0, trend: 0 },
})

const fetchMonthlyIncome = async () => {
  const res = await getMonthlyIncome()
  const data = res?.data || {}

  income.value.amount = data.monthlyIncome ?? 0
  const collectionRate = Number(data.collectionRate ?? 0)
  const overdueRate = Number(data.overdueRate ?? 0)
  income.value.repayRate = {
    value: collectionRate,
    trend: collectionRate >= 0 ? 1 : -1,
  }
  income.value.overdueCount = data.overdueNum ?? 0
  income.value.overdueRate = {
    value: overdueRate,
    trend: overdueRate >= 0 ? 1 : -1,
  }
}

const fetchMonthlyExpenditure = async () => {
  const res = await getMonthlyExpenditure()
  const data = res?.data || {}

  expense.value.amount = data.monthlyExpenditure ?? 0
  const paymentRate = Number(data.paymentRate ?? 0)
  expense.value.netProfit = {
    value: paymentRate,
    trend: paymentRate >= 0 ? 1 : -1,
  }
  expense.value.grossProfit = data.grossProfit ?? 0

  const profitMarginRate = Number(data.profitMarginRate ?? 0)
  expense.value.profitRate = {
    value: profitMarginRate,
    trend: profitMarginRate >= 0 ? 1 : -1,
  }
}

const isWanAmount = (val) => {
  const num = Number(val) || 0
  return Math.abs(num) >= 10000
}

const formatAmountWanNumber = (val) => {
  const num = Number(val) || 0
  if (Math.abs(num) >= 10000) {
    return (num / 10000).toFixed(2)
  }
  return num.toFixed(2)
}

const formatPercent = (val) => {
  const num = Number(val) || 0
  // ç™¾åˆ†æ¯”展示始终用绝对值，小数保留两位
  return `${Math.abs(num).toFixed(2)}%`
}

const metricClass = (metric) => {
  if (metric?.trend === undefined || metric?.trend === null) return 'metric-up'
  return Number(metric.trend) >= 0 ? 'metric-up' : 'metric-down'
}

const metricArrow = (metric) => {
  if (metric?.trend === undefined || metric?.trend === null) return ''
  return Number(metric.trend) >= 0 ? '↑' : '↓'
}

onMounted(() => {
  fetchMonthlyIncome()
  fetchMonthlyExpenditure()
})
</script>

<style scoped>
.finance-cards {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.finance-card {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 18px 10px;
  background-image: url('@/assets/BI/border@2x.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 138px;
}

.icon-box {
  width: 92px;
  height: 92px;
  /* border: 1px dashed rgba(208, 231, 255, 0.55); */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
}

.card-icon {
  width: 78px;
  height: 78px;
}

.card-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.card-left {
  min-width: 90px;
}

.card-title {
  font-weight: 400;
  font-size: 18px;
  color: rgba(208, 231, 255, 0.7);
}

.card-amount {
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  margin-top: 8px;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-amount-unit {
  font-size: 20px;
  margin-left: 4px;
}

.card-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 6px;
}

.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #d0e7ff;
  white-space: nowrap;
}

.metric-label {
  margin-right: 12px;
}

.metric-label {
  opacity: 0.8;
}

.metric-value {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.metric-unit {
  font-size: 12px;
  margin-left: 2px;
}

.metric-value .arrow {
  font-size: 13px;
  margin-left: 4px;
}

.metric-up {
  color: #00c853;
}

.metric-down {
  color: #ff5252;
}


</style>

 src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,264 @@
<template>
  <div>
    <PanelHeader title="构成分析" />
    <div class="main-panel panel-item-customers">
      <div class="filters-row">
        <ProductTypeSwitch
          v-model="amountType"
          :options="amountTypeOptions"
          @change="handleTypeChange"
        />
      </div>
      <!-- <CarouselCards :items="cardItems" :visible-count="3" /> -->
      <div class="pie-chart-wrapper">
        <div class="pie-background"></div>
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
          :legend="landLegend"
          :series="landSeries"
          :tooltip="landTooltip"
          :color="landColors"
          :options="pieOptions"
          style="height: 320px"
          class="land-chart"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import ProductTypeSwitch from './ProductTypeSwitch.vue'
import { rawMaterialPurchaseAmountRatio } from '@/api/viewIndex.js'

/**
 * @introduction æŠŠæ•°ç»„中key值相同的那一项提取出来，组成一个对象
 * @param {参数类型} array ä¼ å…¥çš„数组 [{a:"1",b:"2"},{a:"2",b:"3"}]
 * @param {参数类型} key  å±žæ€§å a
 * @return {返回类型说明}
 */
function array2obj(array, key) {
  const resObj = {}
  for (let i = 0; i < array.length; i++) {
    resObj[array[i][key]] = array[i]
  }
  return resObj
}

// å½“前类型：1=支出 2=收入
const amountType = ref(1)

const amountTypeOptions = [
  { label: 1, text: '支出' },
  { label: 2, text: '收入' },
]

// æ•°æ®åˆ—表（来自接口）
const dataList = ref([])

// å¡ç‰‡æ•°æ®
const cardItems = ref([])

// é¢œè‰²åˆ—表
const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']

const landObjData = computed(() => array2obj(dataList.value, 'name'))

// å›¾ä¾‹é…ç½®ï¼ˆå³ä¾§ç«–排）
const landLegend = computed(() => {
  const data = dataList.value.map((d, idx) => ({
    name: d.name,
    icon: 'circle',
    textStyle: {
      fontSize: 18,
      color: landColors[idx % landColors.length],
    },
  }))

  return {
    orient: 'vertical',
    top: 'center',
    left: '52%',
    itemGap: 30,
    show: true,
    data: data,
    formatter: function (name) {
      const item = landObjData.value[name]
      if (!item) return name
      return `{title|${name}}{value|${item.value}}{unit|元}{percent|${item.rate}}{unit|%}`
    },
    textStyle: {
      rich: {
        value: {
          color: '#43e8fc',
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 10],
        },
        unit: {
          color: '#82baff',
          fontSize: 12,
          fontWeight: 600,
          padding: [0, 10, 0, 0],
        },
        percent: {
          color: '#43e8fc',
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 0],
        },
        title: {
          fontSize: 12,
          padding: [0, 0, 0, 0],
        },
      },
    },
  }
})

// æç¤ºæ¡†
const landTooltip = {
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c}元 ({d}%)',
}

// åŒå±‚环形饼图
// åŒå±‚环形饼图
const landSeries = ref([
  {
    name: '构成分析',
    type: 'pie',
    radius: ['40%', '60%'],
    center: ['25%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
      color: function (params) {
        return landColors[params.dataIndex % landColors.length]
      },
    },
    label: {
      show: false
    },
    minAngle: 15,
    data: dataList.value,
    animationType: 'scale',
    animationEasing: 'elasticOut',
    animationDelay: function () {
      return Math.random() * 200
    },
  },
  {
    // å†…圈
    type: 'pie',
    radius: ['40%', '45%'],
    center: ['25%', '50%'],
    silent: true,
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
    itemStyle: {
      color: 'rgba(0, 127, 255, 0.25)',
    },
    data: [1],
  },
])

const chartStyle = {
  width: '100%',
  height: '100%',
}

const pieOptions = {
  backgroundColor: 'transparent',
  textStyle: { color: '#B8C8E0' },
}

const fetchData = () => {
  // ç›®å‰æŽ¥å£åªæœ‰æ”¯å‡ºæž„成占比，先忽略类型参数
  // é¢„留扩展：后续可根据 amountType åˆ‡ä¸åŒæŽ¥å£
  rawMaterialPurchaseAmountRatio()
    .then((res) => {
      if (res.code === 200 && Array.isArray(res.data)) {
        const items = res.data
        cardItems.value = items.map((item) => ({
          label: item.name,
          value: item.value,
          unit: '元',
          rate: item.rate,
        }))
        dataList.value = items.map((it) => ({
          name: it.name,
          value: parseFloat(it.value) || 0,
          rate: it.rate,
          children: [],
        }))
        landSeries.value[0].data = dataList.value
      }
    })
    .catch((err) => {
      console.error('获取原材料采购金额占比失败:', err)
    })
}

const handleTypeChange = () => {
  fetchData()
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filters-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 449px;
}

.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  background: transparent;
}


.pie-background {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-51.5%, -50%);
  width: 310px;
  height: 310px;
  background-image: url('@/assets/BI/玫瑰图边框.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
</style>

 src/views/reportAnalysis/financialAnalysis/components/left-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,134 @@
<template>
  <div>
    <PanelHeader title="回款与开票分析" />
    <div class="main-panel panel-item-customers">
      <Echarts
        ref="chart"
        :chartStyle="chartStyle"
        :grid="grid"
        :legend="barLegend"
        :series="barSeries1"
        :tooltip="tooltip"
        :xAxis="xAxis1"
        :yAxis="yAxis1"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
        style="height: 260px"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getAmountHalfYear } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'

const chartStyle = {
  width: '100%',
  height: '160%',
}

const grid = { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true }
const barLegend = {
  show: true,
  textStyle: { color: '#B8C8E0' },
  data: ['开票金额', '回款金额'],
}
const barSeries1 = ref([
  {
    name: '开票金额',
    type: 'bar',
    barWidth: 20,
    emphasis: { focus: 'series' },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 1, color: 'rgba(0, 164, 237, 0)' },
          { offset: 0, color: 'rgba(78, 228, 255, 1)' },
        ],
      },
    },
    data: [],
  },
  {
    name: '回款金额',
    type: 'bar',
    barGap: '40%',
    barWidth: 20,
    emphasis: { focus: 'series' },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 1, color: 'rgba(83, 126, 245, 0.19)' },
          { offset: 0, color: 'rgba(144, 97, 248, 1)' },
        ],
      },
    },
    data: [],
  },
])

const tooltip = {
  trigger: 'axis',
  axisPointer: { type: 'shadow' },
  formatter(params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div>${item.marker} ${item.seriesName}: ${item.value} å…ƒ</div>`
    })
    return result
  },
}

const xAxis1 = ref([{ type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] }])
const yAxis1 = [{ type: 'value', axisLabel: { color: '#B8C8E0' } }]

const fetchData = () => {
  getAmountHalfYear()
    .then((res) => {
      if (res.code === 200 && Array.isArray(res.data)) {
        const items = res.data
        xAxis1.value[0].data = items.map((item) => item.month)
        barSeries1.value[0].data = items.map(
          (item) => parseFloat(item.invoiceAmount) || 0
        )
        barSeries1.value[1].data = items.map(
          (item) => parseFloat(item.receiptAmount) || 0
        )
      }
    })
    .catch((err) => {
      console.error('获取近半年回款与开票数据失败:', err)
    })
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 449px;
}
</style>

 src/views/reportAnalysis/financialAnalysis/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,291 @@
<template>
  <div class="scale-container">
    <div class="data-dashboard" :style="{ transform: `scale(${scaleRatio})` }">
    <!-- å…¨å±æŒ‰é’® - ç§»åŠ¨åˆ°å·¦ä¸Šè§’ -->
    <button class="fullscreen-btn" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏显示'">
      <svg v-if="!isFullscreen" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
      </svg>
      <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
      </svg>
    </button>

    <!-- é¡¶éƒ¨æ ‡é¢˜æ  -->
    <div class="dashboard-header">
      <div class="factory-name">财务数据分析</div>
    </div>

    <!-- ä¸»è¦å†…容区域 -->
    <div class="dashboard-content">
      <!-- å·¦ä¾§åŒºåŸŸ -->
      <div class="left-panel">
        <LeftTop />

        <LeftBottom />
      </div>

      <!-- ä¸­é—´åŒºåŸŸ -->
      <div class="center-panel">
        <CenterTop />
        <CenterCenter/>
        <CenterBottom />
      </div>

      <!-- å³ä¾§åŒºåŸŸ -->
      <div class="right-panel">
        <RightBottom />
        <RightTop />
      </div>
    </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import autofit from 'autofit.js'
import LeftBottom from './components/left-bottom.vue'
import CenterCenter from './components/center-center.vue'
import RightTop from '../dataDashboard/components/basic/right-top.vue'
import RightBottom from '../dataDashboard/components/basic/right-bottom.vue'
import useUserStore from '@/store/modules/user'
import LeftTop from './components/left-top.vue'
import CenterTop from './components/center-top.vue'
import CenterBottom from './components/center-bottom.vue'

// å…¨å±ç›¸å…³çŠ¶æ€
const isFullscreen = ref(false);

// ç¼©æ”¾æ¯”例
const scaleRatio = ref(1)
// è®¾è®¡å°ºå¯¸ï¼ˆåŸºå‡†å°ºå¯¸ï¼‰- æ ¹æ®å®žé™…设计稿调整
const designWidth = 1920
const designHeight = 1080

// ç”¨æˆ·store
const userStore = useUserStore()

// è®¡ç®—缩放比例
const calculateScale = () => {
  const container = document.querySelector('.scale-container')
  if (!container) return

  // èŽ·å–容器的实际尺寸
  const rect = container.getBoundingClientRect?.()
  const containerWidth = container.clientWidth || rect?.width || window.innerWidth
  const containerHeight = container.clientHeight || rect?.height || window.innerHeight

  // è®¡ç®—宽高缩放比例，取较小值以保证内容完整显示（等比缩放）
  const scaleX = containerWidth / designWidth
  const scaleY = containerHeight / designHeight
  scaleRatio.value = Math.min(scaleX, scaleY)
}

// çª—口大小变化处理
const handleResize = () => {
  // å»¶è¿Ÿæ‰§è¡Œï¼Œç¡®ä¿DOM更新完成
  setTimeout(() => {
    calculateScale()
  }, 100)
}

// å…¨å±åŠŸèƒ½å®žçŽ° - é’ˆå¯¹scale-container元素
const toggleFullscreen = () => {
  const element = document.querySelector('.scale-container')

  if (!element) return

  if (!isFullscreen.value) {
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen()
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen()
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
  }
}

// ç›‘听全屏变化事件
const handleFullscreenChange = () => {
  const fullscreenElement = document.fullscreenElement || 
                           document.webkitFullscreenElement || 
                           document.msFullscreenElement
  isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('scale-container')

  // å…¨å±çŠ¶æ€å˜åŒ–时，延迟重新计算缩放比例（确保DOM更新完成）
  setTimeout(() => {
    calculateScale()
  }, 200)
}

// ç”Ÿå‘½å‘¨æœŸé’©å­
onMounted(() => {
  // ä½¿ç”¨nextTick确保DOM完全渲染后再初始化
  nextTick(() => {
    // è®¡ç®—初始缩放比例
    calculateScale()
  })

  window.addEventListener('resize', handleResize)
  window.addEventListener('fullscreenchange', handleFullscreenChange)
  window.addEventListener('webkitfullscreenchange', handleFullscreenChange)
  window.addEventListener('MSFullscreenChange', handleFullscreenChange)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  window.removeEventListener('fullscreenchange', handleFullscreenChange)
  window.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
  window.removeEventListener('MSFullscreenChange', handleFullscreenChange)
  // ç§»é™¤æˆ‘们添加的autofit动态调整监听器
  if (window._autofitUpdateHandler) {
    window.removeEventListener('resize', window._autofitUpdateHandler)
    delete window._autofitUpdateHandler
  }
  // å…³é—­autofit
  autofit.off()
})
</script>

<style scoped>
/* å¤–部缩放容器 - å æ®æ•´ä¸ªè§†å£ */
.scale-container {
position: relative;
width: 100%;
/* é¡µé¢åœ¨å¸¸è§„布局下（有顶栏）默认减去 84px，避免内容被裁切 */
height: calc(100vh - 84px);
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
overflow: hidden;
}

/* å†…部内容区域 - å›ºå®šè®¾è®¡å°ºå¯¸ */
.data-dashboard {
position: relative;
width: 1920px;
height: 1080px;
background-image: url("@/assets/BI/backImage@2x.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform-origin: center center;
}

/* å…¨å±çŠ¶æ€çš„样式 - ä½œç”¨äºŽscale-container */
.scale-container:fullscreen {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: #000;
z-index: 9999;
}

/* Webkit浏览器前缀 */
.scale-container:-webkit-full-screen {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: #000;
z-index: 9999;
}

/* MS浏览器前缀 */
.scale-container:-ms-fullscreen {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: #000;
z-index: 9999;
}


.dashboard-header {
position: relative;
z-index: 1;
height: 86px;
background-image: url("@/assets/BI/biaoti.png");
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}

.factory-name {
font-weight: 600;
font-size: 52px;
color: #FFFFFF;
top: 16px;
position: absolute;
}

.fullscreen-btn {
position: absolute;
top: 10px;
left: 20px;
width: 40px;
height: 40px;
background: rgba(0, 20, 60, 0.8);
border: 1px solid rgba(0, 212, 255, 0.3);
border-radius: 6px;
color: #00d4ff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
z-index: 10000;
}

.fullscreen-btn:hover {
background: rgba(0, 30, 90, 0.9);
border-color: rgba(0, 212, 255, 0.5);
}

.dashboard-content {
position: relative;
z-index: 1;
display: flex;
gap: 30px;
padding: 0 30px;
height: calc(100% - 86px);
overflow: hidden;
}

/* ç¡®ä¿å„面板能够正确显示 */
.left-panel, .center-panel, .right-panel {
overflow: hidden;
}

.left-panel,
.right-panel {
flex: 1;
display: flex;
flex-direction: column;
gap: 24px;
width: 520px;
}

.center-panel {
flex: 1.5;
display: flex;
flex-direction: column;
gap: 20px;
}

</style>

 src/views/safeProduction/accidentReportingRecord/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,862 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">事故名称：</span>
        <el-input v-model="searchForm.accidentName"
                  style="width: 240px"
                  placeholder="请输入事故名称搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span class="search_title ml10">事故类型：</span>
        <el-select v-model="searchForm.accidentType"
                   clearable
                   @change="handleQuery"
                   style="width: 240px">
          <el-option v-for="item in accidentTypeOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value" />
        </el-select>
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">
          æœç´¢
        </el-button>
      </div>
      <div>
        <el-button type="primary"
                   @click="openForm('add')">新增事故</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"
                :total="page.total"></PIMTable>
    </div>
    <!-- æ–°å¢ž/编辑事故弹窗 -->
    <el-dialog v-model="dialogVisible"
               :title="dialogTitle"
               width="800px"
               :close-on-click-modal="false">
      <el-form ref="formRef"
               :model="form"
               :rules="rules"
               label-width="140px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="事故编号"
                          prop="accidentCode">
              <el-input v-model="form.accidentCode"
                        placeholder="请输入事故编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事故名称"
                          prop="accidentName">
              <el-input v-model="form.accidentName"
                        placeholder="请输入事故名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="事故发生时间："
                          prop="happenTime">
              <el-date-picker style="width: 100%"
                              v-model="form.happenTime"
                              value-format="YYYY-MM-DD HH:mm:ss"
                              format="YYYY-MM-DD HH:mm:ss"
                              type="datetime"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事故发生位置"
                          prop="happenLocation">
              <el-input v-model="form.happenLocation"
                        placeholder="请输入事故发生位置" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="事故等级"
                          prop="accidentGrade">
              <el-select v-model="form.accidentGrade"
                         placeholder="请选择事故等级"
                         style="width: 100%">
                <el-option v-for="item in accidentGradeOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事故类型"
                          prop="accidentType">
              <el-select v-model="form.accidentType"
                         placeholder="请选择事故类型"
                         style="width: 100%">
                <el-option v-for="item in accidentTypeOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="人员损失情况    "
                          prop="personLoss">
              <el-input v-model="form.personLoss"
                        placeholder="请输入人员损失情况" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="直接财产损失（元）"
                          prop="assetLoss">
              <el-input v-model="form.assetLoss"
                        type="number"
                        placeholder="请输入直接财产损失" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="上报人"
                          prop="createUser">
              <el-select v-model="form.createUser"
                         placeholder="请选择"
                         disabled
                         clearable>
                <el-option v-for="item in userList"
                           :key="item.userId"
                           :label="item.nickName"
                           :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上报时间"
                          prop="createTime">
              <el-date-picker style="width: 100%"
                              v-model="form.createTime"
                              value-format="YYYY-MM-DD HH:mm:ss"
                              format="YYYY-MM-DD HH:mm:ss"
                              type="datetime"
                              disabled
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="事故直接原因"
                      prop="accidentCause">
          <el-input v-model="form.accidentCause"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入事故直接原因" />
        </el-form-item>
        <el-form-item label="事故根本原因"
                      prop="rootCause">
          <el-input v-model="form.rootCause"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入事故根本原因" />
        </el-form-item>
        <el-form-item label="生产影响情况"
                      prop="productionLoss">
          <el-input v-model="form.productionLoss"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入生产影响情况" />
        </el-form-item>
        <el-form-item label="现场应急处置措施"
                      prop="handleMeasures">
          <el-input v-model="form.handleMeasures"
                    type="textarea"
                    :rows="3"
                    placeholder="现场应急处置措施" />
        </el-form-item>
        <el-form-item label="备注"
                      prop="remark">
          <el-input v-model="form.remark"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- æŸ¥çœ‹äº‹æ•…详情弹窗 -->
    <el-dialog v-model="viewDialogVisible"
               title="事故详情"
               width="900px"
               :close-on-click-modal="false">
      <div class="knowledge-detail">
        <el-descriptions :column="2"
                         border>
          <el-descriptions-item label="事故编码">
            <span>{{ currentKnowledge.accidentCode }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="事故名称">
            <span>{{ currentKnowledge.accidentName }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="事故发生时间">
            {{ currentKnowledge.happenTime }}
          </el-descriptions-item>
          <el-descriptions-item label="事故发生地点">
            {{ currentKnowledge.happenLocation }}
          </el-descriptions-item>
          <el-descriptions-item label="事故等级">
            <el-tag :type="accidentGradeType(currentKnowledge.accidentGrade)">{{ currentKnowledge.accidentGrade }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="事故类型">
            <el-tag type="info">{{ accidentTypeLabel(currentKnowledge.accidentType) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="人员伤亡情况">
            {{ currentKnowledge.personLoss }}
          </el-descriptions-item>
          <el-descriptions-item label="直接财产损失（元）">
            {{ currentKnowledge.assetLoss }}
          </el-descriptions-item>
          <el-descriptions-item label="上报人">
            {{ currentKnowledge.createUserName }}
          </el-descriptions-item>
          <el-descriptions-item label="上报时间">
            {{ currentKnowledge.createTime }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="detail-section">
          <h4>事故直接原因</h4>
          <div class="detail-content">{{ currentKnowledge.accidentCause }}</div>
        </div>
        <div class="detail-section">
          <h4>事故根本原因</h4>
          <div class="detail-content">{{ currentKnowledge.rootCause }}</div>
        </div>
        <div class="detail-section">
          <h4>生产影响情况</h4>
          <div class="detail-content">{{ currentKnowledge.productionLoss }}</div>
        </div>
        <div class="detail-section">
          <h4>现场应急处置措施</h4>
          <div class="detail-content">{{ currentKnowledge.handleMeasures }}</div>
        </div>
        <div class="detail-section">
          <h4>备注</h4>
          <div class="detail-content">{{ currentKnowledge.remark }}</div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
          <!-- <el-button type="success" @click="markAsFavorite">收藏@</el-button> -->
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { Search } from "@element-plus/icons-vue";
  import {
    onMounted,
    ref,
    reactive,
    toRefs,
    getCurrentInstance,
    computed,
  } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import PIMTable from "@/components/PIMTable/PIMTable.vue";
  import { userListNoPage } from "@/api/system/user.js";
  import useUserStore from "@/store/modules/user";
  import {
    safeAccidentListPage,
    safeAccidentAdd,
    safeAccidentUpdate,
    safeAccidentDel,
  } from "@/api/safeProduction/accidentReportingRecord.js";
  import dayjs from "dayjs";
  const userStore = useUserStore();
  // è¡¨å•éªŒè¯è§„则
  const rules = {
    accidentCode: [
      { required: true, message: "请输入事故编号", trigger: "blur" },
    ],
    accidentName: [
      { required: true, message: "请输入事故名称", trigger: "blur" },
    ],
    happenTime: [
      { required: true, message: "请选择事故发生时间", trigger: "change" },
    ],
    happenLocation: [
      { required: true, message: "请输入事故发生位置", trigger: "blur" },
    ],
    accidentGrade: [
      { required: true, message: "请选择事故等级", trigger: "change" },
    ],
    accidentType: [
      { required: true, message: "请选择事故类型", trigger: "change" },
    ],
  };

  // å“åº”式数据
  const data = reactive({
    searchForm: {
      accidentName: "",
      accidentType: "",
    },
    tableLoading: false,
    page: {
      current: 1,
      size: 20,
      total: 0,
    },
    tableData: [],
    selectedIds: [],
    form: {
      accidentCode: "", // äº‹æ•…编码
      accidentName: "", // äº‹æ•…名称
      happenTime: "", // äº‹æ•…发生时间
      happenLocation: "", // äº‹æ•…发生地点
      accidentGrade: "", // äº‹æ•…等级
      accidentType: "", // äº‹æ•…类型
      personLoss: "", // äººå‘˜ä¼¤äº¡
      assetLoss: "", // èµ„产损失
      createUser: "", // åˆ›å»ºç”¨æˆ·
      createTime: "", // åˆ›å»ºæ—¶é—´
      createUserName: "", // åˆ›å»ºç”¨æˆ·å
      accidentCause: "", // äº‹æ•…直接原因
      rootCause: "", // äº‹æ•…根本原因
      productionLoss: "", // ç”Ÿäº§æŸå¤±
      handleMeasures: "", // åº”急处置措施
      remark: "", // å¤‡æ³¨
    },
    dialogVisible: false,
    dialogTitle: "",
    dialogType: "add",
    viewDialogVisible: false,
    currentKnowledge: {},
  });

  const {
    searchForm,
    tableLoading,
    page,
    tableData,
    selectedIds,
    form,
    dialogVisible,
    dialogTitle,
    dialogType,
    viewDialogVisible,
    currentKnowledge,
  } = toRefs(data);

  // è¡¨å•å¼•ç”¨
  const formRef = ref();

  // è¡¨æ ¼åˆ—配置
  const tableColumn = ref([
    {
      label: "事故编码",
      prop: "accidentCode",
      showOverflowTooltip: true,
    },
    {
      label: "事故名称",
      prop: "accidentName",
      showOverflowTooltip: true,
    },
    {
      label: "事故发生时间",
      prop: "happenTime",
      showOverflowTooltip: true,
    },
    {
      label: "事故发生位置",
      prop: "happenLocation",
      showOverflowTooltip: true,
    },
    {
      label: "事故等级",
      prop: "accidentGrade",
      showOverflowTooltip: true,
    },
    {
      label: "事故类型",
      prop: "accidentType",
      showOverflowTooltip: true,
      formatData: params => {
        return accidentTypeLabel(params);
      },
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 200,
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            openForm("edit", row);
          },
        },
        {
          name: "查看",
          type: "text",
          clickFun: row => {
            viewKnowledge(row);
          },
        },
      ],
    },
  ]);
  const userList = ref([]);
  // ç”Ÿå‘½å‘¨æœŸ
  onMounted(() => {
    getCurrentFactoryName();
    userListNoPage().then(res => {
      userList.value = res.data;
    });
    getList();
    startAutoRefresh();
  });
  const handleChange = userId => {
    const selectedUser = userList.value.find(user => user.userId === userId);
    if (selectedUser) {
      form.value.coreResponsorUserName = selectedUser.nickName;
    }
  };
  // å¼€å§‹è‡ªåŠ¨åˆ·æ–°
  const startAutoRefresh = () => {
    setInterval(() => {
      getList();
    }, 600000); // 10分钟刷新一次 (10 * 60 * 1000 = 600000ms)
  };

  // æŸ¥è¯¢æ•°æ®
  const handleQuery = () => {
    page.value.current = 1;
    getList();
  };
  const accidentGradeType = val => {
    switch (val) {
      case "轻微事故":
        return "info";
      case "一般事故":
        return "info";
      case "较大事故":
        return "warning";
      case "重大事故":
        return "danger";
      default:
        return "info";
    }
  };
  const accidentGradeOptions = [
    {
      label: "轻微事故",
      value: "轻微事故",
    },
    {
      label: "一般事故",
      value: "一般事故",
    },
    {
      label: "较大事故",
      value: "较大事故",
    },
    {
      label: "重大事故",
      value: "重大事故",
    },
  ];
  const { proxy } = getCurrentInstance();
  const { accident_type } = proxy.useDict("accident_type");
  const accidentTypeOptions = computed(() => accident_type?.value || []);
  const accidentTypeLabel = val => {
    const item = accidentTypeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item ? item.label : val;
  };
  const getList = () => {
    tableLoading.value = true;
    safeAccidentListPage({ ...page.value, ...searchForm.value })
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
      })
      .catch(err => {
        tableLoading.value = false;
      });
  };

  // åˆ†é¡µå¤„理
  const pagination = obj => {
    page.value.current = obj.page;
    page.value.size = obj.limit;
    handleQuery();
  };
  const currentUserId = ref("");
  const currentUserName = ref("");
  const getCurrentFactoryName = async () => {
    let res = await userStore.getInfo();
    currentUserId.value = res.user.userId;
    currentUserName.value = res.user.nickName;
  };
  // é€‰æ‹©å˜åŒ–处理
  const handleSelectionChange = selection => {
    selectedIds.value = selection.map(item => item.id);
  };

  // æ‰“开表单
  const openForm = (type, row = null) => {
    dialogType.value = type;
    if (type === "add") {
      dialogTitle.value = "新增事故";
      // é‡ç½®è¡¨å•
      Object.assign(form.value, {
        accidentCode: "", // äº‹æ•…编码
        accidentName: "", // äº‹æ•…名称
        happenTime: "", // äº‹æ•…发生时间
        happenLocation: "", // äº‹æ•…发生地点
        accidentGrade: "", // äº‹æ•…等级
        accidentType: "", // äº‹æ•…类型
        personLoss: "", // äººå‘˜ä¼¤äº¡
        assetLoss: "", // èµ„产损失
        createUser: currentUserId.value, // åˆ›å»ºç”¨æˆ·
        createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // åˆ›å»ºæ—¶é—´
        createUserName: currentUserName.value, // åˆ›å»ºç”¨æˆ·å
        accidentCause: "", // äº‹æ•…直接原因
        rootCause: "", // äº‹æ•…根本原因
        productionLoss: "", // ç”Ÿäº§æŸå¤±
        handleMeasures: "", // åº”急处置措施
        remark: "", // å¤‡æ³¨
      });
    } else if (type === "edit" && row) {
      dialogTitle.value = "编辑事故";
      Object.assign(form.value, {
        id: row.id,
        accidentCode: row.accidentCode, // äº‹æ•…编码
        accidentName: row.accidentName, // äº‹æ•…名称
        happenTime: row.happenTime, // äº‹æ•…发生时间
        happenLocation: row.happenLocation, // äº‹æ•…发生地点
        accidentGrade: row.accidentGrade, // äº‹æ•…等级
        accidentType: row.accidentType, // äº‹æ•…类型
        personLoss: row.personLoss, // äººå‘˜ä¼¤äº¡
        assetLoss: row.assetLoss, // èµ„产损失
        createUser: row.createUser, // åˆ›å»ºç”¨æˆ·
        createTime: row.createTime, // åˆ›å»ºæ—¶é—´
        createUserName: row.createUserName, // åˆ›å»ºç”¨æˆ·å
        accidentCause: row.accidentCause, // äº‹æ•…直接原因
        rootCause: row.rootCause, // äº‹æ•…根本原因
        productionLoss: row.productionLoss, // ç”Ÿäº§æŸå¤±
        handleMeasures: row.handleMeasures, // åº”急处置措施
        remark: row.remark, // å¤‡æ³¨
      });
    }
    dialogVisible.value = true;
  };

  // æŸ¥çœ‹äº‹æ•…详情
  const viewKnowledge = row => {
    currentKnowledge.value = { ...row };
    viewDialogVisible.value = true;
  };
  const getApplyScopeLabel = scope => {
    const scopeMap = {
      all: "全体员工",
      manager: "管理层",
      hr: "人事部门",
      finance: "财务部门",
      tech: "技术部门",
    };
    return scopeMap[scope] || scope;
  };

  // èŽ·å–类型标签类型
  const getTypeTagType = type => {
    const typeMap = {
      contract: "success",
      approval: "warning",
      solution: "primary",
      experience: "info",
      guide: "danger",
    };
    return typeMap[type] || "info";
  };

  // èŽ·å–类型标签文本
  const getTypeLabel = type => {
    return getKnowledgeTypeLabel(type);
  };

  // èŽ·å–效率标签类型
  const getEfficiencyTagType = efficiency => {
    const typeMap = {
      high: "success",
      medium: "warning",
      low: "info",
    };
    return typeMap[efficiency] || "info";
  };

  // èŽ·å–效率标签文本
  const getEfficiencyLabel = efficiency => {
    const efficiencyMap = {
      high: "显著提升",
      medium: "一般提升",
      low: "轻微提升",
    };
    return efficiencyMap[efficiency] || efficiency;
  };

  // èŽ·å–效率提升百分比
  const getEfficiencyScore = efficiency => {
    const scoreMap = {
      high: 40,
      medium: 25,
      low: 15,
    };
    return scoreMap[efficiency] || 0;
  };

  // èŽ·å–平均节省时间
  const getTimeSaved = efficiency => {
    const timeMap = {
      high: "2-3天",
      medium: "1-2天",
      low: "0.5-1天",
    };
    return timeMap[efficiency] || "未知";
  };
  // æäº¤åº”急预案表单
  const submitForm = async () => {
    try {
      await formRef.value.validate();
      if (dialogType.value === "add") {
        safeAccidentAdd({ ...form.value })
          .then(res => {
            if (res.code == 200) {
              ElMessage.success("添加成功");
              dialogVisible.value = false;
              getList();
            }
          })
          .catch(err => {
            ElMessage.error(err.msg);
          });
      } else {
        safeAccidentUpdate({ ...form.value })
          .then(res => {
            if (res.code == 200) {
              ElMessage.success("更新成功");
              dialogVisible.value = false;
              getList();
            }
          })
          .catch(err => {
            ElMessage.error(err.msg);
          });
      }
    } catch (error) {
      console.error("表单验证失败:", error);
    }
  };

  // åˆ é™¤åº”急预案
  const handleDelete = () => {
    if (selectedIds.value.length === 0) {
      ElMessage.warning("请选择要删除的应急预案");
      return;
    }

    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // console.log(selectedIds.value);
        safeAccidentDel(selectedIds.value).then(res => {
          if (res.code == 200) {
            ElMessage.success("删除成功");
            selectedIds.value = [];
            getList();
          }
        });
      })
      .catch(() => {
        // ç”¨æˆ·å–消
      });
  };

  // å­—典工具
  const knowledgeTypeOptions = computed(() => knowledge_type?.value || []);
  const getKnowledgeTypeLabel = val => {
    const item = knowledgeTypeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item ? item.label : val;
  };
  const getKnowledgeTypeTagType = val => {
    const item = knowledgeTypeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item?.elTagType || "info";
  };
  const handleExport = () => {
    proxy.download(
      "/knowledgeBase/export",
      { ...searchForm.value },
      "应急预案库.xlsx"
    );
  };
</script>

<style scoped>
  .auto-refresh-info {
    margin-bottom: 15px;
  }

  .auto-refresh-info .el-alert {
    border-radius: 8px;
  }

  .dialog-footer {
    text-align: right;
  }

  .knowledge-detail {
    padding: 20px 0;
  }

  .detail-title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }

  .detail-section {
    margin-top: 24px;
  }

  .detail-section h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    border-left: 4px solid #409eff;
    padding-left: 12px;
  }

  .detail-content {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 6px;
    line-height: 1.6;
    color: #606266;
    white-space: pre-wrap;
  }

  .key-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .usage-stats {
    margin-top: 16px;
  }

  .stat-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
  }

  .stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 8px;
  }

  .stat-label {
    font-size: 14px;
    color: #909399;
  }

  .exec-steps-container {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 15px;
    background-color: #f9fafc;
  }

  .exec-step-item {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
  }

  .step-header {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .exec-step-view {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
  }

  .step-number {
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #409eff;
  }

  .step-title {
    font-weight: bold;
    margin-right: 5px;
  }

  .no-data {
    color: #909399;
    font-style: italic;
  }
</style>

 src/views/safeProduction/dangerInvestigation/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1275 @@
<template>
  <div class="app-container">
    <!-- <div class="search_form">
      <el-form :model="searchForm"
               :inline="true">
        <el-form-item label="隐患编号：">
          <el-input v-model="searchForm.hiddenCode"
                    placeholder="请输入"
                    clearable
                    prefix-icon="Search"
                    @change="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="handleQuery"> æœç´¢ </el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="table_list">
      <div class="actions">
        <div></div>
        <div>
          <el-button type="primary"
                     @click="openForm('add')">
            æ–°å¢žéšæ‚£
          </el-button>
          <!-- <el-button type="primary"
                     plain
                     @click="handleImport">导入</el-button>
          <el-button @click="handleOut">导出</el-button> -->
          <el-button type="danger"
                     plain
                     @click="handleDelete">删除</el-button>
          <!-- <el-button type="primary"
                     plain
                     @click="handlePrint">打印</el-button> -->
        </div>
      </div>
      <el-table :data="tableData"
                border
                v-loading="tableLoading"
                @selection-change="handleSelectionChange"
                :expand-row-keys="expandedRowKeys"
                :row-key="(row) => row.id"
                :row-class-name="getRowClass"
                style="width: 100%"
                height="calc(100vh - 18.5em)">
        <el-table-column align="center"
                         type="selection"
                         width="55"
                         fixed="left" />
        <el-table-column align="center"
                         label="序号"
                         type="index"
                         width="60" />
        <el-table-column label="隐患编号"
                         prop="hiddenCode"
                         width="180"
                         show-overflow-tooltip />
        <el-table-column label="隐患描述"
                         prop="hiddenDesc"
                         show-overflow-tooltip />
        <el-table-column label="隐患具体位置"
                         prop="location"
                         show-overflow-tooltip />
        <el-table-column label="上报人"
                         prop="createUserName"
                         width="180"
                         show-overflow-tooltip />
        <el-table-column label="上报时间"
                         prop="createTime"
                         show-overflow-tooltip />
        <el-table-column label="整改完成期限"
                         prop="rectifyTime"
                         width="120"
                         show-overflow-tooltip />
        <el-table-column label="整改责任人"
                         prop="rectifyUserName"
                         width="120"
                         show-overflow-tooltip />
        <el-table-column label="整改责任人联系方式"
                         prop="rectifyUserMobile"
                         width="120"
                         show-overflow-tooltip />
        <el-table-column label="整改具体措施"
                         prop="rectifyMeasures"
                         width="120"
                         show-overflow-tooltip />
        <el-table-column label="实际整改完成时间"
                         prop="rectifyActualTime"
                         width="120"
                         show-overflow-tooltip />
        <el-table-column label="验收意见"
                         prop="verifyRemark"
                         width="120"
                         show-overflow-tooltip />
        <el-table-column label="验收时间"
                         prop="verifyTime"
                         width="120"
                         show-overflow-tooltip />
        <el-table-column label="验收结果"
                         prop="verifyResult"
                         width="120"
                         show-overflow-tooltip>
          <template #default="scope">
            <el-tag v-if="scope.row.verifyResult"
                    :type="scope.row.verifyResult === '通过' ? 'success' : 'danger'">
              {{ scope.row.verifyResult }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         min-width="250"
                         align="center">
          <template #default="scope">
            <el-button link
                       type="primary"
                       size="small"
                       @click="openForm('edit', scope.row)">编辑</el-button>
            <el-button link
                       type="primary"
                       size="small"
                       @click="downLoadFile(scope.row)">附件</el-button>
            <el-button link
                       type="primary"
                       size="small"
                       @click="openForm('edit2', scope.row)">整改</el-button>
            <el-button link
                       type="primary"
                       size="small"
                       :disabled="!scope.row.rectifyActualTime"
                       @click="openForm('edit3', scope.row)">验收</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0"
                  :total="total"
                  layout="total, sizes, prev, pager, next, jumper"
                  :page="page.current"
                  :limit="page.size"
                  @pagination="paginationChange" />
    </div>
    <FormDialog v-model="dialogFormVisible"
                :title="getTitle(operationType)"
                :width="'70%'"
                :operation-type="operationType"
                @close="closeDia"
                @confirm="submitForm"
                @cancel="closeDia">
      <el-form :model="form"
               v-if="operationType === 'add' || operationType === 'edit'"
               label-width="140px"
               label-position="top"
               :rules="rules"
               ref="formRef">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="隐患编号："
                          prop="hiddenCode">
              <el-input v-model="form.hiddenCode"
                        placeholder="自动生成"
                        disabled
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="隐患具体位置："
                          prop="location">
              <el-input v-model="form.location"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="隐患描述："
                      prop="hiddenDesc">
          <el-input v-model="form.hiddenDesc"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入"
                    clearable />
        </el-form-item>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="隐患类型："
                          prop="type">
              <el-select v-model="form.type"
                         placeholder="请选择"
                         clearable>
                <el-option v-for="item in typeList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="隐患风险等级："
                          prop="riskLevel">
              <el-select v-model="form.riskLevel"
                         placeholder="请选择"
                         clearable>
                <el-option v-for="item in riskLevelList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="上报人："
                          prop="createUser">
              <el-select v-model="form.createUser"
                         placeholder="请选择"
                         disabled
                         clearable>
                <el-option v-for="item in userList"
                           :key="item.userId"
                           :label="item.nickName"
                           :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上报时间："
                          prop="createTime">
              <el-date-picker style="width: 100%"
                              disabled
                              v-model="form.createTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="整改责任人："
                          prop="rectifyUserId">
              <el-select v-model="form.rectifyUserId"
                         placeholder="请选择"
                         @change="handleChange2"
                         clearable>
                <el-option v-for="item in userList"
                           :key="item.userId"
                           :label="item.nickName"
                           :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整改完成期限"
                          prop="rectifyTime">
              <el-date-picker style="width: 100%"
                              v-model="form.rectifyTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-descriptions :column="2"
                       style="margin-bottom: 20px;"
                       v-if="operationType === 'edit2' || operationType === 'edit3'"
                       title="隐患详情"
                       border>
        <el-descriptions-item label="隐患编号">
          <span class="detail-title">{{ form.hiddenCode }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="隐患具体位置">
          <span class="detail-title">{{ form.location }}</span>
        </el-descriptions-item>
        <el-descriptions-item :span="2"
                              label="隐患描述">
          <span class="detail-title">{{ form.hiddenDesc }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="隐患类型">
          <span class="detail-title">{{ TypeLabel(form.type) }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="隐患风险等级">
          <el-tag :type="getTypeTagType(form.riskLevel)">
            {{ form.riskLevel }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="上报人">
          <span class="detail-title">{{ form.createUserName }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="上报时间">
          <span class="detail-title">{{ form.createTime }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="整改责任人">
          <span class="detail-title">{{ form.rectifyUserName }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="整改责任人联系方式">
          <span class="detail-title">{{ form.rectifyUserMobile }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="整改完成期限">
          <span class="detail-title">{{ form.rectifyTime }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="2"
                       style="margin-bottom: 20px;"
                       v-if="operationType === 'edit3'"
                       title="整改详情"
                       border>
        <el-descriptions-item label="整改具体措施"
                              :span="2">
          <span class="detail-title">{{ form2.rectifyMeasures }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="实际整改完成时间">
          <span class="detail-title">{{ form2.rectifyActualTime }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <el-form :model="form2"
               v-if="operationType === 'edit2'"
               label-width="140px"
               label-position="top"
               :rules="rules2"
               ref="formRef2">
        <el-form-item label="整改具体措施："
                      prop="rectifyMeasures">
          <el-input v-model="form2.rectifyMeasures"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入整改具体措施"
                    clearable />
        </el-form-item>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="实际整改完成时间："
                          prop="rectifyActualTime">
              <el-date-picker style="width: 100%"
                              v-model="form2.rectifyActualTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :model="form3"
               v-if="operationType === 'edit3'"
               label-width="140px"
               label-position="top"
               :rules="rules3"
               ref="formRef3">
        <el-form-item label="验收意见："
                      prop="verifyRemark">
          <el-input v-model="form3.verifyRemark"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入验收意见"
                    clearable />
        </el-form-item>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="验收时间："
                          prop="verifyTime">
              <el-date-picker style="width: 100%"
                              disabled
                              v-model="form3.verifyTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="验收结果："
                          prop="verifyResult">
              <el-select v-model="form3.verifyResult"
                         placeholder="请选择"
                         clearable>
                <el-option label="通过"
                           value="通过" />
                <el-option label="不通过"
                           value="不通过" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="验收人："
                          prop="verifyUserId">
              <el-select v-model="form3.verifyUserId"
                         disabled
                         placeholder="请选择"
                         clearable>
                <el-option v-for="item in userList"
                           :key="item.userId"
                           :label="item.nickName"
                           :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </FormDialog>
    <!-- é™„件列表弹窗 -->
    <FileListDialog ref="fileListRef"
                    v-model="fileListDialogVisible"
                    :show-upload-button="true"
                    :show-delete-button="true"
                    :upload-method="handleUpload"
                    :delete-method="handleFileDelete"
                    title="附件列表" />
  </div>
</template>

<script setup>
  import { getToken } from "@/utils/auth";
  import pagination from "@/components/PIMTable/Pagination.vue";
  import { onMounted, ref, getCurrentInstance, computed } from "vue";
  import { ElMessageBox, ElMessage } from "element-plus";
  import useUserStore from "@/store/modules/user";
  import { userListNoPage } from "@/api/system/user.js";
  import FileListDialog from "@/components/Dialog/FileListDialog.vue";
  import FormDialog from "@/components/Dialog/FormDialog.vue";
  import { getQuotationList } from "@/api/salesManagement/salesQuotation.js";
  import {
    dangerInvestigationListPage,
    safeHiddenAdd,
    safeHiddenUpdate,
    safeHiddenDel,
    fileListPage,
    safeHiddenFileAdd,
    safeHiddenFileDel,
  } from "@/api/safeProduction/dangerInvestigation.js";
  import useFormData from "@/hooks/useFormData.js";
  import request from "@/utils/request";
  import dayjs from "dayjs";
  import { get } from "@vueuse/core";

  const userStore = useUserStore();
  const { proxy } = getCurrentInstance();
  const tableData = ref([]);
  const selectedRows = ref([]);
  const userList = ref([]);
  const tableLoading = ref(false);
  const page = reactive({
    current: 1,
    size: 100,
  });
  const total = ref(0);
  const getTitle = type => {
    if (type === "add") {
      return "新增隐患";
    } else if (type === "edit") {
      return "修改隐患";
    } else if (type === "edit2") {
      return "整改页面";
    } else if (type === "edit3") {
      return "验收页面";
    }
  };
  // èŽ·å–类型标签类型
  const getTypeTagType = type => {
    const typeMap = {
      è¾ƒå¤§é£Žé™©: "warning",
      ä½Žé£Žé™©: "info",
      ä¸€èˆ¬é£Žé™©: "info",
      é‡å¤§é£Žé™©: "danger",
    };
    return typeMap[type] || "info";
  };
  // ç”¨æˆ·ä¿¡æ¯è¡¨å•å¼¹æ¡†æ•°æ®
  const operationType = ref("");
  const dialogFormVisible = ref(false);
  const data = reactive({
    searchForm: {
      hiddenCode: "", // éšæ‚£ç¼–号
    },
    form: {
      hiddenCode: "", // éšæ‚£ç¼–号
      location: "", // éšæ‚£ä½ç½®
      hiddenDesc: "", // éšæ‚£æè¿°
      createUser: "", // ä¸ŠæŠ¥äºº
      createUserName: "",
      createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // ä¸ŠæŠ¥æ—¶é—´
      rectifyUserId: "", // æ•´æ”¹è´£ä»»äºº
      rectifyUserName: "",
      rectifyTime: "", // æ•´æ”¹å®ŒæˆæœŸé™
      rectifyUserMobile: "", // æ•´æ”¹è´£ä»»äººæ‰‹æœºå·
      riskLevel: "", // éšæ‚£é£Žé™©ç­‰çº§
      type: "", // éšæ‚£ç±»åž‹
    },

    rules: {
      location: [{ required: true, message: "请输入", trigger: "blur" }],
      hiddenDesc: [{ required: true, message: "请输入", trigger: "blur" }],
      riskLevel: [{ required: true, message: "请选择", trigger: "change" }],
      type: [{ required: true, message: "请选择", trigger: "change" }],
      createUser: [{ required: true, message: "请选择", trigger: "change" }],
      rectifyUserId: [{ required: true, message: "请选择", trigger: "change" }],
      rectifyTime: [{ required: true, message: "请选择", trigger: "change" }],
    },
  });
  const rules2 = {
    rectifyActualTime: [{ required: true, message: "请选择", trigger: "blur" }],
    rectifyMeasures: [{ required: true, message: "请输入", trigger: "blur" }],
  };
  const rules3 = {
    verifyTime: [{ required: true, message: "请选择", trigger: "blur" }],
    verifyRemark: [{ required: true, message: "请输入", trigger: "blur" }],
    verifyResult: [{ required: true, message: "请选择", trigger: "change" }],
    acceptDesc: [{ required: true, message: "请输入", trigger: "blur" }],
  };
  const { hidden_danger_type } = proxy.useDict("hidden_danger_type");
  const typeList = computed(() => hidden_danger_type?.value || []);
  const TypeLabel = val => {
    const item = typeList.value.find(i => String(i.value) === String(val));
    return item ? item.label : val;
  };
  const form2 = ref({
    rectifyActualTime: "", // å®žé™…整改完成时间
    rectifyMeasures: "", // æ•´æ”¹å…·ä½“措施
  });
  const form3 = ref({
    verifyTime: "", // éªŒæ”¶æ—¶é—´
    verifyRemark: "", // éªŒæ”¶å¤‡æ³¨
    acceptDesc: "", // éªŒæ”¶æè¿°
    verifyUserId: "", // éªŒæ”¶äºº
    verifyUserName: "",
    verifyResult: "", // éªŒæ”¶ç»“æžœ
  });
  const riskLevelList = ref([
    {
      value: "重大风险",
      label: "重大风险",
    },
    {
      value: "较大风险",
      label: "较大风险",
    },
    {
      value: "一般风险",
      label: "一般风险",
    },
    {
      value: "低风险",
      label: "低风险",
    },
  ]);
  const { form, rules } = toRefs(data);
  const { form: searchForm } = useFormData(data.searchForm);
  // äº§å“è¡¨å•å¼¹æ¡†æ•°æ®
  const productFormVisible = ref(false);

  const quotationLoading = ref(false);
  const quotationList = ref([]);
  const quotationSearchForm = reactive({
    quotationNo: "",
    customer: "",
  });

  const handleChange2 = userId => {
    const selectedUser = userList.value.find(user => user.userId === userId);
    if (selectedUser) {
      form.value.rectifyUserName = selectedUser.nickName;
      form.value.rectifyUserMobile = selectedUser.phonenumber;
    }
  };

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

  // æŸ¥è¯¢åˆ—表
  /** æœç´¢æŒ‰é’®æ“ä½œ */
  const handleQuery = () => {
    // åªæœ‰åœ¨ç‚¹å‡»æœç´¢æŒ‰é’®æ—¶æ‰é‡ç½®é¡µç åˆ°ç¬¬ä¸€é¡µ
    // é¿å…è¡¨å•å­—段change事件干扰分页
    if (arguments.length === 0) {
      page.current = 1;
    }
    expandedRowKeys.value = [];
    getList();
  };
  const paginationChange = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  const getList = () => {
    tableLoading.value = true;
    const { entryDate, ...rest } = searchForm;
    // å°†èŒƒå›´æ—¥æœŸå­—段传递给后端
    const params = { ...rest, ...page };
    // ç§»é™¤å½•å…¥æ—¥æœŸçš„默认值设置，只保留范围日期字段
    delete params.entryDate;
    return dangerInvestigationListPage(params)
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        total.value = res.data.total;
        return res;
      })
      .catch(() => {
        tableLoading.value = false;
      });
  };

  const findNodeById = (nodes, productId) => {
    for (let i = 0; i < nodes.length; i++) {
      if (nodes[i].value === productId) {
        return nodes[i].label; // æ‰¾åˆ°èŠ‚点，返回该节点
      }
      if (nodes[i].children && nodes[i].children.length > 0) {
        const foundNode = findNodeById(nodes[i].children, productId);
        if (foundNode) {
          return foundNode; // åœ¨å­èŠ‚点中找到，返回该节点
        }
      }
    }
    return null; // æ²¡æœ‰æ‰¾åˆ°èŠ‚点，返回null
  };
  // è¡¨æ ¼é€‰æ‹©æ•°æ®
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
    console.log("selection", selectedRows.value);
  };
  const expandedRowKeys = ref([]);
  // æ‰“开弹框
  const openForm = async (type, row) => {
    console.log("row", row);
    operationType.value = type;
    form3.value = {
      verifyTime: "", // éªŒæ”¶æ—¶é—´
      verifyRemark: "", // éªŒæ”¶å¤‡æ³¨
      verifyResult: "", // éªŒæ”¶æè¿°
      verifyUserId: "", // éªŒæ”¶äºº
    };
    form2.value = {
      rectifyActualTime: "", // å®žé™…整改完成时间
      rectifyMeasures: "", // æ•´æ”¹å…·ä½“措施
    };
    if (type === "add") {
      form.value = {
        hiddenCode: "", // éšæ‚£ç¼–号
        location: "", // éšæ‚£ä½ç½®
        hiddenDesc: "", // éšæ‚£æè¿°
        createUser: Number(currentUserId.value), // ä¸ŠæŠ¥äºº
        createUserName: currentUserName.value,
        createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // ä¸ŠæŠ¥æ—¶é—´
        rectifyUserId: "", // æ•´æ”¹è´£ä»»äºº
        rectifyUserName: "",
        rectifyTime: "", // æ•´æ”¹å®ŒæˆæœŸé™
        rectifyUserMobile: "", // æ•´æ”¹è´£ä»»äººæ‰‹æœºå·
        riskLevel: "", // éšæ‚£é£Žé™©ç­‰çº§
        type: "", // éšæ‚£ç±»åž‹
      };
    } else if (type === "edit") {
      form.value = {
        id: row.id,
        hiddenCode: row.hiddenCode, // éšæ‚£ç¼–号
        location: row.location, // éšæ‚£ä½ç½®
        hiddenDesc: row.hiddenDesc, // éšæ‚£æè¿°
        createUser: row.createUser, // ä¸ŠæŠ¥äºº
        createUserName: row.createUserName,
        createTime: row.createTime, // ä¸ŠæŠ¥æ—¶é—´
        rectifyUserId: row.rectifyUserId, // æ•´æ”¹è´£ä»»äºº
        rectifyUserName: row.rectifyUserName,
        rectifyTime: row.rectifyTime, // æ•´æ”¹å®ŒæˆæœŸé™
        rectifyUserMobile: row.rectifyUserMobile, // æ•´æ”¹è´£ä»»äººæ‰‹æœºå·
        riskLevel: row.riskLevel, // éšæ‚£é£Žé™©ç­‰çº§
        type: row.type, // éšæ‚£ç±»åž‹
      };
    } else if (type === "edit2") {
      form.value = {
        id: row.id,
        hiddenCode: row.hiddenCode, // éšæ‚£ç¼–号
        location: row.location, // éšæ‚£ä½ç½®
        hiddenDesc: row.hiddenDesc, // éšæ‚£æè¿°
        createUser: row.createUser, // ä¸ŠæŠ¥äºº
        createUserName: row.createUserName,
        createTime: row.createTime, // ä¸ŠæŠ¥æ—¶é—´
        rectifyUserId: row.rectifyUserId, // æ•´æ”¹è´£ä»»äºº
        rectifyUserName: row.rectifyUserName,
        rectifyTime: row.rectifyTime, // æ•´æ”¹å®ŒæˆæœŸé™
        rectifyUserMobile: row.rectifyUserMobile, // æ•´æ”¹è´£ä»»äººæ‰‹æœºå·
        riskLevel: row.riskLevel, // éšæ‚£é£Žé™©ç­‰çº§
        type: row.type, // éšæ‚£ç±»åž‹
      };
      form2.value = {
        rectifyActualTime: row.rectifyActualTime, // å®žé™…整改完成时间
        rectifyMeasures: row.rectifyMeasures, // æ•´æ”¹å…·ä½“措施
      };
    } else if (type === "edit3") {
      form.value = {
        id: row.id,
        hiddenCode: row.hiddenCode, // éšæ‚£ç¼–号
        location: row.location, // éšæ‚£ä½ç½®
        hiddenDesc: row.hiddenDesc, // éšæ‚£æè¿°
        createUser: row.createUser, // ä¸ŠæŠ¥äºº
        createUserName: row.createUserName,
        createTime: row.createTime, // ä¸ŠæŠ¥æ—¶é—´
        rectifyUserId: row.rectifyUserId, // æ•´æ”¹è´£ä»»äºº
        rectifyUserName: row.rectifyUserName,
        rectifyTime: row.rectifyTime, // æ•´æ”¹å®ŒæˆæœŸé™
        rectifyUserMobile: row.rectifyUserMobile, // æ•´æ”¹è´£ä»»äººæ‰‹æœºå·
        riskLevel: row.riskLevel, // éšæ‚£é£Žé™©ç­‰çº§
        type: row.type, // éšæ‚£ç±»åž‹
      };
      form2.value = {
        rectifyActualTime: row.rectifyActualTime, // å®žé™…整改完成时间
        rectifyMeasures: row.rectifyMeasures, // æ•´æ”¹å…·ä½“措施
      };
      form3.value = {
        verifyTime: row.verifyTime, // éªŒæ”¶æ—¶é—´
        verifyRemark: row.verifyRemark, // éªŒæ”¶å¤‡æ³¨
        verifyResult: row.verifyResult, // éªŒæ”¶æè¿°
        verifyUserId: row.verifyUserId, // éªŒæ”¶äºº
      };
      console.log("form3.value", form3.value);
      if (!form3.value.verifyUserId || form3.value.verifyUserId === "null") {
        form3.value.verifyUserId = Number(currentUserId.value); // éªŒæ”¶äºº
      }
      if (!form3.value.verifyTime || form3.value.verifyTime === "null") {
        form3.value.verifyTime = dayjs().format("YYYY-MM-DD"); // éªŒæ”¶æè¿°
      }
    }
    dialogFormVisible.value = true;
  };
  const getCurrentUserInfo = () => {
    getInfo;
  };
  const fetchQuotationList = async () => {
    quotationLoading.value = true;
    try {
      const params = {
        // å…¼å®¹åŽç«¯åˆ†é¡µå­—段：这里沿用报价页面已有可用的字段命名
        currentPage: 1,
        pageSize: 100,
        ...quotationSearchForm,
        status: "通过",
      };
      const res = await getQuotationList(params);
      quotationList.value = res?.data?.records || [];
    } finally {
      quotationLoading.value = false;
    }
  };

  // æäº¤è¡¨å•
  const submitForm = () => {
    console.log("operationType.value", operationType.value);

    if (operationType.value == "add") {
      proxy.$refs["formRef"].validate(valid => {
        if (valid) {
          safeHiddenAdd(form.value).then(res => {
            proxy.$modal.msgSuccess("提交成功");
            closeDia();
            getList();
          });
        }
      });
    } else if (operationType.value == "edit") {
      proxy.$refs["formRef"].validate(valid => {
        if (valid) {
          safeHiddenUpdate(form.value).then(res => {
            proxy.$modal.msgSuccess("提交成功");
            closeDia();
            getList();
          });
        }
      });
    } else if (operationType.value == "edit2") {
      console.log("form2.value", form2.value);
      proxy.$refs["formRef2"].validate(valid => {
        if (valid) {
          safeHiddenUpdate({ ...form2.value, ...form.value }).then(res => {
            proxy.$modal.msgSuccess("提交成功");
            closeDia();
            getList();
          });
        }
      });
    } else if (operationType.value == "edit3") {
      proxy.$refs["formRef3"].validate(valid => {
        if (valid) {
          safeHiddenUpdate({
            ...form3.value,
            ...form2.value,
            ...form.value,
          }).then(res => {
            proxy.$modal.msgSuccess("提交成功");
            closeDia();
            getList();
          });
        }
      });
    }
  };
  // å…³é—­å¼¹æ¡†
  const closeDia = () => {
    proxy.resetForm("formRef");
    proxy.resetForm("formRef2");
    dialogFormVisible.value = false;
  };
  // å…³é—­äº§å“å¼¹æ¡†
  const closeProductDia = () => {
    proxy.resetForm("productFormRef");
    productFormVisible.value = false;
  };
  // åˆ é™¤
  const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
      ids = selectedRows.value.map(item => item.id);
    } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        safeHiddenDel(ids).then(res => {
          proxy.$modal.msgSuccess("删除成功");
          getList();
        });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };

  /**
   * åˆ¤æ–­æ˜¯å¦å¯ä»¥å‘è´§
   * åªæœ‰åœ¨äº§å“çŠ¶æ€æ˜¯å……足，发货状态是待发货和审核拒绝的时候才可以发货
   * @param row è¡Œæ•°æ®
   */
  const canShip = row => {
    // äº§å“çŠ¶æ€å¿…须是充足（approveStatus === 1）
    if (row.approveStatus !== 1) {
      return false;
    }

    // èŽ·å–发货状态
    const shippingStatus = row.shippingStatus;

    // å¦‚果已发货（有发货日期或车牌号），不能再次发货
    if (row.shippingDate || row.shippingCarNumber) {
      return false;
    }

    // å‘货状态必须是"待发货"或"审核拒绝"
    const statusStr = shippingStatus ? String(shippingStatus).trim() : "";
    return statusStr === "待发货" || statusStr === "审核拒绝";
  };

  /**
   * ä¸‹è½½æ–‡ä»¶
   *
   * @param row ä¸‹è½½æ–‡ä»¶çš„相关信息对象
   */
  const fileListRef = ref(null);
  const fileListDialogVisible = ref(false);
  const currentFileRow = ref(null);
  const downLoadFile = row => {
    currentFileRow.value = row;
    fileListPage({ safeHiddenId: row.id }).then(res => {
      if (fileListRef.value) {
        fileListRef.value.open(res.data.records);
      }
    });
  };
  const currentUserId = ref("");
  const currentUserName = ref("");
  const getCurrentFactoryName = async () => {
    let res = await userStore.getInfo();
    currentUserId.value = res.user.userId;
    currentUserName.value = res.user.nickName;
  };

  /**
   * èŽ·å–行类名，用于判断是否过期未整改
   * @param row è¡Œæ•°æ®
   * @returns ç±»å
   */
  const getRowClass = ({ row }) => {
    const now = new Date();

    // æ£€æŸ¥æ˜¯å¦è¶…过整改期限且未实际整改
    if (row.rectifyTime && !row.rectifyActualTime) {
      const rectifyTime = new Date(row.rectifyTime);
      if (now > rectifyTime) {
        return "overdue-row";
      }
    }

    return "";
  };

  onMounted(() => {
    getList();
    userListNoPage().then(res => {
      userList.value = res.data;
    });
    getCurrentFactoryName();
  });
  // ä¸Šä¼ é™„件
  const handleUpload = async () => {
    if (!currentFileRow.value) {
      proxy.$modal.msgWarning("请先选择数据");
      return null;
    }

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

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

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

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

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

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

<style scoped lang="scss">
  .ml-10 {
    margin-left: 10px;
  }

  .table_list {
    margin-top: unset;
  }

  :deep(.warning-row) {
    background-color: #fef0f0 !important;
  }

  :deep(.warning-row td) {
    // color: #cf1322 !important;
  }

  :deep(.overdue-row) {
    background-color: #ffffff !important;
  }

  :deep(.overdue-row td) {
    color: #e1707a !important;
  }

  .actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .print-preview-dialog {
    .el-dialog__body {
      padding: 0;
      max-height: 80vh;
      overflow-y: auto;
    }
  }

  .print-preview-container {
    .print-preview-header {
      padding: 15px;
      border-bottom: 1px solid #e4e7ed;
      text-align: center;

      .el-button {
        margin: 0 10px;
      }
    }

    .print-preview-content {
      padding: 20px;
      background-color: #f5f5f5;
      min-height: 400px;
    }
  }

  .print-page {
    width: 220mm;
    height: 90mm;
    padding: 10mm;
    margin: 0 auto;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    box-sizing: border-box;
  }

  .delivery-note {
    width: 100%;
    height: 100%;
    font-family: "SimSun", serif;
    font-size: 10px;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
  }

  .header {
    text-align: center;
    margin-bottom: 8px;

    .company-name {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 4px;
    }

    .document-title {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .info-section {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .info-row {
      line-height: 20px;

      .label {
        font-weight: bold;
        width: 60px;
        font-size: 14px;
      }

      .value {
        margin-right: 20px;
        min-width: 80px;
        font-size: 14px;
      }
    }
  }

  .table-section {
    margin-bottom: 4px;
    flex: 1;

    .product-table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #000;

      th,
      td {
        border: 1px solid #000;
        padding: 6px;
        text-align: center;
        font-size: 14px;
        line-height: 1.4;
      }

      th {
        font-weight: bold;
      }

      .total-label {
        text-align: right;
        font-weight: bold;
      }

      .total-value {
        font-weight: bold;
      }
    }
  }

  .footer-section {
    .footer-row {
      display: flex;
      margin-bottom: 3px;
      line-height: 20px;
      justify-content: space-between;

      .footer-item {
        display: flex;
        margin-right: 20px;

        .label {
          font-weight: bold;
          width: 80px;
          font-size: 14px;
        }

        .value {
          min-width: 80px;
          font-size: 14px;
        }

        &.address-item {
          .address-value {
            min-width: 200px;
          }
        }
      }
    }
  }

  @media print {
    .app-container {
      display: none;
    }

    .print-page {
      box-shadow: none;
      margin: 0;
      padding: 10mm;
      padding-left: 20mm;
      page-break-inside: avoid;
      page-break-after: always;
    }
    .print-page:last-child {
      page-break-after: avoid;
    }
  }
</style>

 src/views/safeProduction/emergencyPlanReview/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,808 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">应急预案名称：</span>
        <el-input v-model="searchForm.planName"
                  style="width: 240px"
                  placeholder="请输入应急预案名称搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span class="search_title ml10">应急预案类型：</span>
        <el-select v-model="searchForm.planType"
                   clearable
                   @change="handleQuery"
                   style="width: 240px">
          <el-option v-for="item in emergencyPlanTypeOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value" />
        </el-select>
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">
          æœç´¢
        </el-button>
      </div>
      <div>
        <el-button type="primary"
                   @click="openForm('add')">新增应急预案</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"
                :total="page.total"></PIMTable>
    </div>
    <!-- æ–°å¢ž/编辑应急预案弹窗 -->
    <el-dialog v-model="dialogVisible"
               :title="dialogTitle"
               width="800px"
               :close-on-click-modal="false">
      <el-form ref="formRef"
               :model="form"
               :rules="rules"
               label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="应急预案编码"
                          prop="planCode">
              <el-input v-model="form.planCode"
                        placeholder="请输入应急预案编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应急预案名称"
                          prop="planName">
              <el-input v-model="form.planName"
                        placeholder="请输入应急预案名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发布生效时间："
                          prop="publishTime">
              <el-date-picker style="width: 100%"
                              v-model="form.publishTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核心责任人："
                          prop="coreResponsorUserId">
              <el-select v-model="form.coreResponsorUserId"
                         placeholder="请选择"
                         @change="handleChange"
                         clearable>
                <el-option v-for="item in userList"
                           :key="item.userId"
                           :label="item.nickName"
                           :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预案类型"
                          prop="planType">
              <el-select v-model="form.planType"
                         placeholder="请选择预案类型"
                         style="width: 100%">
                <el-option v-for="item in emergencyPlanTypeOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注"
                          prop="remark">
              <el-input v-model="form.remark"
                        placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="适用范围"
                      prop="applyScope">
          <el-checkbox-group v-model="form.applyScope">
            <el-checkbox label="all">全体员工</el-checkbox>
            <el-checkbox label="manager">管理层</el-checkbox>
            <el-checkbox label="hr">人事部门</el-checkbox>
            <el-checkbox label="finance">财务部门</el-checkbox>
            <el-checkbox label="tech">技术部门</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="应急处置步骤"
                      prop="execSteps">
          <div class="exec-steps-container"
               style="width:100%">
            <div v-for="(step, index) in execStepsList"
                 :key="index"
                 class="exec-step-item">
              <div class="step-header">
                <div>
                  <el-input v-model="step.step"
                            placeholder="步骤"
                            style="width: 200px; margin-right: 10px" />
                  <el-button type="danger"
                             size="small"
                             @click="removeExecStep(index)"
                             style="margin-left: 10px">删除</el-button>
                </div>
                <div style="margin-top: 5px;width: 100%;">
                  <el-input v-model="step.description"
                            placeholder="措施"
                            type="textarea"
                            :rows="2"
                            style="flex: 1" />
                </div>
              </div>
            </div>
            <el-button type="primary"
                       size="small"
                       @click="addExecStep"
                       style="margin-top: 10px">添加步骤</el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- æŸ¥çœ‹åº”急预案详情弹窗 -->
    <el-dialog v-model="viewDialogVisible"
               title="应急预案详情"
               width="900px"
               :close-on-click-modal="false">
      <div class="knowledge-detail">
        <el-descriptions :column="2"
                         border>
          <el-descriptions-item label="应急预案名称"
                                :span="2">
            <span class="detail-title">{{ currentKnowledge.planName }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="应急预案编码">
            <span>{{ currentKnowledge.planCode }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="发布生效时间">
            {{ currentKnowledge.publishTime }}
          </el-descriptions-item>
          <el-descriptions-item label="核心责任人">
            {{ currentKnowledge.coreResponsorUserName }}
          </el-descriptions-item>
          <el-descriptions-item label="预案类型">
            <el-tag type="warning"> {{ emergencyPlanTypeLabel(currentKnowledge.planType) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            {{ currentKnowledge.remark }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="detail-section">
          <h4>适用范围</h4>
          <div class="key-points">
            <el-tag v-for="(point, index) in currentKnowledge.applyScope.split(',')"
                    :key="index"
                    type="primary"
                    style="margin-right: 8px; margin-bottom: 8px;">
              {{ getApplyScopeLabel(point.trim()) }}
            </el-tag>
          </div>
        </div>
        <div class="detail-section">
          <h4>应急处置步骤</h4>
          <div class="detail-content">
            <div v-if="currentKnowledge.execSteps">
              <div v-for="(step, index) in JSON.parse(currentKnowledge.execSteps)"
                   :key="index"
                   class="exec-step-view">
                <span class="step-number">{{ index + 1 }}.</span>
                <span class="step-title">{{ step.step }}：</span>
                <span>{{ step.description }}</span>
              </div>
            </div>
            <div v-else
                 class="no-data">无应急处置步骤</div>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
          <!-- <el-button type="success" @click="markAsFavorite">收藏@</el-button> -->
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { Search } from "@element-plus/icons-vue";
  import {
    onMounted,
    ref,
    reactive,
    toRefs,
    getCurrentInstance,
    computed,
  } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import PIMTable from "@/components/PIMTable/PIMTable.vue";
  import { userListNoPage } from "@/api/system/user.js";
  import {
    safeContingencyPlanListPage,
    safeContingencyPlanAdd,
    safeContingencyPlanUpdate,
    safeContingencyPlanDel,
  } from "@/api/safeProduction/emergencyPlanReview.js";

  // è¡¨å•éªŒè¯è§„则
  const rules = {
    planCode: [
      { required: true, message: "请输入应急预案编码", trigger: "blur" },
    ],
    applyScope: [
      { required: true, message: "请选择适用范围", trigger: "change" },
    ],
    planType: [{ required: true, message: "请选择预案类型", trigger: "change" }],
    planName: [
      { required: true, message: "请输入应急预案名称", trigger: "blur" },
    ],
    publishTime: [
      { required: true, message: "请选择发布生效时间", trigger: "change" },
    ],
    coreResponsorUserId: [
      { required: true, message: "请选择核心责任人", trigger: "change" },
    ],
  };

  // å“åº”式数据
  const data = reactive({
    searchForm: {
      planName: "",
      planType: "",
    },
    tableLoading: false,
    page: {
      current: 1,
      size: 20,
      total: 0,
    },
    tableData: [],
    selectedIds: [],
    form: {
      planCode: "", // é¢„案编号
      applyScope: [], // é€‚用范围
      planType: "", // é¢„案类型
      planName: "", // é¢„案名称
      publishTime: "", // å‘布时间
      coreResponsorUserId: "", // æ ¸å¿ƒè´Ÿè´£äººç”¨æˆ·ID
      coreResponsorUserName: "", // æ ¸å¿ƒè´Ÿè´£äººç”¨æˆ·å
      remark: "", // å¤‡æ³¨
      execSteps: "", // æ‰§è¡Œæ­¥éª¤
    },
    dialogVisible: false,
    dialogTitle: "",
    dialogType: "add",
    viewDialogVisible: false,
    currentKnowledge: {},
  });

  const {
    searchForm,
    tableLoading,
    page,
    tableData,
    selectedIds,
    form,
    dialogVisible,
    dialogTitle,
    dialogType,
    viewDialogVisible,
    currentKnowledge,
  } = toRefs(data);

  // è¡¨å•å¼•ç”¨
  const formRef = ref();
  const execStepsList = ref([]);

  // è¡¨æ ¼åˆ—配置
  const tableColumn = ref([
    {
      label: "应急预案编码",
      prop: "planCode",
      showOverflowTooltip: true,
    },
    {
      label: "应急预案名称",
      prop: "planName",
      showOverflowTooltip: true,
    },
    {
      label: "发布生效时间",
      prop: "publishTime",
      showOverflowTooltip: true,
    },
    {
      label: "核心责任人",
      prop: "coreResponsorUserName",
      showOverflowTooltip: true,
    },
    {
      label: "预案类型",
      prop: "planType",
      showOverflowTooltip: true,
      formatData: params => {
        return emergencyPlanTypeLabel(params);
      },
    },
    {
      label: "备注",
      prop: "remark",
      showOverflowTooltip: true,
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 200,
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            openForm("edit", row);
          },
        },
        {
          name: "查看",
          type: "text",
          clickFun: row => {
            viewKnowledge(row);
          },
        },
      ],
    },
  ]);
  const userList = ref([]);
  // ç”Ÿå‘½å‘¨æœŸ
  onMounted(() => {
    userListNoPage().then(res => {
      userList.value = res.data;
    });
    getList();
    startAutoRefresh();
  });
  const handleChange = userId => {
    const selectedUser = userList.value.find(user => user.userId === userId);
    if (selectedUser) {
      form.value.coreResponsorUserName = selectedUser.nickName;
    }
  };

  // åº”急处置步骤管理
  const addExecStep = () => {
    const stepNumber = execStepsList.value.length + 1;
    execStepsList.value.push({
      step: `步骤${stepNumber}`,
      description: "",
    });
  };

  const removeExecStep = index => {
    execStepsList.value.splice(index, 1);
  };

  const initExecSteps = execSteps => {
    if (execSteps) {
      try {
        execStepsList.value = JSON.parse(execSteps);
      } catch (e) {
        execStepsList.value = [];
      }
    } else {
      execStepsList.value = [];
    }
  };
  // å¼€å§‹è‡ªåŠ¨åˆ·æ–°
  const startAutoRefresh = () => {
    setInterval(() => {
      getList();
    }, 600000); // 10分钟刷新一次 (10 * 60 * 1000 = 600000ms)
  };

  // æŸ¥è¯¢æ•°æ®
  const handleQuery = () => {
    page.value.current = 1;
    getList();
  };

  const getList = () => {
    tableLoading.value = true;
    safeContingencyPlanListPage({ ...page.value, ...searchForm.value })
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
      })
      .catch(err => {
        tableLoading.value = false;
      });
  };

  // åˆ†é¡µå¤„理
  const pagination = obj => {
    page.value.current = obj.page;
    page.value.size = obj.limit;
    handleQuery();
  };

  // é€‰æ‹©å˜åŒ–处理
  const handleSelectionChange = selection => {
    selectedIds.value = selection.map(item => item.id);
  };

  // æ‰“开表单
  const openForm = (type, row = null) => {
    dialogType.value = type;
    if (type === "add") {
      dialogTitle.value = "新增应急预案";
      // é‡ç½®è¡¨å•
      Object.assign(form.value, {
        planCode: "", // é¢„案编号
        applyScope: [], // é€‚用范围
        planType: "", // é¢„案类型
        planName: "", // é¢„案名称
        publishTime: "", // å‘布时间
        coreResponsorUserId: "", // æ ¸å¿ƒè´Ÿè´£äººç”¨æˆ·ID
        coreResponsorUserName: "", // æ ¸å¿ƒè´Ÿè´£äººç”¨æˆ·å
        remark: "", // å¤‡æ³¨
        execSteps: "", // æ‰§è¡Œæ­¥éª¤
      });
      initExecSteps("");
    } else if (type === "edit" && row) {
      dialogTitle.value = "编辑应急预案";
      Object.assign(form.value, {
        id: row.id,
        planCode: row.planCode, // é¢„案编号
        applyScope: row.applyScope ? row.applyScope.split(",") : [], // é€‚用范围
        planType: row.planType, // é¢„案类型
        planName: row.planName, // é¢„案名称
        publishTime: row.publishTime, // å‘布时间
        coreResponsorUserId: row.coreResponsorUserId, // æ ¸å¿ƒè´Ÿè´£äººç”¨æˆ·ID
        coreResponsorUserName: row.coreResponsorUserName, // æ ¸å¿ƒè´Ÿè´£äººç”¨æˆ·å
        remark: row.remark, // å¤‡æ³¨
        execSteps: row.execSteps, // æ‰§è¡Œæ­¥éª¤
      });
      initExecSteps(row.execSteps);
    }
    dialogVisible.value = true;
  };

  // æŸ¥çœ‹åº”急预案详情
  const viewKnowledge = row => {
    currentKnowledge.value = { ...row };
    viewDialogVisible.value = true;
  };
  const getApplyScopeLabel = scope => {
    const scopeMap = {
      all: "全体员工",
      manager: "管理层",
      hr: "人事部门",
      finance: "财务部门",
      tech: "技术部门",
    };
    return scopeMap[scope] || scope;
  };

  // èŽ·å–类型标签类型
  const getTypeTagType = type => {
    const typeMap = {
      contract: "success",
      approval: "warning",
      solution: "primary",
      experience: "info",
      guide: "danger",
    };
    return typeMap[type] || "info";
  };

  // èŽ·å–类型标签文本
  const getTypeLabel = type => {
    return getKnowledgeTypeLabel(type);
  };

  // èŽ·å–效率标签类型
  const getEfficiencyTagType = efficiency => {
    const typeMap = {
      high: "success",
      medium: "warning",
      low: "info",
    };
    return typeMap[efficiency] || "info";
  };

  // èŽ·å–效率标签文本
  const getEfficiencyLabel = efficiency => {
    const efficiencyMap = {
      high: "显著提升",
      medium: "一般提升",
      low: "轻微提升",
    };
    return efficiencyMap[efficiency] || efficiency;
  };

  // èŽ·å–效率提升百分比
  const getEfficiencyScore = efficiency => {
    const scoreMap = {
      high: 40,
      medium: 25,
      low: 15,
    };
    return scoreMap[efficiency] || 0;
  };

  // èŽ·å–平均节省时间
  const getTimeSaved = efficiency => {
    const timeMap = {
      high: "2-3天",
      medium: "1-2天",
      low: "0.5-1天",
    };
    return timeMap[efficiency] || "未知";
  };
  const { proxy } = getCurrentInstance();
  const { emergency_plan_type } = proxy.useDict("emergency_plan_type");
  const emergencyPlanTypeOptions = computed(
    () => emergency_plan_type?.value || []
  );
  const emergencyPlanTypeLabel = val => {
    const item = emergencyPlanTypeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item ? item.label : val;
  };
  // æäº¤åº”急预案表单
  const submitForm = async () => {
    try {
      await formRef.value.validate();

      // éªŒè¯åº”急处置步骤
      for (let i = 0; i < execStepsList.value.length; i++) {
        const step = execStepsList.value[i];
        if (!step.step || !step.step.trim()) {
          ElMessage.error(`第${i + 1}条步骤的"步骤"不能为空`);
          return;
        }
        if (!step.description || !step.description.trim()) {
          ElMessage.error(`第${i + 1}条步骤的"措施"不能为空`);
          return;
        }
      }

      // å°†åº”急处置步骤转换为JSON字符串
      form.value.execSteps = JSON.stringify(execStepsList.value);
      if (dialogType.value === "add") {
        // æ–°å¢žåº”急预案
        form.value.applyScope = form.value.applyScope.join(",");
        safeContingencyPlanAdd({ ...form.value })
          .then(res => {
            if (res.code == 200) {
              ElMessage.success("添加成功");
              dialogVisible.value = false;
              getList();
            }
          })
          .catch(err => {
            ElMessage.error(err.msg);
          });
      } else {
        form.value.applyScope = form.value.applyScope.join(",");
        safeContingencyPlanUpdate({ ...form.value })
          .then(res => {
            if (res.code == 200) {
              ElMessage.success("更新成功");
              dialogVisible.value = false;
              getList();
            }
          })
          .catch(err => {
            ElMessage.error(err.msg);
          });
      }
    } catch (error) {
      console.error("表单验证失败:", error);
    }
  };

  // åˆ é™¤åº”急预案
  const handleDelete = () => {
    if (selectedIds.value.length === 0) {
      ElMessage.warning("请选择要删除的应急预案");
      return;
    }

    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // console.log(selectedIds.value);
        safeContingencyPlanDel(selectedIds.value).then(res => {
          if (res.code == 200) {
            ElMessage.success("删除成功");
            selectedIds.value = [];
            getList();
          }
        });
      })
      .catch(() => {
        // ç”¨æˆ·å–消
      });
  };

  // å¯¼å‡º

  // å­—典工具
  const knowledgeTypeOptions = computed(() => knowledge_type?.value || []);
  const getKnowledgeTypeLabel = val => {
    const item = knowledgeTypeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item ? item.label : val;
  };
  const getKnowledgeTypeTagType = val => {
    const item = knowledgeTypeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item?.elTagType || "info";
  };
  const handleExport = () => {
    proxy.download(
      "/knowledgeBase/export",
      { ...searchForm.value },
      "应急预案库.xlsx"
    );
  };
</script>

<style scoped>
  .auto-refresh-info {
    margin-bottom: 15px;
  }

  .auto-refresh-info .el-alert {
    border-radius: 8px;
  }

  .dialog-footer {
    text-align: right;
  }

  .knowledge-detail {
    padding: 20px 0;
  }

  .detail-title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }

  .detail-section {
    margin-top: 24px;
  }

  .detail-section h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    border-left: 4px solid #409eff;
    padding-left: 12px;
  }

  .detail-content {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 6px;
    line-height: 1.6;
    color: #606266;
    white-space: pre-wrap;
  }

  .key-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .usage-stats {
    margin-top: 16px;
  }

  .stat-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
  }

  .stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 8px;
  }

  .stat-label {
    font-size: 14px;
    color: #909399;
  }

  .exec-steps-container {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 15px;
    background-color: #f9fafc;
  }

  .exec-step-item {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
  }

  .step-header {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .exec-step-view {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
  }

  .step-number {
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #409eff;
  }

  .step-title {
    font-weight: bold;
    margin-right: 5px;
  }

  .no-data {
    color: #909399;
    font-style: italic;
  }
</style>

 src/views/safeProduction/hazardSourceLedger/index.vue

@@ -181,7 +181,9 @@
            {{ currentKnowledge.code }}
          </el-descriptions-item>
          <el-descriptions-item label="危险源类型">
            {{ getTypeLabel(currentKnowledge.type) }}
            <el-tag type="info">
              {{ getTypeLabel(currentKnowledge.type) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="所在位置">
            {{ currentKnowledge.location }}

 src/views/safeProduction/hazardousMaterialsControl/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,894 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">危险源名称：</span>
        <el-input v-model="searchForm.name"
                  style="width: 240px"
                  placeholder="请输入危险源名称搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span class="search_title ml10">危险源类型：</span>
        <el-select v-model="searchForm.type"
                   clearable
                   @change="handleQuery"
                   style="width: 240px">
          <el-option v-for="item in knowledgeTypeOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value" />
        </el-select>
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">
          æœç´¢
        </el-button>
      </div>
      <div>
        <el-button type="primary"
                   @click="openForm('add')">去领用</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination1"
                :total="page.total"></PIMTable>
    </div>
    <!-- æ–°å¢ž/编辑知识弹窗 -->
    <el-dialog v-model="dialogVisible"
               :title="dialogTitle"
               width="800px"
               :close-on-click-modal="false">
      <el-form ref="formRef"
               v-if="dialogType === 'add'"
               :model="form"
               :rules="rules"
               label-width="140px"
               label-position="top">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="危险源"
                          prop="safeHazardId">
              <el-input v-model="valueItem.name"
                        readonly
                        @click="openSafeHazardSelect"
                        placeholder="请选择危险源" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在位置"
                          prop="location">
              <el-input v-model="valueItem.location"
                        disabled
                        placeholder="自动带出" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="危险源类型"
                          prop="type">
              <el-input v-model="valueItem.type"
                        disabled
                        placeholder="自动带出" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="风险等级"
                          prop="riskLevel">
              <el-input v-model="valueItem.riskLevel"
                        disabled
                        placeholder="自动带出" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="库存数量"
                          prop="stockQty">
              <el-input v-model="valueItem.stockQty"
                        disabled
                        placeholder="自动带出" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="领用用途"
                          prop="applyPurpose">
              <el-input v-model="form.applyPurpose"
                        placeholder="请输入领用用途" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领用数量"
                          prop="applyQty">
              <el-input v-model="form.applyQty"
                        type="number"
                        min="0"
                        @input="handleApplyQtyChange"
                        placeholder="请输入领用数量" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="领用人"
                          prop="applyUserId">
              <el-select v-model="form.applyUserId"
                         disabled
                         placeholder="请选择"
                         clearable>
                <el-option v-for="item in userList"
                           :key="item.userId"
                           :label="item.nickName"
                           :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领用时间"
                          prop="applyTime">
              <el-date-picker style="width: 100%"
                              disabled
                              v-model="form.applyTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-descriptions :column="2"
                       style="margin-bottom: 20px"
                       v-if="dialogType === 'edit' || dialogType === 'view'"
                       border>
        <el-descriptions-item label="危险源编码">
          <span>{{ form.code }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="危险源名称">
          <span>{{ form.name }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="危险源类型">
          <el-tag type="info">
            {{ getTypeLabel(form.type) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="所在位置">
          <span>{{ form.location }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="风险等级">
          <el-tag :type="getTypeTagType(form.riskLevel)">
            {{ form.riskLevel }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="领用用途">
          <span>{{ form.applyPurpose }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="领用时间">
          <span>{{ form.applyTime }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="领用数量">
          <span>{{ form.applyQty }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="领用人">
          <span>{{ form.applyUserName }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="dialogType === 'view' && form.returnUserId"
                              label="归还人">
          <span>{{ form.returnUserName }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="dialogType === 'view' && form.returnTime"
                              label="归还时间">
          <span>{{ form.returnTime }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="dialogType === 'view' && form.returnUserId"
                              label="归还情况说明">
          <span>{{ form.returnRemark }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <el-form ref="formRef1"
               v-if="dialogType === 'edit'"
               :model="form"
               :rules="rules1"
               label-width="140px"
               label-position="top">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="归还人"
                          prop="returnUserId">
              <el-select v-model="form.returnUserId"
                         disabled
                         placeholder="请选择"
                         clearable>
                <el-option v-for="item in userList"
                           :key="item.userId"
                           :label="item.nickName"
                           :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归还时间"
                          prop="returnTime">
              <el-date-picker style="width: 100%"
                              disabled
                              v-model="form.returnTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="归还情况说明"
                      prop="applyPurpose">
          <el-input v-model="form.returnRemark"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入归还情况说明" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- å±é™©æºé€‰æ‹©å¼¹çª— -->
    <el-dialog v-model="safeHazardSelectVisible"
               title="选择危险源"
               width="800px"
               :close-on-click-modal="false">
      <div>
        <el-table :data="safeHazardList"
                  border
                  v-loading="safeHazardLoading"
                  style="width: 100%"
                  @row-click="handleSafeHazardSelect">
          <el-table-column prop="code"
                           label="危险源编码"
                           width="180"
                           show-overflow-tooltip />
          <el-table-column prop="name"
                           label="危险源名称"
                           show-overflow-tooltip />
          <el-table-column prop="type"
                           label="危险源类型"
                           width="120"
                           show-overflow-tooltip>
            <template #default="scope">
              {{ getTypeLabel(scope.row.type) }}
            </template>
          </el-table-column>
          <el-table-column prop="location"
                           label="所在位置"
                           width="180"
                           show-overflow-tooltip />
          <el-table-column prop="riskLevel"
                           label="风险等级"
                           width="100">
            <template #default="scope">
              <el-tag :type="getTypeTagType(scope.row.riskLevel)">
                {{ scope.row.riskLevel }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="stockQty"
                           label="库存数量"
                           width="100" />
        </el-table>
        <pagination :total="safeHazardPage.total"
                    style="margin-top: 20px"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page="safeHazardPage.current"
                    :limit="safeHazardPage.size"
                    @pagination="safeHazardPagination" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="safeHazardSelectVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { Search } from "@element-plus/icons-vue";
  import {
    onMounted,
    ref,
    reactive,
    toRefs,
    getCurrentInstance,
    computed,
  } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import PIMTable from "@/components/PIMTable/PIMTable.vue";
  import pagination from "@/components/PIMTable/Pagination.vue";
  import { userListNoPage } from "@/api/system/user.js";
  import { safeHazardListPage } from "@/api/safeProduction/hazardSourceLedger.js";
  import {
    safeHazardRecordListPage,
    safeHazardRecordDel,
    safeHazardRecordAdd,
    safeHazardRecordUpdate,
  } from "@/api/safeProduction/hazardousMaterialsControl.js";
  import dayjs from "dayjs";
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();
  // è¡¨å•éªŒè¯è§„则
  const rules = {
    applyPurpose: [
      { required: true, message: "请输入领用用途", trigger: "blur" },
    ],
    applyQty: [{ required: true, message: "请输入领用数量", trigger: "blur" }],
    safeHazardId: [
      { required: true, message: "请选择危险源", trigger: "change" },
    ],
  };
  const rules1 = {
    returnRemark: [
      { required: true, message: "请输入归还情况说明", trigger: "blur" },
    ],
  };
  // å“åº”式数据
  const data = reactive({
    searchForm: {
      name: "",
      type: "",
    },
    tableLoading: false,
    page: {
      current: 1,
      size: 20,
      total: 0,
    },
    tableData: [],
    selectedIds: [],
    form: {
      applyPurpose: "", // é¢†ç”¨ç”¨é€”
      applyTime: "", // é¢†ç”¨æ—¶é—´
      applyQty: "", // é¢†ç”¨æ•°é‡
      applyUserId: "", // é¢†ç”¨äººID
      safeHazardId: "", // å±é™©æºID
    },
    dialogVisible: false,
    dialogTitle: "",
    dialogType: "add",
    viewDialogVisible: false,
    currentKnowledge: {},
    safeHazardSelectVisible: false,
    safeHazardList: [],
    safeHazardLoading: false,
    safeHazardPage: {
      current: 1,
      size: 10,
      total: 0,
    },
  });

  const {
    searchForm,
    tableLoading,
    page,
    tableData,
    selectedIds,
    form,
    dialogVisible,
    dialogTitle,
    dialogType,
    viewDialogVisible,
    currentKnowledge,
    safeHazardSelectVisible,
    safeHazardList,
    safeHazardLoading,
    safeHazardPage,
  } = toRefs(data);
  const valueItem = ref({});

  // è¡¨å•å¼•ç”¨
  const formRef = ref();
  const formRef1 = ref();
  const riskLevelOptions = ref([
    { value: "低风险", label: "低风险" },
    { value: "一般风险", label: "一般风险" },
    { value: "较大风险", label: "较大风险" },
    { value: "重大风险", label: "重大风险" },
  ]);

  // è¡¨æ ¼åˆ—配置
  const tableColumn = ref([
    {
      label: "领用单号",
      prop: "materialRecordCode",
      width: 130,
      showOverflowTooltip: true,
    },
    {
      label: "危险源编码",
      prop: "code",
      showOverflowTooltip: true,
    },
    {
      label: "危险源名称",
      prop: "name",
      showOverflowTooltip: true,
    },
    {
      label: "危险源类型",
      prop: "type",
      showOverflowTooltip: true,
      formatData: params => {
        return getTypeLabel(params);
      },
    },
    {
      label: "风险等级",
      prop: "riskLevel",
      showOverflowTooltip: true,
      dataType: "tag",
      formatType: params => {
        const typeMap = {
          ä½Žé£Žé™©: "info",
          ä¸€èˆ¬é£Žé™©: "info",
          è¾ƒå¤§é£Žé™©: "warning",
          é‡å¤§é£Žé™©: "danger",
        };
        return typeMap[params] || "info";
      },
    },
    {
      label: "领用用途",
      prop: "applyPurpose",
      showOverflowTooltip: true,
    },
    {
      label: "领用时间",
      prop: "applyTime",
      showOverflowTooltip: true,
    },
    {
      label: "领用数量",
      prop: "applyQty",
      showOverflowTooltip: true,
    },
    {
      label: "归还时间",
      prop: "returnTime",
      showOverflowTooltip: true,
    },
    {
      label: "归还人",
      prop: "returnUserName",
      showOverflowTooltip: true,
    },
    {
      label: "归还情况说明",
      prop: "returnRemark",
      showOverflowTooltip: true,
    },
    {
      label: "所在位置",
      prop: "location",
      showOverflowTooltip: true,
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 130,
      operation: [
        {
          name: "归还",
          type: "text",
          clickFun: row => {
            openForm("edit", row);
          },
          disabled: row => row.returnUserId,
        },
        {
          name: "查看",
          type: "text",
          clickFun: row => {
            openForm("view", row);
          },
        },
      ],
    },
  ]);
  const userList = ref([]);
  // ç”Ÿå‘½å‘¨æœŸ
  onMounted(() => {
    getCurrentFactoryName();
    getList();
    startAutoRefresh();
    userListNoPage().then(res => {
      userList.value = res.data;
    });
  });
  const currentUserId = ref("");
  const currentUserName = ref("");
  const getCurrentFactoryName = async () => {
    let res = await userStore.getInfo();
    currentUserId.value = res.user.userId;
    currentUserName.value = res.user.nickName;
  };

  // å¤„理用户选择变化
  const handleUserChange = userId => {
    const selectedUser = userList.value.find(user => user.userId === userId);
    if (selectedUser) {
      form.value.principalUser = selectedUser.nickName;
      form.value.principalMobile = selectedUser.phonenumber;
    }
  };
  const handleApplyQtyChange = () => {
    if (form.value.applyQty > valueItem.value.stockQty) {
      ElMessage.error("领用数量不能大于库存数量");
      form.value.applyQty = "";
    }
  };

  // å¼€å§‹è‡ªåŠ¨åˆ·æ–°
  const startAutoRefresh = () => {
    setInterval(() => {
      getList();
    }, 600000); // 10分钟刷新一次 (10 * 60 * 1000 = 600000ms)
  };

  // æŸ¥è¯¢æ•°æ®
  const handleQuery = () => {
    page.value.current = 1;
    getList();
  };

  const getList = () => {
    tableLoading.value = true;
    safeHazardRecordListPage({ ...page.value, ...searchForm.value })
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.value.total = res.data.total;
      })
      .catch(err => {
        tableLoading.value = false;
      });
  };
  const openSafeHazardSelect = async () => {
    await fetchSafeHazardList();
    safeHazardSelectVisible.value = true;
  };

  const fetchSafeHazardList = () => {
    safeHazardLoading.value = true;
    return safeHazardListPage({
      page: safeHazardPage.value.current,
      size: safeHazardPage.value.size,
    })
      .then(res => {
        safeHazardList.value = res.data.records;
        safeHazardPage.value.total = res.data.total;
      })
      .finally(() => {
        safeHazardLoading.value = false;
      });
  };

  const handleSafeHazardSelect = item => {
    valueItem.value = {
      ...item,
    };
    valueItem.value.type = getTypeLabel(valueItem.value.type);
    form.value.safeHazardId = item.id;
    safeHazardSelectVisible.value = false;
  };

  const safeHazardPagination = obj => {
    safeHazardPage.value.current = obj.page;
    safeHazardPage.value.size = obj.limit;
    fetchSafeHazardList();
  };

  // åˆ†é¡µå¤„理
  const pagination1 = obj => {
    page.value.current = obj.page;
    page.value.size = obj.limit;
    handleQuery();
  };

  // é€‰æ‹©å˜åŒ–处理
  const handleSelectionChange = selection => {
    selectedIds.value = selection.map(item => item.id);
  };

  // æ‰“开表单
  const openForm = (type, row = null) => {
    dialogType.value = type;
    if (type === "add") {
      dialogTitle.value = "领用危险源";
      // é‡ç½®è¡¨å•
      form.value = {};
      Object.assign(form.value, {
        applyPurpose: "", // é¢†ç”¨ç”¨é€”
        applyTime: dayjs().format("YYYY-MM-DD"), // é¢†ç”¨æ—¶é—´
        applyQty: "", // é¢†ç”¨æ•°é‡
        applyUserId: currentUserId.value, // é¢†ç”¨äººID
        safeHazardId: "", // å±é™©æºID
      });
      valueItem.value = {};
    } else if (type === "edit" && row) {
      dialogTitle.value = "归还";
      Object.assign(form.value, {
        id: row.id, // ä¸»é”®ID
        materialRecordCode: row.materialRecordCode, // å•å·
        applyPurpose: row.applyPurpose, // é¢†ç”¨ç”¨é€”
        applyTime: row.applyTime, // é¢†ç”¨æ—¶é—´
        applyQty: row.applyQty, // é¢†ç”¨æ•°é‡
        applyUserId: row.applyUserId, // é¢†ç”¨äººID
        safeHazardId: row.safeHazardId, // å±é™©æºID
        applyUserName: row.applyUserName, // é¢†ç”¨äººå§“名
        code: row.code, // å±é™©æºç¼–码
        name: row.name, // å±é™©æºåç§°
        type: row.type, // å±é™©æºç±»åž‹
        location: row.location, // æ‰€åœ¨ä½ç½®
        riskLevel: row.riskLevel, // é£Žé™©ç­‰çº§
        type: row.type, // å±é™©æºç±»åž‹
        returnTime: dayjs().format("YYYY-MM-DD"), // å½’还时间
        returnUserName: "", // å½’还人姓名
        returnUserId: currentUserId.value, // å½’还人ID
        returnRemark: "", // å½’还情况说明
      });
    } else if (type === "view") {
      dialogTitle.value = "查看";
      form.value = { ...row };
    }
    dialogVisible.value = true;
  };

  // æŸ¥çœ‹å±é™©æºè¯¦æƒ…
  const viewKnowledge = row => {
    currentKnowledge.value = { ...row };
    viewDialogVisible.value = true;
  };

  // èŽ·å–类型标签类型
  const getTypeTagType = type => {
    const typeMap = {
      è¾ƒå¤§é£Žé™©: "warning",
      ä½Žé£Žé™©: "info",
      ä¸€èˆ¬é£Žé™©: "info",
      é‡å¤§é£Žé™©: "danger",
    };
    return typeMap[type] || "info";
  };

  // èŽ·å–类型标签文本
  const getTypeLabel = type => {
    return getKnowledgeTypeLabel(type);
  };

  // èŽ·å–效率标签类型
  const getEfficiencyTagType = efficiency => {
    const typeMap = {
      high: "success",
      medium: "warning",
      low: "info",
    };
    return typeMap[efficiency] || "info";
  };

  // èŽ·å–效率标签文本
  const getEfficiencyLabel = efficiency => {
    const efficiencyMap = {
      high: "显著提升",
      medium: "一般提升",
      low: "轻微提升",
    };
    return efficiencyMap[efficiency] || efficiency;
  };

  // èŽ·å–效率提升百分比
  const getEfficiencyScore = efficiency => {
    const scoreMap = {
      high: 40,
      medium: 25,
      low: 15,
    };
    return scoreMap[efficiency] || 0;
  };

  // èŽ·å–平均节省时间
  const getTimeSaved = efficiency => {
    const timeMap = {
      high: "2-3天",
      medium: "1-2天",
      low: "0.5-1天",
    };
    return timeMap[efficiency] || "未知";
  };

  // æäº¤å±é™©æºè¡¨å•
  const submitForm = async () => {
    try {
      if (dialogType.value === "add") {
        await formRef.value.validate();
        safeHazardRecordAdd({ ...form.value })
          .then(res => {
            if (res.code == 200) {
              ElMessage.success("添加成功");
              dialogVisible.value = false;
              getList();
            }
          })
          .catch(err => {
            ElMessage.error(err.msg);
          });
      } else {
        await formRef1.value.validate();
        safeHazardRecordUpdate({ ...form.value })
          .then(res => {
            if (res.code == 200) {
              ElMessage.success("更新成功");
              dialogVisible.value = false;
              getList();
            }
          })
          .catch(err => {
            ElMessage.error(err.msg);
          });
      }
    } catch (error) {
      console.error("表单验证失败:", error);
    }
  };

  // åˆ é™¤å±é™©æºè®°å½•
  const handleDelete = () => {
    if (selectedIds.value.length === 0) {
      ElMessage.warning("请选择要删除的记录");
      return;
    }

    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // console.log(selectedIds.value);
        safeHazardRecordDel(selectedIds.value).then(res => {
          if (res.code == 200) {
            ElMessage.success("删除成功");
            selectedIds.value = [];
            getList();
          }
        });
      })
      .catch(() => {
        // ç”¨æˆ·å–消
      });
  };

  // å¯¼å‡º
  const { proxy } = getCurrentInstance();
  const { hazard_source_type } = proxy.useDict("hazard_source_type");

  // å­—典工具
  const knowledgeTypeOptions = computed(() => hazard_source_type?.value || []);
  const getKnowledgeTypeLabel = val => {
    const item = knowledgeTypeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item ? item.label : val;
  };
  const getKnowledgeTypeTagType = val => {
    const item = knowledgeTypeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item?.elTagType || "info";
  };
  const handleExport = () => {
    proxy.download(
      "/knowledgeBase/export",
      { ...searchForm.value },
      "知识库.xlsx"
    );
  };
</script>

<style scoped>
  .auto-refresh-info {
    margin-bottom: 15px;
  }

  .auto-refresh-info .el-alert {
    border-radius: 8px;
  }

  .dialog-footer {
    text-align: right;
  }

  .knowledge-detail {
    padding: 20px 0;
  }

  .detail-title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }

  .detail-section {
    margin-top: 24px;
  }

  .detail-section h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    border-left: 4px solid #409eff;
    padding-left: 12px;
  }

  .detail-content {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 6px;
    line-height: 1.6;
    color: #606266;
    white-space: pre-wrap;
  }

  .key-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .usage-stats {
    margin-top: 16px;
  }

  .stat-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
  }

  .stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 8px;
  }

  .stat-label {
    font-size: 14px;
    color: #909399;
  }

  :deep(.danger-row td) {
    color: #e95a66 !important;
  }
</style>

 src/views/safeProduction/safeQualifications/index.vue

@@ -82,7 +82,11 @@
                         show-overflow-tooltip />
        <el-table-column label="规程资质类型"
                         prop="type"
                         show-overflow-tooltip />
                         show-overflow-tooltip>
          <template #default="scope">
            {{ type_qualification.find(item => item.value === scope.row.type)?.label || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="版本号"
                         prop="version"
                         width="180"

 src/views/safeProduction/safeWorkApproval/components/approvalDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,530 @@
<template>
  <div>
    <el-dialog v-model="dialogFormVisible"
               :title="operationType === 'approval' ? '审批' : '详情'"
               width="700px"
               @close="closeDia">
      <el-form :model="form"
               label-width="140px"
               label-position="top"
               ref="formRef">
        <el-row>
          <el-col :span="24">
            <el-form-item label="流程编号："
                          prop="approveId">
              <el-input v-model="form.approveId"
                        placeholder="自动编号"
                        clearable
                        disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="申请部门：">
              <el-select disabled
                         v-model="form.approveDeptId"
                         placeholder="选择部门">
                <el-option v-for="user in productOptions"
                           :key="user.deptId"
                           :label="user.deptName"
                           :value="user.deptId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!isQuotationApproval && !isPurchaseApproval">
          <el-col :span="24">
            <el-form-item :label="props.approveType == 5 ? '采购合同号：' : '审批事由：'"
                          prop="approveReason">
              <el-input v-model="form.approveReason"
                        placeholder="请输入"
                        clearable
                        type="textarea"
                        disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- å®¡æ‰¹äººé€‰æ‹©ï¼ˆåŠ¨æ€èŠ‚点） -->
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="申请人："
                          prop="approveUser">
              <el-select v-model="form.approveUser"
                         placeholder="选择人员"
                         disabled>
                <el-option v-for="user in userList"
                           :key="user.userId"
                           :label="user.nickName"
                           :value="user.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请日期："
                          prop="approveTime">
              <el-date-picker v-model="form.approveTime"
                              type="date"
                              placeholder="请选择日期"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              clearable
                              style="width: 100%"
                              disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- æŠ¥ä»·å®¡æ‰¹ï¼šå±•ç¤ºæŠ¥ä»·è¯¦æƒ…（复用销售报价"查看详情对话框"内容结构） -->
      <div v-if="isQuotationApproval"
           style="margin: 10px 0 18px;">
        <el-divider content-position="left">报价详情</el-divider>
        <el-skeleton :loading="quotationLoading"
                     animated>
          <template #template>
            <el-skeleton-item variant="h3"
                              style="width: 30%" />
            <el-skeleton-item variant="text"
                              style="width: 100%" />
            <el-skeleton-item variant="text"
                              style="width: 100%" />
          </template>
          <template #default>
            <el-empty v-if="!currentQuotation || !currentQuotation.quotationNo"
                      description="未查询到对应报价详情" />
            <template v-else>
              <el-descriptions :column="2"
                               border>
                <el-descriptions-item label="报价单号">{{ currentQuotation.quotationNo }}</el-descriptions-item>
                <el-descriptions-item label="客户名称">{{ currentQuotation.customer }}</el-descriptions-item>
                <el-descriptions-item label="业务员">{{ currentQuotation.salesperson }}</el-descriptions-item>
                <el-descriptions-item label="报价日期">{{ currentQuotation.quotationDate }}</el-descriptions-item>
                <el-descriptions-item label="有效期至">{{ currentQuotation.validDate }}</el-descriptions-item>
                <el-descriptions-item label="付款方式">{{ currentQuotation.paymentMethod }}</el-descriptions-item>
                <el-descriptions-item label="报价总额"
                                      :span="2">
                  <span style="font-size: 18px; color: #e6a23c; font-weight: bold;">
                    Â¥{{ Number(currentQuotation.totalAmount ?? 0).toFixed(2) }}
                  </span>
                </el-descriptions-item>
              </el-descriptions>
              <div style="margin-top: 20px;">
                <h4>产品明细</h4>
                <el-table :data="currentQuotation.products || []"
                          border
                          style="width: 100%">
                  <el-table-column prop="product"
                                   label="产品名称" />
                  <el-table-column prop="specification"
                                   label="规格型号" />
                  <el-table-column prop="unit"
                                   label="单位" />
                  <el-table-column prop="unitPrice"
                                   label="单价">
                    <template #default="scope">Â¥{{ Number(scope.row.unitPrice ?? 0).toFixed(2) }}</template>
                  </el-table-column>
                </el-table>
              </div>
              <div v-if="currentQuotation.remark"
                   style="margin-top: 20px;">
                <h4>备注</h4>
                <p>{{ currentQuotation.remark }}</p>
              </div>
            </template>
          </template>
        </el-skeleton>
      </div>
      <!-- é‡‡è´­å®¡æ‰¹ï¼šå±•ç¤ºé‡‡è´­è¯¦æƒ… -->
      <div v-if="isPurchaseApproval"
           style="margin: 10px 0 18px;">
        <el-divider content-position="left">采购详情</el-divider>
        <el-skeleton :loading="purchaseLoading"
                     animated>
          <template #template>
            <el-skeleton-item variant="h3"
                              style="width: 30%" />
            <el-skeleton-item variant="text"
                              style="width: 100%" />
            <el-skeleton-item variant="text"
                              style="width: 100%" />
          </template>
          <template #default>
            <el-empty v-if="!currentPurchase || !currentPurchase.purchaseContractNumber"
                      description="未查询到对应采购详情" />
            <template v-else>
              <el-descriptions :column="2"
                               border>
                <el-descriptions-item label="采购合同号">{{ currentPurchase.purchaseContractNumber }}</el-descriptions-item>
                <el-descriptions-item label="供应商名称">{{ currentPurchase.supplierName }}</el-descriptions-item>
                <el-descriptions-item label="项目名称">{{ currentPurchase.projectName }}</el-descriptions-item>
                <el-descriptions-item label="销售合同号">{{ currentPurchase.salesContractNo }}</el-descriptions-item>
                <el-descriptions-item label="签订日期">{{ currentPurchase.executionDate }}</el-descriptions-item>
                <el-descriptions-item label="录入日期">{{ currentPurchase.entryDate }}</el-descriptions-item>
                <el-descriptions-item label="付款方式">{{ currentPurchase.paymentMethod }}</el-descriptions-item>
                <el-descriptions-item label="合同金额"
                                      :span="2">
                  <span style="font-size: 18px; color: #e6a23c; font-weight: bold;">
                    Â¥{{ Number(currentPurchase.contractAmount ?? 0).toFixed(2) }}
                  </span>
                </el-descriptions-item>
              </el-descriptions>
              <div style="margin-top: 20px;">
                <h4>产品明细</h4>
                <el-table :data="currentPurchase.productData || []"
                          border
                          style="width: 100%">
                  <el-table-column prop="productCategory"
                                   label="产品名称" />
                  <el-table-column prop="specificationModel"
                                   label="规格型号" />
                  <el-table-column prop="unit"
                                   label="单位" />
                  <el-table-column prop="quantity"
                                   label="数量" />
                  <el-table-column prop="taxInclusiveUnitPrice"
                                   label="含税单价">
                    <template #default="scope">Â¥{{ Number(scope.row.taxInclusiveUnitPrice ?? 0).toFixed(2) }}</template>
                  </el-table-column>
                  <el-table-column prop="taxInclusiveTotalPrice"
                                   label="含税总价">
                    <template #default="scope">Â¥{{ Number(scope.row.taxInclusiveTotalPrice ?? 0).toFixed(2) }}</template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </template>
        </el-skeleton>
      </div>
      <el-form :model="{ activities }"
               ref="formRef"
               label-position="top">
        <el-steps :active="getActiveStep()"
                  finish-status="success"
                  process-status="process"
                  align-center
                  direction="vertical">
          <el-step v-for="(activity, index) in activities"
                   :key="index"
                   finish-status="success"
                   :title="getNodeTitle(index, activities.length)"
                   :description="activity.approveNodeUser"
                   :icon="getNodeIcon(activity, index)">
            <template #icon>
              <el-icon v-if="activity.approveNodeStatus === 2"
                       color="red"
                       :size="22">
                <WarningFilled />
              </el-icon>
              <el-icon v-else-if="activity.isShen"
                       color="#1890ff"
                       :size="22">
                <Edit />
              </el-icon>
              <el-icon v-else-if="activity.approveNodeStatus === 1"
                       color="#67C23A"
                       :size="26">
                <Check />
              </el-icon>
              <el-icon v-else
                       color="#C0C4CC"
                       :size="22">
                <MoreFilled />
              </el-icon>
            </template>
            <template #title>
              <span style="color: #000000">{{ getNodeTitle(index, activities.length) }}</span>
            </template>
            <template #description>
              <div class="node-user">
                <div class="avatar-wrapper">
                  <img :src="userStore.avatar"
                       class="user-avatar"
                       alt="" />
                </div>
                <span style="color: #000000">{{ activity.approveNodeUser }}-{{activity.isApproval}}</span>
              </div>
              <div v-if="!activity.isShen"
                   class="node-reason">
                <span>审批意见：</span>{{ activity.approveNodeReason }}
              </div>
              <div v-if="!activity.isShen"
                   class="node-reason">
                <span>签名：</span>
                <img :src="activity.urlTem"
                     class="signImg"
                     alt=""
                     v-if="activity.urlTem" />
              </div>
              <div v-else-if="activity.isShen">
                <el-form-item :prop="'activities.' + index + '.approveNodeReason'"
                              :rules="[{ required: true, message: '审批意见不能为空', trigger: 'blur' }]">
                  <el-input v-model="activity.approveNodeReason"
                            clearable
                            type="textarea"
                            :disabled="operationType === 'view'"></el-input>
                </el-form-item>
              </div>
            </template>
          </el-step>
        </el-steps>
      </el-form>
      <template #footer
                v-if="operationType === 'approval'">
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitForm(2)">不通过</el-button>
          <el-button type="primary"
                     @click="submitForm(1)">通过</el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import {
    computed,
    getCurrentInstance,
    nextTick,
    reactive,
    ref,
    toRefs,
  } from "vue";
  import {
    approveProcessDetails,
    getDept,
    updateApproveNode,
  } from "@/api/collaborativeApproval/approvalProcess.js";
  import useUserStore from "@/store/modules/user.js";
  import { userListNoPageByTenantId } from "@/api/system/user.js";
  import {
    WarningFilled,
    Edit,
    Check,
    MoreFilled,
  } from "@element-plus/icons-vue";
  import { getQuotationList } from "@/api/salesManagement/salesQuotation.js";
  import { getPurchaseByCode } from "@/api/procurementManagement/procurementLedger.js";
  const emit = defineEmits(["close"]);
  const { proxy } = getCurrentInstance();

  const props = defineProps({
    approveType: {
      type: [Number, String],
      default: 0,
    },
  });

  const dialogFormVisible = ref(false);
  const operationType = ref("");
  const activities = ref([]);
  const formRef = ref(null);
  const userStore = useUserStore();
  const productOptions = ref([]);
  const userList = ref([]);
  const quotationLoading = ref(false);
  const currentQuotation = ref({});
  const purchaseLoading = ref(false);
  const currentPurchase = ref({});
  const isQuotationApproval = computed(() => Number(props.approveType) === 6);
  const isPurchaseApproval = computed(() => Number(props.approveType) === 5);

  const data = reactive({
    form: {
      approveTime: "",
      approveId: "",
      approveUser: "",
      approveDeptId: "",
      approveReason: "",
      checkResult: "",
    },
  });
  const { form } = toRefs(data);

  // èŠ‚点标题
  const getNodeTitle = (index, len) => {
    if (index === len - 1) return "结束";
    return "审批";
  };

  // èŽ·å–当前激活步骤
  const getActiveStep = () => {
    // å¦‚果所有 isShen éƒ½ä¸º false，返回最后一个步骤（全部完成）
    const hasActive = activities.value.some(a => a.isShen === true);
    if (!hasActive) return activities.value.length;
    // å½“前节点索引
    return activities.value.findIndex(a => a.isShen == true);
  };
  // æ­¥éª¤icon
  const getNodeIcon = (activity, index) => {
    if (activity.approveNodeStatus === 2) return "el-icon-warning"; // ä¸é€šè¿‡
    if (activity.isShen) return "Edit";
    return "";
  };

  // æ‰“开弹框
  const openDialog = (type, row) => {
    operationType.value = type;
    dialogFormVisible.value = true;
    currentQuotation.value = {};
    currentPurchase.value = {};
    userListNoPageByTenantId().then(res => {
      userList.value = res.data;
    });
    form.value = { ...row };
    // ç«‹å³æ¸…除表单验证状态（因为字段是disabled的，不需要验证）
    nextTick(() => {
      if (formRef.value) {
        formRef.value.clearValidate();
      }
    });
    // ç¡®ä¿é€‰é¡¹åŠ è½½å®ŒæˆåŽå†åŒ¹é…å€¼ç±»åž‹
    getProductOptions().then(() => {
      // ç¡®ä¿å€¼ç±»åž‹åŒ¹é…ï¼ˆå¦‚果选项已加载）
      if (productOptions.value.length > 0 && form.value.approveDeptId) {
        const matchedOption = productOptions.value.find(
          opt =>
            opt.deptId == form.value.approveDeptId ||
            String(opt.deptId) === String(form.value.approveDeptId)
        );
        if (matchedOption) {
          form.value.approveDeptId = matchedOption.deptId;
        }
      }
      // å†æ¬¡æ¸…除验证，确保选项加载后值匹配正确
      nextTick(() => {
        if (formRef.value) {
          formRef.value.clearValidate();
        }
      });
    });

    // æŠ¥ä»·å®¡æ‰¹ï¼šç”¨å®¡æ‰¹äº‹ç”±å­—段承载的"报价单号"去查报价列表
    if (isQuotationApproval.value) {
      const quotationNo = row?.approveReason;
      if (quotationNo) {
        quotationLoading.value = true;
        getQuotationList({ quotationNo })
          .then(res => {
            const records = res?.data?.records || [];
            currentQuotation.value = records[0] || {};
          })
          .finally(() => {
            quotationLoading.value = false;
          });
      }
    }

    // é‡‡è´­å®¡æ‰¹ï¼šç”¨å®¡æ‰¹äº‹ç”±å­—段承载的"采购合同号"去查采购详情
    if (isPurchaseApproval.value) {
      const purchaseContractNumber = row?.approveReason;
      if (purchaseContractNumber) {
        purchaseLoading.value = true;
        getPurchaseByCode({ purchaseContractNumber })
          .then(res => {
            currentPurchase.value = res;
          })
          .catch(err => {
            console.error("查询采购详情失败:", err);
            proxy.$modal.msgError("查询采购详情失败");
          })
          .finally(() => {
            purchaseLoading.value = false;
          });
      }
    }

    approveProcessDetails(row.approveId).then(res => {
      activities.value = res.data;
      // å¢žåŠ isApproval字段
      activities.value.forEach(item => {
        if (item.url && item.url.includes("word")) {
          item.urlTem = item.url.replaceAll("word", "img");
        } else {
          item.urlTem = item.url;
        }
        if (item.approveNodeStatus === 2) {
          item.isApproval = "已驳回";
        } else if (item.approveNodeStatus === 1) {
          item.isApproval = "已同意";
        } else {
          item.isApproval = "未审批";
        }
      });
    });
  };
  const getProductOptions = () => {
    return getDept().then(res => {
      productOptions.value = res.data;
    });
  };
  // æäº¤å®¡æ‰¹
  const submitForm = status => {
    const filteredActivities = activities.value.filter(
      activity => activity.isShen
    );
    if (!filteredActivities || filteredActivities.length === 0) {
      proxy.$modal.msgError("未找到待审批的节点");
      return;
    }
    const currentActivity = filteredActivities[0];
    if (!currentActivity) {
      proxy.$modal.msgError("未找到待审批的节点");
      return;
    }
    currentActivity.approveNodeStatus = status;
    // åˆ¤æ–­æ˜¯å¦ä¸ºæœ€åŽä¸€æ­¥
    const isLast =
      activities.value.findIndex(a => a.isShen) === activities.value.length - 1;
    updateApproveNode({ ...currentActivity, isLast }).then(() => {
      proxy.$modal.msgSuccess("提交成功");
      closeDia();
    });
  };
  // å…³é—­å¼¹æ¡†
  const closeDia = () => {
    proxy.resetForm("formRef");
    dialogFormVisible.value = false;
    quotationLoading.value = false;
    currentQuotation.value = {};
    purchaseLoading.value = false;
    currentPurchase.value = {};
    emit("close");
  };
  defineExpose({
    openDialog,
  });
</script>

<style scoped>
  .node-user {
    margin: 10px 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .node-status {
    color: #1890ff;
    margin-left: 8px;
    font-size: 14px;
  }
  .node-reason {
    font-size: 15px;
    color: #333;
    margin: 10px 0;
  }
  .user-avatar {
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50px;
  }
  .signImg {
    cursor: pointer;
    width: 200px;
    height: 60px;
  }
</style>

 src/views/safeProduction/safeWorkApproval/components/infoFormDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,486 @@
<template>
  <div>
    <el-dialog v-model="dialogFormVisible"
               :title="operationType === 'add' ? '新增审批流程' : '编辑审批流程'"
               width="50%"
               @close="closeDia">
      <el-form :model="form"
               label-width="140px"
               label-position="top"
               :rules="rules"
               ref="formRef">
        <el-row>
          <el-col :span="24">
            <el-form-item label="流程编号："
                          prop="approveId">
              <el-input v-model="form.approveId"
                        placeholder="自动编号"
                        clearable
                        disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="申请部门："
                          prop="approveDeptName">
              <!--              <el-input v-model="form.approveDeptName" placeholder="请输入" clearable/>-->
              <el-select v-model="form.approveDeptId"
                         placeholder="选择部门"
                         @change="handleDeptChange">
                <el-option v-for="user in productOptions"
                           :key="user.deptId"
                           :label="user.deptName"
                           :value="user.deptId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="props.approveType == 5 ? '采购合同号：' : '审批事由：'"
                          prop="approveReason">
              <el-input v-model="form.approveReason"
                        placeholder="请输入"
                        clearable
                        type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- è¯·å‡æ—¶é—´ï¼ˆä»…当 approveType ä¸º 2 æ—¶æ˜¾ç¤ºï¼‰ -->
        <el-row :gutter="30"
                v-if="props.approveType == 2">
          <el-col :span="12">
            <el-form-item label="请假开始时间："
                          prop="startDate">
              <el-date-picker v-model="form.startDate"
                              type="date"
                              placeholder="请选择开始日期"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              clearable
                              style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请假结束时间："
                          prop="endDate">
              <el-date-picker v-model="form.endDate"
                              type="date"
                              placeholder="请选择结束日期"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              clearable
                              style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- æŠ¥é”€é‡‘额（仅当 approveType ä¸º 4 æ—¶æ˜¾ç¤ºï¼‰ -->
        <el-row v-if="props.approveType == 4">
          <el-col :span="24">
            <el-form-item label="报销金额："
                          prop="price">
              <el-input-number v-model="form.price"
                               placeholder="请输入报销金额"
                               :min="0"
                               :precision="2"
                               :step="0.01"
                               style="width: 100%"
                               clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- å‡ºå·®åœ°ç‚¹ï¼ˆä»…当 approveType ä¸º 3 æ—¶æ˜¾ç¤ºï¼‰ -->
        <el-row v-if="props.approveType == 3">
          <el-col :span="24">
            <el-form-item label="出差地点："
                          prop="location">
              <el-input v-model="form.location"
                        placeholder="请输入出差地点"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- å®¡æ‰¹äººé€‰æ‹©ï¼ˆåŠ¨æ€èŠ‚点） -->
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <template #label>
                <span>审批人选择：</span>
                <el-button type="primary"
                           @click="addApproverNode"
                           style="margin-left: 8px;">新增节点</el-button>
              </template>
              <div style="display: flex; align-items: flex-end; flex-wrap: wrap;">
                <div v-for="(node, index) in approverNodes"
                     :key="node.id"
                     style="margin-right: 30px; text-align: center; margin-bottom: 10px;">
                  <div>
                    <span>审批人</span>
                    â†’
                  </div>
                  <el-select v-model="node.userId"
                             placeholder="选择人员"
                             style="width: 120px; margin-bottom: 8px;">
                    <el-option v-for="user in userList"
                               :key="user.userId"
                               :label="user.nickName"
                               :value="user.userId" />
                  </el-select>
                  <div>
                    <el-button type="danger"
                               size="small"
                               @click="removeApproverNode(index)"
                               v-if="approverNodes.length > 1">删除</el-button>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="申请人："
                          prop="approveUser">
              <el-select v-model="form.approveUser"
                         placeholder="选择人员"
                         filterable
                         default-first-option
                         :reserve-keyword="false">
                <el-option v-for="user in userList"
                           :key="user.userId"
                           :label="user.nickName"
                           :value="user.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请日期："
                          prop="approveTime">
              <el-date-picker v-model="form.approveTime"
                              type="date"
                              placeholder="请选择日期"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              clearable
                              style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="附件材料："
                          prop="remark">
              <el-upload v-model:file-list="fileList"
                         :action="upload.url"
                         multiple
                         ref="fileUpload"
                         auto-upload
                         :headers="upload.headers"
                         :before-upload="handleBeforeUpload"
                         :on-error="handleUploadError"
                         :on-success="handleUploadSuccess"
                         :on-remove="handleRemove">
                <el-button type="primary"
                           v-if="operationType !== 'view'">上传</el-button>
                <template #tip
                          v-if="operationType !== 'view'">
                  <div class="el-upload__tip">
                    æ–‡ä»¶æ ¼å¼æ”¯æŒ
                    doc，docx，xls，xlsx，ppt，pptx，pdf，txt，xml，jpg，jpeg，png，gif，bmp，rar，zip，7z
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitForm">确认</el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, reactive, toRefs, getCurrentInstance } from "vue";
  import {
    approveProcessAdd,
    approveProcessGetInfo,
    approveProcessUpdate,
    getDept,
  } from "@/api/collaborativeApproval/approvalProcess.js";
  import { delLedgerFile } from "@/api/salesManagement/salesLedger.js";
  import { userListNoPageByTenantId } from "@/api/system/user.js";
  import { getToken } from "@/utils/auth";
  const { proxy } = getCurrentInstance();
  const emit = defineEmits(["close"]);
  import useUserStore from "@/store/modules/user";
  import { getCurrentDate } from "@/utils/index.js";
  import log from "@/views/monitor/job/log.vue";
  const userStore = useUserStore();

  const dialogFormVisible = ref(false);
  const operationType = ref("");
  const fileList = ref([]);
  const upload = reactive({
    // ä¸Šä¼ çš„地址
    url: import.meta.env.VITE_APP_BASE_API + "/file/upload",
    // è®¾ç½®ä¸Šä¼ çš„请求头部
    headers: { Authorization: "Bearer " + getToken() },
  });
  const data = reactive({
    form: {
      approveTime: "",
      approveId: "",
      approveUser: "",
      approveDeptId: "",
      approveDeptName: "",
      approveReason: "",
      checkResult: "",
      tempFileIds: [],
      approverList: [], // æ–°å¢žå­—段，存储所有节点的审批人id
      startDate: "", // è¯·å‡å¼€å§‹æ—¶é—´
      endDate: "", // è¯·å‡ç»“束时间
      price: null, // æŠ¥é”€é‡‘额
      location: "", // å‡ºå·®åœ°ç‚¹
    },
    rules: {
      approveTime: [{ required: false, message: "请输入", trigger: "change" }],
      approveId: [{ required: false, message: "请输入", trigger: "blur" }],
      approveUser: [{ required: false, message: "请输入", trigger: "blur" }],
      approveDeptName: [{ required: true, message: "请输入", trigger: "blur" }],
      approveReason: [{ required: true, message: "请输入", trigger: "blur" }],
      checkResult: [{ required: false, message: "请输入", trigger: "blur" }],
      startDate: [
        { required: true, message: "请选择请假开始时间", trigger: "change" },
      ],
      endDate: [
        { required: true, message: "请选择请假结束时间", trigger: "change" },
      ],
      price: [{ required: true, message: "请输入报销金额", trigger: "blur" }],
      location: [{ required: true, message: "请输入出差地点", trigger: "blur" }],
    },
  });
  const { form, rules } = toRefs(data);
  const productOptions = ref([]);
  const currentApproveStatus = ref(0);
  const props = defineProps({
    approveType: {
      type: [Number, String],
      default: 0,
    },
  });

  // å®¡æ‰¹äººèŠ‚点相关
  const approverNodes = ref([{ id: 1, userId: null }]);
  let nextApproverId = 2;
  const userList = ref([]);
  function addApproverNode() {
    approverNodes.value.push({ id: nextApproverId++, userId: null });
  }
  function removeApproverNode(index) {
    approverNodes.value.splice(index, 1);
  }
  // å¤„理部门选择变化
  const handleDeptChange = deptId => {
    if (deptId) {
      const selectedDept = productOptions.value.find(
        dept => dept.deptId === deptId
      );
      if (selectedDept) {
        form.value.approveDeptName = selectedDept.deptName;
      }
    } else {
      form.value.approveDeptName = "";
    }
  };
  // æ‰“开弹框
  const openDialog = (type, row) => {
    operationType.value = type;
    dialogFormVisible.value = true;
    userListNoPageByTenantId().then(res => {
      userList.value = res.data;
    });
    form.value = {};
    approverNodes.value = [{ id: 1, userId: null }];
    form.value.approveUser = userStore.id;
    form.value.approveTime = getCurrentDate();

    // èŽ·å–当前用户信息并设置部门ID
    form.value.approveDeptId = userStore.currentDeptId;

    // åŠ è½½éƒ¨é—¨é€‰é¡¹ï¼Œå¹¶åœ¨åŠ è½½å®ŒæˆåŽè®¾ç½®éƒ¨é—¨åç§°
    getProductOptions();
    if (operationType.value === "edit") {
      fileList.value = row.commonFileList;
      form.value.tempFileIds = fileList.value.map(file => file.id);
      currentApproveStatus.value = row.approveStatus;
      approveProcessGetInfo({ id: row.approveId, approveReason: "1" }).then(
        res => {
          form.value = { ...res.data };
          // åæ˜¾å®¡æ‰¹äºº
          if (res.data && res.data.approveUserIds) {
            const userIds = res.data.approveUserIds.split(",");
            approverNodes.value = userIds.map((userId, idx) => ({
              id: idx + 1,
              userId: parseInt(userId.trim()),
            }));
            nextApproverId = userIds.length + 1;
          } else {
            approverNodes.value = [{ id: 1, userId: null }];
            nextApproverId = 2;
          }
        }
      );
    }
  };
  const getProductOptions = () => {
    return getDept().then(res => {
      productOptions.value = res.data;
      // å¦‚果已有部门ID，自动设置部门名称（用于验证）
      if (form.value.approveDeptId && productOptions.value.length > 0) {
        const matchedDept = productOptions.value.find(
          dept =>
            dept.deptId == form.value.approveDeptId ||
            String(dept.deptId) === String(form.value.approveDeptId)
        );
        if (matchedDept) {
          form.value.approveDeptName = matchedDept.deptName;
        }
      }
    });
  };
  function convertIdToValue(data) {
    return data.map(item => {
      const { id, children, ...rest } = item;
      const newItem = {
        ...rest,
        value: id, // å°† id æ”¹ä¸º value
      };
      if (children && children.length > 0) {
        newItem.children = convertIdToValue(children);
      }

      return newItem;
    });
  }
  // æäº¤äº§å“è¡¨å•
  const submitForm = () => {
    // æ”¶é›†æ‰€æœ‰èŠ‚点的审批人id
    form.value.approveUserIds = approverNodes.value
      .map(node => node.userId)
      .join(",");
    form.value.approveType = props.approveType;
    // å®¡æ‰¹äººå¿…填校验
    const hasEmptyApprover = approverNodes.value.some(node => !node.userId);
    if (hasEmptyApprover) {
      proxy.$modal.msgError("请为所有审批节点选择审批人！");
      return;
    }
    // å½“ approveType ä¸º 2 æ—¶ï¼Œæ ¡éªŒè¯·å‡æ—¶é—´
    if (props.approveType == 2) {
      if (!form.value.startDate) {
        proxy.$modal.msgError("请选择请假开始时间！");
        return;
      }
      if (!form.value.endDate) {
        proxy.$modal.msgError("请选择请假结束时间！");
        return;
      }
      // æ ¡éªŒç»“束时间不能早于开始时间
      if (new Date(form.value.endDate) < new Date(form.value.startDate)) {
        proxy.$modal.msgError("请假结束时间不能早于开始时间！");
        return;
      }
    }
    // å½“ approveType ä¸º 3 æ—¶ï¼Œæ ¡éªŒå‡ºå·®åœ°ç‚¹
    if (props.approveType == 3) {
      if (!form.value.location || form.value.location.trim() === "") {
        proxy.$modal.msgError("请输入出差地点！");
        return;
      }
    }
    // å½“ approveType ä¸º 4 æ—¶ï¼Œæ ¡éªŒæŠ¥é”€é‡‘额
    if (props.approveType == 4) {
      if (!form.value.price || form.value.price <= 0) {
        proxy.$modal.msgError("请输入有效的报销金额！");
        return;
      }
    }
    proxy.$refs.formRef.validate(valid => {
      if (valid) {
        if (operationType.value === "add" || currentApproveStatus.value == 3) {
          approveProcessAdd(form.value).then(res => {
            proxy.$modal.msgSuccess("提交成功");
            closeDia();
          });
        } else {
          approveProcessUpdate(form.value).then(res => {
            proxy.$modal.msgSuccess("提交成功");
            closeDia();
          });
        }
      }
    });
  };
  // å…³é—­å¼¹æ¡†
  const closeDia = () => {
    fileList.value = [];
    proxy.resetForm("formRef");
    dialogFormVisible.value = false;
    emit("close");
  };

  // ä¸Šä¼ å‰æ ¡æ£€
  function handleBeforeUpload(file) {
    // æ ¡æ£€æ–‡ä»¶å¤§å°
    // if (file.size > 1024 * 1024 * 10) {
    //   proxy.$modal.msgError("上传文件大小不能超过10MB!");
    //   return false;
    // }
    proxy.$modal.loading("正在上传文件，请稍候...");
    return true;
  }
  // ä¸Šä¼ å¤±è´¥
  function handleUploadError(err) {
    proxy.$modal.msgError("上传文件失败");
    proxy.$modal.closeLoading();
  }
  // ä¸Šä¼ æˆåŠŸå›žè°ƒ
  function handleUploadSuccess(res, file, uploadFiles) {
    proxy.$modal.closeLoading();
    if (res.code === 200) {
      // ç¡®ä¿ tempFileIds å­˜åœ¨ä¸”为数组
      if (!form.value.tempFileIds) {
        form.value.tempFileIds = [];
      }
      form.value.tempFileIds.push(res.data.tempId);
      proxy.$modal.msgSuccess("上传成功");
    } else {
      proxy.$modal.msgError(res.msg);
      proxy.$refs.fileUpload.handleRemove(file);
    }
  }
  // ç§»é™¤æ–‡ä»¶
  function handleRemove(file) {
    if (operationType.value === "edit") {
      let ids = [];
      ids.push(file.id);
      delLedgerFile(ids).then(res => {
        proxy.$modal.msgSuccess("删除成功");
      });
    }
  }

  defineExpose({
    openDialog,
  });
</script>

<style scoped>
</style>

 src/views/safeProduction/safeWorkApproval/fileList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,67 @@
<template>
  <el-dialog v-model="dialogVisible" title="附件" width="40%" :before-close="handleClose" draggable>
    <el-table :data="tableData" border height="40vh">
      <el-table-column label="附件名称" prop="name" min-width="400" show-overflow-tooltip />
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="downLoadFile(scope.row)">下载</el-button>
          <el-button link type="primary" size="small" @click="lookFile(scope.row)">预览</el-button>
          <el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <filePreview ref="filePreviewRef" />
</template>

<script setup>
import { ref } from 'vue'
import filePreview from '@/components/filePreview/index.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { delCommonFile } from '@/api/publicApi/commonFile.js'

const dialogVisible = ref(false)
const tableData = ref([])
const { proxy } = getCurrentInstance();
const filePreviewRef = ref()
const handleClose = () => {
  dialogVisible.value = false
}
const open = (list) => {
  dialogVisible.value = true
  tableData.value = list
}
const downLoadFile = (row) => {
  proxy.$download.name(row.url);

}
const lookFile = (row) => {
  filePreviewRef.value.open(row.url)
}
// åˆ é™¤é™„件
const handleDelete = (row) => {
  ElMessageBox.confirm(`确认删除附件"${row.name}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    delCommonFile([row.id]).then(() => {
      ElMessage.success('删除成功')
      // ä»Žåˆ—表中移除已删除的附件
      const index = tableData.value.findIndex(item => item.id === row.id)
      if (index !== -1) {
        tableData.value.splice(index, 1)
      }
    }).catch(() => {
      ElMessage.error('删除失败')
    })
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}
defineExpose({
  open
})
</script>

<style></style>

 src/views/safeProduction/safeWorkApproval/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,371 @@
<template>
  <div class="app-container">
    <!-- æ ‡ç­¾é¡µåˆ‡æ¢ä¸åŒçš„审批类型 -->
    <div class="search_form">
      <div>
        <span class="search_title">流程编号：</span>
        <el-input v-model="searchForm.approveId"
                  style="width: 240px"
                  placeholder="请输入流程编号搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span class="search_title ml10">审批状态：</span>
        <el-select v-model="searchForm.approveStatus"
                   clearable
                   @change="handleQuery"
                   style="width: 240px">
          <el-option label="待审核"
                     :value="0" />
          <el-option label="审核中"
                     :value="1" />
          <el-option label="审核完成"
                     :value="2" />
          <el-option label="审核未通过"
                     :value="3" />
          <el-option label="已重新提交"
                     :value="4" />
        </el-select>
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
      </div>
      <div>
        <el-button type="primary"
                   @click="openForm('add')">新增</el-button>
        <el-button @click="handleOut">导出</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumnCopy"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"
                :total="page.total"></PIMTable>
    </div>
    <info-form-dia ref="infoFormDia"
                   @close="handleQuery"
                   :approveType="currentApproveType"></info-form-dia>
    <approval-dia ref="approvalDia"
                  @close="handleQuery"
                  :approveType="currentApproveType"></approval-dia>
    <FileList ref="fileListRef" />
  </div>
</template>

<script setup>
  import FileList from "./fileList.vue";
  import { Search } from "@element-plus/icons-vue";
  import {
    onMounted,
    ref,
    computed,
    reactive,
    toRefs,
    nextTick,
    getCurrentInstance,
  } from "vue";
  import { ElMessageBox } from "element-plus";
  import { useRoute } from "vue-router";
  import InfoFormDia from "@/views/collaborativeApproval/approvalProcess/components/infoFormDia.vue";
  import ApprovalDia from "@/views/collaborativeApproval/approvalProcess/components/approvalDia.vue";
  import {
    approveProcessDelete,
    approveProcessListPage,
  } from "@/api/collaborativeApproval/approvalProcess.js";
  import useUserStore from "@/store/modules/user";

  const userStore = useUserStore();
  const route = useRoute();

  // å½“前审批类型，根据选中的标签页计算
  const currentApproveType = computed(() => {
    return Number(8);
  });

  // æ ‡ç­¾é¡µåˆ‡æ¢å¤„理
  const handleTabChange = tabName => {
    // åˆ‡æ¢æ ‡ç­¾é¡µæ—¶é‡ç½®æœç´¢æ¡ä»¶å’Œåˆ†é¡µï¼Œå¹¶é‡æ–°åŠ è½½æ•°æ®
    searchForm.value.approveId = "";
    searchForm.value.approveStatus = "";
    page.current = 1;
    getList();
  };

  const data = reactive({
    searchForm: {
      approveId: "",
      approveStatus: "",
    },
  });
  const { searchForm } = toRefs(data);

  // åŠ¨æ€è¡¨æ ¼åˆ—配置，根据审批类型生成列
  const tableColumnCopy = computed(() => {
    // åŸºç¡€åˆ—配置
    const baseColumns = [
      {
        label: "审批状态",
        prop: "approveStatus",
        dataType: "tag",
        width: 100,
        formatData: params => {
          if (params == 0) {
            return "待审核";
          } else if (params == 1) {
            return "审核中";
          } else if (params == 2) {
            return "审核完成";
          } else if (params == 4) {
            return "已重新提交";
          } else {
            return "不通过";
          }
        },
        formatType: params => {
          if (params == 0) {
            return "warning";
          } else if (params == 1) {
            return "primary";
          } else if (params == 2) {
            return "success";
          } else if (params == 4) {
            return "info";
          } else {
            return "danger";
          }
        },
      },
      {
        label: "流程编号",
        prop: "approveId",
        width: 170,
      },
      {
        label: "申请部门",
        prop: "approveDeptName",
        width: 220,
      },
      {
        label: "审批事由",
        prop: "approveReason",
        width: 200,
      },
      {
        label: "申请人",
        prop: "approveUserName",
        width: 120,
      },
    ];

    // æ—¥æœŸåˆ—（根据类型动态配置）
    baseColumns.push(
      {
        label: "申请日期",
        prop: "approveTime",
        width: 200,
      },
      {
        label: "结束日期",
        prop: "approveOverTime",
        width: 120,
      }
    );

    // å½“前审批人列
    baseColumns.push({
      label: "当前审批人",
      prop: "approveUserCurrentName",
      width: 120,
    });

    // æ“ä½œåˆ—
    baseColumns.push({
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 230,
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            openForm("edit", row);
          },
          disabled: row =>
            row.approveStatus == 2 ||
            row.approveStatus == 1 ||
            row.approveStatus == 4,
        },
        {
          name: "审核",
          type: "text",
          clickFun: row => {
            openApprovalDia("approval", row);
          },
          disabled: row =>
            row.approveUserCurrentId == null ||
            row.approveStatus == 2 ||
            row.approveStatus == 3 ||
            row.approveStatus == 4 ||
            row.approveUserCurrentId !== userStore.id,
        },
        {
          name: "详情",
          type: "text",
          clickFun: row => {
            openApprovalDia("view", row);
          },
        },
        {
          name: "附件",
          type: "text",
          clickFun: row => {
            downLoadFile(row);
          },
        },
      ],
    });

    return baseColumns;
  });
  const tableData = ref([]);
  const selectedRows = ref([]);
  const tableLoading = ref(false);
  const page = reactive({
    current: 1,
    size: 100,
    total: 0,
  });
  const infoFormDia = ref();
  const approvalDia = ref();
  const { proxy } = getCurrentInstance();

  // æŸ¥è¯¢åˆ—表
  /** æœç´¢æŒ‰é’®æ“ä½œ */
  const handleQuery = () => {
    page.current = 1;
    getList();
  };
  const fileListRef = ref(null);
  const downLoadFile = row => {
    fileListRef.value.open(row.commonFileList);
  };
  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  const getList = () => {
    tableLoading.value = true;
    approveProcessListPage({
      ...page,
      ...searchForm.value,
      approveType: currentApproveType.value,
    })
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
      })
      .catch(err => {
        tableLoading.value = false;
      });
  };
  // å¯¼å‡º
  const handleOut = () => {
    const type = currentApproveType.value;
    const urlMap = {
      0: "/approveProcess/exportZero",
      1: "/approveProcess/exportOne",
      2: "/approveProcess/exportTwo",
      3: "/approveProcess/exportThree",
      4: "/approveProcess/exportFour",
      5: "/approveProcess/exportFive",
      6: "/approveProcess/exportSix",
      7: "/approveProcess/exportSeven",
      8: "/approveProcess/exportEight",
    };
    const url = urlMap[type] || urlMap[0];
    const nameMap = {
      0: "协同审批管理表",
      1: "公出管理审批表",
      2: "请假管理审批表",
      3: "出差管理审批表",
      4: "报销管理审批表",
      5: "采购申请审批表",
      6: "报价审批表",
      7: "发货审批表",
      8: "危险作业审批表",
    };
    const fileName = nameMap[type] || nameMap[0];
    proxy.download(url, {}, `${fileName}.xlsx`);
  };
  // è¡¨æ ¼é€‰æ‹©æ•°æ®
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };

  // æ‰“开新增、编辑弹框
  const openForm = (type, row) => {
    nextTick(() => {
      infoFormDia.value?.openDialog(type, row);
    });
  };
  // æ‰“开新增检验弹框
  const openApprovalDia = (type, row) => {
    nextTick(() => {
      approvalDia.value?.openDialog(type, row);
    });
  };

  // åˆ é™¤
  const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
      ids = selectedRows.value.map(item => item.approveId);
    } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        approveProcessDelete(ids).then(res => {
          proxy.$modal.msgSuccess("删除成功");
          getList();
        });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  onMounted(() => {
    const approveId = route.query.approveId;

    if (approveId) {
      // è®¾ç½®æµç¨‹ç¼–号查询条件
      searchForm.value.approveId = String(approveId);
    }

    // æŸ¥è¯¢åˆ—表
    getList();
  });
</script>

<style scoped>
  .approval-tabs {
    margin-bottom: 10px;
  }
</style>

 src/views/safeProduction/safetyTrainingAssessment/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,939 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">培训名称：</span>
        <el-input v-model="searchForm.name"
                  style="width: 240px"
                  placeholder="请输入培训名称搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span class="search_title ml10">培训类型：</span>
        <el-select v-model="searchForm.type"
                   clearable
                   @change="handleQuery"
                   style="width: 240px">
          <el-option v-for="item in knowledgeTypeOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value" />
        </el-select>
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">
          æœç´¢
        </el-button>
      </div>
      <div>
        <el-button type="primary"
                   @click="openForm('add')">新增培训</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"
                :total="page.total"
                :rowClassName="getRowClass"></PIMTable>
    </div>
    <!-- æ–°å¢ž/编辑知识弹窗 -->
    <el-dialog v-model="dialogVisible"
               :title="dialogTitle"
               width="800px"
               :close-on-click-modal="false">
      <el-form ref="formRef"
               :model="form"
               :rules="rules"
               label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="培训日期"
                          prop="trainingDate">
              <el-date-picker style="width: 100%"
                              v-model="form.trainingDate"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程编号"
                          prop="courseCode">
              <el-input v-model="form.courseCode"
                        disabled
                        placeholder="自动生成" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始时间"
                          prop="openingTime">
              <el-time-picker v-model="form.openingTime"
                              placeholder="请选择"
                              value-format="HH:mm:ss"
                              format="HH:mm:ss"
                              clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间"
                          prop="endTime">
              <el-time-picker v-model="form.endTime"
                              placeholder="请选择"
                              value-format="HH:mm:ss"
                              format="HH:mm:ss"
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="培训目标"
                          prop="trainingObjectives">
              <el-input v-model="form.trainingObjectives"
                        placeholder="请输入培训目标" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参加对象"
                          prop="participants">
              <el-input v-model="form.participants"
                        placeholder="请输入参加对象" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="培训内容"
                          prop="trainingContent">
              <el-input v-model="form.trainingContent"
                        placeholder="请输入培训内容" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训讲师"
                          prop="trainingLecturer">
              <el-input v-model="form.trainingLecturer"
                        placeholder="请输入培训讲师" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="课程学分"
                          prop="projectCredits">
              <el-input v-model="form.projectCredits"
                        placeholder="请输入课程学分" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训方式"
                          prop="trainingMode">
              <el-select v-model="form.trainingMode"
                         placeholder="请选择培训方式"
                         clearable>
                <el-option v-for="item in trainingModeOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="培训地点"
                          prop="placeTraining">
              <el-input v-model="form.placeTraining"
                        placeholder="请输入培训地点" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课时"
                          prop="classHour">
              <el-input v-model="form.classHour"
                        type="number"
                        min="0"
                        placeholder="请输入课时" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- æŸ¥çœ‹çŸ¥è¯†è¯¦æƒ…弹窗 -->
    <el-dialog v-model="viewDialogVisible"
               title="培训详情"
               width="900px"
               :close-on-click-modal="false">
      <div class="knowledge-detail">
        <el-descriptions :column="2"
                         border>
          <el-descriptions-item label="培训名称"
                                :span="2">
            <span class="detail-title">{{ currentKnowledge.name }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="培训编码">
            {{ currentKnowledge.code }}
          </el-descriptions-item>
          <el-descriptions-item label="培训类型">
            <el-tag type="info">
              <!-- {{ getTypeLabel(currentKnowledge.type) }} -->
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="所在位置">
            {{ currentKnowledge.location }}
          </el-descriptions-item>
          <el-descriptions-item label="管控措施">
            {{ currentKnowledge.controlMeasures }}
          </el-descriptions-item>
          <el-descriptions-item label="库存数量">
            {{ currentKnowledge.stockQty }}
          </el-descriptions-item>
          <el-descriptions-item label="管控责任人">
            {{ currentKnowledge.principalUserId }}
          </el-descriptions-item>
          <el-descriptions-item label="责任人联系电话">
            {{ currentKnowledge.principalMobile }}
          </el-descriptions-item>
          <el-descriptions-item label="风险等级">
            <el-tag :type="getTypeTagType(currentKnowledge.riskLevel)">
              {{ currentKnowledge.riskLevel }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="规格 / é£Žé™©æè¿°">
            {{ currentKnowledge.specInfo }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="viewDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- é™„件列表弹窗 -->
    <FileListDialog ref="fileListRef"
                    v-model="fileListDialogVisible"
                    :show-upload-button="true"
                    :show-delete-button="true"
                    :upload-method="handleUpload"
                    :delete-method="handleFileDelete"
                    title="附件列表" />
  </div>
</template>

<script setup>
  import { Search } from "@element-plus/icons-vue";
  import FileListDialog from "@/components/Dialog/FileListDialog.vue";
  import {
    onMounted,
    ref,
    reactive,
    toRefs,
    getCurrentInstance,
    computed,
  } from "vue";
  import request from "@/utils/request";
  import { getToken } from "@/utils/auth";
  import { ElMessage, ElMessageBox } from "element-plus";
  import PIMTable from "@/components/PIMTable/PIMTable.vue";
  import { userListNoPage } from "@/api/system/user.js";
  import {
    safeTrainingListPage,
    safeTrainingAdd,
    safeTrainingExport,
    safeTrainingDel,
    safeTrainingFileListPage,
    safeTrainingFileAdd,
    safeTrainingFileDel,
  } from "@/api/safeProduction/safetyTrainingAssessment.js";

  // è¡¨å•éªŒè¯è§„则
  const rules = {
    trainingDate: [
      { required: true, message: "请选择培训日期", trigger: "change" },
    ],
    openingTime: [
      { required: true, message: "请选择开始时间", trigger: "change" },
    ],
    endTime: [{ required: true, message: "请选择结束时间", trigger: "change" }],
    trainingContent: [
      { required: true, message: "请输入培训内容", trigger: "blur" },
    ],
    trainingLecturer: [
      { required: true, message: "请输入培训讲师", trigger: "blur" },
    ],
    classHour: [{ required: true, message: "请输入课时", trigger: "blur" }],
  };

  // å“åº”式数据
  const data = reactive({
    searchForm: {
      name: "",
      type: "",
    },
    tableLoading: false,
    page: {
      current: 1,
      size: 20,
      total: 0,
    },
    tableData: [],
    selectedIds: [],
    form: {
      courseCode: "", // è¯¾ç¨‹ç¼–号
      trainingDate: "", // åŸ¹è®­æ—¥æœŸ
      openingTime: "", // å¼€å§‹æ—¶é—´
      endTime: "", // ç»“束时间
      trainingObjectives: "", // åŸ¹è®­ç›®æ ‡
      participants: "", // å‚加对象
      trainingContent: "", // åŸ¹è®­å†…容
      trainingLecturer: "", // åŸ¹è®­è®²å¸ˆ
      projectCredits: "", // é¡¹ç›®å­¦åˆ†
      trainingMode: "", // åŸ¹è®­æ–¹å¼
      placeTraining: "", // åŸ¹è®­åœ°ç‚¹
      classHour: "", // è¯¾æ—¶
    },
    dialogVisible: false,
    dialogTitle: "",
    dialogType: "add",
    viewDialogVisible: false,
    currentKnowledge: {},
  });

  const {
    searchForm,
    tableLoading,
    page,
    tableData,
    selectedIds,
    form,
    dialogVisible,
    dialogTitle,
    dialogType,
    viewDialogVisible,
    currentKnowledge,
  } = toRefs(data);
  const { proxy } = getCurrentInstance();
  const { safe_training_methods } = proxy.useDict("safe_training_methods");
  const trainingModeOptions = computed(() => safe_training_methods?.value || []);
  const getTrainingModeLabel = val => {
    const item = trainingModeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item ? item.label : val;
  };
  // è¡¨å•å¼•ç”¨
  const formRef = ref();
  const riskLevelOptions = ref([
    { value: "低风险", label: "低风险" },
    { value: "一般风险", label: "一般风险" },
    { value: "较大风险", label: "较大风险" },
    { value: "重大风险", label: "重大风险" },
  ]);

  // è¡¨æ ¼åˆ—配置
  const tableColumn = ref([
    {
      label: "课程编号",
      prop: "courseCode",
      showOverflowTooltip: true,
    },
    {
      label: "培训日期",
      prop: "trainingDate",
      showOverflowTooltip: true,
    },
    {
      label: "开始时间",
      prop: "openingTime",
      showOverflowTooltip: true,
    },
    {
      label: "结束时间",
      prop: "endTime",
      showOverflowTooltip: true,
    },
    {
      label: "培训目标",
      prop: "trainingObjectives",
      showOverflowTooltip: true,
    },
    {
      label: "参加对象",
      prop: "participants",
      showOverflowTooltip: true,
    },
    {
      label: "培训内容",
      prop: "trainingContent",
      showOverflowTooltip: true,
    },
    {
      label: "培训讲师",
      prop: "trainingLecturer",
      showOverflowTooltip: true,
    },
    {
      label: "项目学分",
      prop: "projectCredits",
      showOverflowTooltip: true,
    },
    {
      label: "培训方式",
      prop: "trainingMode",
      showOverflowTooltip: true,
      formatData: params => {
        return getTrainingModeLabel(params);
      },
    },
    {
      label: "培训地点",
      prop: "placeTraining",
      showOverflowTooltip: true,
    },
    {
      label: "课时",
      prop: "classHour",
      showOverflowTooltip: true,
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 200,
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            openForm("edit", row);
          },
        },
        {
          name: "导出",
          type: "danger",
          clickFun: row => {
            exportKnowledge(row);
          },
        },
        {
          name: "附件",
          type: "danger",
          clickFun: row => {
            downLoadFile(row);
          },
        },
        // {
        //   name: "查看",
        //   type: "text",
        //   clickFun: row => {
        //     viewKnowledge(row);
        //   },
        // },
      ],
    },
  ]);
  const userList = ref([]);
  // ç”Ÿå‘½å‘¨æœŸ
  onMounted(() => {
    getList();
    startAutoRefresh();
    userListNoPage().then(res => {
      userList.value = res.data;
    });
  });

  // å¤„理用户选择变化
  const handleUserChange = userId => {
    const selectedUser = userList.value.find(user => user.userId === userId);
    if (selectedUser) {
      form.value.principalUser = selectedUser.nickName;
      form.value.principalMobile = selectedUser.phonenumber;
    }
  };
  /**
   * ä¸‹è½½æ–‡ä»¶
   *
   * @param row ä¸‹è½½æ–‡ä»¶çš„相关信息对象
   */
  const fileListRef = ref(null);
  const fileListDialogVisible = ref(false);
  const currentFileRow = ref(null);
  const downLoadFile = row => {
    currentFileRow.value = row;
    safeTrainingFileListPage({ safeTrainingId: row.id }).then(res => {
      if (fileListRef.value) {
        fileListRef.value.open(res.data.records);
      }
    });
  };
  // ä¸Šä¼ é™„件
  const handleUpload = async () => {
    if (!currentFileRow.value) {
      proxy.$modal.msgWarning("请先选择数据");
      return null;
    }

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

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

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

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

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

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

  // å¼€å§‹è‡ªåŠ¨åˆ·æ–°
  const startAutoRefresh = () => {
    setInterval(() => {
      getList();
    }, 600000); // 10分钟刷新一次 (10 * 60 * 1000 = 600000ms)
  };

  // æŸ¥è¯¢æ•°æ®
  const handleQuery = () => {
    page.value.current = 1;
    getList();
  };
  const exportKnowledge = row => {
    safeTrainingExport(row)
      .then(res => {
        // åˆ›å»ºBlob对象
        const blob = new Blob([res], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        // åˆ›å»ºä¸‹è½½é“¾æŽ¥
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = `培训记录_${row.courseCode}.xlsx`;

        // æ¨¡æ‹Ÿç‚¹å‡»ä¸‹è½½
        document.body.appendChild(link);
        link.click();

        // æ¸…理临时对象
        setTimeout(() => {
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        }, 100);

        ElMessage.success("导出成功");
      })
      .catch(err => {
        console.error("导出失败:", err);
        ElMessage.error("导出失败，请重试");
      });
  };
  const getList = () => {
    tableLoading.value = true;
    safeTrainingListPage({ ...page.value, ...searchForm.value })
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.value.total = res.data.total;
      })
      .catch(err => {
        tableLoading.value = false;
      });
  };

  // åˆ†é¡µå¤„理
  const pagination = obj => {
    page.value.current = obj.page;
    page.value.size = obj.limit;
    handleQuery();
  };

  // é€‰æ‹©å˜åŒ–处理
  const handleSelectionChange = selection => {
    selectedIds.value = selection.map(item => item.id);
  };

  // æ‰“开表单
  const openForm = (type, row = null) => {
    dialogType.value = type;
    if (type === "add") {
      dialogTitle.value = "新增培训";
      // é‡ç½®è¡¨å•
      Object.assign(form.value, {
        courseCode: "", // è¯¾ç¨‹ç¼–号
        trainingDate: "", // åŸ¹è®­æ—¥æœŸ
        openingTime: "", // å¼€å§‹æ—¶é—´
        endTime: "", // ç»“束时间
        trainingObjectives: "", // åŸ¹è®­ç›®æ ‡
        participants: "", // å‚加对象
        trainingContent: "", // åŸ¹è®­å†…容
        trainingLecturer: "", // åŸ¹è®­è®²å¸ˆ
        projectCredits: "", // é¡¹ç›®å­¦åˆ†
        trainingMode: "", // åŸ¹è®­æ–¹å¼
        placeTraining: "", // åŸ¹è®­åœ°ç‚¹
        classHour: "", // è¯¾æ—¶
      });
    } else if (type === "edit" && row) {
      dialogTitle.value = "编辑培训";
      Object.assign(form.value, {
        id: row.id,
        courseCode: row.courseCode, // è¯¾ç¨‹ç¼–号
        trainingDate: row.trainingDate, // åŸ¹è®­æ—¥æœŸ
        openingTime: row.openingTime, // å¼€å§‹æ—¶é—´
        endTime: row.endTime, // ç»“束时间
        trainingObjectives: row.trainingObjectives, // åŸ¹è®­ç›®æ ‡
        participants: row.participants, // å‚加对象
        trainingContent: row.trainingContent, // åŸ¹è®­å†…容
        trainingLecturer: row.trainingLecturer, // åŸ¹è®­è®²å¸ˆ
        projectCredits: row.projectCredits, // é¡¹ç›®å­¦åˆ†
        trainingMode: row.trainingMode, // åŸ¹è®­æ–¹å¼
        placeTraining: row.placeTraining, // åŸ¹è®­åœ°ç‚¹
        classHour: row.classHour, // è¯¾æ—¶
      });
    }
    dialogVisible.value = true;
  };

  // æŸ¥çœ‹åŸ¹è®­è¯¦æƒ…
  const viewKnowledge = row => {
    currentKnowledge.value = { ...row };
    viewDialogVisible.value = true;
  };

  // èŽ·å–类型标签类型
  const getTypeTagType = type => {
    const typeMap = {
      è¾ƒå¤§é£Žé™©: "warning",
      ä½Žé£Žé™©: "info",
      ä¸€èˆ¬é£Žé™©: "info",
      é‡å¤§é£Žé™©: "danger",
    };
    return typeMap[type] || "info";
  };

  // èŽ·å–效率标签类型
  const getEfficiencyTagType = efficiency => {
    const typeMap = {
      high: "success",
      medium: "warning",
      low: "info",
    };
    return typeMap[efficiency] || "info";
  };

  // èŽ·å–效率标签文本
  const getEfficiencyLabel = efficiency => {
    const efficiencyMap = {
      high: "显著提升",
      medium: "一般提升",
      low: "轻微提升",
    };
    return efficiencyMap[efficiency] || efficiency;
  };

  // èŽ·å–效率提升百分比
  const getEfficiencyScore = efficiency => {
    const scoreMap = {
      high: 40,
      medium: 25,
      low: 15,
    };
    return scoreMap[efficiency] || 0;
  };

  // èŽ·å–平均节省时间
  const getTimeSaved = efficiency => {
    const timeMap = {
      high: "2-3天",
      medium: "1-2天",
      low: "0.5-1天",
    };
    return timeMap[efficiency] || "未知";
  };

  /**
   * èŽ·å–行类名，用于判断风险等级是否为重大风险
   * @param row è¡Œæ•°æ®
   * @returns ç±»å
   */
  const getRowClass = ({ row }) => {
    if (row.riskLevel === "重大风险") {
      return "danger-row";
    }
    return "";
  };

  // æäº¤åŸ¹è®­è¡¨å•
  const submitForm = async () => {
    try {
      await formRef.value.validate();
      if (dialogType.value === "add") {
        // æ–°å¢žåŸ¹è®­å°è´¦
        safeTrainingAdd({ ...form.value })
          .then(res => {
            if (res.code == 200) {
              ElMessage.success("添加成功");
              dialogVisible.value = false;
              getList();
            }
          })
          .catch(err => {
            ElMessage.error(err.msg);
          });
      } else {
        // æ›´æ–°åŸ¹è®­å°è´¦
        safeTrainingAdd({ ...form.value })
          .then(res => {
            if (res.code == 200) {
              ElMessage.success("更新成功");
              dialogVisible.value = false;
              getList();
            }
          })
          .catch(err => {
            ElMessage.error(err.msg);
          });
      }
    } catch (error) {
      console.error("表单验证失败:", error);
    }
  };

  // åˆ é™¤åŸ¹è®­
  const handleDelete = () => {
    if (selectedIds.value.length === 0) {
      ElMessage.warning("请选择要删除的培训");
      return;
    }

    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // console.log(selectedIds.value);
        safeTrainingDel(selectedIds.value).then(res => {
          if (res.code == 200) {
            ElMessage.success("删除成功");
            selectedIds.value = [];
            getList();
          }
        });
      })
      .catch(() => {
        // ç”¨æˆ·å–消
      });
  };

  const getKnowledgeTypeTagType = val => {
    const item = knowledgeTypeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item?.elTagType || "info";
  };
  const handleExport = () => {
    proxy.download(
      "/knowledgeBase/export",
      { ...searchForm.value },
      "知识库.xlsx"
    );
  };
</script>

<style scoped>
  .auto-refresh-info {
    margin-bottom: 15px;
  }

  .auto-refresh-info .el-alert {
    border-radius: 8px;
  }

  .dialog-footer {
    text-align: right;
  }

  .knowledge-detail {
    padding: 20px 0;
  }

  .detail-title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }

  .detail-section {
    margin-top: 24px;
  }

  .detail-section h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    border-left: 4px solid #409eff;
    padding-left: 12px;
  }

  .detail-content {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 6px;
    line-height: 1.6;
    color: #606266;
    white-space: pre-wrap;
  }

  .key-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .usage-stats {
    margin-top: 16px;
  }

  .stat-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
  }

  .stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 8px;
  }

  .stat-label {
    font-size: 14px;
    color: #909399;
  }

  :deep(.danger-row td) {
    color: #e95a66 !important;
  }
</style>

 src/views/salesManagement/deliveryLedger/index.vue

@@ -45,14 +45,20 @@
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template #default="scope">
            <el-button 
              link 
              type="primary" 
              size="small" 
              :disabled="isApproving(scope.row.status)"
              @click="openForm('edit', scope.row)">编辑</el-button>
              :disabled="!isApproved(scope.row.status)"
              @click="openForm('edit', scope.row)">补充发货信息</el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="openDetail(scope.row)"
            >详情</el-button>
            <el-button 
              link 
              type="danger" 
@@ -166,6 +172,41 @@
        </div>
      </template>
    </el-dialog>

    <!-- è¯¦æƒ…弹框 -->
    <el-dialog v-model="detailDialogVisible" title="发货台账详情" width="55%" @close="closeDetail">
      <div v-if="detailRow" class="detail-wrapper">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="销售订单">{{ detailRow.salesContractNo || '--' }}</el-descriptions-item>
          <el-descriptions-item label="发货订单号">{{ detailRow.shippingNo || '--' }}</el-descriptions-item>
          <el-descriptions-item label="客户名称">{{ detailRow.customerName || '--' }}</el-descriptions-item>
          <el-descriptions-item label="发货类型">{{ detailRow.type || '--' }}</el-descriptions-item>
          <el-descriptions-item label="发货日期">{{ detailRow.shippingDate || '--' }}</el-descriptions-item>
          <el-descriptions-item label="审核状态">{{ getApprovalStatusText(detailRow.status) }}</el-descriptions-item>
          <el-descriptions-item label="发货车牌号">{{ detailRow.shippingCarNumber || '--' }}</el-descriptions-item>
          <el-descriptions-item label="快递公司">{{ detailRow.expressCompany || '--' }}</el-descriptions-item>
          <el-descriptions-item label="快递单号" :span="2">{{ detailRow.expressNumber || '--' }}</el-descriptions-item>
        </el-descriptions>

        <div class="detail-images" v-if="detailImages.length">
          <div class="detail-images-title">发货图片</div>
          <el-image
            v-for="img in detailImages"
            :key="img.url"
            :src="img.url"
            :preview-src-list="detailImages.map(i => i.url)"
            fit="cover"
            class="detail-image"
          />
        </div>
        <div v-else class="detail-images-empty">暂无发货图片</div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDetail">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

@@ -177,9 +218,9 @@
import { getToken } from "@/utils/auth";
import { getCurrentDate } from "@/utils/index.js";
import {
  deliveryLedgerListPage,
  addOrUpdateDeliveryLedger,
  delDeliveryLedger,
    deliveryLedgerListPage,
    addOrUpdateDeliveryLedger,
    delDeliveryLedger, deductStock,
} from "@/api/salesManagement/deliveryLedger.js";
import { delLedgerFile } from "@/api/salesManagement/salesLedger.js";
 
@@ -196,6 +237,31 @@
const total = ref(0);
const deliveryFileList = ref([]);
const javaApi = proxy.javaApi;
// è¯¦æƒ…弹框
const detailDialogVisible = ref(false);
const detailRow = ref(null);
const detailImages = ref([]);

const normalizeFileUrl = (rawUrl = '') => {
  let fileUrl = rawUrl || '';
  // Windows è·¯å¾„转 URL
  if (fileUrl && fileUrl.indexOf('\\') > -1) {
    const uploadsIndex = fileUrl.toLowerCase().indexOf('uploads');
    if (uploadsIndex > -1) {
      const relativePath = fileUrl.substring(uploadsIndex).replace(/\\/g, '/');
      fileUrl = '/' + relativePath;
    } else {
      const parts = fileUrl.split('\\');
      const fileName = parts[parts.length - 1];
      fileUrl = '/uploads/' + fileName;
    }
  }
  if (fileUrl && !fileUrl.startsWith('http')) {
    if (!fileUrl.startsWith('/')) fileUrl = '/' + fileUrl;
    fileUrl = javaApi + fileUrl;
  }
  return fileUrl;
};

// ä¸Šä¼ é…ç½®
const upload = reactive({
@@ -284,9 +350,9 @@

// æ‰“开弹框
const openForm = async (type, row) => {
  // ç¼–辑时检查审核状态，只有审核中不能编辑
  if (type === 'edit' && row && isApproving(row.status)) {
    proxy.$modal.msgWarning("审核中的数据不能编辑");
  // è¡¥å……发货信息：仅“审核通过”允许编辑
  if (type === 'edit' && row && !isApproved(row.status)) {
    proxy.$modal.msgWarning("只有审核通过的数据才可以补充发货信息");
    return;
  }
  
@@ -307,38 +373,7 @@
    // å¦‚果有图片，将 commonFileList è½¬æ¢ä¸ºæ–‡ä»¶åˆ—表格式
    if (row.commonFileList && Array.isArray(row.commonFileList) && row.commonFileList.length > 0) {
      deliveryFileList.value = row.commonFileList.map((file, index) => {
        // å¤„理 URL：将 Windows è·¯å¾„转换为可访问的 URL
        let fileUrl = file.url || '';
        console.log('原始 URL:', fileUrl);
        
        // å¦‚æžœ URL æ˜¯ Windows è·¯å¾„格式（包含反斜杠），需要转换
        if (fileUrl && fileUrl.indexOf('\\') > -1) {
          // æŸ¥æ‰¾ uploads å…³é”®å­—的位置，从那里开始提取相对路径
          const uploadsIndex = fileUrl.toLowerCase().indexOf('uploads');
          if (uploadsIndex > -1) {
            // ä»Ž uploads å¼€å§‹æå–路径，并将反斜杠替换为正斜杠
            const relativePath = fileUrl.substring(uploadsIndex).replace(/\\/g, '/');
            fileUrl = '/' + relativePath;
            console.log('转换后的相对路径:', fileUrl);
          } else {
            // å¦‚果没有找到 uploads，提取最后一个目录和文件名
            const parts = fileUrl.split('\\');
            const fileName = parts[parts.length - 1];
            fileUrl = '/uploads/' + fileName;
            console.log('未找到 uploads，使用文件名:', fileUrl);
          }
        }
        
        // ç¡®ä¿æ‰€æœ‰éž http å¼€å¤´çš„ URL éƒ½æ‹¼æŽ¥ baseUrl
        if (fileUrl && !fileUrl.startsWith('http')) {
          // ç¡®ä¿è·¯å¾„以 / å¼€å¤´
          if (!fileUrl.startsWith('/')) {
            fileUrl = '/' + fileUrl;
          }
          // æ‹¼æŽ¥ baseUrl
          fileUrl = javaApi + fileUrl;
          console.log('最终拼接的 URL:', fileUrl);
        }
        const fileUrl = normalizeFileUrl(file.url || '');
        
        return {
          uid: file.id || Date.now() + index,
@@ -375,6 +410,21 @@
  dialogFormVisible.value = true;
};

// æ‰“开详情弹框
const openDetail = (row) => {
  detailRow.value = row || null;
  const list = Array.isArray(row?.commonFileList) ? row.commonFileList : [];
  detailImages.value = list
    .map((f) => ({ url: normalizeFileUrl(f?.url || '') }))
    .filter((i) => !!i.url);
  detailDialogVisible.value = true;
};
const closeDetail = () => {
  detailDialogVisible.value = false;
  detailRow.value = null;
  detailImages.value = [];
};

// æäº¤è¡¨å•
const submitForm = () => {
  proxy.$refs["formRef"].validate((valid) => {
@@ -392,7 +442,7 @@
        expressNumber: form.value.type === "快递" ? form.value.expressNumber : "",
        tempFileIds: tempFileIds,
      };
      addOrUpdateDeliveryLedger(payload).then((res) => {
            deductStock(payload).then((res) => {
        proxy.$modal.msgSuccess("操作成功");
        closeDia();
        getList();
@@ -671,5 +721,27 @@
    display: none;
  }
}
.detail-wrapper {
  padding: 8px 0;
}
.detail-images {
  margin-top: 16px;
}
.detail-images-title {
  font-weight: 600;
  margin-bottom: 10px;
  color: #303133;
}
.detail-image {
  width: 120px;
  height: 120px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
}
.detail-images-empty {
  margin-top: 16px;
  color: #909399;
}
</style>


 src/views/salesManagement/indicatorStats/index.vue

@@ -38,7 +38,7 @@
            </div>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ indicatorKpis.shipRate }}%</div>
            <div class="stat-value">{{ indicatorKpis.shipRate }}</div>
            <div class="stat-label">发货率</div>
          </div>
          <div class="stat-bg-decoration"></div>
@@ -127,41 +127,6 @@
        <div ref="indicatorChartRef" class="chart-wrapper"></div>
      </div>
    </el-card>

    <!-- ä¸šç»©ç»Ÿè®¡ï¼ˆå›¢é˜Ÿç»´åº¦ï¼Œæ— ä¸ªäººå§“名） -->
    <el-card v-if="showTeamPerformance" class="table-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="card-title">团队业绩统计</span>
        </div>
      </template>
      <el-table 
        :data="teamPerformanceList" 
        border 
        stripe 
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold' }"
      >
        <el-table-column prop="team" label="销售团队" min-width="120"/>
        <el-table-column prop="orderCount" label="订单数" align="right" min-width="100"/>
        <el-table-column prop="salesAmount" label="销售额" align="right" min-width="140">
          <template #default="scope">Â¥{{ scope.row.salesAmount.toLocaleString() }}</template>
        </el-table-column>
        <el-table-column prop="shipRate" label="发货率" align="right" min-width="100">
          <template #default="scope">{{ scope.row.shipRate }}%</template>
        </el-table-column>
        <el-table-column prop="attainment" label="目标达成率" align="center" min-width="120">
          <template #default="scope">
            <el-tag 
              :type="scope.row.attainment >= 100 ? 'success' : scope.row.attainment >= 80 ? 'warning' : 'danger'"
              effect="dark"
            >
              {{ scope.row.attainment }}%
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

@@ -195,13 +160,6 @@

const productOptions = ref([])
const customerOption = ref([])

const teamPerformanceList = ref([
  { team: '华东大区', orderCount: 320, salesAmount: 2850000, shipRate: 90, attainment: 105 },
  { team: '华北大区', orderCount: 280, salesAmount: 2150000, shipRate: 86, attainment: 92 },
  { team: '华南大区', orderCount: 210, salesAmount: 1850000, shipRate: 88, attainment: 78 },
  { team: '西南大区', orderCount: 180, salesAmount: 1500000, shipRate: 83, attainment: 74 }
])

// è½¬æ¢äº§å“æ ‘数据，将 id æ”¹ä¸º value
function convertIdToValue(data) {
@@ -277,7 +235,7 @@
      indicatorKpis.orderCount = res.data.total || 0
      indicatorKpis.salesAmount = res.data.contractAmountTotal || 0
      // å‘货率如果接口没有返回，保持原值或设为0
      // indicatorKpis.shipRate = res.data.shipRate || 0
      indicatorKpis.shipRate = res.data.shipRate || 0
    }
  } catch (error) {
    console.error('获取头部统计失败:', error)

 src/views/salesManagement/receiptPayment/index.vue

@@ -421,7 +421,11 @@
    proxy.$modal.msgError("请选择至少一条数据");
    return;
  }
  const validRows = selectedRows.value.filter((item) => item.noReceiptAmount !== 0);
  // ä»…允许“待回款金额 > 0”的记录进入新增回款弹窗，并过滤掉可能混入的空对象
  const validRows = selectedRows.value.filter((item) => {
    if (!item || !item.id) return false;
    return Number(item.pendingInvoiceTotal ?? 0) > 0;
  });
  if (validRows.length === 0) {
    proxy.$modal.msgWarning("所选记录均无需回款");
    return;
@@ -485,6 +489,8 @@
const closeDia = () => {
  forms.value = [];
  dialogFormVisible.value = false;
  // é¿å…äºŒæ¬¡æ‰“开弹窗时仍携带上一次的选择导致“多出一行/脏数据”
  selectedRows.value = [];
};

// åˆ é™¤å›žæ¬¾è®°å½•

 src/views/salesManagement/salesLedger/index.vue

@@ -37,7 +37,7 @@
        </div>
      </div>
      <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange"
        :expand-row-keys="expandedRowKeys" :row-key="(row) => row.id" show-summary style="width: 100%"
        :expand-row-keys="expandedRowKeys" :row-key="(row) => row.id" :row-class-name="tableRowClassName" show-summary style="width: 100%"
        :summary-method="summarizeMainTable" @expand-change="expandChange" height="calc(100vh - 18.5em)">
        <el-table-column align="center" type="selection" width="55" fixed="left"/>
        <el-table-column type="expand" width="60" fixed="left">
@@ -117,6 +117,7 @@
        <el-table-column label="录入人" prop="entryPersonName" width="100" show-overflow-tooltip />
        <el-table-column label="录入日期" prop="entryDate" width="120" show-overflow-tooltip />
        <el-table-column label="签订日期" prop="executionDate" width="120" show-overflow-tooltip />
        <el-table-column label="交付日期" prop="deliveryDate" width="120" show-overflow-tooltip />
        <el-table-column fixed="right" label="操作" min-width="100" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="openForm('edit', scope.row)">编辑</el-button>
@@ -132,6 +133,14 @@
    <FormDialog v-model="dialogFormVisible" :title="operationType === 'add' ? '新增销售台账页面' : '编辑销售台账页面'" :width="'70%'"
      :operation-type="operationType" @close="closeDia" @confirm="submitForm" @cancel="closeDia">
      <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
                <!-- æŠ¥ä»·å•å¯¼å…¥å…¥å£ï¼šæ”¾åœ¨è¡¨å•é¡¶éƒ¨ï¼Œé€‰æ‹©åŽåæ˜¾å®¢æˆ·/业务员等 -->
                <el-row v-if="operationType === 'add'" style="margin-bottom: 10px;">
                    <el-col :span="24" style="text-align: right;">
                        <el-button type="primary" plain @click="openQuotationDialog">
                            ä»Žé”€å”®æŠ¥ä»·å¯¼å…¥
                        </el-button>
                    </el-col>
                </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="销售合同号：" prop="salesContractNo">
@@ -196,6 +205,14 @@
                        </el-form-item>
                    </el-col>
                </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="交货日期：" prop="entryDate">
              <el-date-picker style="width: 100%" v-model="form.deliveryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
                              type="date" placeholder="请选择" clearable />
            </el-form-item>
          </el-col>
        </el-row>
                <el-row>
                    <el-form-item label="产品信息：" prop="entryDate">
                        <el-button v-if="operationType !== 'view'" type="primary" @click="openProductForm('add')">添加</el-button>
@@ -686,6 +703,7 @@
        customerId: "",
        entryPerson: "",
        entryDate: "",
    deliveryDate: "",
        maintenanceTime: "",
        productData: [],
        executionDate: "",
@@ -695,6 +713,7 @@
        customerId: [{ required: true, message: "请选择", trigger: "change" }],
        entryPerson: [{ required: true, message: "请选择", trigger: "change" }],
        entryDate: [{ required: true, message: "请选择", trigger: "change" }],
    deliveryDate: [{ required: true, message: "请选择", trigger: "change" }],
        executionDate: [{ required: true, message: "请选择", trigger: "change" }],
    },
});
@@ -979,6 +998,21 @@
        expandedRowKeys.value = [];
    }
};

// æ·»åŠ è¡¨è¡Œç±»åæ–¹æ³•
const tableRowClassName = ({ row }) => {
  const diff = row.deliveryDaysDiff;

  if (diff === 15) {
    return 'yellow';
  } else if (diff === 10) {
    return 'pink';
  } else if (diff === 2) {
    return 'purple';
  } else if (diff < 2) {
    return 'red';
  }
};
// ä¸»è¡¨åˆè®¡æ–¹æ³•
const summarizeMainTable = (param) => {
    return proxy.summarizeTable(param, [
@@ -1076,10 +1110,14 @@
    selectedQuotation.value = row;
    
    // ä¸šåŠ¡å‘˜
    form.value.salesman = row.salesperson || "";
    form.value.salesman = (row.salesperson || "").trim();
    
    // å®¢æˆ·åç§° -> customerId
    const customer = (customerOption.value || []).find((c) => c.customerName === row.customer);
    const qCustomerName = String(row.customer || "").trim();
    const customer = (customerOption.value || []).find((c) => {
        const name = String(c.customerName || "").trim();
        return name === qCustomerName || name.includes(qCustomerName) || qCustomerName.includes(name);
    });
    if (customer?.id) {
        form.value.customerId = customer.id;
    } else {
@@ -2072,6 +2110,22 @@
    margin-left: 10px;
}

::v-deep .yellow {
  background-color: #FAF0DE;
}

::v-deep .pink {
  background-color: #FAE1DE;
}

::v-deep .red {
  background-color: #f80202;
}

::v-deep .purple{
  background-color: #F4DEFA;
}

.table_list {
    margin-top: unset;
}

 src/views/salesManagement/salesQuotation/index.vue

@@ -51,7 +51,7 @@
        height="calc(100vh - 22em)"
      >
                <el-table-column align="center" label="序号" type="index" width="60" />
        <el-table-column prop="quotationNo" label="报价单号" width="150" />
        <el-table-column prop="quotationNo" label="报价单号" />
        <el-table-column prop="customer" label="客户名称" />
        <el-table-column prop="salesperson" label="业务员" width="100" />
        <el-table-column prop="quotationDate" label="报价日期" width="120" />
@@ -252,7 +252,7 @@
                                    @change="getProductModel($event, scope.row)"
                                >
                                    <el-option
                                        v-for="item in modelOptions"
                                        v-for="item in scope.row.modelOptions || []"
                                        :key="item.id"
                                        :label="item.model"
                                        :value="item.id"
@@ -322,7 +322,7 @@
        </el-descriptions-item>
      </el-descriptions>
      
      <div style="margin-top: 20px;">
      <div style="margin: 20px 0;">
        <h4>产品明细</h4>
        <el-table :data="currentQuotation.products" border style="width: 100%">
          <el-table-column prop="product" label="产品名称" />
@@ -521,7 +521,7 @@
    if (!value) {
        row.productId = '';
        row.product = '';
        modelOptions.value = [];
        row.modelOptions = [];
        row.specificationId = '';
        row.specification = '';
        row.unit = '';
@@ -534,9 +534,9 @@
    if (label) {
        row.product = label;
    }
    // èŽ·å–规格型号列表
    // èŽ·å–规格型号列表，设置到当前行的 modelOptions
    modelList({ id: value }).then((res) => {
        modelOptions.value = res || [];
        row.modelOptions = res || [];
    });
};
const getProductModel = (value, row) => {
@@ -550,10 +550,11 @@
    }
    // æ›´æ–° specificationId（v-model å·²ç»è‡ªåŠ¨æ›´æ–°ï¼Œè¿™é‡Œç¡®ä¿ä¸€è‡´æ€§ï¼‰
    row.specificationId = value;
    const index = modelOptions.value.findIndex((item) => item.id === value);
    const modelOptions = row.modelOptions || [];
    const index = modelOptions.findIndex((item) => item.id === value);
    if (index !== -1) {
        row.specification = modelOptions.value[index].model;
        row.unit = modelOptions.value[index].unit;
        row.specification = modelOptions[index].model;
        row.unit = modelOptions[index].unit;
    } else {
        row.specification = '';
        row.unit = '';
@@ -616,23 +617,46 @@
  form.paymentMethod = row.paymentMethod || ''
  form.status = row.status || '草稿'
  form.remark = row.remark || ''
  form.products = row.products ? row.products.map(product => {
  form.products = row.products ? await Promise.all(row.products.map(async (product) => {
    const productName = product.product || product.productName || ''
    // ä¼˜å…ˆç”¨ productId；如果只有名称，尝试反查 id ä»¥ä¾¿æ ‘选择器反显
    const resolvedId = product.productId
    const resolvedProductId = product.productId
      ? Number(product.productId)
      : findNodeIdByLabel(productOptions.value, productName) || ''
    
    // å¦‚果有产品ID，加载对应的规格型号列表
    let modelOptions = [];
    let resolvedSpecificationId = product.specificationId || '';
    
    if (resolvedProductId) {
      try {
        const res = await modelList({ id: resolvedProductId });
        modelOptions = res || [];
        
        // å¦‚果返回的数据没有 specificationId，但有 specification åç§°ï¼Œæ ¹æ®åç§°æŸ¥æ‰¾ ID
        if (!resolvedSpecificationId && product.specification) {
          const foundModel = modelOptions.find(item => item.model === product.specification);
          if (foundModel) {
            resolvedSpecificationId = foundModel.id;
          }
        }
      } catch (error) {
        console.error('加载规格型号失败:', error);
      }
    }
    
    return {
      productId: resolvedId,
      productId: resolvedProductId,
      product: productName,
      specificationId: product.specificationId || '',
      specificationId: resolvedSpecificationId,
      specification: product.specification || '',
      quantity: product.quantity || 0,
      unit: product.unit || '',
      unitPrice: product.unitPrice || 0,
      amount: product.amount || 0
      amount: product.amount || 0,
      modelOptions: modelOptions // ä¸ºæ¯è¡Œæ·»åŠ ç‹¬ç«‹çš„规格型号列表
    }
  }) : []
  })) : []
  form.subtotal = row.subtotal || 0
  form.freight = row.freight || 0
  form.otherFee = row.otherFee || 0
@@ -714,7 +738,8 @@
    quantity: 1,
    unit: '',
    unitPrice: 0,
    amount: 0
    amount: 0,
    modelOptions: [] // ä¸ºæ¯è¡Œæ·»åŠ ç‹¬ç«‹çš„规格型号列表
  })
}