JNBusiness/ruoyi-ui/src/views/customer/customer/index.vue

696 lines
24 KiB
Vue

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="客户编码" prop="cusCode">
<el-input
v-model="queryParams.cusCode"
placeholder="请输入客户编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="客户名称" prop="cusName">
<el-input
v-model="queryParams.cusName"
placeholder="请输入客户名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="SAP客户编码" prop="cusSapCode">
<el-input
v-model="queryParams.cusSapCode"
placeholder="请输入SAP客户编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="cusState">
<el-select v-model="queryParams.cusState" placeholder="请选择客户禁用状态" clearable>
<el-option
v-for="dict in dict.type.common_state"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="审批状态" prop="cusApprovalStatus">
<el-select v-model="queryParams.cusApprovalStatus" placeholder="请选择客户审批状态" clearable>
<el-option
v-for="dict in dict.type.cus_approval_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @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="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['customer:customer:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['customer:customer:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['customer:customer:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['customer:customer:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="客户ID" align="center" prop="cusId" v-if="false"/>
<el-table-column fixed label="审批状态" align="center" prop="cusApprovalStatus">
<template slot-scope="scope">
<dict-tag :options="dict.type.cus_approval_status" :value="scope.row.cusApprovalStatus"/>
</template>
</el-table-column>
<el-table-column fixed label="客户名称" align="center" prop="cusName" width="230px">
<template slot-scope="scope">
<el-link v-hasPermi="['customer:customer:edit']" :underline="false" type="primary" @click="handleUpdate(scope.row)">{{scope.row.cusName}}</el-link>
</template>
</el-table-column>
<el-table-column label="客户编码" align="center" prop="cusCode" width="230px"></el-table-column>
<el-table-column label="SAP客户编码" align="center" prop="cusSapCode" width="150px"/>
<el-table-column label="客户类型" align="center" prop="cusType" width="100px">
<template slot-scope="scope">
<dict-tag :options="dict.type.cus_type" :value="scope.row.cusType"/>
</template>
</el-table-column>
<el-table-column label="客户组" align="center" prop="cusGroup" width="100px">
<template slot-scope="scope">
<dict-tag :options="dict.type.cus_group" :value="scope.row.cusGroup"/>
</template>
</el-table-column>
<el-table-column label="创建人" align="center" prop="createName" width="100px"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="cusState">
<template slot-scope="scope">
<dict-tag :options="dict.type.common_state" :value="scope.row.cusState"/>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改客户管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1050px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row :gutter="8">
<el-col :span="8">
<el-form-item label="客户编码" prop="cusCode">
<el-input v-model="form.cusCode" placeholder="系统自动生成" :disabled="true"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="SAP客户编码" prop="cusSapCode">
<el-input v-model="form.cusSapCode" placeholder="审批通过自动生成" :disabled="true"/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="客户名称" prop="cusName">
<el-input v-model="form.cusName" placeholder="企查查查询" :disabled="true">
<el-button icon="el-icon-search" @click="openQcc" v-if="buttonShow"></el-button>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="8">
<el-col :span="12">
<el-form-item label="街道/门牌号" prop="cusStreet">
<el-input v-model="form.cusStreet" placeholder="请输入街道/门牌号" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="付款条件" prop="cusPaymentTerms">
<el-select v-model="form.cusPaymentTerms" placeholder="请选择付款条件" style="width: 100%;">
<el-option
v-for="dict in dict.type.cus_payment_terms"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="电话号码" prop="cusPhoneNumber">
<el-input v-model="form.cusPhoneNumber" placeholder="请输入电话号码" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="8">
<el-col :span="6">
<el-form-item label="增值税号" prop="cusVatNo">
<el-input v-model="form.cusVatNo" placeholder="企查查查询带出" :disabled="true"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="行业代码" prop="cusIndustryCode">
<el-input v-model="form.cusIndustryCode" placeholder="请输入行业代码" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="客户组类别" prop="cusGroup">
<el-select v-model="form.cusGroup" placeholder="请选择客户组类别" style="width: 100%;">
<el-option
v-for="dict in dict.type.cus_group"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="客户类型" prop="cusType">
<el-select v-model="form.cusType" placeholder="请选择客户类型" style="width: 100%;">
<el-option
v-for="dict in dict.type.cus_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="8">
<el-col :span="6">
<el-form-item label="国家" prop="cusCountry">
<el-select v-model="form.cusCountry" placeholder="请选择国家" style="width: 100%;">
<el-option
v-for="dict in dict.type.cus_country"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="语言" prop="cusLanguage">
<el-select v-model="form.cusLanguage" placeholder="请选择语言" style="width: 100%;">
<el-option
v-for="dict in dict.type.cus_language"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="客户标签" prop="cusLabel">
<el-input v-model="form.cusLabel" placeholder="请输入客户标签" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="客户分类" prop="cusClassification">
<el-input v-model="form.cusClassification" placeholder="请输入客户分类" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="8">
<el-col :span="6">
<el-form-item label="电子发票邮箱" prop="cusReceivingEmail">
<el-input v-model="form.cusReceivingEmail" placeholder="请输入电子发票接收邮箱" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="收件人" prop="cusRecipient">
<el-input v-model="form.cusRecipient" placeholder="请输入收件人" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="收件人电话" prop="cusRecipientPhone">
<el-input v-model="form.cusRecipientPhone" placeholder="请输入收件人电话" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="8">
<el-col :span="24">
<el-form-item label="备注" prop="cusRemark">
<el-input type="textarea" autosize v-model="form.cusRemark" placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="center">银行信息</el-divider>
<el-row class="mb8" :gutter="8" v-if="buttonShow">
<el-col :span="1.5">
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddBank">添加</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteBank">删除</el-button>
</el-col>
</el-row>
<el-table :data="bankList" :row-class-name="rowBankIndex" @selection-change="handleBankSelectionChange" ref="bank">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="序号" align="center" prop="index" width="50"/>
<el-table-column label="银行名称" prop="bankName">
<template slot-scope="scope">
<el-input v-model="scope.row.bankName" placeholder="请输入银行名称" />
</template>
</el-table-column>
<el-table-column label="银行账户" prop="bankAccount">
<template slot-scope="scope">
<el-input v-model="scope.row.bankAccount" placeholder="请输入银行账户" />
</template>
</el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer" v-if="buttonShow">
<el-button @click="saveForm" v-hasPermi="['customer:customer:save']">保 存</el-button>
<el-button type="primary" plain @click="commitForm" v-hasPermi="['customer:customer:commit']">提 交</el-button>
</div>
</el-dialog>
<!-- 企查查 客户查询 对话框 -->
<el-dialog :title="qccTitle" :visible.sync="qccOpen" width="800px" :show-close="false" append-to-body>
<el-form :model="queryQccParams" ref="queryQccForm" size="small" :inline="true" label-width="100px">
<el-form-item label="公司名称" prop="Name">
<el-input
v-model="queryQccParams.Name"
placeholder="请输入公司名称"
clearable
/>
</el-form-item>
<el-form-item>
<el-button v-hasPermi="['customer:customer:qcclist']" type="primary" icon="el-icon-search" size="mini" @click="handleQccQuery">搜索</el-button>
</el-form-item>
</el-form>
<el-table v-loading="qccLoading" ref="qccTable" :data="qccCustomerList" @selection-change="handleSelectionQccChange" height="300">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="公司名" align="center" prop="name" />
<el-table-column label="法人" align="center" prop="operName" />
<el-table-column label="注册时间" align="center" prop="startDate" />
<el-table-column label="增值税号" align="center" prop="creditCode" />
</el-table>
<!--<pagination
v-show="qccTotal>0"
:total="qccTotal"
:page.sync="qccCurrentPage"
:limit.sync="qccPageSize"
@size-change="handleQccSizeChange"
@current-change="handleQccCurrentChange"
/>-->
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="qccConfirm" :disabled="qccSingle"> </el-button>
<el-button @click="qccCancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<style>
.el-dialog__body {
padding: 10px 10px;
color: #606266;
font-size: 14px;
word-break: break-all;
overflow-y: auto; /* 自动显示垂直滚动条 */
max-height: 560px; /* 设置最大高度,根据需要调整 */
}
</style>
<script>
import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer, commitCustomer, qccListCustomer } from "@/api/customer/customer";
export default {
name: "Customer",
dicts: ['cus_country', 'cus_payment_terms', 'cus_group', 'cus_approval_status', 'cus_language', 'cus_type', 'common_state'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 子表选中数据
checkedBank: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 客户管理表格数据
customerList: [],
// 银行表格数据
bankList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
cusCode: null,
cusName: null,
cusSapCode: null,
cusState: null,
cusApprovalStatus: null
},
// 表单参数
form: {},
// 表单校验
rules: {
cusName: [
{ required: true, message: "客户名称不能为空", trigger: "blur" }
],
cusStreet: [
{ required: true, message: "街道/门牌号不能为空", trigger: "blur" }
],
cusPaymentTerms: [
{ required: true, message: "付款条件不能为空", trigger: "change" }
],
cusPhoneNumber: [
{ required: true, message: "电话号码不能为空", trigger: "blur" }
],
cusIndustryCode: [
{ required: true, message: "行业代码不能为空", trigger: "blur" }
],
cusGroup: [
{ required: true, message: "客户组类别不能为空", trigger: "change" }
],
cusVatNo: [
{ required: true, message: "增值税号不能为空", trigger: "blur" }
],
cusCountry: [
{ required: true, message: "国家不能为空", trigger: "change" }
],
cusLanguage: [
{ required: true, message: "语言不能为空", trigger: "change" }
],
},
// 保存\提交,明细添加、删除 按钮显示
buttonShow: true,
/*****************************企查查查询模块*************************************/
// 遮罩层
qccLoading: false,
// 弹出层标题
qccTitle: "",
// 是否显示弹出层
qccOpen: false,
// 企查查客户表格数据
/*qccCurrentPage: 1,
qccPageSize: 10,
qccTotal: 0,*/
qccCustomerList: [], // 企查查客户数据
// 非单个禁用
qccSingle: true,
// 非多个禁用
qccMultiple: true,
queryQccParams:{
Name: null
}
/*****************************企查查查询模块*************************************/
};
},
created() {
this.getList();
},
methods: {
/** 查询客户管理列表 */
getList() {
this.loading = true;
listCustomer(this.queryParams).then(response => {
this.customerList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
cusId: null,
cusCode: null,
cusName: null,
cusSapCode: null,
cusStreet: null,
cusPaymentTerms: null,
cusPhoneNumber: null,
cusIndustryCode: null,
cusGroup: null,
cusVatNo: null,
cusType: null,
cusCountry: null,
cusLanguage: null,
cusLabel: null,
cusClassification: null,
cusReceivingEmail: null,
cusRecipient: null,
cusRecipientPhone: null,
cusRemark: null,
cusState: null,
cusApprovalStatus: null
};
this.bankList = [];
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.cusId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加客户信息";
//默认值
this.form.cusGroup = 'Z001';
this.form.cusCountry = 'CN';
this.form.cusLanguage = 'ZH';
this.form.cusType = '0';
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const cusId = row.cusId || this.ids
getCustomer(cusId).then(response => {
this.form = response.data;
this.buttonShow = this.form.cusApprovalStatus == '0'?true:false;
this.bankList = response.data.bankList;
this.open = true;
this.title = "修改客户信息";
});
},
/** 保存按钮 */
saveForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.bankList = this.bankList;
if (this.form.cusId != null) {
updateCustomer(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addCustomer(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 提交按钮 */
commitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.bankList = this.bankList;
commitCustomer(this.form).then(response => {
this.$modal.msgSuccess("提交成功");
this.open = false;
this.getList();
});
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const cusIds = row.cusId || this.ids;
this.$modal.confirm('是否确认删除客户管理编号为"' + cusIds + '"的数据项?').then(function() {
return delCustomer(cusIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 银行序号 */
rowBankIndex({ row, rowIndex }) {
row.index = rowIndex + 1;
},
/** 银行添加按钮操作 */
handleAddBank() {
let obj = {};
obj.bankName = "";
obj.bankAccount = "";
this.bankList.push(obj);
},
/** 银行删除按钮操作 */
handleDeleteBank() {
if (this.checkedBank.length == 0) {
this.$modal.msgError("请先选择要删除的银行数据");
} else {
const bankList = this.bankList;
const checkedBank = this.checkedBank;
this.bankList = bankList.filter(function(item) {
return checkedBank.indexOf(item.index) == -1
});
}
},
/** 复选框选中数据 */
handleBankSelectionChange(selection) {
this.checkedBank = selection.map(item => item.index)
},
/** 导出按钮操作 */
handleExport() {
this.download('customer/customer/export', {
...this.queryParams
}, `customer_${new Date().getTime()}.xlsx`)
},
/*****************************企查查查询模块*************************************/
/** 企查查客户弹出框 */
openQcc(){
this.qccOpen = true;
this.qccTitle = "企查查客户信息";
},
/** 切换每页显示条数 */
/*handleQccSizeChange(val) {
this.qccPageSize = val;
this.qccCurrentPage = 1;
},*/
/** 页码选择 */
/*handleQccCurrentChange(val) {
this.qccCurrentPage = val;
},*/
/** 企查查客户查询 */
handleQccQuery(){
if(!this.queryQccParams.Name){
this.$message.warning("请输入公司名称!");
return;
}
this.qccLoading = true;
qccListCustomer(this.queryQccParams).then(response => {
this.qccCustomerList = response.rows;
//this.qccTotal = response.total;
//this.qccCurrentPage = 1;
this.qccLoading = false;
});
},
// 多选框选中数据
handleSelectionQccChange(selection) {
this.qccSingle = selection.length!==1
this.qccMultiple = !selection.length
},
// 确认按钮
qccConfirm(){
const qccTable = this.$refs.qccTable;
const selectedData = qccTable.selection;
this.form.cusName = selectedData[0].name;
this.form.cusVatNo = selectedData[0].creditCode;
this.qccOpen = false;
},
// 取消按钮
qccCancel() {
this.qccOpen = false;
this.resetQccQuery();
},
/** 重置按钮操作 */
resetQccQuery() {
this.qccCustomerList = [];
//this.qccTotal = 0;
this.resetForm("queryQccForm");
}
/*****************************企查查查询模块*************************************/
},
/* computed: {
// 计算出当前页的企查查客户数据列表
qccPagedData() {
const startIndex = (this.qccCurrentPage - 1) * this.qccPageSize;
const endIndex = startIndex + this.qccPageSize;
return this.qccCustomerList.slice(startIndex, endIndex);
},
},*/
};
</script>