meswork/JY1.0
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2024-09-09 修改了大部分下拉组件为模糊筛选，减轻前端渲染压力

Browse Source
This commit is contained in:
zhangshun
2024-09-09 15:26:17 +08:00
parent fe5d3b70df
commit 563132273c
717 changed files with 107188 additions and 138520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

397
src/views/SalesManagement/CustomerManagement/index.vue Normal file
View File

@@ -0,0 +1,397 @@
<template>
<div class="app-container">
<el-card style="height: 850px">
<div style="margin-top: 7px; margin-bottom: 7px">
<el-input v-model="customerName" style="width: 200px" size="small" clearable placeholder="客户名称" @keyup.enter.native="pageCurrent = 1;pageSize = 100;searchTable()"/>
<el-input v-model="region" style="width: 200px;margin-left: 10px" clearable size="small" placeholder="省份" @keyup.enter.native="pageCurrent = 1;pageSize = 100;searchTable()"/>
<el-button icon="el-icon-search" type="primary" plain size="small" style="margin-left: 10px" @click="pageCurrent = 1;pageSize = 100;searchTable()">查询</el-button>
<el-button type="distribution" icon="el-icon-circle-plus-outline" size="small" @click="addCustomer();flag1 = 1">客户</el-button>
</div>
<div style="margin-top: 20px">
<el-table v-loading="loading" :data="tableData" highlight-current-row border stripe size="small" style="width: 1491px" height="740px">
<el-table-column :width="setColumnWidth('序号')" label="序号" type="index" align="center"/>
<el-table-column :width="setColumnWidth('客户编码')" label="客户编码" align="center" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.客户编码 }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('客户名称')" label="客户名称" align="center" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.客户名称 }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('简称')" label="简称" align="center" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.简称 }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('省份')" label="省份" align="center">
<template slot-scope="scope">
{{ scope.row.省份 }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('姓名')" label="联系人" align="center">
<template slot-scope="scope">
{{ scope.row.联系人 }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('联系电话')" label="联系电话" align="center">
<template slot-scope="scope">
{{ scope.row.经理电话 }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('姓名')" label="收货人" align="center">
<template slot-scope="scope">
{{ scope.row.收货人 }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('收货电话')" label="收货电话" align="center">
<template slot-scope="scope">
{{ scope.row.电话 }}
</template>
</el-table-column>
<el-table-column width="190px" label="邮寄地址" align="center">
<template slot-scope="scope">
{{ scope.row.地址 }}
</template>
</el-table-column>
<el-table-column width="150px" label="电子邮箱" align="center" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.电子邮箱 }}
</template>
</el-table-column>
<el-table-column width="150px" label="备注" align="center" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.备注 }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="120px">
<template slot-scope="scope">
<el-tooltip :open-delay="1000" class="item" effect="dark" content="编辑" placement="top">
<div style="display: inline-block">
<el-button
size="mini"
type="text"
class="el-icon-edit-outline"
@click="handleEdit(scope.row);flag1 = 2"/>
</div>
</el-tooltip>
<el-tooltip :open-delay="1000" class="item" effect="dark" content="删除" placement="top">
<div style="display: inline-block">
<el-button
size="mini"
type="text"
style="margin-left: 20px"
class="el-icon-delete"
@click="handleDelete(scope.row)"/>
</div>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<div class="block" style="margin-top: 10px;">
<el-pagination
:current-page="pageCurrent"
:page-sizes="[10, 20, 30, 40, 100]"
:page-size="pageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChanges"
@current-change="handleCurrentChanges"/>
</div>
</el-card>
<el-dialog v-el-drag-dialog :title="title" :visible.sync="dialogFormVisible" center width="700px">
<el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="90px" class="demo-ruleForm" style="margin: auto">
<el-row>
<el-col :span="12">
<el-form-item label="省份:" prop="省份">
<el-select v-model="form.省份" size="mini" style="margin: 0;width: 200px" placeholder="请选择省份" filterable clearable>
<el-option
v-for="item in province"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户编码:" prop="客户编码">
<el-input v-model="form.客户编码" clearable size="small" style="width:200px" placeholder="请输入客户编码"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户名称:" prop="客户名称">
<el-input v-model="form.客户名称" clearable size="small" style="width:200px" placeholder="请输入客户名称"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="简称:" prop="简称">
<el-input v-model="form.简称" clearable size="small" style="width:200px" placeholder="请输入简称"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系人:" prop="联系人">
<el-input v-model="form.联系人" clearable size="small" style="width:200px" placeholder="请输入联系人"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话:" prop="经理电话">
<el-input v-model="form.经理电话" clearable size="small" style="width:200px" placeholder="请输入联系电话"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="收货人:" prop="收货人">
<el-input v-model="form.收货人" clearable size="small" style="width:200px" placeholder="请输入收货人"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="收货电话:" prop="联系电话">
<el-input v-model="form.联系电话" clearable size="small" style="width:200px" placeholder="请输入收货电话"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮寄地址:" prop="邮寄地址">
<el-input v-model="form.邮寄地址" clearable size="small" style="width:200px" placeholder="请输入邮寄地址"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="电子邮箱:" prop="电子邮箱">
<el-input v-model="form.电子邮箱" clearable size="small" style="width:200px" placeholder="请输入电子邮箱"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注:" prop="备注">
<el-input v-model="form.备注" clearable size="small" style="width:200px" placeholder="请输入备注"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="callOff('form')">取消</el-button>
<el-button type="distribution" size="small" @click="submit('form')">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
region: '', // 地区
customerName: '', // 客户名称
customerValue: '',
province: [],
dialogFormVisible: false,
form: {
客户编码: '',
客户名称: '',
简称: '',
省份: '',
联系人: '',
经理电话: '',
收货人: '',
联系电话: '',
邮寄地址: '',
电子邮箱: '',
备注: ''
},
people: [],
rules: {
省份: [{ required: true, message: '请选择省份' }],
客户名称: [{ required: true, message: '请输入客户名称' }],
收货人: [{ required: true, message: '请输入收货人' }],
联系电话: [{ required: true, message: '请输入收货电话' }],
简称: [{ required: true, message: '请输入简称' }],
经理电话: [{ required: true, message: '请输入联系电话' }],
联系人: [{ required: true, message: '请输入联系人' }]
},
title: '',
flag1: '',
loading: false, // 数据加载
total: 0, // 分页总数
tableData: [], // 客户信息表
pageCurrent: 1, // 分页当前页
pageSize: 100, // 分页每页显示条数
orderName: '', // 排序列名
order: '' // 排序方式
}
},
computed: {
...mapGetters([
'id',
'token'
])
},
created() {
this.fetchData()
this.searchTable()
},
methods: {
fetchData() {
this.getPeople()
this.getProvince()
},
getPeople() {
var param = []
var Data = this.CreateData('11', '人员信息_查询', param)
this.ExecDatabase(Data).then(response => {
for (let i = 0; i < response.data.length; i++) {
this.people.push({
label: response.data[i].姓名,
value: response.data[i].人员编号
})
}
})
},
getProvince() {
var param = []
var Data = this.CreateData('11', '省份信息_查询数据', param)
this.ExecDatabase(Data).then(response => {
for (let i = 0; i < response.data.length; i++) {
this.province.push({
label: response.data[i].省份,
value: response.data[i].省份流水号
})
}
})
},
addCustomer() {
if (this.$refs['form'] !== undefined) {
this.$refs['form'].resetFields()
}
this.title = '新增客户'
this.dialogFormVisible = true
},
handleEdit(row) {
if (this.$refs['form'] !== undefined) {
this.$refs['form'].resetFields()
}
this.title = '编辑客户'
this.customerValue = row.客户流水号
this.form.省份 = parseInt(row.省份流水号)
this.form.客户编码 = row.客户编码
this.form.客户名称 = row.客户名称
this.form.简称 = row.简称
this.form.联系人 = row.联系人
this.form.经理电话 = row.经理电话
this.form.收货人 = row.收货人
this.form.联系电话 = row.电话
this.form.邮寄地址 = row.地址
this.form.电子邮箱 = row.电子邮箱
this.form.备注 = row.备注
this.dialogFormVisible = true
},
submit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.flag1 === 1) {
var param = []
param[0] = ['省份', this.form.省份]
param[1] = ['客户名称', this.form.客户名称]
param[2] = ['简称', this.form.简称]
param[3] = ['联系人', this.form.联系人]
param[4] = ['经理电话', this.form.经理电话]
param[5] = ['收货人', this.form.收货人]
param[6] = ['联系电话', this.form.联系电话]
param[7] = ['邮寄地址', this.form.邮寄地址]
param[8] = ['电子邮箱', this.form.电子邮箱]
param[9] = ['备注', this.form.备注]
param[10] = ['客户编码', this.form.客户编码]
var Data = this.CreateData('12', '客户管理_客户信息_增加', param)
this.ExecDatabase(Data).then(response => {
if (response.data[0].result === '1') {
this.$message.success('新增成功')
this.dialogFormVisible = false
this.searchTable()
} else {
this.$message.success('新增失败')
}
})
this.flag1 = ''
} else if (this.flag1 === 2) {
var param1 = []
param1[0] = ['省份', this.form.省份]
param1[1] = ['客户名称', this.form.客户名称]
param1[2] = ['简称', this.form.简称]
param1[3] = ['联系人', this.form.联系人]
param1[4] = ['经理电话', this.form.经理电话]
param1[5] = ['收货人', this.form.收货人]
param1[6] = ['联系电话', this.form.联系电话]
param1[7] = ['邮寄地址', this.form.邮寄地址]
param1[8] = ['电子邮箱', this.form.电子邮箱]
param1[9] = ['备注', this.form.备注]
param1[10] = ['客户流水号', this.customerValue]
param1[11] = ['客户编码', this.form.客户编码]
var Data1 = this.CreateData('12', '客户管理_客户信息_编辑', param1)
this.ExecDatabase(Data1).then(response => {
if (response.data[0].result === '1') {
this.$message.success('编辑成功')
this.dialogFormVisible = false
this.searchTable()
} else {
this.$message.success('编辑失败')
}
})
this.flag1 = ''
}
}
})
},
callOff(formName) {
this.dialogFormVisible = false
this.$refs[formName].resetFields()
},
searchTable() {
let customerName_check, region_check
this.customerName ? customerName_check = 1 : customerName_check = 0
this.region ? region_check = 1 : region_check = 0
var param = []
param[0] = ['客户名称_check', customerName_check]
param[1] = ['客户名称', this.customerName]
param[2] = ['地区_check', region_check]
param[3] = ['地区', this.region]
var Data = this.CreateData('11', '客户管理_客户信息_查询数据', param, this.pageSize, this.pageCurrent)
this.ExecDatabase(Data).then(response => {
this.tableData = response.data.rows
this.total = response.data.total
})
},
handleDelete(row) {
this.$confirm('是否删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var param = []
param[0] = ['客户流水号', row.客户流水号]
var Data = this.CreateData('12', '客户管理_客户信息_删除', param)
this.ExecDatabase(Data).then(response => {
if (response.data[0].result === '1') {
this.$message.success('删除成功')
this.searchTable()
} else {
this.$message.error('删除失败')
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
handleSizeChanges(val) {
this.pageCurrent = 1
this.pageSize = val
this.searchTable()
},
handleCurrentChanges(val) {
this.pageCurrent = val
this.searchTable()
}
}
}
</script>