代码调整10

zouyu

8 天以前 3f3b9005eacd44e9111f0d3b4916a9a0baf380b0

 src/views/equipmentManagement/ledger/index.vue

@@ -1,45 +1,54 @@
<template>
  <div class="app-container">
    <!-- 页面功能说明，仅作为描述，不作为具体字段 -->
    <el-form :model="filters" :inline="true">
      <el-form-item label="设备名称">
      <!-- 监控设备基础信息筛选 -->
      <el-form-item label="监控设备名称">
        <el-input
          v-model="filters.deviceName"
          style="width: 240px"
          placeholder="请输入设备名称"
          placeholder="请输入监控设备名称"
          clearable
          :prefix-icon="Search"
          @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="规格型号">
      <!-- 温度监测字段（英文字段 deviceModel 不变） -->
      <el-form-item label="温度监测参数">
        <el-input
            v-model="filters.deviceModel"
            style="width: 240px"
            placeholder="请输入规格型号"
            placeholder="请输入温度相关监测参数"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="供应商">
      <!-- 压力监测字段（英文字段 supplierName 不变） -->
      <el-form-item label="压力监测参数">
        <el-input
            v-model="filters.supplierName"
            style="width: 240px"
            placeholder="请输入供应商"
            placeholder="请输入压力相关监测参数"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="单位">
      <!-- 能耗监测字段（英文字段 unit 不变） -->
      <el-form-item label="能耗监测参数">
        <el-input
            v-model="filters.unit"
            style="width: 240px"
            placeholder="请输入单位"
            placeholder="请输入能耗相关监测参数"
            clearable
            :prefix-icon="Search"
            @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-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
@@ -51,7 +60,7 @@
        <div></div>
        <div>
          <el-button type="primary" @click="add" icon="Plus"> 新增 </el-button>
          <el-button @click="handleOut" icon="download">导出</el-button>
          <!-- <el-button @click="handleOut" icon="download">导出</el-button> -->
          <el-button
            type="danger"
            icon="Delete"
@@ -72,25 +81,22 @@
          size: pagination.pageSize,
          total: pagination.total,
        }"
        :isShowSummary="true"
        :summaryMethod="summaryMethod"
        @selection-change="handleSelectionChange"
        @pagination="changePage"
      >
        <template #operation="{ row }">
          <el-button type="primary" text @click="edit(row.id)" icon="editPen">
            编辑
          </el-button>
          <el-button
            type="danger"
            text
            icon="delete"
            @click="deleteRow(row.id)"
          >
            删除
          </el-button>
        </template>
      </PIMTable>
    </div>
    <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;" />
        <div style="margin:10px 0;">
          <el-button type="primary" @click="downloadQRCode">下载二维码图片</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

@@ -101,15 +107,25 @@
import { onMounted, getCurrentInstance } from "vue";
import Modal from "./Modal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import dayjs from "dayjs";
import QRCode from "qrcode";
import { ref } from "vue";
import { summarizeTable } from "@/utils/summarizeTable";
import {Search} from "@element-plus/icons-vue";

defineOptions({
  name: "设备台账",
  // 页面功能：设备远程监控
  name: "设备远程监控",
});

// 表格多选框选中项
const multipleList = ref([]);
const { proxy } = getCurrentInstance();
const modalRef = ref();
const qrDialogVisible = ref(false);
const qrCodeUrl = ref("");
const qrRowData = ref(null);

