From c104bf2b4ecf604245b38590bf1e8119530de10b Mon Sep 17 00:00:00 2001 From: yaowanxin <3588231647@qq.com> Date: 星期二, 12 八月 2025 16:26:55 +0800 Subject: [PATCH] Merge branch 'ywx' of http://114.132.189.42:9002/r/product-inventory-management into dev_ai --- src/views/energyManagement/waterManagement/index.vue | 312 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 312 insertions(+), 0 deletions(-) diff --git a/src/views/energyManagement/waterManagement/index.vue b/src/views/energyManagement/waterManagement/index.vue new file mode 100644 index 0000000..181ae88 --- /dev/null +++ b/src/views/energyManagement/waterManagement/index.vue @@ -0,0 +1,312 @@ +<template> + <div class="app-container"> + <div class="search_form"> + <div> + <span class="search_title">璁惧鍚嶇О锛�</span> + <el-input + v-model="searchForm.deviceName" + style="width: 240px" + placeholder="璇疯緭鍏�" + @change="handleQuery" + clearable + :prefix-icon="Search" + /> + <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="info" plain icon="Upload" @click="handleImport">瀵煎叆</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" + ></PIMTable> + </div> + <form-dia ref="formDia" @close="handleQuery"></form-dia> + <el-dialog + :title="upload.title" + v-model="upload.open" + width="400px" + append-to-body + @close="handleDialogClose" + > + <el-upload + ref="uploadRef" + :limit="1" + accept=".xlsx, .xls" + :headers="upload.headers" + :action="upload.url" + :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>浠呭厑璁稿鍏ls銆亁lsx鏍煎紡鏂囦欢銆�</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> + +<script setup> +import {Search} from "@element-plus/icons-vue"; +import {onMounted, ref, reactive, nextTick} from "vue"; +import FormDia from "@/views/energyManagement/waterManagement/components/formDia.vue"; +import {ElMessageBox} from "element-plus"; +import {getToken} from "@/utils/auth.js"; +import {waterEquipmentDelete, waterEquipmentListPage} from "@/api/energyManagement/waterManagement.js"; +const { proxy } = getCurrentInstance(); + +const data = reactive({ + searchForm: { + name: "", + }, +}); +const { searchForm } = toRefs(data); + +const selectedRows = ref([]); +const tableColumn = ref([ + { + label: "璁惧鍚嶇О", + prop: "deviceName", + width: 200, + }, + { + label: "瑙勬牸鍨嬪彿", + prop: "deviceModel", + width: 200, + }, + { + label: "棰濆畾娴侀噺", + prop: "ratedRate", + }, + { + label: "瀹為檯娴侀噺", + prop: "actualTraffic", + }, + { + label: "杩愯鏃堕棿", + prop: "runTime", + width:150 + }, + { + label: "褰撴棩鐢ㄦ按閲�", + prop: "waterDay", + width: 150, + }, + { + label: "姣忔棩闄愬埗姘撮噺", + prop: "waterDayLimit", + width:220 + }, + { + label: "姘磋垂鍗曚环", + prop: "waterPrice", + width: 120, + }, + { + dataType: "action", + label: "鎿嶄綔", + align: "center", + fixed: 'right', + operation: [ + { + name: "缂栬緫", + type: "text", + clickFun: (row) => { + openForm("edit", row); + }, + }, + ], + }, +]); +const tableData = ref([]); +const tableLoading = ref(false); +const page = reactive({ + current: 1, + size: 100, + total: 0, +}); +// 琛ㄦ牸閫夋嫨鏁版嵁 +const handleSelectionChange = (selection) => { + selectedRows.value = selection; +}; +const formDia = ref() +const upload = reactive({ + // 鏄惁鏄剧ず寮瑰嚭灞傦紙瀹㈡埛瀵煎叆锛� + open: false, + // 寮瑰嚭灞傛爣棰橈紙瀹㈡埛瀵煎叆锛� + title: "", + // 鏄惁绂佺敤涓婁紶 + isUploading: false, + // 璁剧疆涓婁紶鐨勮姹傚ご閮� + headers: { Authorization: "Bearer " + getToken() }, + // 涓婁紶鐨勫湴鍧� + url: import.meta.env.VITE_APP_BASE_API + "/waterRecord/importData", + // 鏂囦欢涓婁紶鍓嶇殑鍥炶皟 + 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); + if(response.code === 200){ + proxy.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛"); + }else if(response.code === 500){ + proxy.$modal.msgError(response.msg); + }else{ + proxy.$modal.msgError("鏂囦欢涓婁紶澶辫触"); + } + upload.open = false; + getList(); + }, + // 鏂囦欢涓婁紶澶辫触鏃剁殑鍥炶皟 + onError: (error, file, fileList) => { + console.log('涓婁紶澶辫触', error, file, fileList); + proxy.$modal.msgError("鏂囦欢涓婁紶澶辫触"); + upload.open = false; + }, + // 鏂囦欢涓婁紶杩涘害鏀瑰彉鏃剁殑鍥炶皟 + onProgress: (event, file, fileList) => { + console.log('涓婁紶杩涘害', event, file, fileList); + upload.isUploading = true; + }, +}); + +// 鏌ヨ鍒楄〃 +/** 鎼滅储鎸夐挳鎿嶄綔 */ +const handleQuery = () => { + page.current = 1; + getList(); +}; +const pagination = (obj) => { + page.current = obj.page; + page.size = obj.limit; + getList(); +}; + +const getList = () => { + tableLoading.value = true; + waterEquipmentListPage({ ...searchForm.value, ...page }).then((res) => { + tableLoading.value = false; + tableData.value = res.data.records; + page.total = res.data.total; + }).catch(() => { + tableLoading.value = false; + }) +}; + +// 鎵撳紑寮规 +const openForm = (type, row) => { + nextTick(() => { + formDia.value?.openDialog(type, row) + }) +}; + +/** 瀵煎叆鎸夐挳鎿嶄綔 */ +function handleImport() { + upload.title = "鐢ㄦ按璁惧"; + upload.open = true; + // 娓呯┖涓婃涓婁紶鐨勬枃浠跺垪琛� + nextTick(() => { + proxy.$refs["uploadRef"]?.clearFiles(); + }); +} +function importTemplate() { + proxy.download( + "/waterRecord/export", + {}, + '鐢ㄦ按璁惧瀵煎叆妯$増.xlsx' + ); +} +/** 鎻愪氦涓婁紶鏂囦欢 */ +function submitFileForm() { + proxy.$refs["uploadRef"].submit(); +} + +/** 寮规鍏抽棴鏃舵竻绌烘枃浠跺垪琛� */ +function handleDialogClose() { + nextTick(() => { + proxy.$refs["uploadRef"]?.clearFiles(); + }); +} + +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(() => { + tableLoading.value = true; + waterEquipmentDelete(ids) + .then((res) => { + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + getList(); + }) + .finally(() => { + tableLoading.value = false; + }); + }) + .catch(() => { + proxy.$modal.msg("宸插彇娑�"); + }); +}; +onMounted(() => { + getList(); +}); +</script> + +<style scoped> + +</style> -- Gitblit v1.9.3