gongchunyi
2026-04-02 54a96b9f4eb652e3588640e60d3ce71c32a56a79
src/views/equipmentManagement/ledger/index.vue
@@ -1,52 +1,51 @@
<template>
  <div class="app-container">
    <el-form :model="filters" :inline="true">
    <el-form :model="filters"
             :inline="true">
      <el-form-item label="设备名称">
        <el-input
          v-model="filters.deviceName"
        <el-input v-model="filters.deviceName"
          style="width: 240px"
          placeholder="请输入设备名称"
          clearable
          :prefix-icon="Search"
          @change="getTableData"
        />
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input
            v-model="filters.deviceModel"
        <el-input v-model="filters.deviceModel"
            style="width: 240px"
            placeholder="请输入规格型号"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="供应商">
        <el-input
            v-model="filters.supplierName"
        <el-input v-model="filters.supplierName"
            style="width: 240px"
            placeholder="请输入供应商"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="单位">
        <el-input
            v-model="filters.unit"
        <el-input v-model="filters.unit"
            style="width: 240px"
            placeholder="请输入单位"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="录入日期:">
        <el-date-picker v-model="filters.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
                        placeholder="请选择" clearable @change="changeDaterange" />
        <el-date-picker v-model="filters.entryDate"
                        value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        type="daterange"
                        placeholder="请选择"
                        clearable
                        @change="changeDaterange" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <el-button type="primary"
                   @click="getTableData">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>
@@ -54,20 +53,23 @@
      <div class="actions">
        <div></div>
        <div>
          <el-button type="primary" @click="add" icon="Plus"> 新增 </el-button>
          <el-button @click="handleOut" icon="download">导出</el-button>
          <el-button
            type="danger"
          <el-button type="primary"
                     @click="add"
                     icon="Plus"> 新增 </el-button>
          <el-button plain
                     icon="Upload"
                     @click="handleImport">导入</el-button>
          <el-button @click="handleOut"
                     icon="download">导出</el-button>
          <el-button type="danger"
            icon="Delete"
            :disabled="multipleList.length <= 0"
            @click="deleteRow(multipleList.map((item) => item.id))"
          >
                     @click="deleteRow(multipleList.map((item) => item.id))">
            批量删除
          </el-button>
        </div>
      </div>
      <PIMTable
        rowKey="id"
      <PIMTable rowKey="id"
        isSelection
        :column="columns"
        :tableData="dataList"
@@ -77,19 +79,62 @@
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
        @pagination="changePage"
      >
                @pagination="changePage">
      </PIMTable>
    </div>
    <Modal ref="modalRef" @success="getTableData"></Modal>
      <el-dialog v-model="qrDialogVisible" title="二维码" width="300px">
    <Modal ref="modalRef"
           @success="getTableData"></Modal>
    <el-dialog v-model="qrDialogVisible"
               title="二维码"
               width="300px">
         <div style="text-align:center;">
            <img :src="qrCodeUrl" alt="二维码" style="width:200px;height:200px;" />
        <img :src="qrCodeUrl"
             alt="二维码"
             style="width:200px;height:200px;" />
            <div style="margin-top:6px;font-size:14px;color:#333;">{{ qrRowData?.deviceName }}</div>
            <div style="margin:10px 0;">
               <el-button type="primary" @click="downloadQRCode">下载二维码图片</el-button>
          <el-button type="primary"
                     @click="downloadQRCode">下载二维码图片</el-button>
            </div>
         </div>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title"
               v-model="upload.open"
               width="400px"
               append-to-body>
      <el-upload ref="uploadRef"
                 :limit="1"
                 accept=".xlsx, .xls"
                 :headers="upload.headers"
                 :action="upload.url + '?updateSupport=' + upload.updateSupport"
                 :disabled="upload.isUploading"
                 :before-upload="upload.beforeUpload"
                 :on-progress="upload.onProgress"
                 :on-success="upload.onSuccess"
                 :on-error="upload.onError"
                 :on-change="upload.onChange"
                 :auto-upload="false"
                 drag>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary"
                     :underline="false"
                     style="font-size: 12px; vertical-align: baseline"
                     @click="importTemplate">下载模板</el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
      </el-dialog>
  </div>
</template>
@@ -104,6 +149,7 @@
import dayjs from "dayjs";
import QRCode from "qrcode";
import { ref } from "vue";
  import { getToken } from "@/utils/auth.js";
