From 694630cabe480c86a73e2965ba55952df1088313 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 17 四月 2026 16:23:25 +0800
Subject: [PATCH] 导入弹窗关闭，列表清除
---
src/views/basicData/customerFile/index.vue | 192 +++++++++++++++++++++++++++++++++--------------
1 files changed, 135 insertions(+), 57 deletions(-)
diff --git a/src/views/basicData/customerFile/index.vue b/src/views/basicData/customerFile/index.vue
index cdb802b..c5819b7 100644
--- a/src/views/basicData/customerFile/index.vue
+++ b/src/views/basicData/customerFile/index.vue
@@ -16,14 +16,12 @@
@click="handleDeleteRegion">鍒犻櫎</el-button>
</div>
</div>
-
<div class="left-search">
<el-input v-model="regionKeyword"
placeholder="鏌ヨ鍦板尯"
clearable
:prefix-icon="Search" />
</div>
-
<div class="left-list">
<el-skeleton v-if="regionsLoading"
:rows="8"
@@ -46,46 +44,45 @@
</template>
</div>
</div>
-
<div class="right-panel">
<div class="toolbar-card">
<div class="search_form right-search-form">
- <div class="search-fields">
- <span class="search_title">瀹㈡埛鍚嶇О锛�</span>
- <el-input v-model="searchForm.customerName"
- style="width: 240px;margin-right: 10px"
- placeholder="璇疯緭鍏�"
- @change="handleQuery"
- clearable
- :prefix-icon="Search" />
- <span class="search_title">瀹㈡埛鍒嗙被锛�</span>
- <el-select v-model="searchForm.customerType"
- placeholder="璇烽�夋嫨"
- style="width: 240px"
- clearable
- @change="handleQuery">
- <el-option label="闆跺敭瀹㈡埛"
- value="闆跺敭瀹㈡埛" />
- <el-option label="杩涢攢鍟嗗鎴�"
- value="杩涢攢鍟嗗鎴�" />
- </el-select>
- <el-button type="primary"
- @click="handleQuery"
- style="margin-left: 10px">鎼滅储</el-button>
- </div>
- <div class="toolbar-divider"></div>
- <div class="action-buttons">
- <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 class="search-fields">
+ <span class="search_title">瀹㈡埛鍚嶇О锛�</span>
+ <el-input v-model="searchForm.customerName"
+ style="width: 240px;margin-right: 10px"
+ placeholder="璇疯緭鍏�"
+ @change="handleQuery"
+ clearable
+ :prefix-icon="Search" />
+ <span class="search_title">瀹㈡埛鍒嗙被锛�</span>
+ <el-select v-model="searchForm.customerType"
+ placeholder="璇烽�夋嫨"
+ style="width: 240px"
+ clearable
+ @change="handleQuery">
+ <el-option label="闆跺敭瀹㈡埛"
+ value="闆跺敭瀹㈡埛" />
+ <el-option label="杩涢攢鍟嗗鎴�"
+ value="杩涢攢鍟嗗鎴�" />
+ </el-select>
+ <el-button type="primary"
+ @click="handleQuery"
+ style="margin-left: 10px">鎼滅储</el-button>
+ </div>
+ <div class="toolbar-divider"></div>
+ <div class="action-buttons">
+ <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>
<div class="table_list table-card">
@@ -100,7 +97,6 @@
</div>
</div>
</div>
-
<el-dialog v-model="addRegionDialogVisible"
title="鏂板鍦板尯"
width="420px"
@@ -115,7 +111,8 @@
filterable
placeholder="涓嶉�夊垯涓洪《绾у湴鍖�" />
</el-form-item>
- <el-form-item label="鍦板尯鍚嶇О">
+ <el-form-item label="鍦板尯鍚嶇О"
+ required>
<el-input v-model="addRegionForm.regionsName"
placeholder="璇疯緭鍏�"
clearable />
@@ -326,6 +323,7 @@
<!-- 鐢ㄦ埛瀵煎叆瀵硅瘽妗� -->
<el-dialog :title="upload.title"
v-model="upload.open"
+ @close="onClose"
width="400px"
append-to-body>
<el-upload ref="uploadRef"
@@ -458,7 +456,7 @@
</div>
</el-col>
</el-row>
- <el-row :gutter="20">
+ <el-row :gutter="20">
<el-col :span="12">
<div class="info-item">
<span class="info-label">缁存姢鏃堕棿锛�</span>
@@ -483,7 +481,15 @@
</template>
<script setup>
- import { onMounted, ref, reactive, getCurrentInstance, toRefs, computed, watch } from "vue";
+ import {
+ onMounted,
+ ref,
+ reactive,
+ getCurrentInstance,
+ toRefs,
+ computed,
+ watch,
+ } from "vue";
import { Search } from "@element-plus/icons-vue";
import {
addCustomer,
@@ -592,7 +598,7 @@
},
{
label: "瀹㈡埛鍦板尯",
- prop: "regions",
+ prop: "regionsName",
width: 120,
},
{
@@ -676,13 +682,13 @@
// openReminderDialog(row);
// },
// },
- {
- name: "璇︽儏",
- type: "text",
- clickFun: row => {
- openDetailDialog(row);
- },
- },
+ {
+ name: "璇︽儏",
+ type: "text",
+ clickFun: row => {
+ openDetailDialog(row);
+ },
+ },
],
},
]);
@@ -721,6 +727,8 @@
taxpayerIdentificationNumber: "",
companyAddress: "",
regions: "",
+ regionsId: "",
+ regionsld: "",
companyPhone: "",
contactPerson: "",
contactPhone: "",
@@ -819,7 +827,11 @@
const addRegionDialogVisible = ref(false);
const editRegionDialogVisible = ref(false);
const addRegionForm = reactive({ parentPath: [], regionsName: "" });
- const editRegionForm = reactive({ id: undefined, parentId: 0, regionsName: "" });
+ const editRegionForm = reactive({
+ id: undefined,
+ parentId: 0,
+ regionsName: "",
+ });
const regionTreeProps = { label: "label", children: "children" };
const regionCascaderProps = {
value: "id",
@@ -851,6 +863,10 @@
regionsName: item.regionsName || item.label || "",
children: normalizeRegionTree(item.children || []),
}));
+ };
+ const onClose = () => {
+ upload.open = false;
+ proxy.$refs["uploadRef"].clearFiles();
};
const fetchRegions = async () => {
@@ -915,7 +931,9 @@
editRegionForm.id = selectedRegionNode.value.id;
editRegionForm.parentId = selectedRegionNode.value.parentId || 0;
editRegionForm.regionsName =
- selectedRegionNode.value.regionsName || selectedRegionNode.value.label || "";
+ selectedRegionNode.value.regionsName ||
+ selectedRegionNode.value.label ||
+ "";
editRegionDialogVisible.value = true;
};
const closeEditRegionDialog = () => {
@@ -958,10 +976,14 @@
const ids = value || [];
if (!ids.length) {
form.value.regions = "";
+ form.value.regionsId = "";
+ form.value.regionsld = "";
return;
}
const lastId = ids[ids.length - 1];
form.value.regions = regionNodeMap.value.get(lastId)?.regionsName || "";
+ form.value.regionsId = lastId;
+ form.value.regionsld = lastId;
};
const findRegionPathByName = (tree, targetName, parentPath = []) => {
for (const item of tree || []) {
@@ -969,7 +991,27 @@
if ((item.regionsName || item.label) === targetName) {
return currentPath;
}
- const childResult = findRegionPathByName(item.children || [], targetName, currentPath);
+ const childResult = findRegionPathByName(
+ item.children || [],
+ targetName,
+ currentPath
+ );
+ if (childResult.length) return childResult;
+ }
+ return [];
+ };
+ const findRegionPathById = (tree, targetId, parentPath = []) => {
+ if (targetId === undefined || targetId === null || targetId === "") return [];
+ for (const item of tree || []) {
+ const currentPath = [...parentPath, item.id];
+ if (String(item.id) === String(targetId)) {
+ return currentPath;
+ }
+ const childResult = findRegionPathById(
+ item.children || [],
+ targetId,
+ currentPath
+ );
if (childResult.length) return childResult;
}
return [];
@@ -1028,6 +1070,8 @@
operationType.value = type;
form.value = {};
formRegionPath.value = [];
+ form.value.regionsId = "";
+ form.value.regionsld = "";
form.value.maintainer = userStore.nickName;
formYYs.value.contactList = [
{
@@ -1042,10 +1086,28 @@
if (type === "edit") {
getCustomer(row.id).then(res => {
form.value = { ...res.data };
- formRegionPath.value = findRegionPathByName(
+ const regionIdForEdit = form.value.regionsId || form.value.regionsld;
+ formRegionPath.value = findRegionPathById(
regionTreeData.value,
- form.value.regions || ""
+ regionIdForEdit
);
+ if (!formRegionPath.value.length) {
+ formRegionPath.value = findRegionPathByName(
+ regionTreeData.value,
+ form.value.regionsName || form.value.regions || ""
+ );
+ }
+ const selectedRegionId =
+ formRegionPath.value.length > 0
+ ? formRegionPath.value[formRegionPath.value.length - 1]
+ : "";
+ if (selectedRegionId && !form.value.regions) {
+ form.value.regions =
+ regionNodeMap.value.get(selectedRegionId)?.regionsName || "";
+ }
+ form.value.regionsId = form.value.regionsId || selectedRegionId;
+ form.value.regionsld =
+ form.value.regionsld || form.value.regionsId || selectedRegionId;
formYYs.value.contactList = res.data.contactPerson
.split(",")
.map((item, index) => {
@@ -1081,6 +1143,11 @@
form.value.contactPhone = formYYs.value.contactList
.map(item => item.contactPhone)
.join(",");
+ if (!form.value.regionsId && formRegionPath.value.length) {
+ form.value.regionsId =
+ formRegionPath.value[formRegionPath.value.length - 1];
+ }
+ form.value.regionsld = form.value.regionsId || "";
addCustomer(form.value).then(res => {
proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
closeDia();
@@ -1095,6 +1162,11 @@
form.value.contactPhone = formYYs.value.contactList
.map(item => item.contactPhone)
.join(",");
+ if (!form.value.regionsId && formRegionPath.value.length) {
+ form.value.regionsId =
+ formRegionPath.value[formRegionPath.value.length - 1];
+ }
+ form.value.regionsld = form.value.regionsId || "";
updateCustomer(form.value).then(res => {
proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
closeDia();
@@ -1268,7 +1340,13 @@
.toolbar-divider {
width: 1px;
align-self: stretch;
- background: linear-gradient(to bottom, transparent, #e4e7ed 15%, #e4e7ed 85%, transparent);
+ background: linear-gradient(
+ to bottom,
+ transparent,
+ #e4e7ed 15%,
+ #e4e7ed 85%,
+ transparent
+ );
}
.action-buttons {
--
Gitblit v1.9.3