From 6e1fd2317216652e4625b8f149b50174f12edd11 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期日, 04 一月 2026 10:06:27 +0800
Subject: [PATCH] 代码调整8
---
src/views/contractor/list/index.vue | 1040 +++++++++++++++++++++++++++++----------------------------
1 files changed, 533 insertions(+), 507 deletions(-)
diff --git a/src/views/contractor/list/index.vue b/src/views/contractor/list/index.vue
index 8767039..17accee 100644
--- a/src/views/contractor/list/index.vue
+++ b/src/views/contractor/list/index.vue
@@ -1,572 +1,598 @@
<template>
<div class="app-container">
- <el-form
- :model="queryParams"
- ref="queryRef"
- :inline="true"
- v-show="showSearch"
- label-width="90px"
+ <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 class="table_list">
+ <PIMTable
+ rowKey="id"
+ :column="tableColumn"
+ :tableData="tableData"
+ :page="page"
+ :isSelection="true"
+ @selection-change="handleSelectionChange"
+ :tableLoading="tableLoading"
+ @pagination="pagination"
+ ></PIMTable>
+ </div>
+ <el-dialog
+ v-model="dialogFormVisible"
+ :title="operationType === 'add' ? '鏂板鎵垮寘鍟嗕俊鎭�' : '缂栬緫鎵垮寘鍟嗕俊鎭�'"
+ width="70%"
+ @close="closeDia"
>
- <el-form-item label="鎵垮寘鍟嗗悕绉�" prop="contractorName">
- <el-input
- v-model="queryParams.contractorName"
- placeholder="璇疯緭鍏ユ壙鍖呭晢鍚嶇О"
- clearable
- style="width: 220px"
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="鑱旂郴浜�" prop="contactPerson">
- <el-input
- v-model="queryParams.contactPerson"
- placeholder="璇疯緭鍏ヨ仈绯讳汉"
- clearable
- style="width: 240px"
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="鑱旂郴鐢佃瘽" prop="contactPhone">
- <el-input
- v-model="queryParams.contactPhone"
- placeholder="璇疯緭鍏ヨ仈绯荤數璇�"
- clearable
- style="width: 240px"
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="鐘舵��" prop="status">
- <el-select
- v-model="queryParams.status"
- placeholder="鎵垮寘鍟嗙姸鎬�"
- clearable
- style="width: 240px"
- >
- <el-option
- v-for="dict in sys_normal_disable"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery"
- >鎼滅储</el-button
- >
- <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
- </el-form-item>
- </el-form>
-
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button
- type="primary"
- plain
- icon="Plus"
- @click="handleAdd"
- >鏂板</el-button
- >
- </el-col>
- <el-col :span="1.5">
- <el-button
- type="success"
- plain
- icon="Edit"
- :disabled="single"
- @click="handleUpdate"
- >淇敼</el-button
- >
- </el-col>
- <el-col :span="1.5">
- <el-button
- type="danger"
- plain
- icon="Delete"
- :disabled="multiple"
- @click="handleDelete"
- >鍒犻櫎</el-button
- >
- </el-col>
- <right-toolbar
- v-model:showSearch="showSearch"
- @queryTable="getList"
- :columns="columns"
- ></right-toolbar>
- </el-row>
-
- <el-table
- v-loading="loading"
- :data="contractorList"
- @selection-change="handleSelectionChange"
- stripe
- >
- <el-table-column type="selection" width="50" align="center" />
- <el-table-column
- label="鎵垮寘鍟嗙紪鍙�"
- align="center"
- key="contractorId"
- prop="contractorId"
- v-if="columns[0].visible"
- />
- <el-table-column
- label="鎵垮寘鍟嗗悕绉�"
- align="center"
- key="contractorName"
- prop="contractorName"
- v-if="columns[1].visible"
- :show-overflow-tooltip="true"
- />
- <el-table-column
- label="鑱旂郴浜�"
- align="center"
- key="contactPerson"
- prop="contactPerson"
- v-if="columns[2].visible"
- />
- <el-table-column
- label="鑱旂郴鐢佃瘽"
- align="center"
- key="contactPhone"
- prop="contactPhone"
- v-if="columns[3].visible"
- />
- <el-table-column
- label="鑱旂郴閭"
- align="center"
- key="contactEmail"
- prop="contactEmail"
- v-if="columns[4].visible"
- :show-overflow-tooltip="true"
- />
- <el-table-column
- label="鍦板潃"
- align="center"
- key="address"
- prop="address"
- v-if="columns[5].visible"
- :show-overflow-tooltip="true"
- />
- <el-table-column
- label="鐘舵��"
- align="center"
- key="status"
- v-if="columns[6].visible"
+ <el-form
+ :model="form"
+ label-width="140px"
+ label-position="top"
+ :rules="rules"
+ ref="formRef"
>
- <template #default="scope">
- <el-switch
- v-model="scope.row.status"
- active-value="0"
- inactive-value="1"
- @change="handleStatusChange(scope.row)"
- ></el-switch>
- </template>
- </el-table-column>
- <el-table-column
- label="鍒涘缓鏃堕棿"
- align="center"
- prop="createTime"
- v-if="columns[7].visible"
- width="160"
- >
- <template #default="scope">
- <span>{{ parseTime(scope.row.createTime) }}</span>
- </template>
- </el-table-column>
- <el-table-column
- label="鎿嶄綔"
- align="center"
- width="150"
- class-name="small-padding fixed-width"
- >
- <template #default="scope">
- <el-tooltip
- content="淇敼"
- placement="top"
- >
- <el-button
- link
- type="primary"
- icon="Edit"
- @click="handleUpdate(scope.row)"
- ></el-button>
- </el-tooltip>
- <el-tooltip
- content="鍒犻櫎"
- placement="top"
- >
- <el-button
- link
- type="primary"
- icon="Delete"
- @click="handleDelete(scope.row)"
- ></el-button>
- </el-tooltip>
- </template>
- </el-table-column>
- </el-table>
- <pagination
- v-show="total > 0"
- :total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
- @pagination="getList"
- />
-
- <!-- 娣诲姞鎴栦慨鏀规壙鍖呭晢閰嶇疆瀵硅瘽妗� -->
- <el-dialog :title="title" v-model="open" width="600px" append-to-body>
- <el-form :model="form" :rules="rules" ref="contractorRef" label-width="80px">
- <el-row>
+ <el-row :gutter="30">
<el-col :span="12">
- <el-form-item label="鎵垮寘鍟嗗悕绉�" prop="contractorName">
+ <el-form-item label="鎵垮寘鍟嗗悕绉帮細" prop="customerName">
<el-input
- v-model="form.contractorName"
- placeholder="璇疯緭鍏ユ壙鍖呭晢鍚嶇О"
- maxlength="50"
+ v-model="form.customerName"
+ placeholder="璇疯緭鍏�"
+ clearable
/>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="鑱旂郴浜�" prop="contactPerson">
+ <el-form-item
+ label="绾崇◣浜鸿瘑鍒彿锛�"
+ prop="taxpayerIdentificationNumber"
+ >
<el-input
- v-model="form.contactPerson"
- placeholder="璇疯緭鍏ヨ仈绯讳汉"
- maxlength="20"
+ v-model="form.taxpayerIdentificationNumber"
+ placeholder="璇疯緭鍏�"
+ clearable
/>
</el-form-item>
</el-col>
</el-row>
- <el-row>
+ <el-row :gutter="30">
<el-col :span="12">
- <el-form-item label="鑱旂郴鐢佃瘽" prop="contactPhone">
+ <el-form-item label="鍏徃鍦板潃锛�" prop="companyAddress">
<el-input
- v-model="form.contactPhone"
- placeholder="璇疯緭鍏ヨ仈绯荤數璇�"
- maxlength="11"
+ v-model="form.companyAddress"
+ placeholder="璇疯緭鍏�"
+ clearable
/>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="鑱旂郴閭" prop="contactEmail">
+ <el-form-item label="鍏徃鐢佃瘽锛�" prop="companyPhone">
<el-input
- v-model="form.contactEmail"
- placeholder="璇疯緭鍏ヨ仈绯婚偖绠�"
- maxlength="50"
+ v-model="form.companyPhone"
+ placeholder="璇疯緭鍏�"
+ clearable
/>
</el-form-item>
</el-col>
</el-row>
- <el-row>
- <el-col :span="24">
- <el-form-item label="鍦板潃" prop="address">
- <el-input
- v-model="form.address"
- placeholder="璇疯緭鍏ュ湴鍧�"
- maxlength="100"
- />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
+ <el-row :gutter="30">
<el-col :span="12">
- <el-form-item label="鐘舵��">
- <el-radio-group v-model="form.status">
- <el-radio
- v-for="dict in sys_normal_disable"
- :key="dict.value"
- :value="dict.value"
- >{{ dict.label }}</el-radio
- >
- </el-radio-group>
+ <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>
- <el-col :span="24">
- <el-form-item label="澶囨敞">
+ <el-row :gutter="30">
+ <el-col :span="12">
+ <el-form-item label="寮�鎴疯鍙凤細" prop="bankCode">
<el-input
- v-model="form.remark"
- type="textarea"
- placeholder="璇疯緭鍏ュ唴瀹�"
- ></el-input>
+ v-model="form.bankCode"
+ placeholder="璇疯緭鍏�"
+ clearable
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="30" v-for="(contact, index) in formYYs.contactList" :key="index">
+ <el-col :span="12">
+ <el-form-item label="鑱旂郴浜猴細" prop="contactPerson">
+ <el-input v-model="contact.contactPerson" placeholder="璇疯緭鍏�" clearable />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鑱旂郴鐢佃瘽锛�" prop="contactPhone">
+ <div style="display: flex; align-items: center;width: 100%;">
+ <el-input v-model="contact.contactPhone" placeholder="璇疯緭鍏�" clearable />
+ <el-button @click="removeContact(index)" type="danger" circle style="margin-left: 5px;">
+ <el-icon><Close /></el-icon>
+ </el-button>
+ </div>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-button @click="addNewContact" style="margin-bottom: 10px;">+ 鏂板鑱旂郴浜�</el-button>
+ <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="cancel">鍙� 娑�</el-button>
+ <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"
+ :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 name="Contractor">
-import { ref, reactive, toRefs, watch, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
-import { parseTime } from '@/utils/ruoyi';
+<script setup>
+import {onMounted, 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 contractorList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-
-// 鍒楁樉闅愪俊鎭�
-const columns = ref([
- { key: 0, label: `鎵垮寘鍟嗙紪鍙穈, visible: true },
- { key: 1, label: `鎵垮寘鍟嗗悕绉癭, visible: true },
- { key: 2, label: `鑱旂郴浜篳, visible: true },
- { key: 3, label: `鑱旂郴鐢佃瘽`, visible: true },
- { key: 4, label: `鑱旂郴閭`, visible: true },
- { key: 5, label: `鍦板潃`, visible: true },
- { key: 6, label: `鐘舵�乣, visible: true },
- { key: 7, label: `鍒涘缓鏃堕棿`, visible: true },
-]);
-
-const data = reactive({
- form: {
- contractorId: undefined,
- contractorName: undefined,
- contactPerson: undefined,
- contactPhone: undefined,
- contactEmail: undefined,
- address: undefined,
- status: "0",
- remark: undefined,
+const tableColumn = ref([
+ {
+ label: "鎵垮寘鍟嗗悕绉�",
+ prop: "customerName",
+ width: 220,
},
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- contractorName: undefined,
- contactPerson: undefined,
- contactPhone: undefined,
- status: undefined,
+ {
+ label: "绾崇◣浜鸿瘑鍒爜",
+ prop: "taxpayerIdentificationNumber",
+ width: 220,
+ },
+ {
+ label: "鍦板潃鍙婅仈绯绘柟寮�",
+ prop: "addressPhone",
+ width: 250,
+ },
+ {
+ label: "鑱旂郴浜�",
+ prop: "contactPerson",
+ },
+ {
+ label: "鑱旂郴鐢佃瘽",
+ prop: "contactPhone",
+ width:150
+ },
+ {
+ label: "閾惰鍩烘湰鎴�",
+ prop: "basicBankAccount",
+ width: 220,
+ },
+ {
+ label: "閾惰璐﹀彿",
+ prop: "bankAccount",
+ width: 220,
+ },
+ {
+ label: "寮�鎴疯鍙�",
+ prop: "bankCode",
+ width:220
+ },
+ {
+ label: "缁存姢浜�",
+ prop: "maintainer",
+ },
+ {
+ label: "缁存姢鏃堕棿",
+ prop: "maintenanceTime",
+ width: 100,
+ },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: 'right',
+ operation: [
+ {
+ name: "缂栬緫",
+ type: "text",
+ clickFun: (row) => {
+ openForm("edit", row);
+ },
+ disabled: (row) => {
+ return row.maintainer !== userStore.nickName
+ }
+ },
+ ],
+ },
+]);
+const tableData = ref([]);
+const selectedRows = ref([]);
+const userList = ref([]);
+const tableLoading = ref(false);
+const page = reactive({
+ current: 1,
+ size: 100,
+ total: 0,
+});
+const total = ref(0);
+
+// 鐢ㄦ埛淇℃伅琛ㄥ崟寮规鏁版嵁
+const operationType = ref("");
+const dialogFormVisible = ref(false);
+const formYYs = ref({ // 鍏朵粬瀛楁...
+ contactList: [
+ {
+ contactPerson: "",
+ contactPhone: ""
+ }
+ ]
+});
+const data = reactive({
+ searchForm: {
+ customerName: "",
+ },
+ form: {
+ customerName: "",
+ taxpayerIdentificationNumber: "",
+ companyAddress: "",
+ companyPhone: "",
+ contactPerson: "",
+ contactPhone: "",
+ maintainer: "",
+ maintenanceTime: "",
+ basicBankAccount: "",
+ bankAccount: "",
+ bankCode: "",
},
rules: {
- contractorName: [
- { required: true, message: "鎵垮寘鍟嗗悕绉颁笉鑳戒负绌�", trigger: "blur" },
+ customerName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ taxpayerIdentificationNumber: [
+ { required: true, message: "璇疯緭鍏�", trigger: "blur" },
],
- contactPerson: [
- { 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" },
],
- contactPhone: [
- { required: true, message: "鑱旂郴鐢佃瘽涓嶈兘涓虹┖", trigger: "blur" },
- { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur" },
- ],
- contactEmail: [
- { type: "email", message: "璇疯緭鍏ユ纭殑閭鍦板潃", trigger: ["blur", "change"] },
- ],
- address: [
- { required: true, message: "鍦板潃涓嶈兘涓虹┖", trigger: "blur" },
- ],
+ basicBankAccount: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ bankAccount: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ bankCode: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
},
});
-
-const { queryParams, form, rules } = toRefs(data);
-
-// 妯℃嫙鏁版嵁
-const mockContractors = [
- {
- contractorId: 1,
- contractorName: "鍖椾含寤哄伐闆嗗洟",
- contactPerson: "寮犱笁",
- contactPhone: "13800138001",
- contactEmail: "zhangsan@example.com",
- address: "鍖椾含甯傛湞闃冲尯寤哄浗璺�88鍙�",
- status: "0",
- createTime: "2024-01-01 10:00:00",
- remark: "澶у瀷寤虹瓚鏂藉伐浼佷笟",
- },
- {
- contractorId: 2,
- contractorName: "涓婃捣鍩庡缓闆嗗洟",
- contactPerson: "鏉庡洓",
- contactPhone: "13800138002",
- contactEmail: "lisi@example.com",
- address: "涓婃捣甯傛郸涓滄柊鍖轰笘绾ぇ閬�100鍙�",
- status: "0",
- createTime: "2024-01-02 10:00:00",
- remark: "鍩庡競鍩虹璁炬柦寤鸿浼佷笟",
- },
- {
- contractorId: 3,
- contractorName: "骞垮窞寤虹瓚闆嗗洟",
- contactPerson: "鐜嬩簲",
- contactPhone: "13800138003",
- contactEmail: "wangwu@example.com",
- address: "骞垮窞甯傚ぉ娌冲尯鐝犳睙鏂板煄鍐兼潙璺�5鍙�",
- status: "1",
- createTime: "2024-01-03 10:00:00",
- remark: "骞夸笢鐪佺煡鍚嶅缓绛戜紒涓�",
- },
- {
- contractorId: 4,
- contractorName: "娣卞湷寤哄伐闆嗗洟",
- contactPerson: "璧靛叚",
- contactPhone: "13800138004",
- contactEmail: "zhaoliu@example.com",
- address: "娣卞湷甯傜鐢板尯绂忎腑涓夎矾1006鍙�",
- status: "0",
- createTime: "2024-01-04 10:00:00",
- remark: "娣卞湷甯傞噸鐐瑰缓绛戜紒涓�",
- },
- {
- contractorId: 5,
- contractorName: "鏉窞寤哄伐闆嗗洟",
- contactPerson: "瀛欎竷",
- contactPhone: "13800138005",
- contactEmail: "sunqi@example.com",
- address: "鏉窞甯傛睙骞插尯閽辨睙鏂板煄瀵屾槬璺�188鍙�",
- status: "0",
- createTime: "2024-01-05 10:00:00",
- remark: "娴欐睙鐪佺煡鍚嶅缓绛戜紒涓�",
- },
-];
-
-/** 鏌ヨ鎵垮寘鍟嗗垪琛� */
-function getList() {
- loading.value = true;
- // 妯℃嫙API璇锋眰寤惰繜
- setTimeout(() => {
- let data = [...mockContractors];
- // 妯℃嫙鎼滅储杩囨护
- if (queryParams.value.contractorName) {
- data = data.filter(item => item.contractorName.includes(queryParams.value.contractorName));
+const upload = reactive({
+ // 鏄惁鏄剧ず寮瑰嚭灞傦紙瀹㈡埛瀵煎叆锛�
+ open: false,
+ // 寮瑰嚭灞傛爣棰橈紙瀹㈡埛瀵煎叆锛�
+ title: "",
+ // 鏄惁绂佺敤涓婁紶
+ isUploading: false,
+ // 璁剧疆涓婁紶鐨勮姹傚ご閮�
+ headers: { Authorization: "Bearer " + getToken() },
+ // 涓婁紶鐨勫湴鍧�
+ url: import.meta.env.VITE_APP_BASE_API + "/basic/customer/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 鏂囦欢");
}
- if (queryParams.value.contactPerson) {
- data = data.filter(item => item.contactPerson.includes(queryParams.value.contactPerson));
+ 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.msgWarning(response.msg);
}
- if (queryParams.value.contactPhone) {
- data = data.filter(item => item.contactPhone.includes(queryParams.value.contactPhone));
- }
- if (queryParams.value.status) {
- data = data.filter(item => item.status === queryParams.value.status);
- }
- // 妯℃嫙鍒嗛〉
- const start = (queryParams.value.pageNum - 1) * queryParams.value.pageSize;
- const end = start + queryParams.value.pageSize;
- contractorList.value = data.slice(start, end);
- total.value = data.length;
- loading.value = false;
- }, 500);
-}
-
-/** 鎼滅储鎸夐挳鎿嶄綔 */
-function handleQuery() {
- queryParams.value.pageNum = 1;
- getList();
-}
-
-/** 閲嶇疆鎸夐挳鎿嶄綔 */
-function resetQuery() {
- Object.assign(queryParams.value, {
- contractorName: undefined,
- contactPerson: undefined,
- contactPhone: undefined,
- status: undefined,
- });
- handleQuery();
-}
-
-/** 鍒犻櫎鎸夐挳鎿嶄綔 */
-function handleDelete(row) {
- const contractorIds = row.contractorId || ids.value;
- ElMessage.confirm(`鏄惁纭鍒犻櫎鎵垮寘鍟嗙紪鍙蜂负"${contractorIds}"鐨勬暟鎹」锛焋).then(() => {
- // 妯℃嫙鍒犻櫎鎿嶄綔
- ElMessage.success("鍒犻櫎鎴愬姛");
- getList();
- }).catch(() => {});
-}
-
-/** 鐘舵�佷慨鏀� */
-function handleStatusChange(row) {
- let text = row.status === "0" ? "鍚敤" : "鍋滅敤";
- ElMessage.confirm(`纭瑕�"${text}""${row.contractorName}"鎵垮寘鍟嗗悧?`).then(() => {
- // 妯℃嫙鐘舵�佷慨鏀�
- ElMessage.success(text + "鎴愬姛");
- getList();
- }).catch(() => {
- row.status = row.status === "0" ? "1" : "0";
- });
-}
-
-/** 閫夋嫨鏉℃暟 */
-function handleSelectionChange(selection) {
- ids.value = selection.map((item) => item.contractorId);
- single.value = selection.length != 1;
- multiple.value = !selection.length;
-}
-
-/** 閲嶇疆鎿嶄綔琛ㄥ崟 */
-function reset() {
- form.value = {
- contractorId: undefined,
- contractorName: undefined,
- contactPerson: undefined,
- contactPhone: undefined,
- contactEmail: undefined,
- address: undefined,
- status: "0",
- remark: undefined,
- };
-}
-
-/** 鍙栨秷鎸夐挳 */
-function cancel() {
- open.value = false;
- reset();
-}
-
-/** 鏂板鎸夐挳鎿嶄綔 */
-function handleAdd() {
- reset();
- open.value = true;
- title.value = "娣诲姞鎵垮寘鍟�";
-}
-
-/** 淇敼鎸夐挳鎿嶄綔 */
-function handleUpdate(row) {
- reset();
- const contractorId = row.contractorId || ids.value;
- // 妯℃嫙鑾峰彇璇︽儏
- const contractor = mockContractors.find(item => item.contractorId === contractorId);
- if (contractor) {
- form.value = { ...contractor };
- open.value = true;
- title.value = "淇敼鎵垮寘鍟�";
+ },
+ // 鏂囦欢涓婁紶澶辫触鏃剁殑鍥炶皟
+ onError: (error, file, fileList) => {
+ console.error('涓婁紶澶辫触', error, file, fileList);
+ proxy.$modal.msgError("鏂囦欢涓婁紶澶辫触");
+ },
+ // 鏂囦欢涓婁紶杩涘害鍥炶皟
+ onProgress: (event, file, fileList) => {
+ console.log('涓婁紶涓�...', event.percent);
}
+});
+const { searchForm, form, rules } = toRefs(data);
+const addNewContact = () => {
+ formYYs.value.contactList.push({
+ contactPerson: "",
+ contactPhone: ""
+ });
+};
+
+const removeContact = (index) => {
+ if (formYYs.value.contactList.length > 1) {
+ formYYs.value.contactList.splice(index, 1);
+ }
+};
+// 鏌ヨ鍒楄〃
+/** 鎼滅储鎸夐挳鎿嶄綔 */
+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;
+ page.total = 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;
+ formYYs.value.contactList = [
+ {
+ contactPerson: "",
+ contactPhone: ""
+ }
+ ];
+ form.value.maintenanceTime = getCurrentDate();
+ userListNoPage().then((res) => {
+ userList.value = res.data;
+ });
+ if (type === "edit") {
+ getCustomer(row.id).then((res) => {
+ form.value = { ...res.data };
+ formYYs.value.contactList = res.data.contactPerson.split(",").map((item, index) => {
+ return {
+ contactPerson: item,
+ contactPhone: res.data.contactPhone.split(",")[index]
+ }
+ });
-/** 鎻愪氦鎸夐挳 */
-function submitForm() {
- // 妯℃嫙琛ㄥ崟楠岃瘉
- const requiredFields = ['contractorName', 'contactPerson', 'contactPhone', 'address'];
- const isInvalid = requiredFields.some(field => !form.value[field]);
-
- if (isInvalid) {
- ElMessage.error("璇峰～鍐欏繀濉瓧娈�");
+ });
+ }
+ dialogFormVisible.value = true;
+};
+// 鎻愪氦琛ㄥ崟
+const submitForm = () => {
+ proxy.$refs["formRef"].validate((valid) => {
+ if (valid) {
+ if (operationType.value === "edit") {
+ submitEdit();
+ } else {
+ submitAdd();
+ }
+ }
+ });
+};
+// 鎻愪氦鏂板
+const submitAdd = () => {
+ if(formYYs.value.contactList.length < 1){
+ return proxy.$modal.msgWarning("璇疯嚦灏戞坊鍔犱竴涓仈绯讳汉");
+ }
+ form.value.contactPerson = formYYs.value.contactList.map(item => item.contactPerson).join(",");
+ form.value.contactPhone = formYYs.value.contactList.map(item => item.contactPhone).join(",");
+ addCustomer(form.value).then((res) => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeDia();
+ getList();
+ });
+};
+// 鎻愪氦淇敼
+const submitEdit = () => {
+ form.value.contactPerson = formYYs.value.contactList.map(item => item.contactPerson).join(",");
+ form.value.contactPhone = formYYs.value.contactList.map(item => item.contactPhone).join(",");
+ 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) {
+ // 妫�鏌ユ槸鍚︽湁浠栦汉缁存姢鐨勬暟鎹�
+ const unauthorizedData = selectedRows.value.filter(item => item.maintainer !== userStore.nickName);
+ if (unauthorizedData.length > 0) {
+ proxy.$modal.msgWarning("涓嶅彲鍒犻櫎浠栦汉缁存姢鐨勬暟鎹�");
+ return;
+ }
+ 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("宸插彇娑�");
+ });
+};
- // 妯℃嫙鎻愪氦鎿嶄綔
- ElMessage.success(title.value === "娣诲姞鎵垮寘鍟�" ? "鏂板鎴愬姛" : "淇敼鎴愬姛");
- open.value = false;
- getList();
+// 鑾峰彇褰撳墠鏃ユ湡骞舵牸寮忓寲涓� 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}`;
}
-
-// 妯℃嫙瀛楀吀鏁版嵁
-const sys_normal_disable = [
- { value: "0", label: "姝ｅ父" },
- { value: "1", label: "绂佺敤" },
-];
onMounted(() => {
getList();
});
</script>
+
+<style scoped lang="scss"></style>
--
Gitblit v1.9.3