设备台账去掉品牌字段和存放位置

zhangwencui

5 小时以前 8efd0d1ed41c3b55a8ae13d383bd02e40eea8155

设备台账去掉品牌字段和存放位置

 src/views/equipmentManagement/ledger/Form.vue

@@ -1,183 +1,195 @@
<template>
  <el-form :model="form" label-width="100px" :rules="formRules" ref="formRef">
  <el-form :model="form"
           label-width="100px"
           :rules="formRules"
           ref="formRef">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
        <el-form-item label="设备名称"
                      prop="deviceName">
          <el-input v-model="form.deviceName"
                    placeholder="请输入设备名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="规格型号" prop="deviceModel">
          <el-input v-model="form.deviceModel" placeholder="请输入规格型号" />
        <el-form-item label="规格型号"
                      prop="deviceModel">
          <el-input v-model="form.deviceModel"
                    placeholder="请输入规格型号" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <!-- <el-col :span="12">
        <el-form-item label="设备品牌" prop="deviceBrand">
          <el-input v-model="form.deviceBrand" placeholder="请输入设备品牌" />
        </el-form-item>
      </el-col>
      </el-col> -->
      <el-col :span="12">
        <el-form-item label="供应商" prop="supplierName">
          <el-input v-model="form.supplierName" placeholder="请输入供应商" />
        <el-form-item label="供应商"
                      prop="supplierName">
          <el-input v-model="form.supplierName"
                    placeholder="请输入供应商" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <!-- <el-col :span="12">
        <el-form-item label="存放位置" prop="storageLocation">
          <el-input v-model="form.storageLocation" placeholder="请输入存放位置" />
        </el-form-item>
      </el-col>
      </el-col> -->
      <el-col :span="12">
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入单位" />
        <el-form-item label="单位"
                      prop="unit">
          <el-input v-model="form.unit"
                    placeholder="请输入单位" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="数量" prop="number">
          <el-input-number :min="1" style="width: 100%"
            v-model="form.number"
                                             disabled
            placeholder="请输入数量"
          />
        <el-form-item label="数量"
                      prop="number">
          <el-input-number :min="1"
                           style="width: 100%"
                           v-model="form.number"
                           disabled
                           placeholder="请输入数量" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="资产原值" prop="taxIncludingPriceUnit">
          <el-input-number :min="0" style="width: 100%"
                                                     :precision="2"
            v-model="form.taxIncludingPriceUnit"
            placeholder="请输入资产原值"
            maxlength="10"
          />
        <el-form-item label="资产原值"
                      prop="taxIncludingPriceUnit">
          <el-input-number :min="0"
                           style="width: 100%"
                           :precision="2"
                           v-model="form.taxIncludingPriceUnit"
                           placeholder="请输入资产原值"
                           maxlength="10" />
        </el-form-item>
      </el-col>
            <el-col :span="12">
                <el-form-item label="启用折旧" prop="enableDepreciation">
                    <el-switch v-model="form.enableDepreciation" :active-value="true" :inactive-value="false" />
                </el-form-item>
            </el-col>
      <el-col :span="12">
        <el-form-item label="启用折旧"
                      prop="enableDepreciation">
          <el-switch v-model="form.enableDepreciation"
                     :active-value="true"
                     :inactive-value="false" />
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="录入人" prop="createUser">
          <el-input v-model="form.createUser" placeholder="请输入录入人" />
        </el-form-item>
      </el-col> -->
      <el-col :span="12">
        <el-form-item label="录入日期" prop="createTime">
          <el-date-picker
            style="width: 100%"
            v-model="form.createTime"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="date"
            placeholder="请选择录入日期"
            clearable
          />
        <el-form-item label="录入日期"
                      prop="createTime">
          <el-date-picker style="width: 100%"
                          v-model="form.createTime"
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          type="date"
                          placeholder="请选择录入日期"
                          clearable />
        </el-form-item>
      </el-col>
            <el-col :span="12">
                <el-form-item label="预计运行时间" prop="planRuntimeTime">
                    <el-date-picker
                        style="width: 100%"
                        v-model="form.planRuntimeTime"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        type="date"
                        placeholder="请选择录入日期"
                        clearable
                    />
                </el-form-item>
            </el-col>
      <el-col :span="12">
        <el-form-item label="预计运行时间"
                      prop="planRuntimeTime">
          <el-date-picker style="width: 100%"
                          v-model="form.planRuntimeTime"
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD"
                          type="date"
                          placeholder="请选择录入日期"
                          clearable />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import useFormData from "@/hooks/useFormData";
