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 | 518 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 491 insertions(+), 27 deletions(-) diff --git a/src/views/basicData/customerFile/index.vue b/src/views/basicData/customerFile/index.vue index b4d6199..c4fa332 100644 --- a/src/views/basicData/customerFile/index.vue +++ b/src/views/basicData/customerFile/index.vue @@ -1,43 +1,507 @@ <template> -<div class="app-container"> - <div class="search_form"> - <div> - <span class="search_title">瀹㈡埛鍚嶇О锛�</span> - <el-input - v-model="input2" + <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 + > + </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">鏂板瀹㈡埛</el-button> - <el-button>瀵煎嚭</el-button> - <el-button type="danger" plain>鍒犻櫎</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> + <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" + format="YYYY-MM-DD" + type="date" + placeholder="璇烽�夋嫨" + clearable + 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> - <div class="table_list"> - <PIMTable :column="tableColumn"></PIMTable> - </div> -</div> </template> <script setup> -import { ref } from 'vue' -import {Search} from "@element-plus/icons-vue"; +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 input2 = ref('') const tableColumn = ref([ { - label: '鎵瑰噯鍐呭', - prop: 'ratifyRemark' - }, { - label: '鎵瑰噯浜�', - prop: 'ratifyName', + label: "瀹㈡埛鍚嶇О", + prop: "customerName", + width: 220, }, -]) + { + label: "绾崇◣浜鸿瘑鍒爜", + prop: "taxpayerIdentificationNumber", + width: 220, + }, + { + label: "鍦板潃鍙婅仈绯绘柟寮�", + prop: "addressPhone", + width: 220, + }, + { + label: "鑱旂郴浜�", + prop: "contactPerson", + }, + { + label: "鑱旂郴鐢佃瘽", + prop: "contactPhone", + }, + { + label: "閾惰鍩烘湰鎴�", + prop: "basicBankAccount", + }, + { + 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); + }, + }, + ], + }, +]); +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 operationType = ref(""); +const dialogFormVisible = ref(false); +const data = reactive({ + searchForm: { + customerName: "", + }, + form: { + customerName: "", + taxpayerIdentificationNumber: "", + companyAddress: "", + companyPhone: "", + contactPerson: "", + contactPhone: "", + maintainer: "", + maintenanceTime: "", + basicBankAccount: "", + bankAccount: "", + bankCode: "", + }, + rules: { + customerName: [{ 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" }, + ], + 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 = (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.records; + total.value = res.total; + }); +}; +// 琛ㄦ牸閫夋嫨鏁版嵁 +const handleSelectionChange = (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 = {}; + 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; +}; +// 鎻愪氦琛ㄥ崟 +const submitForm = () => { + proxy.$refs["formRef"].validate((valid) => { + if (valid) { + if (operationType.value === "edit") { + submitEdit(); + } else { + submitAdd(); + } + } + }); +}; +// 鎻愪氦鏂板 +const submitAdd = () => { + addCustomer(form.value).then((res) => { + proxy.$modal.msgSuccess("鎻愪氦鎴愬姛"); + closeDia(); + getList(); + }); +}; +// 鎻愪氦淇敼 +const submitEdit = () => { + updateCustomer(form.value).then((res) => { + proxy.$modal.msgSuccess("鎻愪氦鎴愬姛"); + closeDia(); + getList(); + }); +}; +// 鍏抽棴寮规 +const closeDia = () => { + 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("宸插彇娑�"); + }); +}; +// 鍒犻櫎 +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; + 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(); </script> -<style scoped lang="scss"> - -</style> \ No newline at end of file +<style scoped lang="scss"></style> -- Gitblit v1.9.3