501 lines
20 KiB
Vue
501 lines
20 KiB
Vue
<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: 1591px"
|
|
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 width="100px" 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 width="150px" label="最近一次购买时间" align="center" show-overflow-tooltip>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.最近一次购买时间 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column width="100px" label="客户来源" align="center" show-overflow-tooltip>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.客户来源 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" width="120px" fixed="right">
|
|
<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-col :span="12">
|
|
<el-form-item label="负责人员:" prop="负责人员">
|
|
<el-input
|
|
v-model="form.负责人员"
|
|
:disabled="flag1 === 2 && id != 273"
|
|
clearable
|
|
size="small"
|
|
style="width:200px"
|
|
placeholder="请输入负责人员" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="登记时间:" prop="登记时间">
|
|
<el-date-picker
|
|
v-model="form.登记时间"
|
|
:disabled="true"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
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: {
|
|
客户编码: '',
|
|
客户名称: '',
|
|
简称: '',
|
|
省份: '',
|
|
联系人: '',
|
|
经理电话: '',
|
|
收货人: '',
|
|
联系电话: '',
|
|
邮寄地址: '',
|
|
电子邮箱: '',
|
|
备注: '',
|
|
负责人员: '',
|
|
登记时间: null,
|
|
客户来源: ''
|
|
},
|
|
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 = '新增客户'
|
|
var now = new Date()
|
|
var month = (now.getMonth() + 1).toString().padStart(2, '0')
|
|
var day = now.getDate().toString().padStart(2, '0')
|
|
this.form.登记时间 = now.getFullYear() + '-' + month + '-' + day
|
|
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.form.负责人员 = row.负责人员
|
|
this.form.登记时间 = row.登记时间 ? row.登记时间.substring(0, 10) : null
|
|
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.客户编码]
|
|
param[11] = ['负责人员', this.form.负责人员]
|
|
param[12] = ['登记时间', this.form.登记时间 || null]
|
|
param[13] = ['客户来源', 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.客户编码]
|
|
param1[12] = ['负责人员', this.form.负责人员]
|
|
param1[13] = ['登记时间', this.form.登记时间 || null]
|
|
param1[14] = ['客户来源', 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>
|