// import useUserStore from "@/store/modules/user";
import { getLedgerById } from "@/api/equipmentManagement/ledger";
import dayjs from "dayjs";
import {ref} from "vue";
  import useFormData from "@/hooks/useFormData";
  // import useUserStore from "@/store/modules/user";
  import { getLedgerById } from "@/api/equipmentManagement/ledger";
  import dayjs from "dayjs";
  import { ref } from "vue";

defineOptions({
  name: "设备台账表单",
});
const formRef = ref(null);
const operationType = ref('');
const formRules = {
    deviceName: [{ required: true, trigger: "blur", message: "请输入" }],
    deviceModel: [{ trigger: "blur", message: "请输入" }],
    supplierName: [{ trigger: "blur", message: "请输入" }],
    unit: [{ trigger: "blur", message: "请输入" }],
    taxIncludingPriceUnit: [
        {
            required: true,
            trigger: "blur",
            validator: (rule, value, callback) => {
                if (value === undefined || value === null || value === '') {
                    callback(new Error("请输入资产原值"));
                } else if (typeof value === 'number' && value >= 0) {
                    callback();
                } else {
                    callback(new Error("请输入有效的资产原值"));
                }
            }
        }
    ],
    planRuntimeTime: [{ trigger: "change", message: "请选择" }],
}
  defineOptions({
    name: "设备台账表单",
  });
  const formRef = ref(null);
  const operationType = ref("");
  const formRules = {
    deviceName: [{ required: true, trigger: "blur", message: "请输入" }],
    deviceModel: [{ trigger: "blur", message: "请输入" }],
    supplierName: [{ trigger: "blur", message: "请输入" }],
    unit: [{ trigger: "blur", message: "请输入" }],
    taxIncludingPriceUnit: [
      {
        required: true,
        trigger: "blur",
        validator: (rule, value, callback) => {
          if (value === undefined || value === null || value === "") {
            callback(new Error("请输入资产原值"));
          } else if (typeof value === "number" && value >= 0) {
            callback();
          } else {
            callback(new Error("请输入有效的资产原值"));
          }
        },
      },
    ],
    planRuntimeTime: [{ trigger: "change", message: "请选择" }],
  };

const { form, resetForm } = useFormData({
  deviceName: undefined, // 设备名称
  deviceModel: undefined, // 规格型号
  deviceBrand: undefined, // 设备品牌
  supplierName: undefined, // 供应商
  storageLocation: undefined, // 存放位置
  enableDepreciation: false, // 是否启用折旧
  unit: undefined, // 单位
  number: 1, // 数量
    taxIncludingPriceUnit: undefined, // 资产原值
  // createUser: useUserStore().nickName, // 录入人
  createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 录入日期
    planRuntimeTime: dayjs().format("YYYY-MM-DD"), // 录入日期
});
  const { form, resetForm } = useFormData({
    deviceName: undefined, // 设备名称
    deviceModel: undefined, // 规格型号
    // deviceBrand: undefined, // 设备品牌
    supplierName: undefined, // 供应商
    // storageLocation: undefined, // 存放位置
    enableDepreciation: false, // 是否启用折旧
    unit: undefined, // 单位
    number: 1, // 数量
    taxIncludingPriceUnit: undefined, // 资产原值
    // createUser: useUserStore().nickName, // 录入人
    createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 录入日期
    planRuntimeTime: dayjs().format("YYYY-MM-DD"), // 录入日期
  });

