src/api/productionManagement/productWorkOrderFile.js

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

// æŸ¥è¯¢å·¥å•é™„件列表
export function productWorkOrderFileListPage(query) {
  return request({
    url: "/productWorkOrderFile/listPage",
    method: "get",
    params: query,
  });
}

// æ–°å¢žå·¥å•é™„件
export function productWorkOrderFileAdd(data) {
  return request({
    url: "/productWorkOrderFile/add",
    method: "post",
    data,
  });
}

// åˆ é™¤å·¥å•é™„件
export function productWorkOrderFileDel(data) {
  return request({
    url: "/productWorkOrderFile/del",
    method: "delete",
    data,
  });
}


 src/api/productionManagement/workOrder.js

@@ -23,3 +23,13 @@
    data: data,
  });
}

// ä¸‹è½½å·¥å•æµè½¬å¡ï¼ˆè¿”回文件流）
export function downProductWorkOrder(id) {
  return request({
    url: "/productWorkOrder/down",
    method: "post",
    data: { id },
    responseType: "blob",
  });
}

 src/api/safeProduction/hazardSourceLedger.js

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

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

// æ–°å¢žå±é™©æºå°è´¦
export function safeHazardAdd(query) {
    return request({
        url: '/safeHazard',
        method: 'post',
        data: query
    })
}
// ä¿®æ”¹å±é™©æºå°è´¦
export function safeHazardUpdate(query) {
    return request({
        url: '/safeHazard',
        method: 'put',
        data: query
    })
}
// åˆ é™¤å±é™©æºå°è´¦
export function safeHazardDel(ids) {
    return request({
        url: '/safeHazard/' + ids,
        method: 'delete',
        data: ids
    })
}

 src/api/safeProduction/safeQualifications.js

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

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

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

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

 src/api/viewIndex.js

@@ -114,3 +114,44 @@
        method: 'get'
    })
}

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

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

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

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

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

 src/assets/BI/jiantou.png

 src/views/inventoryManagement/receiptManagement/Record.vue

@@ -164,6 +164,7 @@
  const params = {...page, type: props.type};
  params.timeStr = searchForm.value.timeStr;
  params.productName = searchForm.value.productName;
  params.recordType = searchForm.value.recordType;
  getStockInRecordListPage(params)
      .then(res => {
        tableData.value = res.data.records;

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

@@ -6,6 +6,7 @@
    :tableLoading="loading"
        :summaryMethod="summarizeChildrenTable"
        :isShowSummary="true"
    :isShowPagination="false"
    height="auto"
  >
  </PIMTable>
@@ -111,6 +112,9 @@
const getList = async (id) => {
  await nextTick();
  filters.salesLedgerId = id;
  // è®¾ç½®ä¸€ä¸ªå¾ˆå¤§çš„ pageSize ä»¥èŽ·å–所有数据
  pagination.pageSize = 10000;
  pagination.currentPage = 1;
  getTableData();
};
// å­è¡¨åˆè®¡æ–¹æ³•

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

@@ -58,6 +58,7 @@
                                                         v-model="form.invoiceAmount"
                                                         placeholder="请输入发票金额"
                                                         clearable
                             disabled
                        />
                    </el-form-item>
                </el-col>
@@ -92,22 +93,6 @@
                            value-format="YYYY-MM-DD"
                            format="YYYY-MM-DD"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上传附件">
                        <FileUpload
                            :showTip="false"
                            accept="*"
                            :autoUpload="true"
                            :action="action"
                            :headers="{
                Authorization: 'Bearer ' + getToken(),
              }"
                            :limit="10"
                            @success="uploadSuccess"
                            @remove="removeFile"
                        />
                    </el-form-item>
                </el-col>
@@ -148,7 +133,7 @@
                />
                <el-table-column label="本次开票数" prop="ticketsNum" width="180">
                    <template #default="scope">
                        <el-input-number :step="0.1" :min="0" style="width: 100%"
                        <el-input-number :step="0.1" :min="0" :max="scope.row.tempFutureTickets || 0" style="width: 100%"
                                                         :precision="2"
                                                         v-model="scope.row.ticketsNum"
                                                         @change="invoiceNumBlur(scope.row)"
@@ -204,14 +189,12 @@
import { defineEmits } from 'vue';
import { useModal } from "@/hooks/useModal";
import useFormData from "@/hooks/useFormData";
import FileUpload from "@/components/Upload/FileUpload.vue";
import {
    getPurchaseNoById,
    getInfo,
    addOrUpdateRegistration,
} from "@/api/procurementManagement/invoiceEntry.js";
import { getPurchaseById } from "@/api/procurementManagement/procurementLedger.js";
import { getToken } from "@/utils/auth";
import useUserStore from "@/store/modules/user";
import dayjs from "dayjs";

@@ -220,7 +203,6 @@
});

const userStore = useUserStore();
const action = import.meta.env.VITE_APP_BASE_API + "/file/upload";
const formRef = ref();
const { proxy } = getCurrentInstance();
const { form } = useFormData({
@@ -236,7 +218,6 @@
    salesContractNoId: undefined, // å¼€ç¥¨æ—¥æœŸ
    enterDate: dayjs().format("YYYY-MM-DD"),
    productData: [], // è¡¨æ ¼
    tempFileIds: [], // æ–‡ä»¶
});

const selectedContracts = ref([]); // å­˜å‚¨é€‰ä¸­çš„合同数据
@@ -397,10 +378,11 @@
                    result.data.productData.forEach(item => {
                        allProductData.push({
                            ...item,
                            id: contractId, // æ˜Žç¡®è®¾ç½®åˆåŒID
                            purchaseLedgerId: contractId, // æ·»åŠ åˆåŒID用于筛选
                            purchaseLedgerNo: contract.purchaseContractNumber, // æ·»åŠ é‡‡è´­åˆåŒå·
                            supplierName: contract.supplierName, // æ·»åŠ ä¾›åº”商名称
                            projectName: contract.projectName // æ·»åŠ é¡¹ç›®åç§°
                            // ä¿ç•™äº§å“æœ¬èº«çš„id，不覆盖
                        });
                    });
                }
@@ -420,23 +402,29 @@
            
            // è®¾ç½®äº§å“æ•°æ®ï¼Œå¹¶åˆå§‹åŒ–开票数量和金额
            allProductData.forEach(item => {
                // æœ¬æ¬¡å¼€ç¥¨æ•°é»˜è®¤ä¸ºæ€»æ•°é‡
                item.ticketsNum = Number(item.quantity || 0);
                // æœ¬æ¬¡å¼€ç¥¨é‡‘额默认为含税总价
                item.ticketsAmount = Number(item.taxInclusiveTotalPrice || 0);
                // ä¿å­˜åŽŸå§‹æœªæ¥ç¥¨æ•°å’Œé‡‘额（用于计算）
                item.tempFutureTickets = Number(item.quantity || 0);
                item.tempFutureTicketsAmount = Number(item.taxInclusiveTotalPrice || 0);
                // æœªæ¥ç¥¨æ•°å’Œé‡‘额初始为0（因为全部开票）
                item.futureTickets = 0;
                item.futureTicketsAmount = 0;
                // ä¿å­˜â€œåŽŸå§‹æœªæ¥ç¥¨æ•°/金额”（用于校验与计算）
                // ä¼˜å…ˆä½¿ç”¨åŽç«¯è¿”回的 futureTickets/futureTicketsAmount；没有则回退到 quantity/taxInclusiveTotalPrice
                item.tempFutureTickets = Number(
                    item.futureTickets !== undefined ? item.futureTickets : (item.quantity || 0)
                );
                item.tempFutureTicketsAmount = Number(
                    item.futureTicketsAmount !== undefined ? item.futureTicketsAmount : (item.taxInclusiveTotalPrice || 0)
                );

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

                // é¡µé¢å±•ç¤ºçš„“未来票数/未来票金额”默认展示原始未来值
                item.futureTickets = item.tempFutureTickets;
                item.futureTicketsAmount = item.tempFutureTicketsAmount;
            });
            
            form.productData = allProductData;
            
            // è®¡ç®—发票金额：所有产品的含税总价之和
            // è®¡ç®—发票金额：所有产品的本次开票金额之和（新增默认 0）
            const totalAmount = allProductData.reduce((sum, item) => {
                return sum + (Number(item.taxInclusiveTotalPrice) || 0);
                return sum + (Number(item.ticketsAmount) || 0);
            }, 0);
            form.invoiceAmount = totalAmount.toFixed(2);
            
@@ -475,9 +463,8 @@
        row.ticketsNum = 0;
    }
    if (Number(row.ticketsNum) > Number(row.tempFutureTickets)) {
        proxy.$modal.msgWarning("本次开票数不得大于未开票数");
        row.ticketsNum = 0;
        return;
        proxy.$modal.msgWarning("本次开票数不能大于未来票数");
        row.ticketsNum = Number(row.tempFutureTickets || 0);
    }
    // è®¡ç®—本次来票金额
    row.ticketsAmount = (row.ticketsNum * row.taxInclusiveUnitPrice).toFixed(2)
@@ -496,12 +483,19 @@
    // è®¡ç®—是否超过来票总金额
    if (row.ticketsAmount > row.tempFutureTicketsAmount) {
        proxy.$modal.msgWarning("本次来票金额不得大于未来票金额");
        row.ticketsAmount = 0;
        row.ticketsAmount = Number(row.tempFutureTicketsAmount || 0);
    }
    // è®¡ç®—本次来票数
    row.ticketsNum = Number(
        (row.ticketsAmount / row.taxInclusiveUnitPrice).toFixed(2)
    );
    // æ£€æŸ¥æœ¬æ¬¡å¼€ç¥¨æ•°æ˜¯å¦å¤§äºŽæœªæ¥ç¥¨æ•°
    if (Number(row.ticketsNum) > Number(row.tempFutureTickets)) {
        proxy.$modal.msgWarning("本次开票数不能大于未来票数");
        row.ticketsNum = Number(row.tempFutureTickets || 0);
        // é‡æ–°è®¡ç®—本次来票金额
        row.ticketsAmount = (row.ticketsNum * row.taxInclusiveUnitPrice).toFixed(2);
    }
    // è®¡ç®—未来票数
    row.futureTickets = (row.tempFutureTickets - row.ticketsNum).toFixed(2)
    // è®¡ç®—未来票金额
@@ -538,15 +532,6 @@
    await getTableData(type, selectedRows);
};

const uploadSuccess = (response) => {
    form.tempFileIds.push(response.data.tempId);
    console.log(form);
};

const removeFile = (file) => {
    const { tempId } = file.response.data;
    form.tempFileIds = form.tempFileIds.filter((item) => item !== tempId);
};

