| | |
| | | <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> |
| | |
| | | <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" |
| | | <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" |
| | |
| | | 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" |
| | | <el-dialog :title="upload.title" |
| | | v-model="upload.open" |
| | | width="400px" |
| | | append-to-body |
| | | > |
| | | <el-upload |
| | | ref="uploadRef" |
| | | append-to-body> |
| | | <el-upload ref="uploadRef" |
| | | :limit="1" |
| | | accept=".xlsx, .xls" |
| | | :headers="upload.headers" |
| | |
| | | :on-error="upload.onError" |
| | | :on-change="upload.onChange" |
| | | :auto-upload="false" |
| | | drag |
| | | > |
| | | 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" |
| | | <el-link type="primary" |
| | | :underline="false" |
| | | style="font-size: 12px; vertical-align: baseline" |
| | | @click="importTemplate" |
| | | >下载模板</el-link |
| | | > |
| | | @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> |
| | |
| | | align: "center", |
| | | prop: "deviceModel", |
| | | }, |
| | | { |
| | | label: "设备品牌", |
| | | align: "center", |
| | | prop: "deviceBrand", |
| | | }, |
| | | // { |
| | | // label: "设备品牌", |
| | | // align: "center", |
| | | // prop: "deviceBrand", |
| | | // }, |
| | | { |
| | | label: "供应商", |
| | | align: "center", |
| | |
| | | align: "center", |
| | | prop: "unit", |
| | | }, |
| | | { |
| | | label: "存放位置", |
| | | align: "center", |
| | | prop: "storageLocation", |
| | | }, |
| | | // { |
| | | // label: "存放位置", |
| | | // align: "center", |
| | | // prop: "storageLocation", |
| | | // }, |
| | | { |
| | | label: "数量", |
| | | align: "center", |
| | |
| | | label: "启用折旧", |
| | | align: "center", |
| | | prop: "enableDepreciation", |
| | | formatData: (v) => (v ? "是" : "否"), |
| | | formatData: v => (v ? "是" : "否"), |
| | | }, |
| | | { |
| | | label: "录入人", |
| | |
| | | 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); |
| | | }, |
| | | }, |
| | | ], |
| | |
| | | // 上传的地址 |
| | | url: import.meta.env.VITE_APP_BASE_API + "/device/ledger/import", |
| | | // 文件上传前的回调 |
| | | beforeUpload: (file) => { |
| | | console.log('文件即将上传', file); |
| | | beforeUpload: file => { |
| | | console.log("文件即将上传", file); |
| | | // 可以在此处做文件类型或大小校验 |
| | | const isValid = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.name.endsWith('.xlsx') || file.name.endsWith('.xls'); |
| | | const isValid = |
| | | file.type === |
| | | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || |
| | | file.name.endsWith(".xlsx") || |
| | | file.name.endsWith(".xls"); |
| | | if (!isValid) { |
| | | proxy.$modal.msgError("只能上传 Excel 文件"); |
| | | } |
| | |
| | | }, |
| | | // 文件状态改变时的回调 |
| | | onChange: (file, fileList) => { |
| | | console.log('文件状态改变', file, fileList); |
| | | console.log("文件状态改变", file, fileList); |
| | | }, |
| | | // 文件上传成功时的回调 |
| | | onSuccess: (response, file, fileList) => { |
| | | console.log('上传成功', response, file, fileList); |
| | | console.log("上传成功", response, file, fileList); |
| | | upload.isUploading = false; |
| | | if(response.code === 200){ |
| | | proxy.$modal.msgSuccess("文件上传成功"); |
| | |
| | | }, |
| | | // 文件上传失败时的回调 |
| | | onError: (error, file, fileList) => { |
| | | console.error('上传失败', error, file, fileList); |
| | | console.error("上传失败", error, file, fileList); |
| | | upload.isUploading = false; |
| | | proxy.$modal.msgError("文件上传失败"); |
| | | }, |
| | | // 文件上传进度回调 |
| | | onProgress: (event, file, fileList) => { |
| | | console.log('上传中...', event.percent); |
| | | } |
| | | 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 }) => { |
| | |
| | | pagination.pageSize = limit; |
| | | onCurrentChange(page); |
| | | }; |
| | | const deleteRow = (id) => { |
| | | const deleteRow = id => { |
| | | ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | |
| | | }); |
| | | }; |
| | | |
| | | 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"); |
| | |
| | | const handleImport = () => { |
| | | upload.title = "设备台账导入"; |
| | | upload.open = true; |
| | | } |
| | | }; |
| | | |
| | | const handleOut = () => { |
| | | ElMessageBox.confirm("选中的内容将被导出,是否确认导出?", "导出", { |
| | |
| | | }); |
| | | }; |
| | | |
| | | 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; |
| | |
| | | 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 + "…"; |