const loadForm = async (id) => {
    if (id) {
        operationType.value = 'edit'
    }
  const { code, data } = await getLedgerById(id);
  if (code == 200) {
    form.deviceName = data.deviceName;
    form.deviceModel = data.deviceModel;
    form.deviceBrand = data.deviceBrand;
    form.supplierName = data.supplierName;
    form.storageLocation = data.storageLocation;
    form.enableDepreciation = data.enableDepreciation;
    form.unit = data.unit;
    form.number = 1;
    form.taxIncludingPriceUnit = data.taxIncludingPriceUnit;
    form.createTime = data.createTime;
  }
};
  const loadForm = async id => {
    if (id) {
      operationType.value = "edit";
    }
    const { code, data } = await getLedgerById(id);
    if (code == 200) {
      form.deviceName = data.deviceName;
      form.deviceModel = data.deviceModel;
      // form.deviceBrand = data.deviceBrand;
      form.supplierName = data.supplierName;
      // form.storageLocation = data.storageLocation;
      form.enableDepreciation = data.enableDepreciation;
      form.unit = data.unit;
      form.number = 1;
      form.taxIncludingPriceUnit = data.taxIncludingPriceUnit;
      form.createTime = data.createTime;
    }
  };

  // 清除表单校验状态
  const clearValidate = () => {
    formRef.value?.clearValidate();
  };

  // 重置表单数据和校验状态
  const resetFormAndValidate = () => {
    resetForm();
    clearValidate();
  };

// 清除表单校验状态
const clearValidate = () => {
  formRef.value?.clearValidate();
};

// 重置表单数据和校验状态
const resetFormAndValidate = () => {
  resetForm();
  clearValidate();
};

defineExpose({
  form,
  loadForm,
  resetForm,
  clearValidate,
  resetFormAndValidate,
    formRef,
});
  defineExpose({
    form,
    loadForm,
    resetForm,
    clearValidate,
    resetFormAndValidate,
    formRef,
  });
</script>

 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"
          style="width: 240px"
          placeholder="请输入设备名称"
          clearable
          :prefix-icon="Search"
          @change="getTableData"
        />
        <el-input v-model="filters.deviceName"
                  style="width: 240px"
                  placeholder="请输入设备名称"
                  clearable
                  :prefix-icon="Search"
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input
            v-model="filters.deviceModel"
            style="width: 240px"
            placeholder="请输入规格型号"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
        <el-input v-model="filters.deviceModel"
                  style="width: 240px"
                  placeholder="请输入规格型号"
                  clearable
                  :prefix-icon="Search"
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="供应商">
        <el-input
            v-model="filters.supplierName"
            style="width: 240px"
            placeholder="请输入供应商"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
        <el-input v-model="filters.supplierName"
                  style="width: 240px"
                  placeholder="请输入供应商"
                  clearable
                  :prefix-icon="Search"
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="单位">
        <el-input
            v-model="filters.unit"
            style="width: 240px"
            placeholder="请输入单位"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
        <el-input v-model="filters.unit"
                  style="width: 240px"
                  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-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,84 +53,85 @@
      <div class="actions">
        <div></div>
        <div>
          <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))"
          >
          <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))">
            批量删除
          </el-button>
        </div>
      </div>
      <PIMTable
        rowKey="id"
        isSelection
        :column="columns"
        :tableData="dataList"
        :page="{
      <PIMTable rowKey="id"
                isSelection
                :column="columns"
                :tableData="dataList"
                :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
        @pagination="changePage"
      >
                @selection-change="handleSelectionChange"
                @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-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
            >
            <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 type="primary"
                     @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
@@ -140,317 +140,324 @@
</template>

<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
// import { Search } from "@element-plus/icons-vue";
import { getLedgerPage, delLedger } from "@/api/equipmentManagement/ledger";
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 { getToken } from "@/utils/auth.js";
  import { usePaginationApi } from "@/hooks/usePaginationApi";
  // import { Search } from "@element-plus/icons-vue";
  import { getLedgerPage, delLedger } from "@/api/equipmentManagement/ledger";
  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 { getToken } from "@/utils/auth.js";

defineOptions({
  name: "设备台账",
});

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