const closeAndRefresh = () => {
    closeModal();
@@ -562,22 +547,21 @@
                const batchData = selectedContracts.value.map(contract => {
                    // ç­›é€‰å‡ºå±žäºŽå½“前合同的产品数据
                    const contractProductData = form.productData.filter(item =>
                        item.id === contract.id
                        item.purchaseLedgerId === contract.id
                    );
                    
                    // ä¸ºæ¯ä¸ªé‡‡è´­åˆåŒåˆ›å»ºç‹¬ç«‹çš„对象
                    return {
                        // åŸºç¡€è¡¨å•æ•°æ®
                        invoiceNumber: form.invoiceNumber,
                        invoiceAmount: form.invoiceAmount,
                        entryDate: form.entryDate,
                        enterDate: form.enterDate,
                        issUerId: form.issUerId, // å½•å…¥äººid
                        issUer: form.issUer, // å½•å…¥äºº
                        tempFileIds: form.tempFileIds,
						
                        // åˆåŒå®žé™…信息
                        purchaseLedgerId: contract.id, // ä½¿ç”¨id作为字段名，值为purchaseLedgerId
                    // åŸºç¡€è¡¨å•æ•°æ®
                    invoiceNumber: form.invoiceNumber,
                    invoiceAmount: form.invoiceAmount,
                    entryDate: form.entryDate,
                    enterDate: form.enterDate,
                    issUerId: form.issUerId, // å½•å…¥äººid
                    issUer: form.issUer, // å½•å…¥äºº
					
                    // åˆåŒå®žé™…信息
                    purchaseLedgerId: contract.id, // ä½¿ç”¨id作为字段名，值为purchaseLedgerId
                        purchaseContractNumber: contract.purchaseContractNumber, // ä½¿ç”¨å®žé™…的采购合同号
                        salesContractNo: contract.salesContractNo, // ä½¿ç”¨å®žé™…的销售合同号
                        supplierName: contract.supplierName, // ä½¿ç”¨å®žé™…的供应商名称
@@ -608,17 +592,16 @@
                    // å•ä¸ªåˆåŒæäº¤é€»è¾‘ - ä»¥æ•°ç»„格式传递
                    const singleContract = selectedContracts.value[0];
                    const singleFormArray = [{
                        // åŸºç¡€è¡¨å•æ•°æ®
                        invoiceNumber: form.invoiceNumber,
                        invoiceAmount: form.invoiceAmount,
                        entryDate: form.entryDate,
                        enterDate: form.enterDate,
                        issUerId: form.issUerId, // å½•å…¥äººid
                        issUer: form.issUer, // å½•å…¥äºº
                        tempFileIds: form.tempFileIds,
						
                        // åˆåŒå®žé™…信息
                        purchaseLedgerId: singleContract.id, // ä½¿ç”¨id作为字段名，值为purchaseLedgerId
                    // åŸºç¡€è¡¨å•æ•°æ®
                    invoiceNumber: form.invoiceNumber,
                    invoiceAmount: form.invoiceAmount,
                    entryDate: form.entryDate,
                    enterDate: form.enterDate,
                    issUerId: form.issUerId, // å½•å…¥äººid
                    issUer: form.issUer, // å½•å…¥äºº
					
                    // åˆåŒå®žé™…信息
                    purchaseLedgerId: singleContract.id, // ä½¿ç”¨id作为字段名，值为purchaseLedgerId
                        purchaseContractNumber: singleContract.purchaseContractNumber, // ä½¿ç”¨å®žé™…的采购合同号
                        salesContractNo: singleContract.salesContractNo, // ä½¿ç”¨å®žé™…的销售合同号
                        supplierName: singleContract.supplierName, // ä½¿ç”¨å®žé™…的供应商名称

 src/views/procurementManagement/invoiceEntry/index.vue

@@ -68,9 +68,8 @@
        </template>
        <template #operation="{ row }">
          <el-button
            text
            link
            type="primary"
            size="small"
            @click="handleEdit('edit', row.id)"
          >
            ç¼–辑
@@ -168,14 +167,14 @@
        return val ? parseFloat(val).toFixed(2) : 0;
      },
    },
    // {
    //   fixed: "right",
    //   label: "操作",
    //   dataType: "slot",
    //   slot: "operation",
    //   align: "center",
    //   width: "200px",
    // },
    {
      fixed: "right",
      label: "操作",
      dataType: "slot",
      slot: "operation",
      align: "center",
      width: 100,
    },
  ]
);


 src/views/procurementManagement/procurementInvoiceLedger/Form/EditForm.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/procurementInvoiceLedger/Modal/EditModal.vue

@@ -2,7 +2,65 @@
  <el-dialog :title="modalOptions.title"
             v-model="visible"
             @close="close">
    <EditForm ref="editFormRef" />
    <el-form :model="form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="采购合同号：">
            <el-tag size="large">{{ form.purchaseContractNumber }}</el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售合同号：">
            <el-text>{{ form.salesContractNo }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="含税单价(元)：">
            <el-text type="primary">{{ form.taxInclusiveUnitPrice }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间：">
            <el-text>{{ form.createdAt }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发票号：">
            <el-input disabled
                      v-model="form.invoiceNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="来票数：">
            <el-input-number :step="0.1"
                             :min="0"
                             :max="maxTicketsNum"
                             style="width: 100%"
                             v-model="form.ticketsNum"
                             @change="inputTicketsNum"
                             :precision="2" />
            <div style="font-size: 12px; color: #909399; margin-top: 4px;">
              å¯å¡«å†™æ•°é‡ï¼š{{ maxTicketsNum }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本次来票金额(元)：">
            <el-input-number :step="0.1"
                             :min="0"
                             style="width: 100%"
                             v-model="form.ticketsAmount"
                             @change="inputTicketsAmount"
                             :precision="2" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="未来票数：">
            <el-text type="success">{{ form.futureTickets }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary"
                 :loading="loading"
@@ -15,52 +73,166 @@
</template>

<script setup>
  import { useModal } from "@/hooks/useModal";
  import EditForm from "../Form/EditForm.vue";
  import { updateRegistration } from "@/api/procurementManagement/procurementInvoiceLedger";
  import { ElMessage } from "element-plus";
import { useModal } from "@/hooks/useModal";
import useFormData from "@/hooks/useFormData";
import { updateRegistration, getProductRecordById } from "@/api/procurementManagement/procurementInvoiceLedger";
import { ElMessage } from "element-plus";
import { getCurrentInstance, ref, nextTick, computed } from "vue";

  defineOptions({
    name: "来票台账编辑",
defineOptions({
  name: "来票台账编辑",
});
const emits = defineEmits(["success"]);

const saleLedgerProjectId = ref("");
const temFutureTickets = ref(0);
const originalTicketsNum = ref(0); // åŽŸå§‹å·²æ¥ç¥¨æ•°
const { proxy } = getCurrentInstance();

// è®¡ç®—最大可填写数量 = åŽŸå§‹å·²æ¥ç¥¨æ•° + æœªæ¥ç¥¨æ•°
const maxTicketsNum = computed(() => {
  return Number(originalTicketsNum.value) + Number(temFutureTickets.value);
});

const {
  id,
  visible,
  loading,
  openModal,
  modalOptions,
  handleConfirm,
  closeModal,
} = useModal({ title: "来票台账" });

const { form, resetForm } = useFormData({
  id: undefined,
  purchaseContractNumber: undefined, // é‡‡è´­åˆåŒå·
  salesContractNo: undefined, // é”€å”®åˆåŒå·
  createdAt: undefined, // åˆ›å»ºæ—¶é—´
  invoiceNumber: undefined, // å‘票号
  ticketsNum: undefined, // æ¥ç¥¨æ•°
  ticketsAmount: undefined, // æ¥ç¥¨é‡‘额
  taxInclusiveUnitPrice: undefined, // å«ç¨Žå•ä»·
  futureTickets: undefined, // æœªæ¥ç¥¨æ•°
});

const load = async (id, purchaseLedgerId, productModelId) => {
  const { code, data } = await getProductRecordById({
    id: id,
    purchaseLedgerId: purchaseLedgerId,
    productModelId: productModelId,
  });
  const emits = defineEmits(["success"]);
  if (code === 200) {
    form.id = data.id;
    form.purchaseContractNumber = data.purchaseContractNumber;
    form.salesContractNo = data.salesContractNo;
    form.createdAt = data.createdAt;
    form.invoiceNumber = data.invoiceNumber;
    form.ticketsNum = data.ticketsNum;
    form.ticketsAmount = data.ticketsAmount.toFixed(2);
    form.taxInclusiveUnitPrice = data.taxInclusiveUnitPrice;
    form.futureTickets = data.futureTickets;
    temFutureTickets.value = data.futureTickets;
    // ä¿å­˜åŽŸå§‹å·²æ¥ç¥¨æ•°
    originalTicketsNum.value = data.ticketsNum || 0;
  }
};

  const saleLedgerProjectId = ref("");
  const editFormRef = ref();
  const {
    id,
    visible,
    loading,
    openModal,
    modalOptions,
    handleConfirm,
    closeModal,
  } = useModal({ title: "来票台账" });
const inputTicketsNum = val => {
  // ç¡®ä¿å«ç¨Žå•ä»·å­˜åœ¨ä¸”不为零
  if (!form.taxInclusiveUnitPrice || Number(form.taxInclusiveUnitPrice) === 0) {
    proxy.$modal.msgWarning("含税单价不能为零或未定义");
    return;
  }
  
  // æ£€æŸ¥æ¥ç¥¨æ•°ä¸èƒ½å¤§äºŽï¼ˆåŽŸå§‹å·²æ¥ç¥¨æ•° + æœªæ¥ç¥¨æ•°ï¼‰
  const maxNum = maxTicketsNum.value;
  if (Number(form.ticketsNum) > maxNum) {
    proxy.$modal.msgWarning(`来票数不能大于${maxNum}（已来票数${originalTicketsNum.value} + æœªæ¥ç¥¨æ•°${temFutureTickets.value}）`);
    form.ticketsNum = maxNum;
    return;
  }
  
  // è®¡ç®—本次新增的来票数（当前来票数 - åŽŸå§‹å·²æ¥ç¥¨æ•°ï¼‰
  const newTicketsNum = Number(form.ticketsNum) - Number(originalTicketsNum.value);
  
  // å¦‚果新增的来票数大于未来票数，则限制
  if (newTicketsNum > Number(temFutureTickets.value)) {
    proxy.$modal.msgWarning("本次新增来票数不得大于未来票数");
    form.ticketsNum = Number(originalTicketsNum.value) + Number(temFutureTickets.value);
    return;
  }

  const open = async row => {
    openModal(row.id);
    saleLedgerProjectId.value = row.saleLedgerProjectId;
    await nextTick();
    editFormRef.value.load(row.id, row.purchaseLedgerId, row.productModelId);
  };
  // ç¡®ä¿æ‰€æœ‰æ•°å€¼éƒ½è½¬æ¢ä¸ºæ•°å­—类型进行计算
  const ticketsAmount =
    Number(form.ticketsNum) * Number(form.taxInclusiveUnitPrice);
  const futureTickets =
    Number(temFutureTickets.value) - newTicketsNum;
  form.futureTickets = Number(futureTickets.toFixed(2));
  form.ticketsAmount = Number(ticketsAmount.toFixed(2));
};

  const close = () => {
    editFormRef.value.resetForm();
    closeModal();
  };
const inputTicketsAmount = val => {
  // ç¡®ä¿å«ç¨Žå•ä»·å­˜åœ¨ä¸”不为零
  if (!form.taxInclusiveUnitPrice || Number(form.taxInclusiveUnitPrice) === 0) {
    proxy.$modal.msgWarning("含税单价不能为零或未定义");
    return;
  }

  const sendForm = async () => {
    const form = editFormRef.value.form;
    form.saleLedgerProjectId = saleLedgerProjectId.value;
    const { code } = await updateRegistration(form);
    if (code === 200) {
      emits("success");
      ElMessage({ message: "操作成功", type: "success" });
      close();
    }
  };
  // è®¡ç®—最大可填写金额 = ï¼ˆåŽŸå§‹å·²æ¥ç¥¨æ•° + æœªæ¥ç¥¨æ•°ï¼‰* å«ç¨Žå•ä»·
  const maxAmount = maxTicketsNum.value * Number(form.taxInclusiveUnitPrice);
  
  if (Number(val) > maxAmount) {
    proxy.$modal.msgWarning(`本次来票金额不得大于${maxAmount.toFixed(2)}元`);
    form.ticketsAmount = maxAmount.toFixed(2);
    form.ticketsNum = maxTicketsNum.value;
    return;
  }

  defineExpose({
    open,
  });
  // ç¡®ä¿æ‰€æœ‰æ•°å€¼éƒ½è½¬æ¢ä¸ºæ•°å­—类型进行计算
  const ticketsNum = Number(val) / Number(form.taxInclusiveUnitPrice);
  
  // æ£€æŸ¥æ¥ç¥¨æ•°ä¸èƒ½å¤§äºŽæœ€å¤§å€¼
  if (ticketsNum > maxTicketsNum.value) {
    proxy.$modal.msgWarning(`来票数不能大于${maxTicketsNum.value}`);
    form.ticketsNum = maxTicketsNum.value;
    form.ticketsAmount = maxAmount.toFixed(2);
    return;
  }
  
  form.ticketsNum = Number(ticketsNum.toFixed(2));
  
  // è®¡ç®—未来票数
  const newTicketsNum = form.ticketsNum - originalTicketsNum.value;
  const futureTickets = Number(temFutureTickets.value) - newTicketsNum;
  form.futureTickets = Number(futureTickets.toFixed(2));
};

const open = async row => {
  openModal(row.id);
  saleLedgerProjectId.value = row.saleLedgerProjectId;
  await nextTick();
  load(row.id, row.purchaseLedgerId, row.productModelId);
};

const close = () => {
  resetForm();
  closeModal();
};

const sendForm = async () => {
  form.saleLedgerProjectId = saleLedgerProjectId.value;
  const { code } = await updateRegistration(form);
  if (code === 200) {
    emits("success");
    ElMessage({ message: "操作成功", type: "success" });
    close();
  }
};

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

<style lang="scss" scoped></style>

 src/views/procurementManagement/procurementInvoiceLedger/index.vue

@@ -58,36 +58,24 @@
        @selection-change="handleSelectionChange"
        @pagination="changePage"
      >
        <template #commonFilesRef="{ row }">
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <el-button link :icon="Files" type="danger"> é™„件 </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-if="row.commonFiles.length !== 0"
                  :icon="Download"
                  command="download"
                >
                  ä¸‹è½½
                </el-dropdown-item>
                <el-dropdown-item :icon="Upload" command="upload">
                  ä¸Šä¼ 
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template #operation="{ row }">
          <el-button
            type="primary"
            text
            link
            @click="openEdit(row)"
          >
            ç¼–辑
          </el-button>
          <el-button
            type="primary"
            text
            link
            @click="downLoadFile(row)"
          >
            é™„件
          </el-button>
          <el-button
            type="primary"
            link
            @click="handleDelete(row)"
          >
            åˆ é™¤
@@ -95,7 +83,16 @@
        </template>
      </PIMTable>
    </div>
    <UploadModal ref="modalRef" @uploadSuccess="uploadSuccess"></UploadModal>
    <FileListDialog 
      ref="fileListRef" 
      v-model="fileListDialogVisible"
      title="附件列表"
      :showUploadButton="true"
      :showDeleteButton="true"
      :deleteMethod="handleDeleteFile"
      :uploadMethod="handleFileUpload"
      :rulesRegulationsManagementId="currentRowId"
    />
    <EditModal ref="editmodalRef" @success="getTableData"></EditModal>
  </div>
</template>
@@ -104,31 +101,30 @@
import { ref, getCurrentInstance } from "vue";
import { usePaginationApi } from "@/hooks/usePaginationApi";
import {
  Files,
  Download,
  Search,
  Upload,
  EditPen,
    Search,
} from "@element-plus/icons-vue";
import {
    delRegistration,
    productRecordPage,
    productUploadFile,
    delCommonFile,
} from "@/api/procurementManagement/procurementInvoiceLedger.js";
import request from "@/utils/request";
import { getToken } from "@/utils/auth";
import { onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import UploadModal from "./Modal/UploadModal.vue";
import EditModal from "./Modal/EditModal.vue";
import FileListDialog from '@/components/Dialog/FileListDialog.vue';
import useUserStore from "@/store/modules/user.js";
import {delInvoiceLedgerByRegProductId} from "@/api/salesManagement/invoiceLedger.js";
const userStore = useUserStore();

defineOptions({
  name: "来票台账",
});

const modalRef = ref();
const editmodalRef = ref();
const fileListRef = ref(null);
const fileListDialogVisible = ref(false);
const currentRowId = ref(null); // å½“前查看附件的行ID

const { proxy } = getCurrentInstance();
const multipleVal = ref([]);
@@ -168,6 +164,11 @@
      label: "供应商名称",
      prop: "supplierName",
      width: 240,
    },
    {
      label: "产品大类",
      prop: "productCategory",
      width: 150,
    },
    {
      label: "规格型号",
@@ -219,17 +220,8 @@
      width: 200,
    },
    {
      label: "附件",
      align: "center",
      prop: "commonFiles",
      dataType: "slot",
            fixed: "right",
      slot: "commonFilesRef",
      width: 120,
    },
    {
      fixed: "right",
      width: 150,
      width: 200,
      label: "操作",
      dataType: "slot",
      slot: "operation",
@@ -281,48 +273,152 @@
    });
};

const handleFiles = (fileList) => {
  fileList.forEach((e) => {
    proxy.$download.name(e.url);
  });
};

const changePage = ({ page, limit }) => {
  pagination.currentPage = page;
    pagination.pageSize = limit;
  onCurrentChange(page);
};

const handleCommand = (command, row) => {
  switch (command) {
    case "download":
      handleFiles(row.commonFiles);
      break;
    case "upload":
      console.log(row.commonFiles);
      openUoload(row.ticketRegistrationId);
      break;
const downLoadFile = row => {
  currentRowId.value = row.id;
  if (fileListRef.value) {
    fileListRef.value.open(row.commonFiles || []);
  }
};

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

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

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

// ä¸Šä¼ æˆåŠŸåŽåšä»€ä¹ˆ
const uploadSuccess = async (data) => {
  const { code } = await productUploadFile({
    ticketRegistrationId: data.id,
    tempFileIds: data.tempFileIds,
  });
  if (code === 200) {
    proxy.$modal.msgSuccess("提交成功");
    getTableData();
  }
};
// åˆ é™¤
const handleDelete = (row) => {

 src/views/procurementManagement/procurementInvoiceLedger/indexOld.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/procurementReport/index.vue

@@ -73,12 +73,14 @@
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { Download } from '@element-plus/icons-vue'
import PIMTable from '@/components/PIMTable/PIMTable.vue'
import { procurementBusinessSummaryListPage } from '@/api/procurementManagement/procurementReport'
import { productTreeList } from '@/api/basicData/product'

const { proxy } = getCurrentInstance()

// å“åº”式数据
const loading = ref(false)
@@ -269,7 +271,23 @@
}

const exportReport = () => {
  ElMessage.success('导出功能开发中...')
  const params = {}
  
  // æ—¶é—´èŒƒå›´
  if (searchForm.dateRange && searchForm.dateRange.length === 2) {
    params.entryDateStart = searchForm.dateRange[0]
    params.entryDateEnd = searchForm.dateRange[1]
  }
  
  // äº§å“ç±»åˆ«
  if (searchForm.productCategory) {
    const categoryName = findNodeLabelById(productOptions.value, searchForm.productCategory)
    if (categoryName) {
      params.productCategory = categoryName
    }
  }
  
  proxy.download("/procurementBusinessSummary/export", params, "采购业务汇总表.xlsx")
}



 src/views/productionManagement/productStructure/Detail/index.vue

@@ -2,85 +2,136 @@
  <div class="app-container">
    <PageHeader content="产品结构详情">
      <template #right-button>
        <el-button v-if="!dataValue.isEdit && !isOrderPage" type="primary" @click="dataValue.isEdit = true">编辑
        <el-button v-if="!dataValue.isEdit && !isOrderPage"
                   type="primary"
                   @click="dataValue.isEdit = true">编辑
        </el-button>
        <el-button v-if="dataValue.isEdit && !isOrderPage" type="primary" @click="cancelEdit">取消
        <el-button v-if="dataValue.isEdit && !isOrderPage"
                   type="primary"
                   @click="cancelEdit">取消
        </el-button>
        <el-button v-if="!isOrderPage" type="primary" :loading="dataValue.loading" @click="submit"
          :disabled="!dataValue.isEdit">确认
        <el-button v-if="!isOrderPage"
                   type="primary"
                   :loading="dataValue.loading"
                   @click="submit"
                   :disabled="!dataValue.isEdit">确认
        </el-button>
      </template>
    </PageHeader>
    <el-table :data="tableData" border :preserve-expanded-content="false" :default-expand-all="true"
      style="width: 100%">
    <el-table :data="tableData"
              border
              :preserve-expanded-content="false"
              :default-expand-all="true"
              style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <el-form ref="form" :model="dataValue">
            <el-table :data="dataValue.dataList" row-key="tempId" default-expand-all
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="width: 100%">
              <el-table-column prop="productName" label="产品" />
              <el-table-column prop="model" label="规格">
          <el-form ref="form"
                   :model="dataValue">
            <el-table :data="dataValue.dataList"
                      row-key="tempId"
                      default-expand-all
                      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                      style="width: 100%">
              <el-table-column prop="productName"
                               label="产品" />
              <el-table-column prop="model"
                               label="规格">
                <template #default="{ row, $index }">
                  <el-form-item v-if="dataValue.isEdit"
                    :rules="[{ required: true, message: '请选择规格', trigger: ['blur', 'change'] }]" style="margin: 0">
                    <el-select v-model="row.model" placeholder="请选择规格" clearable
                      :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)"
                      style="width: 100%" @visible-change="(v) => { if (v) openDialog(row.tempId) }">
                      <el-option v-if="row.model" :label="row.model" :value="row.model" />
                                :rules="[{ required: true, message: '请选择规格', trigger: ['blur','change'] }]"
                                style="margin: 0">
                    <el-select v-model="row.model"
                               placeholder="请选择规格"
                               clearable
                               :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)"
                               style="width: 100%"
                               @visible-change="(v) => { if (v) openDialog(row.tempId) }">
                      <el-option v-if="row.model"
                                 :label="row.model"
                                 :value="row.model" />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="processName" label="消耗工序">
              <el-table-column prop="processName"
                               label="消耗工序">
                <template #default="{ row, $index }">
                  <el-form-item v-if="dataValue.isEdit"
                    :rules="dataValue.dataList.some(item => (item as any).tempId === row.tempId) ? [] : [{ required: true, message: '请选择消耗工序', trigger: 'change' }]"
                    style="margin: 0">
                    <el-select v-model="row.processId" placeholder="请选择" filterable clearable style="width: 100%"
                      :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)">
                      <el-option v-for="item in dataValue.processOptions" :key="item.id" :label="item.name"
                        :value="item.id" />
                                :rules="dataValue.dataList.some(item => (item as any).tempId === row.tempId) ? [] : [{ required: true, message: '请选择消耗工序', trigger: 'change' }]"
                                style="margin: 0">
                    <el-select v-model="row.processId"
                               placeholder="请选择"
                               filterable
                               clearable
                               style="width: 100%"
                               :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)">
                      <el-option v-for="item in dataValue.processOptions"
                                 :key="item.id"
                                 :label="item.name"
                                 :value="item.id" />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="unitQuantity" label="单位产出所需数量">
              <el-table-column prop="unitQuantity"
                               label="单位产出所需数量">
                <template #default="{ row, $index }">
                  <el-form-item v-if="dataValue.isEdit"
                    :rules="[{ required: true, message: '请输入单位产出所需数量', trigger: ['blur', 'change'] }]"
                    style="margin: 0">
                    <el-input-number v-model="row.unitQuantity" :min="0" :precision="2" :step="1"
                      controls-position="right" style="width: 100%"
                      :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" />
                                :rules="[{ required: true, message: '请输入单位产出所需数量', trigger: ['blur','change'] }]"
                                style="margin: 0">
                    <el-input-number v-model="row.unitQuantity"
                                     :min="0"
                                     :precision="2"
                                     :step="1"
                                     controls-position="right"
                                     style="width: 100%"
                                     :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column v-if="isOrderPage" prop="demandedQuantity" label="需求总量">
              <el-table-column v-if="isOrderPage"
                               prop="demandedQuantity"
                               label="需求总量">
                <template #default="{ row, $index }">
                  <el-form-item v-if="dataValue.isEdit"
                    :rules="[{ required: true, message: '请输入需求总量', trigger: ['blur', 'change'] }]" style="margin: 0">
                    <el-input-number v-model="row.demandedQuantity" :min="0" :precision="2" :step="1"
                      controls-position="right" style="width: 100%"
                      :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" />
                                :rules="[{ required: true, message: '请输入需求总量', trigger: ['blur','change'] }]"
                                style="margin: 0">
                    <el-input-number v-model="row.demandedQuantity"
                                     :min="0"
                                     :precision="2"
                                     :step="1"
                                     controls-position="right"
                                     style="width: 100%"
                                     :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="单位">
              <el-table-column prop="unit"
                               label="单位">
                <template #default="{ row, $index }">
                  <el-form-item v-if="dataValue.isEdit"
                    :rules="[{ required: true, message: '请输入单位', trigger: ['blur', 'change'] }]" style="margin: 0">
                    <el-input v-model="row.unit" placeholder="请输入单位" clearable
                      :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" />
                                :rules="[{ required: true, message: '请输入单位', trigger: ['blur','change'] }]"
                                style="margin: 0">
                    <el-input v-model="row.unit"
                              placeholder="请输入单位"
                              clearable
                               :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="200">
              <el-table-column label="操作"
                               fixed="right"
                               width="200">
                <template #default="{ row, $index }">
                  <el-button
                    v-if="dataValue.isEdit && !dataValue.dataList.some(item => (item as any).tempId === row.tempId)"
                    type="danger" text @click="removeItem(row.tempId)">删除
                  <el-button v-if="dataValue.isEdit && !dataValue.dataList.some(item => (item as any).tempId === row.tempId)"
                             type="danger"
                             text
                             @click="removeItem(row.tempId)">删除
                  </el-button>
                  <el-button v-if="dataValue.isEdit" type="primary" text @click="addItem2(row.tempId)">添加
                  <el-button v-if="dataValue.isEdit"
                             type="primary"
                             text
                             @click="addItem2(row.tempId)">添加
                  </el-button>
                </template>
              </el-table-column>
@@ -88,271 +139,175 @@
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="BOM编号" prop="bomNo" />
      <el-table-column label="产品名称" prop="productName" />
      <el-table-column label="规格型号" prop="model" />
      <el-table-column label="BOM编号"
                       prop="bomNo" />
      <el-table-column label="产品名称"
                       prop="productName" />
      <el-table-column label="规格型号"
                       prop="model" />
    </el-table>
    <product-select-dialog v-if="dataValue.showProductDialog" v-model:model-value="dataValue.showProductDialog"
      @confirm="handleProduct" />
    <product-select-dialog v-if="dataValue.showProductDialog"
                           v-model:model-value="dataValue.showProductDialog"
                           @confirm="handleProduct" />
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  defineAsyncComponent,
  defineComponent,
  onMounted,
  reactive,
  ref,
} from "vue";
import { queryList, add } from "@/api/productionManagement/productStructure.js";
import { listProcessBom } from "@/api/productionManagement/productionOrder.js";
import { list } from "@/api/productionManagement/productionProcess";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
  import {
    computed,
    defineAsyncComponent,
    defineComponent,
    onMounted,
    reactive,
    ref,
  } from "vue";
  import { queryList, add } from "@/api/productionManagement/productStructure.js";
  import { listProcessBom } from "@/api/productionManagement/productionOrder.js";
  import { list } from "@/api/productionManagement/productionProcess";
  import { ElMessage } from "element-plus";
  import { useRoute, useRouter } from "vue-router";

defineComponent({
  name: "StructureEdit",
});
  defineComponent({
    name: "StructureEdit",
  });

const ProductSelectDialog = defineAsyncComponent(
  () => import("@/views/basicData/product/ProductSelectDialog.vue")
);
const emit = defineEmits(["update:router"]);
const form = ref();
  const ProductSelectDialog = defineAsyncComponent(
    () => import("@/views/basicData/product/ProductSelectDialog.vue")
  );
  const emit = defineEmits(["update:router"]);
  const form = ref();

const route = useRoute();
const router = useRouter();
const routeId = computed({
  get() {
    return route.query.id;
  },
  const route = useRoute();
  const router = useRouter();
  const routeId = computed({
    get() {
      return route.query.id;
    },

  set(val) {
    emit("update:router", val);
  },
});
    set(val) {
      emit("update:router", val);
    },
  });

// ä»Žè·¯ç”±å‚数获取产品信息
const routeBomNo = computed(() => route.query.bomNo || "");
const routeProductName = computed(() => route.query.productName || "");
const routeProductModelName = computed(
  () => route.query.productModelName || ""
);
const routeOrderId = computed(() => route.query.orderId);
const pageType = computed(() => route.query.type);
const isOrderPage = computed(
  () => pageType.value === "order" && routeOrderId.value
);
  // ä»Žè·¯ç”±å‚数获取产品信息
  const routeBomNo = computed(() => route.query.bomNo || "");
  const routeProductName = computed(() => route.query.productName || "");
  const routeProductModelName = computed(
    () => route.query.productModelName || ""
  );
  const routeOrderId = computed(() => route.query.orderId);
  const pageType = computed(() => route.query.type);
  const isOrderPage = computed(
    () => pageType.value === "order" && routeOrderId.value
  );

const dataValue = reactive({
  dataList: [],
  productOptions: [],
  processOptions: [],
  showProductDialog: false,
  currentRowIndex: null,
  currentRowName: null,
  loading: false,
  isEdit: false,
});
  const dataValue = reactive({
    dataList: [],
    productOptions: [],
    processOptions: [],
    showProductDialog: false,
    currentRowIndex: null,
    currentRowName: null,
    loading: false,
    isEdit: false,
  });

const tableData = reactive([
  {
    productName: "",
    model: "",
    bomNo: "",
  },
]);
  const tableData = reactive([
    {
      productName: "",
      model: "",
      bomNo: "",
    },
  ]);

const openDialog = (tempId: any) => {
  console.log(tempId, "tempId");
  dataValue.currentRowName = tempId;
  dataValue.showProductDialog = true;
};
  const openDialog = (tempId: any) => {
    console.log(tempId, "tempId");
    dataValue.currentRowName = tempId;
    dataValue.showProductDialog = true;
  };

const fetchData = async () => {
  if (isOrderPage.value) {
    // è®¢å•æƒ…况：使用订单的产品结构接口
    const { data } = await listProcessBom({ orderId: routeOrderId.value });
    dataValue.dataList = (data as any) || [];
  } else {
    // éžè®¢å•æƒ…况：使用原来的接口
    const { data } = await queryList(routeId.value);
    dataValue.dataList = (data as any) || [];
    // ä¸ºæ‰€æœ‰é¡¹åŠå…¶å­é¡¹è®¾ç½®name属性
    const setNameRecursively = (items: any[]) => {
      items.forEach((item: any) => {
        item.tempId = item.id;
        item.processName =
          dataValue.processOptions.find(option => option.id === item.processId)
            ?.name || "";
        if (item.children && item.children.length > 0) {
          setNameRecursively(item.children);
  const fetchData = async () => {
    if (isOrderPage.value) {
      // è®¢å•æƒ…况：使用订单的产品结构接口
      const { data } = await listProcessBom({ orderId: routeOrderId.value });
      dataValue.dataList = (data as any) || [];
    } else {
      // éžè®¢å•æƒ…况：使用原来的接口
      const { data } = await queryList(routeId.value);
      dataValue.dataList = (data as any) || [];
      // ä¸ºæ‰€æœ‰é¡¹åŠå…¶å­é¡¹è®¾ç½®name属性
      const setNameRecursively = (items: any[]) => {
        items.forEach((item: any) => {
          item.tempId = item.id;
          item.processName =
            dataValue.processOptions.find(option => option.id === item.processId)
              ?.name || "";
          if (item.children && item.children.length > 0) {
            setNameRecursively(item.children);
          }
        });
      };
      setNameRecursively(dataValue.dataList);
      console.log(dataValue.dataList, "dataValue.dataList");
    }
  };

  const fetchProcessOptions = async () => {
    const { data } = await list();
    dataValue.processOptions = data as any;
  };

  const handleProduct = (row: any) => {
    if (row?.length > 1) {
      ElMessage.error("只能选择一个产品");
    }
    const productData = row[0];

    //  æœ€å¤–层组件中，与当前产品相同的产品只能有一个
    const isTopLevel = dataValue.dataList.some(item => (item as any).tempId === dataValue.currentRowName);
    if (isTopLevel) {
      if (productData.productName === tableData[0].productName &&
        productData.model === tableData[0].model) {
        //  æŸ¥æ‰¾æ˜¯å¦å·²ç»æœ‰å…¶ä»–顶层行已经是这个产品
        const hasOther = dataValue.dataList.some(item =>
          (item as any).tempId !== dataValue.currentRowName &&
          (item as any).productName === tableData[0].productName &&
          (item as any).model === tableData[0].model
        );
        if (hasOther) {
          ElMessage.warning("最外层和当前产品一样的一级只能有一个");
          return;
        }
      });
    };
    setNameRecursively(dataValue.dataList);
    console.log(dataValue.dataList, "dataValue.dataList");
  }
};

const fetchProcessOptions = async () => {
  const { data } = await list();
  dataValue.processOptions = data as any;
};

const handleProduct = (row: any) => {
  if (row?.length > 1) {
    ElMessage.error("只能选择一个产品");
  }
  const productData = row[0];

  //  æœ€å¤–层组件中，与当前产品相同的产品只能有一个
  const isTopLevel = dataValue.dataList.some(item => (item as any).tempId === dataValue.currentRowName);
  if (isTopLevel) {
    if (productData.productName === tableData[0].productName &&
      productData.model === tableData[0].model) {
      //  æŸ¥æ‰¾æ˜¯å¦å·²ç»æœ‰å…¶ä»–顶层行已经是这个产品
      const hasOther = dataValue.dataList.some(item =>
        (item as any).tempId !== dataValue.currentRowName &&
        (item as any).productName === tableData[0].productName &&
        (item as any).model === tableData[0].model
      );
      if (hasOther) {
        ElMessage.warning("最外层和当前产品一样的一级只能有一个");
        return;
      }
    }
  }
  // dataValue.dataList[dataValue.currentRowIndex].productName =
  //   row[0].productName;
  // dataValue.dataList[dataValue.currentRowIndex].model = row[0].model;
  // dataValue.dataList[dataValue.currentRowIndex].productModelId = row[0].id;
  // dataValue.dataList[dataValue.currentRowIndex].unit = row[0].unit || "";
  dataValue.dataList.map(item => {
    if (item.tempId === dataValue.currentRowName) {
    // dataValue.dataList[dataValue.currentRowIndex].productName =
    //   row[0].productName;
    // dataValue.dataList[dataValue.currentRowIndex].model = row[0].model;
    // dataValue.dataList[dataValue.currentRowIndex].productModelId = row[0].id;
    // dataValue.dataList[dataValue.currentRowIndex].unit = row[0].unit || "";
    dataValue.dataList.map(item => {
      if (item.tempId === dataValue.currentRowName) {
        item.productName = productData.productName;
        item.model = productData.model;
        item.productModelId = productData.id;
        item.unit = productData.unit || "";
        return;
      }
      childItem(item, dataValue.currentRowName, productData);
    });
    dataValue.showProductDialog = false;
  };
  const childItem = (item: any, tempId: any, productData: any) => {
    if (item.tempId === tempId) {
      item.productName = productData.productName;
      item.model = productData.model;
      item.productModelId = productData.id;
      item.unit = productData.unit || "";
      return;
      return true;
    }
    childItem(item, dataValue.currentRowName, productData);
  });
  dataValue.showProductDialog = false;
};
const childItem = (item: any, tempId: any, productData: any) => {
  if (item.tempId === tempId) {
    item.productName = productData.productName;
    item.model = productData.model;
    item.productModelId = productData.id;
    item.unit = productData.unit || "";
    return true;
  }
  if (item.children && item.children.length > 0) {
    for (let child of item.children) {
      if (childItem(child, tempId, productData)) {
        return true;
      }
    }
  }
  return false;
};

// é€’归校验所有层级的表单数据
const validateAll = () => {
  let isValid = true;

  // æ ¡éªŒå‡½æ•°
  const validateItem = (item: any, isTopLevel = false) => {
    // æ ¡éªŒå½“前项的必填字段
    if (!item.model) {
      ElMessage.error("请选择规格");
      isValid = false;
      return;
    }
    if (!isTopLevel && !item.processId) {
      ElMessage.error("请选择消耗工序");
      isValid = false;
      return;
    }
    if (!item.unitQuantity) {
      ElMessage.error("请输入单位产出所需数量");
      isValid = false;
      return;
    }
    if (isOrderPage.value && !item.demandedQuantity) {
      ElMessage.error("请输入需求总量");
      isValid = false;
      return;
    }
    if (!item.unit) {
      ElMessage.error("请输入单位");
      isValid = false;
      return;
    }

    // é€’归校验子项
    if (item.children && item.children.length > 0) {
      item.children.forEach(child => {
        validateItem(child, false);
      });
    }
  };

  // éåŽ†æ‰€æœ‰é¡¶å±‚项
  dataValue.dataList.forEach(item => {
    validateItem(item, true);
  });

  return isValid;
};

const submit = () => {
  dataValue.loading = true;

  // å…ˆè¿›è¡Œè¡¨å•æ ¡éªŒ
  const valid = validateAll();
  console.log(dataValue.dataList, "dataValue.dataList");
  if (valid) {
    add({
      bomId: routeId.value,
      children: dataValue.dataList || [],
    })
      .then(res => {
        router.push({
          path: "/productionManagement/productionManagement/productStructure/index",
        });
        ElMessage.success("保存成功");
        dataValue.loading = false;
      })
      .catch(() => {
        dataValue.loading = false;
      });
  } else {
    dataValue.loading = false;
  }
};

const removeItem = (tempId: string) => {
  // å…ˆå°è¯•ä»Žé¡¶å±‚删除
  const topIndex = dataValue.dataList.findIndex(item => item.tempId === tempId);
  if (topIndex !== -1) {
    dataValue.dataList.splice(topIndex, 1);
    return;
  }

  // é€’归删除子项
  const delchildItem = (items: any[], tempId: any) => {
    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      if (item.tempId === tempId) {
        items.splice(i, 1);
        return true;
      }
      if (item.children && item.children.length > 0) {
        if (delchildItem(item.children, tempId)) {
      for (let child of item.children) {
        if (childItem(child, tempId, productData)) {
          return true;
        }
      }
@@ -360,15 +315,142 @@
    return false;
  };

  dataValue.dataList.forEach(item => {
    if (item.children && item.children.length > 0) {
      delchildItem(item.children, tempId);
  // é€’归校验所有层级的表单数据
  const validateAll = () => {
    let isValid = true;

    // æ ¡éªŒå‡½æ•°
    const validateItem = (item: any, isTopLevel = false) => {
      // æ ¡éªŒå½“前项的必填字段
      if (!item.model) {
        ElMessage.error("请选择规格");
        isValid = false;
        return;
      }
      if (!isTopLevel && !item.processId) {
        ElMessage.error("请选择消耗工序");
        isValid = false;
        return;
      }
      if (!item.unitQuantity) {
        ElMessage.error("请输入单位产出所需数量");
        isValid = false;
        return;
      }
      if (isOrderPage.value && !item.demandedQuantity) {
        ElMessage.error("请输入需求总量");
        isValid = false;
        return;
      }
      // if (!item.unit) {
      //   ElMessage.error("请输入单位");
      //   isValid = false;
      //   return;
      // }

      // é€’归校验子项
      if (item.children && item.children.length > 0) {
        item.children.forEach(child => {
          validateItem(child, false);
        });
      }
    };

    // éåŽ†æ‰€æœ‰é¡¶å±‚项
    dataValue.dataList.forEach(item => {
      validateItem(item, true);
    });

    return isValid;
  };

  const submit = () => {
    dataValue.loading = true;

    // å…ˆè¿›è¡Œè¡¨å•æ ¡éªŒ
    const valid = validateAll();
    console.log(dataValue.dataList, "dataValue.dataList");
    if (valid) {
      add({
        bomId: routeId.value,
        children: dataValue.dataList || [],
      })
        .then(res => {
          router.push({
            path: "/productionManagement/productionManagement/productStructure/index",
          });
          ElMessage.success("保存成功");
          dataValue.loading = false;
        })
        .catch(() => {
          dataValue.loading = false;
        });
    } else {
      dataValue.loading = false;
    }
  });
};
const addItem2 = tempId => {
  dataValue.dataList.map(item => {
  };

  const removeItem = (tempId:string) => {
    // å…ˆå°è¯•ä»Žé¡¶å±‚删除
    const topIndex = dataValue.dataList.findIndex(item => item.tempId === tempId);
    if (topIndex !== -1) {
      dataValue.dataList.splice(topIndex, 1);
      return;
    }

    // é€’归删除子项
    const delchildItem = (items: any[], tempId: any) => {
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if (item.tempId === tempId) {
          items.splice(i, 1);
          return true;
        }
        if (item.children && item.children.length > 0) {
          if (delchildItem(item.children, tempId)) {
            return true;
          }
        }
      }
      return false;
    };

    dataValue.dataList.forEach(item => {
      if (item.children && item.children.length > 0) {
        delchildItem(item.children, tempId);
      }
    });
  };
  const addItem2 = tempId => {
    dataValue.dataList.map(item => {
      if (item.tempId === tempId) {
        if (!item.children) {
          item.children = [];
        }
        item.children.push({
          parentId: item.id || "",
          parentTempId: item.tempId || "",
          productName: "",
          productId: "",
          model: undefined,
          productModelId: undefined,
          processId: "",
          processName: "",
          unitQuantity: 0,
          demandedQuantity: 0,
          unit: "",
          children: [],

          tempId: new Date().getTime(),
        });
        return;
      }
      addchildItem(item, tempId);
    });
  };
  const addchildItem = (item: any, tempId: any) => {
    if (item.tempId === tempId) {
      console.log(item, "item");
      if (!item.children) {
        item.children = [];
      }
@@ -380,70 +462,55 @@
        model: undefined,
        productModelId: undefined,
        processId: "",
        processName: "",
        unitQuantity: 0,
        demandedQuantity: 0,
        unit: "",
        children: [],

        unit: "",
        tempId: new Date().getTime(),
      });
      return;
      return true;
    }
    addchildItem(item, tempId);
  });
};
const addchildItem = (item: any, tempId: any) => {
  if (item.tempId === tempId) {
    console.log(item, "item");
    if (!item.children) {
      item.children = [];
    }
    item.children.push({
      parentId: item.id || "",
      parentTempId: item.tempId || "",
      productName: "",
      productId: "",
      model: undefined,
      productModelId: undefined,
      processId: "",
      unitQuantity: 0,
      demandedQuantity: 0,
      children: [],
      unit: "",
      tempId: new Date().getTime(),
    });
    return true;
  }
  if (item.children && item.children.length > 0) {
    for (let child of item.children) {
      if (addchildItem(child, tempId)) {
        return true;
    if (item.children && item.children.length > 0) {
      for (let child of item.children) {
        if (addchildItem(child, tempId)) {
          return true;
        }
      }
    }
  }
  return false;
};
    return false;
  };

const cancelEdit = () => {
  dataValue.isEdit = false;
  // dataValue.dataList = dataValue.dataList.filter(item => item.id !== undefined);
  fetchData();
};
  const getPropPath = (row, field) => {
    // ä¸ºæ¯ä¸ªrow生成唯一的路径
    // ä½¿ç”¨row.id或索引作为唯一标识
    let path = "dataList";

onMounted(async () => {
  // ä»Žè·¯ç”±å‚数回显数据
  tableData[0].productName = routeProductName.value as string;
  tableData[0].model = routeProductModelName.value as string;
  tableData[0].bomNo = routeBomNo.value as string;
    // ç®€å•å®žçŽ°ï¼šä½¿ç”¨row的id或一个唯一标识
    const uniqueId = row.id || Math.floor(Math.random() * 10000);
    path += `.${uniqueId}`;

  // è®¢å•æƒ…况下禁用编辑
  if (isOrderPage.value) {
    return path + `.${field}`;
  };

  const cancelEdit = () => {
    dataValue.isEdit = false;
  }
    // dataValue.dataList = dataValue.dataList.filter(item => item.id !== undefined);
    fetchData();
  };

  // å…ˆåŠ è½½å·¥åºé€‰é¡¹ï¼Œå†åŠ è½½æ•°æ®ï¼Œç¡®ä¿el-select能够正确回显
  await fetchProcessOptions();
  await fetchData();
});
  onMounted(async () => {
    // ä»Žè·¯ç”±å‚数回显数据
    tableData[0].productName = routeProductName.value as string;
    tableData[0].model = routeProductModelName.value as string;
    tableData[0].bomNo = routeBomNo.value as string;

    // è®¢å•æƒ…况下禁用编辑
    if (isOrderPage.value) {
      dataValue.isEdit = false;
    }

    // å…ˆåŠ è½½å·¥åºé€‰é¡¹ï¼Œå†åŠ è½½æ•°æ®ï¼Œç¡®ä¿el-select能够正确回显
    await fetchProcessOptions();
    await fetchData();
  });
</script>

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

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

<script setup>
import {ref} from "vue";
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/productionReporting/components/formDia.vue

@@ -94,6 +94,7 @@

<script setup>
import {ref} from "vue";
// import {getStaffJoinInfo, staffJoinAdd, staffJoinUpdate} from "@/api/personnelManagement/onboarding.js";
import {userListNoPageByTenantId} from "@/api/system/user.js";
import {productionReport, productionReportUpdate} from "@/api/productionManagement/productionReporting.js";
const { proxy } = getCurrentInstance()

 src/views/productionManagement/workOrder/components/filesDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,202 @@
<template>
  <div>
    <el-dialog v-model="dialogVisible" title="工单附件" width="50%" @close="closeDia">
      <div style="margin-bottom: 10px; text-align: right">
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          :action="uploadUrl"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :before-upload="beforeUpload"
          name="file"
          :show-file-list="false"
          :headers="headers"
          accept="image/*"
          style="display: inline; margin-right: 10px"
        >
          <el-button type="primary">上传图片</el-button>
        </el-upload>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
      </div>

      <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :total="page.total"
        :tableLoading="tableLoading"
        :isSelection="true"
        @selection-change="handleSelectionChange"
        @pagination="paginationSearch"
        height="500"
      />

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDia">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <filePreview ref="filePreviewRef" />
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { ElMessageBox } from "element-plus";
import { getToken } from "@/utils/auth.js";
import PIMTable from "@/components/PIMTable/PIMTable.vue";
import filePreview from "@/components/filePreview/index.vue";
import {
  productWorkOrderFileAdd,
  productWorkOrderFileDel,
  productWorkOrderFileListPage,
} from "@/api/productionManagement/productWorkOrderFile.js";

const { proxy } = getCurrentInstance();
const emit = defineEmits(["close"]);

const dialogVisible = ref(false);
const currentWorkOrderId = ref("");
const selectedRows = ref([]);
const filePreviewRef = ref();

const tableColumn = ref([
  {
    label: "文件名称",
    prop: "name",
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    width: 120,
    operation: [
      {
        name: "下载",
        type: "text",
        clickFun: row => {
          proxy.$download.name(row.url);
        },
      },
      {
        name: "预览",
        type: "text",
        clickFun: row => {
          filePreviewRef.value?.open(row.url);
        },
      },
    ],
  },
]);

const page = reactive({
  current: 1,
  size: 100,
  total: 0,
});
const tableData = ref([]);
const fileList = ref([]);
const tableLoading = ref(false);
const headers = ref({
  Authorization: "Bearer " + getToken(),
});
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/file/upload");

const beforeUpload = file => {
  const isImage = file?.type?.startsWith("image/");
  if (!isImage) {
    proxy.$modal.msgError("只能上传图片文件");
  }
  return isImage;
};

const openDialog = row => {
  dialogVisible.value = true;
  currentWorkOrderId.value = row.id;
  page.current = 1;
  getList();
};

const closeDia = () => {
  dialogVisible.value = false;
  emit("close");
};

const paginationSearch = obj => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};

const getList = () => {
  tableLoading.value = true;
  productWorkOrderFileListPage({
    workOrderId: currentWorkOrderId.value,
    current: page.current,
    size: page.size,
  })
    .then(res => {
      tableData.value = res.data.records || [];
      page.total = res.data.total || 0;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};

const handleSelectionChange = selection => {
  selectedRows.value = selection;
};

function handleUploadSuccess(res) {
  if (res.code == 200) {
    const fileRow = {
      name: res.data.originalName,
      url: res.data.tempPath,
      workOrderId: currentWorkOrderId.value,
    };
    productWorkOrderFileAdd(fileRow).then(() => {
      proxy.$modal.msgSuccess("文件上传成功");
      getList();
    });
  } else {
    proxy.$modal.msgError("文件上传失败");
  }
}

function handleUploadError() {
  proxy.$modal.msgError("文件上传失败");
}

const handleDelete = () => {
  if (selectedRows.value.length === 0) {
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  const ids = selectedRows.value.map(item => item.id);
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      productWorkOrderFileDel(ids).then(() => {
        proxy.$modal.msgSuccess("删除成功");
        getList();
      });
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};

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

<style scoped></style>


 src/views/productionManagement/workOrder/index.vue

@@ -209,6 +209,7 @@
        </span>
      </template>
    </el-dialog>
    <FilesDia ref="workOrderFilesRef" />
  </div>
</template>

@@ -220,10 +221,12 @@
    productWorkOrderPage,
    updateProductWorkOrder,
    addProductMain,
    downProductWorkOrder,
  } from "@/api/productionManagement/workOrder.js";
  import { getUserProfile, userListNoPageByTenantId } from "@/api/system/user.js";
  import QRCode from "qrcode";
  import { getCurrentInstance, reactive, toRefs } from "vue";
  import FilesDia from "./components/filesDia.vue";
  const { proxy } = getCurrentInstance();

  const tableColumn = ref([
@@ -307,7 +310,13 @@
        {
          name: "流转卡",
          clickFun: row => {
            showTransferCard(row);
            downloadAndPrintWorkOrder(row);
          },
        },
        {
          name: "附件",
          clickFun: row => {
            openWorkOrderFiles(row);
          },
        },
        {
@@ -330,6 +339,7 @@
  const transferCardQrUrl = ref("");
  const transferCardRowData = ref(null);
  const reportDialogVisible = ref(false);
  const workOrderFilesRef = ref(null);
  const userOptions = ref([]);
  const reportForm = reactive({
    planQuantity: 0,
@@ -395,6 +405,56 @@
      });
  };

  // ä¸‹è½½å¹¶æ‰“印工单流转卡（文件流）
  const downloadAndPrintWorkOrder = async row => {
    if (!row || !row.id) {
      proxy.$modal.msgError("缺少工单ID，无法下载流转卡");
      return;
    }
    const fileName = row.workOrderNo
      ? `工单流转卡_${row.workOrderNo}.xlsx`
      : "工单流转卡.xlsx";
    try {
      // è°ƒç”¨æŽ¥å£ï¼Œä»¥ responseType: 'blob' èŽ·å–文件流
      const blob = await downProductWorkOrder(row.id);

      if (!blob) {
        proxy.$modal.msgError("未获取到流转卡文件");
        return;
      }

      // åˆ›å»º Blob URL
      const fileBlob =
        blob instanceof Blob ? blob : new Blob([blob], { type: blob.type || "application/octet-stream" });
      const url = window.URL.createObjectURL(fileBlob);

      // åˆ›å»ºéšè— iframe，用于触发浏览器打印
      const iframe = document.createElement("iframe");
      iframe.style.position = "fixed";
      iframe.style.right = "0";
      iframe.style.bottom = "0";
      iframe.style.width = "0";
      iframe.style.height = "0";
      iframe.style.border = "0";
      iframe.src = url;
      document.body.appendChild(iframe);

      iframe.onload = () => {
        try {
          iframe.contentWindow?.focus();
          iframe.contentWindow?.print();
        } catch (e) {
          console.error("自动调用打印失败", e);
          // é€€è€Œæ±‚其次，打开新窗口由用户手动打印
          window.open(url);
        }
      };
    } catch (e) {
      console.error("下载工单流转卡失败", e);
      proxy.$modal.msgError("下载工单流转卡失败");
    }
  };

  const showTransferCard = async row => {
    transferCardRowData.value = row;
    const qrContent = String(row.id);
@@ -450,6 +510,10 @@
    reportDialogVisible.value = true;
  };

  const openWorkOrderFiles = row => {
    workOrderFilesRef.value?.openDialog(row);
  };

  const handleReport = () => {
    if (reportForm.planQuantity <= 0) {
      ElMessageBox.alert("待生产数量为0，无法报工", "提示", {

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

@@ -18,13 +18,17 @@
                  @change="getModels"
                  :data="productOptions"
                  :render-after-expand="false"
                  :disabled="operationType === 'edit'"
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格型号：" prop="model">
              <el-input v-model="form.model" placeholder="请输入" clearable/>
            <el-form-item label="规格型号：" prop="productModelId">
              <el-select v-model="form.productModelId" 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-col :span="12">
@@ -49,7 +53,7 @@
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="单位：" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入" clearable/>
              <el-input v-model="form.unit" placeholder="请输入" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -121,7 +125,7 @@
<script setup>
import {ref, reactive, toRefs, getCurrentInstance, nextTick} from "vue";
import {getOptions} from "@/api/procurementManagement/procurementLedger.js";
import {productTreeList} from "@/api/basicData/product.js";
import {modelList, productTreeList} from "@/api/basicData/product.js";
import {qualityInspectAdd, qualityInspectUpdate} from "@/api/qualityManagement/rawMaterialInspection.js";
import {userListNoPage} from "@/api/system/user.js";
import {qualityInspectDetailByProductId, getQualityTestStandardParamByTestStandardId} from "@/api/qualityManagement/metricMaintenance.js";
@@ -138,6 +142,7 @@
    checkName: "",
    productName: "",
    productId: "",
    productModelId: "",
    model: "",
    testStandardId: "",
    unit: "",
@@ -150,7 +155,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" }],
    productModelId: [{ required: false, message: "请选择", trigger: "change" }],
    testStandardId: [{required: false, message: "请选择指标", trigger: "change"}],
    unit: [{ required: false, message: "请输入", trigger: "blur" }],
    quantity: [{ required: true, message: "请输入", trigger: "blur" }],
@@ -190,6 +195,7 @@
const userList = ref([]);
const currentProductId = ref(0);
const testStandardOptions = ref([]); // æŒ‡æ ‡é€‰æ‹©ä¸‹æ‹‰æ¡†æ•°æ®
const modelOptions = ref([]);

// æ‰“开弹框
const openDialog = async (type, row) => {
@@ -257,12 +263,24 @@
  });
};
const getModels = (value) => {
    currentProductId.value = value
  form.value.productModelId = undefined;
  form.value.unit = undefined;
  modelOptions.value = [];
  currentProductId.value = value
  form.value.productName = findNodeById(productOptions.value, value);
    if (currentProductId.value) {
        getList();
    }
  modelList({ id: value }).then((res) => {
    modelOptions.value = res;
  })
  if (currentProductId.value) {
    getList();
  }
};

const handleChangeModel = (value) => {
  form.value.model = modelOptions.value.find(item => item.id == value)?.model || '';
  form.value.unit = modelOptions.value.find(item => item.id == value)?.unit || '';
}

const findNodeById = (nodes, productId) => {
  for (let i = 0; i < nodes.length; i++) {
    if (nodes[i].value === productId) {

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

@@ -23,6 +23,7 @@
                  @change="getModels"
                  :data="productOptions"
                  :render-after-expand="false"
                  :disabled="operationType === 'edit'"
                  style="width: 100%"
              />
            </el-form-item>
@@ -30,8 +31,11 @@
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="规格型号：" prop="model">
              <el-input v-model="form.model" placeholder="请输入" clearable/>
            <el-form-item label="规格型号：" prop="productModelId">
              <el-select v-model="form.productModelId" 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-col :span="12">
@@ -56,7 +60,7 @@
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="单位：" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入" clearable/>
              <el-input v-model="form.unit" placeholder="请输入" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -128,7 +132,7 @@
<script setup>
import {ref, reactive, toRefs, getCurrentInstance, nextTick} from "vue";
import {getOptions} from "@/api/procurementManagement/procurementLedger.js";
import {productTreeList} from "@/api/basicData/product.js";
import {modelList, productTreeList} from "@/api/basicData/product.js";
import {qualityInspectAdd, qualityInspectUpdate} from "@/api/qualityManagement/rawMaterialInspection.js";
import {qualityInspectDetailByProductId, getQualityTestStandardParamByTestStandardId} from "@/api/qualityManagement/metricMaintenance.js";
import {userListNoPage} from "@/api/system/user.js";
@@ -145,6 +149,7 @@
    checkName: "",
    productName: "",
    productId: "",
    productModelId: "",
    model: "",
    testStandardId: "",
    unit: "",
@@ -157,7 +162,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" }],
    productModelId: [{ required: false, message: "请选择", trigger: "change" }],
    testStandardId: [{required: false, message: "请选择指标", trigger: "change"}],
    unit: [{ required: false, message: "请输入", trigger: "blur" }],
    quantity: [{ required: true, message: "请输入", trigger: "blur" }],
@@ -197,6 +202,7 @@
const tableLoading = ref(false);
const currentProductId = ref(0);
const testStandardOptions = ref([]); // æŒ‡æ ‡é€‰æ‹©ä¸‹æ‹‰æ¡†æ•°æ®
const modelOptions = ref([]);

// æ‰“开弹框
const openDialog = async (type, row) => {
@@ -265,12 +271,24 @@
  });
};
const getModels = (value) => {
    currentProductId.value = value
  form.value.productModelId = undefined;
  form.value.unit = undefined;
  modelOptions.value = [];
  currentProductId.value = value
  form.value.productName = findNodeById(productOptions.value, value);
    if (currentProductId.value) {
        getList();
    }
  modelList({ id: value }).then((res) => {
    modelOptions.value = res;
  })
  if (currentProductId.value) {
    getList();
  }
};

const handleChangeModel = (value) => {
  form.value.model = modelOptions.value.find(item => item.id == value)?.model || '';
  form.value.unit = modelOptions.value.find(item => item.id == value)?.unit || '';
}

const findNodeById = (nodes, productId) => {
  for (let i = 0; i < nodes.length; i++) {
    if (nodes[i].value === productId) {

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

@@ -34,6 +34,7 @@
                  @change="getModels"
                  :data="productOptions"
                  :render-after-expand="false"
                  :disabled="operationType === 'edit'"
                  style="width: 100%"
              />
            </el-form-item>
@@ -41,8 +42,11 @@
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="规格型号：" prop="model">
              <el-input v-model="form.model" placeholder="请输入" clearable/>
            <el-form-item label="规格型号：" prop="productModelId">
              <el-select v-model="form.productModelId" 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-col :span="12">
@@ -67,7 +71,7 @@
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="单位：" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入" clearable/>
              <el-input v-model="form.unit" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -141,9 +145,8 @@
<script setup>
import {ref, reactive, toRefs, getCurrentInstance, nextTick} from "vue";
import {getOptions} from "@/api/procurementManagement/procurementLedger.js";
import {productTreeList} from "@/api/basicData/product.js";
import {modelList, productTreeList} from "@/api/basicData/product.js";
import {qualityInspectAdd, qualityInspectUpdate} from "@/api/qualityManagement/rawMaterialInspection.js";
import {ElMessageBox} from "element-plus";
import {qualityInspectParamDel, qualityInspectParamInfo} from "@/api/qualityManagement/qualityInspectParam.js";
import {qualityInspectDetailByProductId, getQualityTestStandardParamByTestStandardId} from "@/api/qualityManagement/metricMaintenance.js";

@@ -159,6 +162,7 @@
    checkName: "",
    productName: "",
    productId: "",
    productModelId: "",
    model: "",
    testStandardId: "",
    unit: "",
@@ -171,7 +175,7 @@
    supplier: [{required: true, message: "请输入", trigger: "blur"}],
    checkName: [{required: false, message: "请输入", trigger: "blur"}],
    productId: [{required: true, message: "请输入", trigger: "blur"}],
    model: [{required: false, message: "请输入", trigger: "blur"}],
    productModelId: [{required: false, message: "请选择产品型号", trigger: "change"}],
    testStandardId: [{required: false, message: "请选择指标", trigger: "change"}],
    unit: [{required: false, message: "请输入", trigger: "blur"}],
    quantity: [{required: true, message: "请输入", trigger: "blur"}],
@@ -211,6 +215,7 @@
const productOptions = ref([]);
const currentProductId = ref(0);
const testStandardOptions = ref([]); // æŒ‡æ ‡é€‰æ‹©ä¸‹æ‹‰æ¡†æ•°æ®
const modelOptions = ref([]);

// æ‰“开弹框
const openDialog = (type, row) => {
@@ -275,12 +280,24 @@
  });
};
const getModels = (value) => {
  form.value.productModelId = undefined;
  form.value.unit = undefined;
  modelOptions.value = [];
  currentProductId.value = value
  form.value.productName = findNodeById(productOptions.value, value);
  modelList({ id: value }).then((res) => {
    modelOptions.value = res;
  })
  if (currentProductId.value) {
    getList();
  }
};

const handleChangeModel = (value) => {
  form.value.model = modelOptions.value.find(item => item.id == value)?.model || '';
  form.value.unit = modelOptions.value.find(item => item.id == value)?.unit || '';
}

const findNodeById = (nodes, productId) => {
  for (let i = 0; i < nodes.length; i++) {
    if (nodes[i].value === productId) {

 src/views/reportAnalysis/PSIDataAnalysis/components/CarouselCards.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,306 @@
<template>
  <div class="carousel-cards">
    <button 
      v-if="canScrollLeft"
      class="nav-button nav-button-left"
      @click="scrollLeftFn"
    >
      <img src="@/assets/BI/jiantou.png" alt="左箭头" />
    </button>
    <div 
      class="cards-container" 
      :style="{ '--visible-count': visibleCount }"
      ref="cardsContainerRef"
    >
      <div
        v-for="(item, index) in items"
        :key="index"
        class="card-item"
      >
        <div v-if="item.icon" class="card-icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
        <div class="card-title">
          <div class="card-label">{{ item.label }}</div>
          <div class="card-value">
            <span class="value-number">{{ item.value }}</span>
            <span class="value-unit">{{ item.unit }}</span>
          </div>
          <div v-if="item.rate ?? item.ratio ?? item.percent" class="card-rate">
            <span class="rate-value">{{ item.rate ?? item.ratio ?? item.percent }}%</span>
          </div>
        </div>
      </div>
    </div>
    <button 
      v-if="canScrollRight"
      class="nav-button nav-button-right"
      @click="scrollRightFn"
    >
      <img src="@/assets/BI/jiantou.png" alt="右箭头" />
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, watch, computed } from 'vue'

const props = defineProps({
  items: {
    type: Array,
    default: () => [],
    validator: (value) => {
      return value.every(item => 
        item && typeof item.label !== 'undefined' && 
        typeof item.value !== 'undefined' && 
        typeof item.unit !== 'undefined'
      )
    }
  },
  visibleCount: {
    type: Number,
    default: 3
  }
})

const cardsContainerRef = ref(null)
const currentScrollLeft = ref(0)
const maxScrollLeft = ref(0)

// æ£€æŸ¥æ˜¯å¦å¯ä»¥å‘左滚动
const canScrollLeft = computed(() => {
  return currentScrollLeft.value > 0
})

// æ£€æŸ¥æ˜¯å¦å¯ä»¥å‘右滚动
const canScrollRight = computed(() => {
  return currentScrollLeft.value < maxScrollLeft.value
})

// æ›´æ–°æ»šåŠ¨çŠ¶æ€
const updateScrollState = () => {
  const container = cardsContainerRef.value
  if (!container) return
  
  currentScrollLeft.value = container.scrollLeft
  maxScrollLeft.value = container.scrollWidth - container.clientWidth
}

// å‘左滚动
const scrollLeftFn = () => {
  const container = cardsContainerRef.value
  if (!container) return
  
  const scrollItems = Array.from(container.querySelectorAll('.card-item'))
  if (scrollItems.length === 0) return
  
  const itemWidth = scrollItems[0]?.offsetWidth || 0
  const gap = 12
  const scrollDistance = itemWidth + gap
  
  container.scrollBy({
    left: -scrollDistance,
    behavior: 'smooth'
  })
  
  // å»¶è¿Ÿæ›´æ–°çŠ¶æ€ï¼Œç­‰å¾…滚动动画完成
  setTimeout(() => {
    updateScrollState()
  }, 300)
}

// å‘右滚动
const scrollRightFn = () => {
  const container = cardsContainerRef.value
  if (!container) return
  
  const scrollItems = Array.from(container.querySelectorAll('.card-item'))
  if (scrollItems.length === 0) return
  
  const itemWidth = scrollItems[0]?.offsetWidth || 0
  const gap = 12
  const scrollDistance = itemWidth + gap
  
  container.scrollBy({
    left: scrollDistance,
    behavior: 'smooth'
  })
  
  // å»¶è¿Ÿæ›´æ–°çŠ¶æ€ï¼Œç­‰å¾…滚动动画完成
  setTimeout(() => {
    updateScrollState()
  }, 300)
}

// ç›‘听 items å˜åŒ–，更新滚动状态
watch(() => props.items, () => {
  nextTick(() => {
    updateScrollState()
  })
}, { deep: true })

onMounted(() => {
  nextTick(() => {
    updateScrollState()
    // ç›‘听滚动事件
    const container = cardsContainerRef.value
    if (container) {
      container.addEventListener('scroll', updateScrollState)
    }
  })
})

onBeforeUnmount(() => {
  // æ¸…理滚动事件监听器
  const container = cardsContainerRef.value
  if (container) {
    container.removeEventListener('scroll', updateScrollState)
  }
})
</script>

<style scoped>
.carousel-cards {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.cards-container {
  display: flex;
  gap: 12px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  padding-bottom: 4px;
  scroll-behavior: smooth;
}

.cards-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: rgba(26, 88, 176, 0.6);
  border: 1px solid rgba(26, 88, 176, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  padding: 0;
}

.nav-button:hover {
  background: rgba(26, 88, 176, 0.8);
  transform: translateY(-50%) scale(1.1);
}

.nav-button-left {
  left: -16px;
}

.nav-button-left img {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.nav-button-right {
  right: -16px;
}

.nav-button-right img {
  width: 16px;
  height: 16px;
}

.card-item {
  flex: 0 0 calc((100% - (var(--visible-count) - 1) * 12px) / var(--visible-count));
  min-width: calc((100% - (var(--visible-count) - 1) * 12px) / var(--visible-count));
  display: flex;
  align-items: center;
  background: linear-gradient(269deg, rgba(27,57,126,0.13) 0%, rgba(33,137,206,0.33) 98.13%, #24AFF4 100%);
  border-radius: 8px 8px 8px 8px;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

.card-item:hover {
  transform: translateY(-2px);
}

.card-icon {
  width: 80px;
  height: 60px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-right: 12px;
}

.card-title {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex: 1;
}

.card-label {
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.card-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.card-rate {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.rate-label {
  opacity: 0.85;
}

.rate-value {
  font-weight: 500;
}

.value-number {
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 1;
}

.value-unit {
  font-size: 14px;
  color: #FFFFFF;
  font-weight: 400;
}
</style>

 src/views/reportAnalysis/PSIDataAnalysis/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/PSIDataAnalysis/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/PSIDataAnalysis/components/ProductTypeSwitch.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,85 @@
<template>
  <el-radio-group
    v-model="currentValue"
    class="product-type-switch"
    @change="handleChange"
  >
    <el-radio-button :label="1">原材料</el-radio-button>
    <el-radio-button :label="3">半成品</el-radio-button>
    <el-radio-button :label="2">成品</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>
.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/PSIDataAnalysis/components/center-bottom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,181 @@
<template>
  <div>
    <PanelHeader title="出入库趋势" />
    <div class="main-panel panel-item-customers">
      <div class="filters-row">

        <ProductTypeSwitch v-model="productType" @change="handleFilterChange" />
      </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 PanelHeader from './PanelHeader.vue'
import ProductTypeSwitch from './ProductTypeSwitch.vue'
import { productInOutAnalysis } from '@/api/viewIndex.js'

const productType = ref(1) // 1=原材料 2=半成品 3=成品

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

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: '#4EE4FF' } },
    { name: '入库', itemStyle: { color: '#00D68F' } },
  ],
}

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' },
  borderWidth: 1,
  textStyle: { fontSize: 12 },
  formatter(params) {
    let result = params[0].axisValue + '<br/>'
    params.forEach((item) => {
      result += `${item.marker} ${item.seriesName}: ${item.value} ä»¶<br/>`
    })
    return result
  },
}

const fetchData = () => {
  productInOutAnalysis({ type: productType.value })
    .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.outCount) || 0)
        lineSeries.value[1].data = list.map((d) => Number(d.inCount) || 0)
      }
    })
    .catch((err) => {
      console.error('获取产品出入库分析失败:', err)
    })
}

const handleFilterChange = () => {
  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: 428px;
}
</style>


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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,129 @@
<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="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 { productTurnoverDays } from '@/api/viewIndex.js'

const chartStyle = { width: '100%', height: '100%' }
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 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 = () => {
  productTurnoverDays()
    .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) => Number(d.value) || 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/PSIDataAnalysis/components/center-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,137 @@
<template>
  <div>
    <!-- é¡¶éƒ¨ç»Ÿè®¡å¡ç‰‡ -->
    <div class="stats-cards">
      <div
        v-for="item in statItems"
        :key="item.name"
        class="stat-card"
      >
        <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
        <div class="card-content">
          <span class="card-label">{{ item.name }}</span>
          <span class="card-value">{{ item.value }}</span>
          <div class="card-compare" :class="compareClass(Number(item.rate))">
            <span>同比</span>
            <span class="compare-value">{{ formatPercent(item.rate) }}</span>
            <span class="compare-icon">{{ Number(item.rate) >= 0 ? '↑' : '↓' }}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { salesPurchaseStorageProductCount } from '@/api/viewIndex.js'

const statItems = ref([])

const formatPercent = (val) => {
  const num = Number(val) || 0
  return `${num.toFixed(2)}%`
}

const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')

const fetchData = () => {
  salesPurchaseStorageProductCount()
    .then((res) => {
      if (res.code === 200 && Array.isArray(res.data)) {
        statItems.value = res.data.map((item) => ({
          name: item.name,
          value: item.value,
          rate: item.rate,
        }))
      }
    })
    .catch((err) => {
      console.error('获取销售/采购/储存产品数失败:', err)
    })
}

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

<style scoped>
.stats-cards {
  display: flex;
  gap: 30px;
}

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

.card-icon {
  width: 100px;
  height: 100px;
  margin: 20px 20px 0 10px;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-value {
  font-weight: 500;
  font-size: 40px;
  background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

.card-compare {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #d0e7ff;
}

.card-compare > span:first-child {
  font-size: 13px;
  opacity: 0.8;
}

.compare-value {
  font-weight: 600;
}

.compare-icon {
  font-size: 14px;
  position: relative;
  top: -1px; /* è½»å¾®ä¸Šç§»ï¼Œè®©ç®­å¤´ä¸Žæ–‡å­—垂直居中对齐 */
}

.compare-up .compare-value,
.compare-up .compare-icon {
  color: #00c853;
}

.compare-down .compare-value,
.compare-down .compare-icon {
  color: #ff5252;
}

</style>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,233 @@
<template>
  <div>
    <PanelHeader title="产品采购金额分析" />
    <div class="main-panel panel-item-customers">
      <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 CarouselCards from './CarouselCards.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
}

// æ•°æ®åˆ—表（来自接口）
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,
    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 = () => {
  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)
    })
}

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;
}

.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/PSIDataAnalysis/components/left-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,200 @@
<template>
  <div>
    <PanelHeader title="产品销售金额分析" />
    <div class="main-panel panel-item-customers">
      <CarouselCards :items="cardItems" :visible-count="3" />
      <div class="pie-chart-wrapper">
        <div class="pie-background"></div>
        <Echarts
          ref="echartsRef"
          :chartStyle="chartStyle"
          :legend="pieLegend"
          :series="pieSeries"
          :tooltip="pieTooltip"
          :color="pieColors"
          :options="pieOptions"
          style="height: 320px"
        />
      </div>
    </div>
  </div>
</template>

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

/**
 * @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
}

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

const echartsRef = ref(null)
const pieDatas = ref([])
const pieColors = ['#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF', '#43e8fc', '#27EBE7']

const pieObjData = computed(() => array2obj(pieDatas.value, 'name'))

const pieLegend = computed(() => {
  const data = pieDatas.value.map((d, idx) => ({
    name: d.name,
    icon: 'circle',
    textStyle: {
      fontSize: 18,
      color: pieColors[idx % pieColors.length],
    },
  }))

  return {
    orient: 'vertical',
    top: 'center',
    left: '52%',
    itemGap: 30,
    data: data,
    formatter: function (name) {
      const item = pieObjData.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 pieTooltip = {
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c}元 ({d}%)',
}

const pieSeries = computed(() => [
  {
    name: '产品销售金额分析',
    type: 'pie',
    radius: '60%',
    center: ['25%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
    },
    label: {
      show: false
    },
    minAngle: 15,
    data: pieDatas.value,
    animationType: 'scale',
    animationEasing: 'elasticOut',
    animationDelay: function () {
      return Math.random() * 200
    },
  },
])

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

const cardItems = ref([])

const fetchData = () => {
  productSalesAnalysis()
    .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,
        }))
        pieDatas.value = items.map((item) => ({
          name: item.name,
          value: parseFloat(item.value) || 0,
          rate: item.rate,
        }))
      }
    })
    .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;
}
.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
}
.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/PSIDataAnalysis/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">PSI æ•°æ®åˆ†æž</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/reportAnalysis/dataDashboard/components/basic/center-bottom.vue

@@ -2,16 +2,19 @@
  <div>
    <PanelHeader title="人员分布" />
    <div class="main-panel panel-item-customers">
      <Echarts
        ref="echartsRef"
        :chartStyle="chartStyle"
        :legend="pieLegend"
        :series="pieSeries"
        :tooltip="pieTooltip"
        :color="pieColors"
        :options="pieOptions"
        style="height: 320px"
      />
      <div class="pie-chart-wrapper">
        <div class="pie-background" :style="{ backgroundImage: `url(${roseBorderImg})` }"></div>
        <Echarts
          ref="echartsRef"
          :chartStyle="chartStyle"
          :legend="pieLegend"
          :series="pieSeries"
          :tooltip="pieTooltip"
          :color="pieColors"
          :options="pieOptions"
          style="height: 320px"
        />
      </div>
    </div>
  </div>
</template>
@@ -21,6 +24,7 @@
import { deptStaffDistribution } from '@/api/viewIndex.js'
import PanelHeader from '../PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'
import roseBorderImg from '@/assets/BI/玫瑰图边框.png'

/**
 * @introduction æŠŠæ•°ç»„中key值相同的那一项提取出来，组成一个对象
@@ -110,7 +114,7 @@
    center: ['20%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
      borderWidth:5,
    },
    label: {
      show: false
@@ -162,4 +166,26 @@
  width: 100%;
  height: 370px;
}

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


.pie-background {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-113%, -50%);
  width: 360px;
  height: 360px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
</style>

 src/views/reportAnalysis/dataDashboard/components/basic/center-top.vue

@@ -371,6 +371,7 @@
  border: 1px solid #1a58b0;
  padding: 18px;
  height: 240px;
  padding-top: 0px;
}

.equipment-header {

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

@@ -9,6 +9,8 @@
          placeholder="请选择客户"
          clearable
          filterable
          popper-class="customer-select-dropdown"
          :teleported="false"
          @change="handleFilterChange"
        >
          <el-option
@@ -106,7 +108,7 @@
  formatter: function (params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
      result += `<div>${item.marker} ${item.seriesName}: ${item.value}</div>`
    })
    return result
  },
@@ -242,3 +244,17 @@
  height: 478px;
}
</style>

<style>
/* å…¨å±æ¨¡å¼ä¸‹ä¸‹æ‹‰æ¡†å±‚级修复 */
.customer-select-dropdown {
  z-index: 10001 !important;
}

/* ç¡®ä¿åœ¨å…¨å±å®¹å™¨å†…的下拉框也能正常显示 */
.scale-container:fullscreen .customer-select-dropdown,
.scale-container:-webkit-full-screen .customer-select-dropdown,
.scale-container:-ms-fullscreen .customer-select-dropdown {
  z-index: 10001 !important;
}
</style>

 src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue

@@ -2,7 +2,8 @@
  <div>
    <PanelHeader title="产品大类" />
    <div class="panel-item-customers">
      <div style="height: 70%">
      <div class="pie-chart-wrapper">
        <div class="pie-background"></div>
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
@@ -10,7 +11,7 @@
          :series="landSeries"
          :tooltip="landTooltip"
          :color="landColors"
          :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
          :options="pieOptions"
          style="height: 100%"
          class="land-chart"
        />
@@ -82,17 +83,20 @@

// æç¤ºæ¡†
const landTooltip = {
  triggerOn: 'click',
  // triggerOn: 'hover',
  alwaysShowContent: true,
  position: function (pt) {
    return [pt[0], 130]
  },
  formatter: function (params) {
    return `${params.name} (${params.value}ç±»)`
  },
}

// åŒå±‚环形饼图
const landSeries = ref([
  {
    name: '外圈',
    name: '产品大类',
    type: 'pie',
    radius: ['35%', '55%'],
    center: ['50%', '50%'],
@@ -104,21 +108,22 @@
      lineHeight: 18,
      rich: {
        ...dotRich,
        parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20 },
        parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20, overflow: 'break' },
        child: { fontSize: 12, color: '#fff', lineHeight: 18 },
      },
      formatter: function (params) {
        const children = params?.data?.children || []
        const parentName = params?.data?.name || ''
        const parentValue = params?.data?.value ?? 0
        const rawVal = params?.data?.value
        const parentValue = typeof rawVal === 'number' && !Number.isNaN(rawVal) ? rawVal : (Number(rawVal) || 0)
        const dotKey = `dot${(params?.dataIndex || 0) % landColors.length}`
        const dot = `{${dotKey}|} `
        if (!children.length) return `${dot}{parent|${parentName} ${parentValue}}`
        // å°åœ†ç‚¹ + çˆ¶çº§ name + çˆ¶çº§ value，换行展示 children çš„ name + value
        return [
          `${dot}{parent|${parentName} ${parentValue}}`,
          ...children.map((c) => `{child|${c.name}}`),
        ].join('\n')
        const parentLine = `${dot}{parent|${parentName} (${parentValue}ç±»)}`
        if (!children.length) return parentLine
        // çˆ¶çº§å…¨éƒ¨æ˜¾ç¤ºï¼›å­çº§æœ€å¤š 5 ä¸ªï¼Œè¶…出显示省略号
        const displayed = children.slice(0, 5).map((c) => `{child|${c.name}}`)
        if (children.length > 5) displayed.push('{child|…}')
        return [parentLine, ...displayed].join('\n')
      },
    },
    labelLine: {
@@ -157,7 +162,12 @@

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

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

const loadData = async () => {
@@ -192,4 +202,26 @@
  width: 100%;
  height: 420px;
}

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

.pie-background {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-51.5%, -39%);
  width: 360px;
  height: 360px;
  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/dataDashboard/components/basic/right-bottom.vue

@@ -104,7 +104,7 @@
  formatter: function (params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
      result += `<div>${item.marker} ${item.seriesName}: ${item.value}元</div>`
    })
    return result
  },

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

@@ -120,7 +120,7 @@
    textStyle: { fontSize: '100%' },
    formatter: function (params) {
      let result = params[0].axisValueLabel + '<br/>'
      result += `<div style="">${params[0].marker}${params[0].value}</div>`
      result += `<div>${params[0].marker}${params[0].value}元</div>`
      return result
    },
  }

 src/views/reportAnalysis/dataDashboard/index.vue

@@ -20,10 +20,8 @@
    <div class="dashboard-content">
    <!-- å·¦ä¾§åŒºåŸŸ -->
    <div class="left-panel">
      <!-- å®¢æˆ·ä¿¡æ¯ç»Ÿè®¡åˆ†æž -->
      <LeftTop />

      <!-- è´¨é‡ç»Ÿè®¡ -->
      <LeftBottom />
    </div>

@@ -36,10 +34,8 @@

    <!-- å³ä¾§åŒºåŸŸ -->
    <div class="right-panel">
      <!-- åº”收应付统计 -->
      <RightTop />

      <!-- å›žæ¬¾ä¸Žå¼€ç¥¨åˆ†æž -->
       <RightBottom />
    </div>
    </div>

 src/views/safeProduction/hazardSourceLedger/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,748 @@
<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="code">
              <el-input v-model="form.code"
                        placeholder="请输入危险源编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="危险源名称"
                          prop="name">
              <el-input v-model="form.name"
                        placeholder="请输入危险源名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所在位置"
                          prop="location">
              <el-input v-model="form.location"
                        placeholder="请输入所在位置" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管控措施"
                          prop="controlMeasures">
              <el-input v-model="form.controlMeasures"
                        placeholder="请输入管控措施" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="危险源类型"
                          prop="type">
              <el-select v-model="form.type"
                         placeholder="请选择危险源类型"
                         style="width: 100%">
                <el-option v-for="item in knowledgeTypeOptions"
                           :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="stockQty">
              <el-input v-model="form.stockQty"
                        type="number"
                        min="0"
                        placeholder="请输入库存数量" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="管控责任人"
                          prop="principalUserId">
              <el-select v-model="form.principalUserId"
                         placeholder="请选择管控责任人"
                         @change="handleUserChange"
                         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="principalMobile">
              <el-input v-model="form.principalMobile"
                        readonly
                        placeholder="自动带出" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="风险等级"
                          prop="riskLevel">
              <el-select v-model="form.riskLevel"
                         placeholder="请选择风险等级"
                         clearable>
                <el-option v-for="item in riskLevelOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="规格 / é£Žé™©æè¿°"
                      prop="specInfo">
          <el-input v-model="form.specInfo"
                    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="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="危险源类型">
            {{ getTypeLabel(currentKnowledge.type) }}
          </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>
  </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 {
    listKnowledgeBase,
    delKnowledgeBase,
    addKnowledgeBase,
    updateKnowledgeBase,
  } from "@/api/collaborativeApproval/knowledgeBase.js";
  import {
    safeHazardListPage,
    safeHazardAdd,
    safeHazardUpdate,
    safeHazardDel,
  } from "@/api/safeProduction/hazardSourceLedger.js";

  // è¡¨å•éªŒè¯è§„则
  const rules = {
    code: [{ required: true, message: "请输入危险源编码", trigger: "blur" }],
    name: [{ required: true, message: "请输入危险源名称", trigger: "blur" }],
    type: [{ required: true, message: "请选择危险源类型", trigger: "change" }],
    location: [{ required: true, message: "请输入所在位置", trigger: "blur" }],
    controlMeasures: [
      { required: true, message: "请输入管控措施", trigger: "blur" },
    ],
    stockQty: [{ required: true, message: "请输入库存数量", trigger: "blur" }],
    principalUser: [
      { required: true, message: "请输入管控责任人", trigger: "blur" },
    ],
    riskLevel: [{ required: true, message: "请选择风险等级", trigger: "change" }],
  };

  // å“åº”式数据
  const data = reactive({
    searchForm: {
      name: "",
      type: "",
    },
    tableLoading: false,
    page: {
      current: 1,
      size: 20,
      total: 0,
    },
    tableData: [],
    selectedIds: [],
    form: {
      code: "",
      name: "",
      location: "",
      controlMeasures: "",
      riskLevel: "",
      principalUser: "",
      principalMobile: "",
      specInfo: "",
      principalUserId: "",
      controlMeasures: "",
      stockQty: "",
      type: "",
    },
    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 riskLevelOptions = ref([
    { value: "低风险", label: "低风险" },
    { value: "一般风险", label: "一般风险" },
    { value: "较大风险", label: "较大风险" },
    { value: "重大风险", label: "重大风险" },
  ]);

  // è¡¨æ ¼åˆ—配置
  const tableColumn = ref([
    {
      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: "location",
      showOverflowTooltip: true,
    },
    {
      label: "管控措施",
      prop: "controlMeasures",
      showOverflowTooltip: true,
    },
    {
      label: "库存数量",
      prop: "stockQty",
      showOverflowTooltip: true,
    },
    {
      label: "管控责任人",
      prop: "principalUser",
      showOverflowTooltip: true,
    },
    {
      label: "责任人联系电话",
      prop: "principalMobile",
      showOverflowTooltip: true,
    },
    {
      label: "规格 / é£Žé™©æè¿°",
      prop: "specInfo",
      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(() => {
    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;
    }
  };

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

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

  const getList = () => {
    tableLoading.value = true;
    safeHazardListPage({ ...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, {
        code: "",
        name: "",
        location: "",
        controlMeasures: "",
        riskLevel: "",
        principalUser: "",
        principalMobile: "",
        specInfo: "",
        principalUserId: "",
        controlMeasures: "",
        stockQty: "",
        type: "",
      });
    } else if (type === "edit" && row) {
      dialogTitle.value = "编辑危险源";
      Object.assign(form.value, {
        id: row.id,
        code: row.code,
        name: row.name,
        location: row.location,
        controlMeasures: row.controlMeasures,
        riskLevel: row.riskLevel,
        principalUser: row.principalUser,
        principalMobile: row.principalMobile,
        specInfo: row.specInfo,
        principalUserId: row.principalUserId,
        controlMeasures: row.controlMeasures,
        stockQty: row.stockQty,
        type: row.type,
      });
    }
    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] || "未知";
  };

  /**
   * èŽ·å–行类名，用于判断风险等级是否为重大风险
   * @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") {
        // æ–°å¢žå±é™©æºå°è´¦
        safeHazardAdd({ ...form.value })
          .then(res => {
            if (res.code == 200) {
              ElMessage.success("添加成功");
              dialogVisible.value = false;
              getList();
            }
          })
          .catch(err => {
            ElMessage.error(err.msg);
          });
      } else {
        // æ›´æ–°å±é™©æºå°è´¦
        safeHazardUpdate({ ...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);
        safeHazardDel(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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,860 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <el-form :model="searchForm"
               :inline="true">
        <el-form-item label="规程资质名称：">
          <el-input v-model="searchForm.name"
                    placeholder="请输入"
                    clearable
                    prefix-icon="Search"
                    @change="handleQuery" />
        </el-form-item>
        <el-form-item label="规程资质类型：">
          <el-select v-model="searchForm.type"
                     placeholder="请选择"
                     clearable
                     style="width: 200px"
                     prefix-icon="Search"
                     @change="handleQuery">
            <el-option v-for="item in type_qualification"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="规程资质编号：">
          <el-input v-model="searchForm.code"
                    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="name"
                         width="180"
                         show-overflow-tooltip />
        <el-table-column label="规程资质编号"
                         prop="code"
                         show-overflow-tooltip />
        <el-table-column label="规程资质类型"
                         prop="type"
                         show-overflow-tooltip />
        <el-table-column label="版本号"
                         prop="version"
                         width="180"
                         show-overflow-tooltip />
        <el-table-column label="备注"
                         prop="remark"
                         show-overflow-tooltip />
        <el-table-column label="有效期"
                         prop="effectiveTime"
                         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>
            <el-button link
                       type="primary"
                       size="small"
                       @click="downLoadFile(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="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 :gutter="30">
          <el-col :span="12">
            <el-form-item label="规程资质名称："
                          prop="name">
              <el-input v-model="form.name"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规程资质编号："
                          prop="code">
              <el-input v-model="form.code"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <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 type_qualification"
                           :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="version">
              <el-input v-model="form.version"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="有效期："
                          prop="effectiveTime">
              <el-date-picker style="width: 100%"
                              v-model="form.effectiveTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable
                              :disabled="operationType === 'view'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注·："
                          prop="remark">
              <el-input v-model="form.remark"
                        placeholder="请输入"
                        clearable
                        type="textarea"
                        :rows="1"
                        :disabled="operationType === 'view'" />
            </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 } 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 {
    qualificationsListPage,
    safeCertificationAdd,
    safeCertificationUpdate,
    safeCertificationDel,
    fileListPage,
    safeCertificationFileAdd,
    safeCertificationFileDel,
  } from "@/api/safeProduction/safeQualifications.js";
  import useFormData from "@/hooks/useFormData.js";
  import request from "@/utils/request";
  import dayjs from "dayjs";

  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 operationType = ref("");
  const dialogFormVisible = ref(false);
  const data = reactive({
    searchForm: {
      name: "", // è§„程资质名称
      code: "", // è§„程资质编号
      type: "", // è§„程资质类型
    },
    form: {
      salesContractNo: "",
      salesman: "",
      customerId: "",
      entryPerson: "",
      entryDate: "",
      maintenanceTime: "",
      executionDate: "",
    },
    rules: {
      code: [{ required: true, message: "请输入", trigger: "blur" }],
      name: [{ required: true, message: "请输入", trigger: "blur" }],
      type: [{ required: true, message: "请选择", trigger: "change" }],
      effectiveTime: [{ required: true, message: "请选择", trigger: "change" }],
      version: [{ required: true, message: "请输入", trigger: "blur" }],
    },
  });
  // è§„程资质类型选项
  const { type_qualification } = proxy.useDict("type_qualification");
  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 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 qualificationsListPage(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) => {
    operationType.value = type;
    if (type === "add") {
      form.value = {
        salesContractNo: "",
        salesman: "",
        customerId: "",
        entryPerson: "",
        entryDate: "",
        maintenanceTime: "",
        executionDate: "",
      };
    } else {
      form.value = row;
    }
    dialogFormVisible.value = true;
  };

  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 = () => {
    proxy.$refs["formRef"].validate(valid => {
      if (valid) {
        if (operationType.value === "add") {
          safeCertificationAdd(form.value).then(res => {
            proxy.$modal.msgSuccess("提交成功");
            closeDia();
            getList();
          });
        } else {
          safeCertificationUpdate(form.value).then(res => {
            proxy.$modal.msgSuccess("提交成功");
            closeDia();
            getList();
          });
        }
      }
    });
  };
  // å…³é—­å¼¹æ¡†
  const closeDia = () => {
    proxy.resetForm("formRef");
    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(() => {
        safeCertificationDel(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({ safeCertificationId: row.id }).then(res => {
      if (fileListRef.value) {
        fileListRef.value.open(res.data.records);
      }
    });
  };
  const currentFactoryName = ref("");
  const getCurrentFactoryName = async () => {
    let res = await userStore.getInfo();
    currentFactoryName.value = res.user.currentFactoryName;
  };

  /**
   * èŽ·å–行类名，用于判断当前日期是否接近有效期15天内
   * @param row è¡Œæ•°æ®
   * @returns ç±»å
   */
  const getRowClass = ({ row }) => {
    if (!row.effectiveTime) return "";

    const now = new Date();
    const effectiveTime = new Date(row.effectiveTime);
    const diffTime = effectiveTime - now;
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    if (diffDays >= 0 && diffDays <= 15) {
      return "warning-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 = {
              safeCertificationId: currentFileRow.value.id,
              name: uploadRes.data.originalName || file.name,
              url: uploadRes.data.tempPath || uploadRes.data.url,
            };

            const saveRes = await safeCertificationFileAdd(fileData);
            if (saveRes.code === 200) {
              proxy.$modal.msgSuccess("文件上传成功");
              // é‡æ–°åŠ è½½æ–‡ä»¶åˆ—表
              const listRes = await fileListPage({
                safeCertificationId: 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 safeCertificationFileDel([row.id]);
      if (res.code === 200) {
        proxy.$modal.msgSuccess("删除成功");
        // é‡æ–°åŠ è½½æ–‡ä»¶åˆ—表
        if (currentFileRow.value && fileListRef.value) {
          const listRes = await fileListPage({
            safeCertificationId: 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;
  }

  .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/salesManagement/invoiceLedger/index.vue

@@ -73,8 +73,11 @@
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="`发票金额(元)： åˆåŒæ€»é¢(${form.taxInclusiveTotalPrice}元)`" prop="invoiceTotal">
              <el-input-number :step="0.01" :min="0" :max="form.taxInclusiveTotalPrice" style="width: 100%" v-model="form.invoiceTotal" placeholder="请输入" clearable :precision="2"/>
            <el-form-item :label="`发票金额(元)： `" prop="invoiceTotal">
              <el-input-number :step="0.01" :min="0" :max="maxInvoiceAmount || form.taxInclusiveTotalPrice" style="width: 100%" v-model="form.invoiceTotal" placeholder="请输入" clearable :precision="2"/>
              <div v-if="maxInvoiceAmount > 0" style="color: #909399; font-size: 12px; margin-top: 5px;">
                å¯å¡«æœ€å¤§é‡‘额为：¥{{ maxInvoiceAmount.toFixed(2) }}元
              </div>
            </el-form-item>
          </el-col>
        </el-row>
@@ -203,6 +206,7 @@
const { form: searchForm, resetForm } = useFormData(data.searchForm);
const currentId = ref("");
const userStore = useUserStore();
const maxInvoiceAmount = ref(0); // å‘票金额最大值
const upload = reactive({
  // ä¸Šä¼ çš„地址
  url: import.meta.env.VITE_APP_BASE_API + "/invoiceLedger/uploadFile",
@@ -269,6 +273,11 @@
    if (!form.value.invoicePerson) {
      form.value.invoicePerson = userStore.nickName;
    }
    
    // è®¡ç®—发票金额最大值：noInvoiceAmount + invoiceAmount
    const noInvoiceAmount = parseFloat(res.data.noInvoiceAmount || 0);
    const invoiceAmount = parseFloat(res.data.invoiceAmount || 0);
    maxInvoiceAmount.value = noInvoiceAmount + invoiceAmount;
  });
  dialogFormVisible.value = true;
};

 src/views/salesManagement/receiptPayment/index.vue

@@ -433,7 +433,8 @@
    specificationModel: row.specificationModel || "",
    pendingInvoiceTotal: Number(row.pendingInvoiceTotal || 0),
    taxRate: row.taxRate ?? "",
    receiptPaymentAmount: "",
    // é»˜è®¤æœ¬æ¬¡å›žæ¬¾é‡‘额 = å¾…回款金额
    receiptPaymentAmount: Number(row.pendingInvoiceTotal || 0),
    receiptPaymentType: "",
    registrant: userStore.nickName,
    receiptPaymentDate: "",
@@ -518,6 +519,29 @@

// ä¿å­˜å›žæ¬¾è®°å½•
const saveReceiptPayment = (row) => {
  // å­è¡¨å›žæ¬¾é‡‘额合计校验：所有回款记录金额之和不能大于父数据合同金额
  // è¿™é‡Œçˆ¶æ•°æ®â€œåˆåŒé‡‘额”按：已回款金额( invoiceTotal ) + å¾…回款金额( pendingInvoiceTotal ) è®¡ç®—
  const findParentRowByChildId = (childId) => {
    return tableData.value.find((p) =>
      Array.isArray(p.children) && p.children.some((c) => c.id === childId)
    );
  };
  const parentRow = findParentRowByChildId(row.id);
  if (parentRow) {
    const contractAmount =
      Number(parentRow.invoiceTotal || 0) + Number(parentRow.pendingInvoiceTotal || 0);
    const sumReceipt = (parentRow.children || []).reduce((sum, item) => {
      const val = Number(item?.receiptPaymentAmount ?? 0);
      return sum + (Number.isFinite(val) ? val : 0);
    }, 0);
    if (sumReceipt > contractAmount) {
      proxy.$modal.msgError(
        `回款金额合计(${sumReceipt.toFixed(2)})不能大于合同金额(${contractAmount.toFixed(2)})`
      );
      return;
    }
  }

  let updateData = {
    id: row.id,
    receiptPaymentType: row.receiptPaymentType,