defineOptions({
  name: "设备台账",
@@ -146,11 +192,11 @@
      align: "center",
      prop: "deviceModel",
    },
    {
      label: "设备品牌",
      align: "center",
      prop: "deviceBrand",
    },
      // {
      //   label: "设备品牌",
      //   align: "center",
      //   prop: "deviceBrand",
      // },
    {
      label: "供应商",
      align: "center",
@@ -161,41 +207,26 @@
      align: "center",
      prop: "unit",
    },
    {
      label: "存放位置",
      align: "center",
      prop: "storageLocation",
    },
      // {
      //   label: "存放位置",
      //   align: "center",
      //   prop: "storageLocation",
      // },
    {
      label: "数量",
      align: "center",
      prop: "number",
    },
    {
      label: "含税单价",
        label: "资产原值",
      align: "center",
      prop: "taxIncludingPriceUnit",
    },
    {
      label: "含税总价",
      align: "center",
      prop: "taxIncludingPriceTotal",
    },
    {
      label: "税率",
      align: "center",
      prop: "taxRate",
    },
    {
      label: "不含税总价",
      align: "center",
      prop: "unTaxIncludingPriceTotal",
    },
    {
      label: "启用折旧",
      align: "center",
      prop: "enableDepreciation",
      formatData: (v) => (v ? "是" : "否"),
        formatData: v => (v ? "是" : "否"),
    },
    {
      label: "录入人",
@@ -211,21 +242,21 @@
         dataType: "action",
         label: "操作",
         align: "center",
         fixed: 'right',
        fixed: "right",
         width: 150,
         operation: [
            {
               name: "编辑",
               type: "text",
               clickFun: (row) => {
                  edit(row.id)
            clickFun: row => {
              edit(row.id);
               },
            },
            {
               name: "生成二维码",
               type: "text",
               clickFun: (row) => {
                  showQRCode(row)
            clickFun: row => {
              showQRCode(row);
               },
            },
         ],
@@ -233,15 +264,82 @@
  ]
);
  const upload = reactive({
    // 是否显示弹出层(客户导入)
    open: false,
    // 弹出层标题(客户导入)
    title: "",
    // 是否禁用上传
    isUploading: false,
    // 设置上传的请求头部
    headers: { Authorization: "Bearer " + getToken() },
    // 上传的地址
    url: import.meta.env.VITE_APP_BASE_API + "/device/ledger/import",
    // 文件上传前的回调
    beforeUpload: file => {
      console.log("文件即将上传", file);
      // 可以在此处做文件类型或大小校验
      const isValid =
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.name.endsWith(".xlsx") ||
        file.name.endsWith(".xls");
      if (!isValid) {
        proxy.$modal.msgError("只能上传 Excel 文件");
      }
      return isValid;
    },
    // 文件状态改变时的回调
    onChange: (file, fileList) => {
      console.log("文件状态改变", file, fileList);
    },
    // 文件上传成功时的回调
    onSuccess: (response, file, fileList) => {
      console.log("上传成功", response, file, fileList);
      upload.isUploading = false;
      if (response.code === 200) {
        proxy.$modal.msgSuccess("文件上传成功");
        upload.open = false;
        proxy.$refs["uploadRef"].clearFiles();
        getTableData();
      } else if (response.code === 500) {
        proxy.$modal.msgError(response.msg);
      } else {
        proxy.$modal.msgWarning(response.msg);
      }
    },
    // 文件上传失败时的回调
    onError: (error, file, fileList) => {
      console.error("上传失败", error, file, fileList);
      upload.isUploading = false;
      proxy.$modal.msgError("文件上传失败");
    },
    // 文件上传进度回调
    onProgress: (event, file, fileList) => {
      console.log("上传中...", event.percent);
    },
  });
  /** 提交上传文件 */
  const submitFileForm = () => {
    upload.isUploading = true;
    proxy.$refs["uploadRef"].submit();
  };
  /** 下载模板 */
  const importTemplate = () => {
    proxy.download("/device/ledger/downloadTemplate", {}, "设备台账模板.xlsx");
  };
// 多选后做什么
const handleSelectionChange = (selectionList) => {
  const handleSelectionChange = selectionList => {
  multipleList.value = selectionList;
};
const add = () => {
  modalRef.value.openModal();
};
const edit = (id) => {
  const edit = id => {
  modalRef.value.loadForm(id);
};
const changePage = ({ page, limit }) => {
@@ -249,7 +347,7 @@
   pagination.pageSize = limit;
  onCurrentChange(page);
};
const deleteRow = (id) => {
  const deleteRow = id => {
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
@@ -266,7 +364,7 @@
  });
};
const changeDaterange = (value) => {
  const changeDaterange = value => {
  if (value) {
    filters.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
    filters.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
@@ -275,6 +373,11 @@
    filters.entryDateEnd = undefined;
  }
  getTableData();
  };
  /** 导入按钮操作 */
  const handleImport = () => {
    upload.title = "设备台账导入";
    upload.open = true;
};
const handleOut = () => {
@@ -291,9 +394,9 @@
    });
};
const showQRCode = async (row) => {
  const showQRCode = async row => {
  // 直接使用URL,不要用JSON.stringify包装
  const qrContent = proxy.javaApi + '/device-info?deviceId=' + row.id;
    const qrContent = proxy.javaApi + "/device-info?deviceId=" + row.id;
  qrCodeUrl.value = await QRCode.toDataURL(qrContent);
  qrRowData.value = row;
  qrDialogVisible.value = true;
@@ -326,7 +429,10 @@
      const maxTextWidth = width - padding * 2;
      let displayName = name;
      // ellipsis if too long
      while (ctx.measureText(displayName).width > maxTextWidth && displayName.length > 0) {
      while (
        ctx.measureText(displayName).width > maxTextWidth &&
        displayName.length > 0
      ) {
         displayName = displayName.slice(0, -1);
      }
      if (displayName !== name) displayName = displayName + "…";