From 1c0f01cc462d37e146c34127d2883ca51e26d508 Mon Sep 17 00:00:00 2001 From: 曹睿 <360930172@qq.com> Date: 星期二, 24 六月 2025 17:12:32 +0800 Subject: [PATCH] fix: 修复PIMTable不支持懒加载问题。修复【来票登记】金额格式化显示NaN问题。 style: 重构来票登记页面。 feat: 完善文件上传组件功能。【来票台账】底部添加合计。【来票登记】添加上传附件 --- src/views/basicData/customerFile/index.vue | 610 +++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 407 insertions(+), 203 deletions(-) diff --git a/src/views/basicData/customerFile/index.vue b/src/views/basicData/customerFile/index.vue index 1a2b476..c4fa332 100644 --- a/src/views/basicData/customerFile/index.vue +++ b/src/views/basicData/customerFile/index.vue @@ -1,77 +1,170 @@ <template> -<div class="app-container"> - <div class="search_form"> - <div> - <span class="search_title">瀹㈡埛鍚嶇О锛�</span> - <el-input + <div class="app-container"> + <div class="search_form"> + <div> + <span class="search_title">瀹㈡埛鍚嶇О锛�</span> + <el-input v-model="searchForm.customerName" style="width: 240px" placeholder="璇疯緭鍏�" @change="handleQuery" clearable :prefix-icon="Search" - /> - <el-button type="primary" @click="handleQuery" style="margin-left: 10px">鎼滅储</el-button> + /> + <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 @click="handleOut">瀵煎嚭</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> - <el-button type="primary" @click="openForm('add')">鏂板瀹㈡埛</el-button> - <el-button @click="handleOut">瀵煎嚭</el-button> - <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button> + <div class="table_list"> + <PIMTable + rowKey="id" + :column="tableColumn" + :tableData="tableData" + :page="page" + :isSelection="true" + @selection-change="handleSelectionChange" + :tableLoading="tableLoading" + @pagination="pagination" + :total="total" + ></PIMTable> </div> - </div> - <div class="table_list"> - <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :handleSelectionChange="handleSelectionChange" - :tableLoading="tableLoading" @pagination="pagination" :total="total"></PIMTable> - </div> - <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '鏂板瀹㈡埛淇℃伅' : '缂栬緫瀹㈡埛淇℃伅'" width="70%" @close="closeDia"> - <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef"> - <el-row :gutter="30"> - <el-col :span="12"> - <el-form-item label="瀹㈡埛鍚嶇О锛�" prop="customerName"> - <el-input v-model="form.customerName" placeholder="璇疯緭鍏�" clearable/> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="绾崇◣浜鸿瘑鍒彿锛�" prop="taxpayerIdentificationNumber"> - <el-input v-model="form.taxpayerIdentificationNumber" placeholder="璇疯緭鍏�" clearable/> - </el-form-item> - </el-col> - </el-row> - <el-row :gutter="30"> - <el-col :span="12"> - <el-form-item label="鍏徃鍦板潃锛�" prop="companyAddress"> - <el-input v-model="form.companyAddress" placeholder="璇疯緭鍏�" clearable/> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="鍏徃鐢佃瘽锛�" prop="companyPhone"> - <el-input v-model="form.companyPhone" placeholder="璇疯緭鍏�" clearable/> - </el-form-item> - </el-col> - </el-row> - <el-row :gutter="30"> - <el-col :span="12"> - <el-form-item label="鑱旂郴浜猴細" prop="contactPerson"> - <el-input v-model="form.contactPerson" placeholder="璇疯緭鍏�" clearable/> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="鑱旂郴鐢佃瘽锛�" prop="contactPhone"> - <el-input v-model="form.contactPhone" placeholder="璇疯緭鍏�" clearable/> - </el-form-item> - </el-col> - </el-row> - <el-row :gutter="30"> - <el-col :span="12"> - <el-form-item label="缁存姢浜猴細" prop="maintainer"> - <el-select v-model="form.maintainer" placeholder="璇烽�夋嫨" clearable> - <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" :value="item.nickName"/> - </el-select> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="缁存姢鏃堕棿锛�" prop="maintenanceTime"> - <el-date-picker + <el-dialog + v-model="dialogFormVisible" + :title="operationType === 'add' ? '鏂板瀹㈡埛淇℃伅' : '缂栬緫瀹㈡埛淇℃伅'" + width="70%" + @close="closeDia" + > + <el-form + :model="form" + label-width="140px" + label-position="top" + :rules="rules" + ref="formRef" + > + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="瀹㈡埛鍚嶇О锛�" prop="customerName"> + <el-input + v-model="form.customerName" + placeholder="璇疯緭鍏�" + clearable + /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item + label="绾崇◣浜鸿瘑鍒彿锛�" + prop="taxpayerIdentificationNumber" + > + <el-input + v-model="form.taxpayerIdentificationNumber" + placeholder="璇疯緭鍏�" + clearable + /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="鍏徃鍦板潃锛�" prop="companyAddress"> + <el-input + v-model="form.companyAddress" + placeholder="璇疯緭鍏�" + clearable + /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鍏徃鐢佃瘽锛�" prop="companyPhone"> + <el-input + v-model="form.companyPhone" + placeholder="璇疯緭鍏�" + clearable + /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="鑱旂郴浜猴細" prop="contactPerson"> + <el-input + v-model="form.contactPerson" + placeholder="璇疯緭鍏�" + clearable + /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鑱旂郴鐢佃瘽锛�" prop="contactPhone"> + <el-input + v-model="form.contactPhone" + placeholder="璇疯緭鍏�" + clearable + /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="閾惰鍩烘湰鎴凤細" prop="basicBankAccount"> + <el-input + v-model="form.basicBankAccount" + placeholder="璇疯緭鍏�" + clearable + /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="閾惰璐﹀彿锛�" prop="bankAccount"> + <el-input + v-model="form.bankAccount" + placeholder="璇疯緭鍏�" + clearable + /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="寮�鎴疯鍙凤細" prop="bankCode"> + <el-input + v-model="form.bankCode" + placeholder="璇疯緭鍏�" + clearable + /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item label="缁存姢浜猴細" prop="maintainer"> + <el-select + v-model="form.maintainer" + placeholder="璇烽�夋嫨" + clearable + disabled + > + <el-option + v-for="item in userList" + :key="item.nickName" + :label="item.nickName" + :value="item.nickName" + /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="缁存姢鏃堕棿锛�" prop="maintenanceTime"> + <el-date-picker style="width: 100%" v-model="form.maintenanceTime" value-format="YYYY-MM-DD" @@ -79,225 +172,336 @@ type="date" placeholder="璇烽�夋嫨" clearable - /> - </el-form-item> - </el-col> - </el-row> - </el-form> - <template #footer> - <div class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭</el-button> - <el-button @click="closeDia">鍙栨秷</el-button> - </div> - </template> - </el-dialog> -</div> + disabled + /> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitForm">纭</el-button> + <el-button @click="closeDia">鍙栨秷</el-button> + </div> + </template> + </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" + :on-progress="handleFileUploadProgress" + :on-success="handleFileSuccess" + :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 { ref } from 'vue' -import {Search} from "@element-plus/icons-vue"; -import {addCustomer, delCustomer, getCustomer, listCustomer, updateCustomer} from "@/api/basicData/customerFile.js"; -import {ElMessageBox } from "element-plus"; -import {userListNoPage} from "@/api/system/user.js"; -const { proxy } = getCurrentInstance() +import { ref } from "vue"; +import { Search } from "@element-plus/icons-vue"; +import { + addCustomer, + delCustomer, + getCustomer, + listCustomer, + updateCustomer, +} from "@/api/basicData/customerFile.js"; +import { ElMessageBox } from "element-plus"; +import { userListNoPage } from "@/api/system/user.js"; +import useUserStore from "@/store/modules/user"; +import { getToken } from "@/utils/auth.js"; +const { proxy } = getCurrentInstance(); +const userStore = useUserStore(); const tableColumn = ref([ { - label: '瀹㈡埛鍚嶇О', - prop: 'customerName' + label: "瀹㈡埛鍚嶇О", + prop: "customerName", + width: 220, }, { - label: '绾崇◣浜鸿瘑鍒爜', - prop: 'taxpayerIdentificationNumber' + label: "绾崇◣浜鸿瘑鍒爜", + prop: "taxpayerIdentificationNumber", + width: 220, }, { - label: '鍦板潃鍙婅仈绯绘柟寮�', - prop: 'addressPhone' + label: "鍦板潃鍙婅仈绯绘柟寮�", + prop: "addressPhone", + width: 220, }, { - label: '鑱旂郴浜�', - prop: 'contactPerson' + label: "鑱旂郴浜�", + prop: "contactPerson", }, { - label: '鑱旂郴鐢佃瘽', - prop: 'contactPhone', + label: "鑱旂郴鐢佃瘽", + prop: "contactPhone", }, { - label: '缁存姢浜�', - prop: 'maintainer', + label: "閾惰鍩烘湰鎴�", + prop: "basicBankAccount", }, { - label: '缁存姢鏃堕棿', - prop: 'maintenanceTime', + label: "閾惰璐﹀彿", + prop: "bankAccount", + }, + { + label: "寮�鎴疯鍙�", + prop: "bankCode", + }, + { + label: "缁存姢浜�", + prop: "maintainer", + }, + { + label: "缁存姢鏃堕棿", + prop: "maintenanceTime", }, { dataType: "action", label: "鎿嶄綔", + align: "center", operation: [ { name: "缂栬緫", type: "text", clickFun: (row) => { - openForm('edit', row); + openForm("edit", row); }, }, ], }, -]) -const tableData = ref([]) -const selectedRows = ref([]) -const userList = ref([]) -const tableLoading = ref(false) +]); +const tableData = ref([]); +const selectedRows = ref([]); +const userList = ref([]); +const tableLoading = ref(false); const page = reactive({ current: 1, size: 10, -}) -const total = ref(0) +}); +const total = ref(0); // 鐢ㄦ埛淇℃伅琛ㄥ崟寮规鏁版嵁 -const operationType = ref('') -const dialogFormVisible = ref(false) +const operationType = ref(""); +const dialogFormVisible = ref(false); const data = reactive({ searchForm: { - customerName: '', + customerName: "", }, form: { - customerName: '', - taxpayerIdentificationNumber: '', - companyAddress: '', - companyPhone: '', - contactPerson: '', - contactPhone: '', - maintainer: '', - maintenanceTime: '', + customerName: "", + taxpayerIdentificationNumber: "", + companyAddress: "", + companyPhone: "", + contactPerson: "", + contactPhone: "", + maintainer: "", + maintenanceTime: "", + basicBankAccount: "", + bankAccount: "", + bankCode: "", }, rules: { customerName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], - taxpayerIdentificationNumber: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], + taxpayerIdentificationNumber: [ + { required: true, message: "璇疯緭鍏�", trigger: "blur" }, + ], companyAddress: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], companyPhone: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], contactPerson: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], contactPhone: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], maintainer: [{ required: false, message: "璇烽�夋嫨", trigger: "change" }], - maintenanceTime: [{ required: false, message: "璇烽�夋嫨", trigger: "change" }], - } -}) -const { searchForm, form, rules } = toRefs(data) + maintenanceTime: [ + { required: false, message: "璇烽�夋嫨", trigger: "change" }, + ], + basicBankAccount: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], + bankAccount: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], + bankCode: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], + }, +}); +const upload = reactive({ + // 鏄惁鏄剧ず寮瑰嚭灞傦紙瀹㈡埛瀵煎叆锛� + open: false, + // 寮瑰嚭灞傛爣棰橈紙瀹㈡埛瀵煎叆锛� + title: "", + // 鏄惁绂佺敤涓婁紶 + isUploading: false, + // 璁剧疆涓婁紶鐨勮姹傚ご閮� + headers: { Authorization: "Bearer " + getToken() }, + // 涓婁紶鐨勫湴鍧� + url: import.meta.env.VITE_APP_BASE_API + "/basic/customer/importData", +}); +const { searchForm, form, rules } = toRefs(data); // 鏌ヨ鍒楄〃 /** 鎼滅储鎸夐挳鎿嶄綔 */ const handleQuery = () => { - page.current = 1 - getList() -} -const pagination = ({ current, limit }) => { - page.current = current; - page.size = limit; - getList() -} + page.current = 1; + getList(); +}; +const pagination = (obj) => { + page.current = obj.page; + page.size = obj.limit; + getList(); +}; const getList = () => { - tableLoading.value = true - listCustomer({...searchForm.value, ...page}).then(res => { - tableLoading.value = false - tableData.value = res.rows - total.value = res.total - }) -} + tableLoading.value = true; + listCustomer({ ...searchForm.value, ...page }).then((res) => { + tableLoading.value = false; + tableData.value = res.records; + total.value = res.total; + }); +}; // 琛ㄦ牸閫夋嫨鏁版嵁 const handleSelectionChange = (selection) => { - selectedRows.value = selection + selectedRows.value = selection; +}; +/** 鎻愪氦涓婁紶鏂囦欢 */ +function submitFileForm() { + proxy.$refs["uploadRef"].submit(); +} +/** 瀵煎叆鎸夐挳鎿嶄綔 */ +function handleImport() { + upload.title = "瀹㈡埛瀵煎叆"; + upload.open = true; } // 鎵撳紑寮规 const openForm = (type, row) => { - operationType.value = type - form.value = {} - userListNoPage().then(res => { - userList.value = res.data - }) - if (type === 'edit') { - getCustomer(row.id).then(res => { - form.value = {...res.data} - }) + operationType.value = type; + form.value = {}; + form.value.maintainer = userStore.nickName; + form.value.maintenanceTime = getCurrentDate(); + userListNoPage().then((res) => { + userList.value = res.data; + }); + if (type === "edit") { + getCustomer(row.id).then((res) => { + form.value = { ...res.data }; + }); } - dialogFormVisible.value = true -} + dialogFormVisible.value = true; +}; // 鎻愪氦琛ㄥ崟 const submitForm = () => { - proxy.$refs["formRef"].validate(valid => { + proxy.$refs["formRef"].validate((valid) => { if (valid) { if (operationType.value === "edit") { - submitEdit() + submitEdit(); } else { - submitAdd() + submitAdd(); } } - }) -} + }); +}; // 鎻愪氦鏂板 const submitAdd = () => { - addCustomer(form.value).then(res => { - proxy.$modal.msgSuccess("鎻愪氦鎴愬姛") - closeDia() - getList() - }) -} + addCustomer(form.value).then((res) => { + proxy.$modal.msgSuccess("鎻愪氦鎴愬姛"); + closeDia(); + getList(); + }); +}; // 鎻愪氦淇敼 const submitEdit = () => { - updateCustomer(form.value).then(res => { - proxy.$modal.msgSuccess("鎻愪氦鎴愬姛") - closeDia() - getList() - }) -} + updateCustomer(form.value).then((res) => { + proxy.$modal.msgSuccess("鎻愪氦鎴愬姛"); + closeDia(); + getList(); + }); +}; // 鍏抽棴寮规 const closeDia = () => { - proxy.resetForm("formRef") - dialogFormVisible.value = false -} + proxy.resetForm("formRef"); + dialogFormVisible.value = false; +}; // 瀵煎嚭 const handleOut = () => { - ElMessageBox.confirm( - '閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�', - '瀵煎嚭', { - confirmButtonText: '纭', - cancelButtonText: '鍙栨秷', - type: 'warning', - } - ).then(() => { - proxy.download("/basic/customer/export", {}, '瀹㈡埛妗f.xlsx') - }).catch(() => { - proxy.$modal.msg("宸插彇娑�") + ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", { + confirmButtonText: "纭", + cancelButtonText: "鍙栨秷", + type: "warning", }) -} + .then(() => { + proxy.download("/basic/customer/export", {}, "瀹㈡埛妗f.xlsx"); + }) + .catch(() => { + proxy.$modal.msg("宸插彇娑�"); + }); +}; // 鍒犻櫎 const handleDelete = () => { - let ids = [] + let ids = []; if (selectedRows.value.length > 0) { - ids = selectedRows.value.map(item => item.id); + ids = selectedRows.value.map((item) => item.id); } else { - proxy.$modal.msgWarning('璇烽�夋嫨鏁版嵁') - return + proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁"); + return; } - ElMessageBox.confirm( - '閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�', - '瀵煎嚭', { - confirmButtonText: '纭', - cancelButtonText: '鍙栨秷', - type: 'warning', - } - ).then(() => { - delCustomer(ids).then(res => { - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") - }) - getList() - }).catch(() => { - proxy.$modal.msg("宸插彇娑�") + ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず", { + confirmButtonText: "纭", + cancelButtonText: "鍙栨秷", + type: "warning", }) + .then(() => { + tableLoading.value = true; + delCustomer(ids) + .then((res) => { + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + getList(); + }) + .finally(() => { + tableLoading.value = false; + }); + }) + .catch(() => { + proxy.$modal.msg("宸插彇娑�"); + }); +}; + +// 鑾峰彇褰撳墠鏃ユ湡骞舵牸寮忓寲涓� YYYY-MM-DD +function getCurrentDate() { + const today = new Date(); + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, "0"); // 鏈堜唤浠�0寮�濮� + const day = String(today.getDate()).padStart(2, "0"); + return `${year}-${month}-${day}`; } -getList() + +getList(); </script> -<style scoped lang="scss"> - -</style> \ No newline at end of file +<style scoped lang="scss"></style> -- Gitblit v1.9.3