const {
  filters,
  columns,
@@ -121,26 +137,34 @@
} = usePaginationApi(
  getLedgerPage,
  {
    searchText: undefined,
    deviceName: undefined,
    deviceModel: undefined,
    supplierName: undefined,
    unit: undefined,
    entryDateStart: undefined,
    entryDateEnd: undefined,
  },
  [
    {
      label: "设备名称",
      label: "监控设备名称",
      align: "center",
      prop: "deviceName",
    },
    {
      label: "规格型号",
      // 使用 deviceModel 字段承载温度监测相关参数
      label: "温度监测参数",
      align: "center",
      prop: "deviceModel",
    },
    {
      label: "供应商",
      // 使用 supplierName 字段承载压力监测相关参数
      label: "压力监测参数",
      align: "center",
      prop: "supplierName",
    },
    {
      label: "单位",
      // 使用 unit 字段承载能耗监测相关参数
      label: "能耗监测参数",
      align: "center",
      prop: "unit",
    },
@@ -150,43 +174,62 @@
      prop: "number",
    },
    {
      label: "含税单价",
      // 使用 taxIncludingPriceUnit 字段承载监控阈值上限
      label: "监控阈值上限",
      align: "center",
      prop: "taxIncludingPriceUnit",
    },
    {
      label: "含税总价",
      // 使用 taxIncludingPriceTotal 字段承载监控阈值下限
      label: "监控阈值下限",
      align: "center",
      prop: "taxIncludingPriceTotal",
    },
    {
      label: "税率",
      // 使用 taxRate 字段呈现实时监测值/当前读数
      label: "实时监测值",
      align: "center",
      prop: "taxRate",
    },
    {
      label: "不含税总价",
      // 使用 unTaxIncludingPriceTotal 字段承载累计能耗/监控统计值
      label: "累计能耗",
      align: "center",
      prop: "unTaxIncludingPriceTotal",
    },
    {
      label: "录入人",
      label: "监控人",
      align: "center",
      prop: "createUser",
    },
    {
      label: "录入日期",
      label: "监控日期",
      align: "center",
      prop: "createTime",
    },
    {
      fixed: "right",
      label: "操作",
      dataType: "slot",
      slot: "operation",
      align: "center",
      width: "200px",
    },
      {
         dataType: "action",
         label: "操作",
         align: "center",
         fixed: 'right',
         width: 140,
         operation: [
            {
               name: "编辑",
               type: "text",
               clickFun: (row) => {
                  edit(row.id)
               },
            },
            // {
            //    name: "生成二维码",
            //    type: "text",
            //    clickFun: (row) => {
            //       showQRCode(row)
            //    },
            // },
         ],
      },
  ]
);

@@ -201,10 +244,25 @@
const edit = (id) => {
  modalRef.value.loadForm(id);
};
const changePage = ({ page }) => {
const changePage = ({ page, limit }) => {
  pagination.currentPage = page;
   pagination.pageSize = limit;
  onCurrentChange(page);
};

// 合计方法
const summaryMethod = (param) => {
  return summarizeTable(
    param,
    ['number', 'taxIncludingPriceTotal', 'unTaxIncludingPriceTotal', 'taxIncludingPriceUnit'],
    {
      number: { noDecimal: true },
      taxIncludingPriceTotal: { decimalPlaces: 2 },
      unTaxIncludingPriceTotal: { decimalPlaces: 2 }
    }
  );
};

const deleteRow = (id) => {
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
@@ -222,6 +280,17 @@
  });
};

const changeDaterange = (value) => {
  if (value) {
    filters.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
    filters.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
  } else {
    filters.entryDateStart = undefined;
    filters.entryDateEnd = undefined;
  }
  getTableData();
};

const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
@@ -229,14 +298,36 @@
    type: "warning",
  })
    .then(() => {
      proxy.download(`/device/ledger/export`, {}, "设备台账档案.xlsx");
      // 导出文件名改为设备远程监控
      proxy.download(`/device/ledger/export`, {}, "设备远程监控.xlsx");
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};

const showQRCode = async (row) => {
  // 你可以自定义二维码内容，比如 row.id 或 row.deviceName
  const qrContent = JSON.stringify(row); // 或 `${row.id}`
  qrCodeUrl.value = await QRCode.toDataURL(qrContent);
  qrRowData.value = row;
  qrDialogVisible.value = true;
};

const downloadQRCode = () => {
  const a = document.createElement("a");
  a.href = qrCodeUrl.value;
  a.download = `${qrRowData.value.deviceName || "二维码"}.png`;
  a.click();
};

onMounted(() => {
  // filters.entryDate = [
  //   dayjs().format("YYYY-MM-DD"),
  //   dayjs().add(1, "day").format("YYYY-MM-DD"),
  // ]
  // filters.entryDateStart = dayjs().format("YYYY-MM-DD")
  // filters.entryDateEnd = dayjs().add(1, "day").format("YYYY-MM-DD")
  getTableData();
});
</script>
@@ -250,4 +341,13 @@
  justify-content: space-between;
  margin-bottom: 10px;
}

.feature-desc {
  margin-bottom: 16px;
  padding: 10px 12px;
  background: #f5f7fa;
  border-radius: 4px;
  color: #606266;
  font-size: 13px;
}
</style>