const {
  filters,
  columns,
  dataList,
  pagination,
  getTableData,
  resetFilters,
  onCurrentChange,
} = usePaginationApi(
  getLedgerPage,
  {
    deviceName: undefined,
    deviceModel: undefined,
    supplierName: undefined,
    unit: undefined,
    entryDateStart: undefined,
    entryDateEnd: undefined,
  },
  [
    {
      label: "设备名称",
      align: "center",
      prop: "deviceName",
    },
    {
      label: "规格型号",
      align: "center",
      prop: "deviceModel",
    },
    {
      label: "设备品牌",
      align: "center",
      prop: "deviceBrand",
    },
    {
      label: "供应商",
      align: "center",
      prop: "supplierName",
    },
    {
      label: "单位",
      align: "center",
      prop: "unit",
    },
    {
      label: "存放位置",
      align: "center",
      prop: "storageLocation",
    },
    {
      label: "数量",
      align: "center",
      prop: "number",
    },
    {
      label: "资产原值",
      align: "center",
      prop: "taxIncludingPriceUnit",
    },
    {
      label: "启用折旧",
      align: "center",
      prop: "enableDepreciation",
      formatData: (v) => (v ? "是" : "否"),
    },
    {
      label: "录入人",
      align: "center",
      prop: "createUser",
    },
    {
      label: "录入日期",
      align: "center",
      prop: "createTime",
    },
        {
            dataType: "action",
            label: "操作",
            align: "center",
            fixed: 'right',
            width: 150,
            operation: [
                {
                    name: "编辑",
                    type: "text",
                    clickFun: (row) => {
                        edit(row.id)
                    },
                },
                {
                    name: "生成二维码",
                    type: "text",
                    clickFun: (row) => {
                        showQRCode(row)
                    },
                },
            ],
        },
  ]
);

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) => {
  multipleList.value = selectionList;
};

const add = () => {
  modalRef.value.openModal();
};
const edit = (id) => {
  modalRef.value.loadForm(id);
};
const changePage = ({ page, limit }) => {
  pagination.currentPage = page;
    pagination.pageSize = limit;
  onCurrentChange(page);
};
const deleteRow = (id) => {
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { code } = await delLedger(id);
    if (code == 200) {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getTableData();
    }
  defineOptions({
    name: "设备台账",
  });
};

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 handleImport = () => {
  upload.title = "设备台账导入";
  upload.open = true;
}
  // 表格多选框选中项
  const multipleList = ref([]);
  const { proxy } = getCurrentInstance();
  const modalRef = ref();
  const qrDialogVisible = ref(false);
  const qrCodeUrl = ref("");
  const qrRowData = ref(null);

const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.download(`/device/ledger/export`, {}, "设备台账档案.xlsx");
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};
  const {
    filters,
    columns,
    dataList,
    pagination,
    getTableData,
    resetFilters,
    onCurrentChange,
  } = usePaginationApi(
    getLedgerPage,
    {
      deviceName: undefined,
      deviceModel: undefined,
      supplierName: undefined,
      unit: undefined,
      entryDateStart: undefined,
      entryDateEnd: undefined,
    },
    [
      {
        label: "设备名称",
        align: "center",
        prop: "deviceName",
      },
      {
        label: "规格型号",
        align: "center",
        prop: "deviceModel",
      },
      // {
      //   label: "设备品牌",
      //   align: "center",
      //   prop: "deviceBrand",
      // },
      {
        label: "供应商",
        align: "center",
        prop: "supplierName",
      },
      {
        label: "单位",
        align: "center",
        prop: "unit",
      },
      // {
      //   label: "存放位置",
      //   align: "center",
      //   prop: "storageLocation",
      // },
      {
        label: "数量",
        align: "center",
        prop: "number",
      },
      {
        label: "资产原值",
        align: "center",
        prop: "taxIncludingPriceUnit",
      },
      {
        label: "启用折旧",
        align: "center",
        prop: "enableDepreciation",
        formatData: v => (v ? "是" : "否"),
      },
      {
        label: "录入人",
        align: "center",
        prop: "createUser",
      },
      {
        label: "录入日期",
        align: "center",
        prop: "createTime",
      },
      {
        dataType: "action",
        label: "操作",
        align: "center",
        fixed: "right",
        width: 150,
        operation: [
          {
            name: "编辑",
            type: "text",
            clickFun: row => {
              edit(row.id);
            },
          },
          {
            name: "生成二维码",
            type: "text",
            clickFun: row => {
              showQRCode(row);
            },
          },
        ],
      },
    ]
  );

