From 188eb07cbc0717ccee654290ec641a79d96713e4 Mon Sep 17 00:00:00 2001
From: liyong <18434998025@163.com>
Date: 星期一, 16 六月 2025 17:04:14 +0800
Subject: [PATCH] feat: 客户 供应商导入

---
 src/views/basicData/customerFile/index.vue |  386 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 374 insertions(+), 12 deletions(-)

diff --git a/src/views/basicData/customerFile/index.vue b/src/views/basicData/customerFile/index.vue
index b4d6199..d67c4b6 100644
--- a/src/views/basicData/customerFile/index.vue
+++ b/src/views/basicData/customerFile/index.vue
@@ -4,40 +4,402 @@
     <div>
       <span class="search_title">瀹㈡埛鍚嶇О锛�</span>
       <el-input
-          v-model="input2"
+          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">鏂板瀹㈡埛</el-button>
-      <el-button>瀵煎嚭</el-button>
-      <el-button type="danger" plain>鍒犻櫎</el-button>
+      <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 class="table_list">
-    <PIMTable :column="tableColumn"></PIMTable>
+    <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :isSelection="true" :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="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>
 </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";
+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", {}, '瀹㈡埛妗ｆ.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>

--
Gitblit v1.9.3