const showQRCode = async (row) => {
  // 直接使用URL，不要用JSON.stringify包装
  const qrContent = proxy.javaApi + '/device-info?deviceId=' + row.id;
  qrCodeUrl.value = await QRCode.toDataURL(qrContent);
  qrRowData.value = row;
  qrDialogVisible.value = true;
};
  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 downloadQRCode = () => {
  const name = qrRowData.value?.deviceName || "二维码";
  const img = new Image();
  img.src = qrCodeUrl.value;
  img.onload = () => {
    const padding = 10;
    const qrSize = 200;
    const textHeight = 24; // space for text
    const width = qrSize + padding * 2;
    const height = qrSize + padding * 2 + textHeight;
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext("2d");
    // background
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, width, height);
    // draw QR centered
    ctx.drawImage(img, padding, padding, qrSize, qrSize);
    // draw name centered below
    ctx.fillStyle = "#333";
    ctx.font = "14px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    const maxTextWidth = width - padding * 2;
    let displayName = name;
    // ellipsis if too long
    while (ctx.measureText(displayName).width > maxTextWidth && displayName.length > 0) {
      displayName = displayName.slice(0, -1);
    }
    if (displayName !== name) displayName = displayName + "…";
    ctx.fillText(displayName, width / 2, qrSize + padding + textHeight / 2);

    const dataUrl = canvas.toDataURL("image/png");
    const a = document.createElement("a");
    a.href = dataUrl;
    a.download = `${name}.png`;
    a.click();
  /** 提交上传文件 */
  const submitFileForm = () => {
    upload.isUploading = true;
    proxy.$refs["uploadRef"].submit();
  };
};

onMounted(() => {
  getTableData();
});
  /** 下载模板 */
  const importTemplate = () => {
    proxy.download("/device/ledger/downloadTemplate", {}, "设备台账模板.xlsx");
  };

  // 多选后做什么
  const handleSelectionChange = selectionList => {
    multipleList.value = selectionList;
  };

  const add = () => {
    modalRef.value.openModal();
  };
  const edit = id => {
    modalRef.value.loadForm(id);
  };
  const changePage = ({ page, limit }) => {
    pagination.currentPage = page;
    pagination.pageSize = limit;
    onCurrentChange(page);
  };
  const deleteRow = id => {
    ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      const { code } = await delLedger(id);
      if (code == 200) {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getTableData();
      }
    });
  };

  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 handleImport = () => {
    upload.title = "设备台账导入";
    upload.open = true;
  };

  const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        proxy.download(`/device/ledger/export`, {}, "设备台账档案.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };

  const showQRCode = async row => {
    // 直接使用URL，不要用JSON.stringify包装
    const qrContent = proxy.javaApi + "/device-info?deviceId=" + row.id;
    qrCodeUrl.value = await QRCode.toDataURL(qrContent);
    qrRowData.value = row;
    qrDialogVisible.value = true;
  };

  const downloadQRCode = () => {
    const name = qrRowData.value?.deviceName || "二维码";
    const img = new Image();
    img.src = qrCodeUrl.value;
    img.onload = () => {
      const padding = 10;
      const qrSize = 200;
      const textHeight = 24; // space for text
      const width = qrSize + padding * 2;
      const height = qrSize + padding * 2 + textHeight;
      const canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext("2d");
      // background
      ctx.fillStyle = "#ffffff";
      ctx.fillRect(0, 0, width, height);
      // draw QR centered
      ctx.drawImage(img, padding, padding, qrSize, qrSize);
      // draw name centered below
      ctx.fillStyle = "#333";
      ctx.font = "14px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      const maxTextWidth = width - padding * 2;
      let displayName = name;
      // ellipsis if too long
      while (
        ctx.measureText(displayName).width > maxTextWidth &&
        displayName.length > 0
      ) {
        displayName = displayName.slice(0, -1);
      }
      if (displayName !== name) displayName = displayName + "…";
      ctx.fillText(displayName, width / 2, qrSize + padding + textHeight / 2);

      const dataUrl = canvas.toDataURL("image/png");
      const a = document.createElement("a");
      a.href = dataUrl;
      a.download = `${name}.png`;
      a.click();
    };
  };

  onMounted(() => {
    getTableData();
  });
</script>

<style lang="scss" scoped>
.table_list {
  margin-top: unset;
}
.actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
  .table_list {
    margin-top: unset;
  }
  .actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
</style>