<template>
|
<el-dialog
|
title="选择客户分类"
|
:visible.sync="dialogVisible"
|
width="80%"
|
:before-close="handleClose"
|
append-to-body
|
>
|
<div class="customer-type-dialog">
|
<el-card class="search-card">
|
<div slot="header" class="clearfix">
|
<span>查询条件</span>
|
<el-button
|
style="float: right; padding: 3px 0"
|
type="text"
|
@click="toggleCollapse"
|
>
|
{{ collapse ? '展开' : '收起' }}
|
</el-button>
|
</div>
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true">
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="客户分类代码">
|
<el-input
|
v-model="queryParams.HNumber"
|
placeholder="请输入客户分类代码"
|
clearable
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="客户分类名称">
|
<el-input
|
v-model="queryParams.HName"
|
placeholder="请输入客户分类名称"
|
clearable
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-collapse-transition>
|
<div v-show="!collapse">
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="过滤字段">
|
<el-select v-model="queryParams.ColName" placeholder="请选择字段" style="width: 100%">
|
<el-option value="0" label=""></el-option>
|
<el-option
|
v-for="column in visibleColumns"
|
:key="column.field"
|
:label="column.label"
|
:value="column.field"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="比较符">
|
<el-select v-model="queryParams.Comparator" placeholder="请选择比较符" style="width: 100%">
|
<el-option value="0" label=""></el-option>
|
<el-option label="=" value="=" />
|
<el-option label=">=" value=">=" />
|
<el-option label=">" value=">" />
|
<el-option label="<=" value="<=" />
|
<el-option label="<" value="<" />
|
<el-option label="<>" value="<>" />
|
<el-option label="包含" value="7" />
|
<el-option label="左包含" value="8" />
|
<el-option label="右包含" value="9" />
|
<el-option label="不包含" value="10" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="内容">
|
<el-input
|
v-model="queryParams.ColContent"
|
placeholder="请输入内容"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="过滤字段">
|
<el-select v-model="queryParams.ColName1" placeholder="请选择字段" style="width: 100%">
|
<el-option value="0" label=""></el-option>
|
<el-option
|
v-for="column in visibleColumns"
|
:key="column.field"
|
:label="column.label"
|
:value="column.field"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="比较符">
|
<el-select v-model="queryParams.Comparator1" placeholder="请选择比较符" style="width: 100%">
|
<el-option value="0" label=""></el-option>
|
<el-option label="=" value="=" />
|
<el-option label=">=" value=">=" />
|
<el-option label=">" value=">" />
|
<el-option label="<=" value="<=" />
|
<el-option label="<" value="<" />
|
<el-option label="<>" value="<>" />
|
<el-option label="包含" value="7" />
|
<el-option label="左包含" value="8" />
|
<el-option label="右包含" value="9" />
|
<el-option label="不包含" value="10" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="内容">
|
<el-input
|
v-model="queryParams.ColContent1"
|
placeholder="请输入内容"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="过滤字段">
|
<el-select v-model="queryParams.ColName2" placeholder="请选择字段" style="width: 100%">
|
<el-option value="0" label=""></el-option>
|
<el-option
|
v-for="column in visibleColumns"
|
:key="column.field"
|
:label="column.label"
|
:value="column.field"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="比较符">
|
<el-select v-model="queryParams.Comparator2" placeholder="请选择比较符" style="width: 100%">
|
<el-option value="0" label=""></el-option>
|
<el-option label="=" value="=" />
|
<el-option label=">=" value=">=" />
|
<el-option label=">" value=">" />
|
<el-option label="<=" value="<=" />
|
<el-option label="<" value="<" />
|
<el-option label="<>" value="<>" />
|
<el-option label="包含" value="7" />
|
<el-option label="左包含" value="8" />
|
<el-option label="右包含" value="9" />
|
<el-option label="不包含" value="10" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="内容">
|
<el-input
|
v-model="queryParams.ColContent2"
|
placeholder="请输入内容"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</el-collapse-transition>
|
|
<div v-if="currentFilterScheme" class="filter-scheme">
|
{{ currentFilterScheme }}
|
</div>
|
</el-form>
|
</el-card>
|
|
<div class="content-area">
|
<el-card class="tree-card">
|
<div slot="header">
|
<span>客户分类树</span>
|
</div>
|
<el-tree
|
ref="tree"
|
:data="treeData"
|
:props="treeProps"
|
node-key="id"
|
default-expand-all
|
:expand-on-click-node="false"
|
@node-click="handleTreeNodeClick"
|
:highlight-current="true"
|
style="height: 400px; overflow: auto;"
|
>
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
<span>{{ node.label }}</span>
|
</span>
|
</el-tree>
|
</el-card>
|
|
|
<el-card class="table-card">
|
<div slot="header" class="clearfix">
|
<span>客户分类列表</span>
|
<el-button-group style="float: right">
|
<el-button type="primary" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
|
<el-button type="primary" icon="el-icon-close" @click="handleExit">退出</el-button>
|
</el-button-group>
|
</div>
|
|
<el-table
|
ref="table"
|
:data="tableData"
|
v-loading="loading"
|
height="400"
|
border
|
highlight-current-row
|
@row-dblclick="handleRowDblClick"
|
@row-click="handleRowClick"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column
|
v-for="column in tableColumns"
|
:key="column.field"
|
:prop="column.field"
|
:label="column.label"
|
:width="column.width"
|
:align="column.align"
|
:sortable="column.sortable"
|
show-overflow-tooltip
|
>
|
<template slot-scope="{ row, column }">
|
<!-- 客户分类代码特殊处理，显示为可点击的链接样式 -->
|
<el-button
|
v-if="column.property === '客户分类代码'"
|
type="text"
|
@click="handleCustomerTypeCodeClick(row)"
|
style="color: #409EFF;"
|
>
|
{{ row[column.property] }}
|
</el-button>
|
<span v-else-if="column.property.includes('时间') || column.property.includes('日期')">
|
{{ formatDate(row[column.property]) }}
|
</span>
|
<span v-else>{{ row[column.property] }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pagination.page"
|
:page-sizes="[50, 100, 500, 5000]"
|
:page-size="pagination.size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="pagination.total"
|
style="margin-top: 15px; text-align: right;"
|
/>
|
</el-card>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import axios from 'axios'
|
|
export default {
|
name: 'CustomerTypeDialog',
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
collapse: false,
|
loading: false,
|
treeLoading: false,
|
|
// 查询参数
|
queryParams: {
|
HNumber: '',
|
HName: '',
|
ColName: '0',
|
Comparator: '0',
|
ColContent: '',
|
ColName1: '0',
|
Comparator1: '0',
|
ColContent1: '',
|
ColName2: '0',
|
Comparator2: '0',
|
ColContent2: ''
|
},
|
|
// 树形数据
|
treeData: [],
|
treeProps: {
|
children: 'children',
|
label: 'title'
|
},
|
|
// 表格数据
|
tableData: [],
|
tableColumns: [],
|
selectedRow: null,
|
multipleSelection: [],
|
|
// 分页
|
pagination: {
|
page: 1,
|
size: 50,
|
total: 0
|
},
|
|
// 过滤方案
|
currentFilterScheme: '',
|
HInterID_Choose: 0,
|
|
// 隐藏字段
|
hiddenFields: ["HItemID"],
|
|
baseURL: process.env.VUE_APP_BASE_API || 'http://47.96.97.237/API/',
|
user: 'admin',
|
HModName: 'Gy_CusType',
|
HModuleName: '客户分类列表维护'
|
}
|
},
|
computed: {
|
visibleColumns() {
|
return this.tableColumns
|
.filter(col => !this.hiddenFields.includes(col.field))
|
.map(col => ({
|
field: col.field,
|
label: col.label
|
}))
|
}
|
},
|
watch: {
|
visible: {
|
immediate: true,
|
handler(val) {
|
this.dialogVisible = val
|
if (val) {
|
this.initData()
|
}
|
}
|
},
|
dialogVisible(val) {
|
this.$emit('update:visible', val)
|
}
|
},
|
methods: {
|
// 初始化数据
|
initData() {
|
this.loadTreeData()
|
this.loadTableData()
|
this.getDefaultFilterScheme()
|
},
|
|
// 加载树形数据
|
async loadTreeData() {
|
this.treeLoading = true
|
try {
|
const response = await axios.get(`${this.baseURL}/Gy_BadReason/Gy_CusTypeTreeListByLevel`)
|
|
if (response.data.count === 1) {
|
this.treeData = JSON.parse(response.data.data)
|
} else {
|
this.$message.error(response.data.Message || '加载树形数据失败')
|
}
|
} catch (error) {
|
console.error('加载客户分类树形数据失败:', error)
|
this.$message.error('加载客户分类树形数据失败')
|
} finally {
|
this.treeLoading = false
|
}
|
},
|
|
// 加载表格数据
|
async loadTableData() {
|
this.loading = true
|
try {
|
const sWhere = this.buildQueryCondition()
|
|
const response = await axios.get(`${this.baseURL}/Gy_BadReason/Gy_CusTypeList`, {
|
params: {
|
sWhere: sWhere,
|
user: this.user,
|
page: this.pagination.page,
|
size: this.pagination.size
|
}
|
})
|
|
if (response.data.count === 1) {
|
this.tableData = response.data.data
|
this.pagination.total = response.data.total || response.data.data.length
|
this.generateTableColumns(response.data.list)
|
} else {
|
this.$message.error(response.data.Message || '加载数据失败')
|
}
|
} catch (error) {
|
console.error('加载客户分类数据失败:', error)
|
this.$message.error('加载客户分类数据失败')
|
} finally {
|
this.loading = false
|
}
|
},
|
|
// 构建查询条件
|
buildQueryCondition() {
|
let sWhere = ""
|
|
// 基本查询条件
|
if (this.queryParams.HNumber) {
|
sWhere += ` and 客户分类代码 like '%${this.queryParams.HNumber}%'`
|
}
|
if (this.queryParams.HName) {
|
sWhere += ` and 客户分类名称 like '%${this.queryParams.HName}%'`
|
}
|
|
// 处理三组过滤条件
|
const filterGroups = [
|
{ colName: this.queryParams.ColName, comparator: this.queryParams.Comparator, content: this.queryParams.ColContent },
|
{ colName: this.queryParams.ColName1, comparator: this.queryParams.Comparator1, content: this.queryParams.ColContent1 },
|
{ colName: this.queryParams.ColName2, comparator: this.queryParams.Comparator2, content: this.queryParams.ColContent2 }
|
]
|
|
filterGroups.forEach(filter => {
|
if (filter.colName && filter.colName !== "0" &&
|
filter.comparator && filter.comparator !== "0") {
|
let com = ""
|
switch (filter.comparator) {
|
case "7":
|
com = `like '%${filter.content}%'`
|
break
|
case "8":
|
com = `like '%${filter.content}'`
|
break
|
case "9":
|
com = `like '${filter.content}%'`
|
break
|
case "10":
|
com = `not like '%${filter.content}%'`
|
break
|
default:
|
com = `${filter.comparator} '${filter.content}'`
|
break
|
}
|
sWhere += ` and ${filter.colName} ${com}`
|
}
|
})
|
|
// 添加打开类型的过滤条件
|
sWhere += this.addSWhereByOpenType()
|
|
return sWhere
|
},
|
|
// 根据打开类型添加条件
|
addSWhereByOpenType() {
|
// 这里可以根据需要添加特定的过滤条件
|
return " and 禁用标志 = '否' and 审核人 != ''"
|
},
|
|
// 生成表格列
|
generateTableColumns(columnList) {
|
this.tableColumns = []
|
|
// 添加选择列
|
this.tableColumns.push({ type: 'selection', fixed: 'left' })
|
|
// 动态生成列
|
if (columnList && columnList.length > 0) {
|
columnList.forEach(item => {
|
if (!this.hiddenFields.includes(item.ColmCols)) {
|
const column = {
|
field: item.ColmCols,
|
label: item.ColmCols,
|
align: 'center',
|
sortable: true,
|
width: 200
|
}
|
|
// 根据字段类型设置不同的模板
|
if (item.ColmType === 'DateTime') {
|
column.formatter = this.formatDate
|
}
|
|
this.tableColumns.push(column)
|
}
|
})
|
} else {
|
const defaultColumns = [
|
{ field: '客户分类代码', label: '客户分类代码', align: 'center', width: 120 },
|
{ field: '客户分类名称', label: '客户分类名称', align: 'center', width: 120 },
|
{ field: '条码编号', label: '条码编号', align: 'center', width: 120 },
|
{ field: '禁用标记', label: '禁用标记', align: 'center', width: 100 },
|
{ field: '备注', label: '备注', align: 'center', width: 150 },
|
{ field: '审核人', label: '审核人', align: 'center', width: 100 },
|
{ field: '创建人', label: '创建人', align: 'center', width: 100 },
|
{ field: '创建时间', label: '创建时间', align: 'center', width: 150 }
|
]
|
this.tableColumns = [...this.tableColumns, ...defaultColumns]
|
}
|
},
|
|
handleTreeNodeClick(data) {
|
let sWhere = ""
|
if (data.id !== '0') {
|
sWhere = ` and 父级ID = '${data.id}' or HItemID = '${data.id}'`
|
}
|
this.loadTableDataWithCondition(sWhere)
|
},
|
|
async loadTableDataWithCondition(sWhere) {
|
this.loading = true
|
try {
|
const response = await axios.get(`${this.baseURL}/Gy_BadReason/Gy_CusTypeList`, {
|
params: {
|
sWhere: sWhere,
|
user: this.user
|
}
|
})
|
|
if (response.data.count === 1) {
|
this.tableData = response.data.data
|
this.pagination.total = response.data.total || response.data.data.length
|
}
|
} catch (error) {
|
console.error('加载数据失败:', error)
|
} finally {
|
this.loading = false
|
}
|
},
|
|
handleQuery() {
|
this.pagination.page = 1
|
this.loadTableData()
|
},
|
|
handleReset() {
|
this.queryParams = {
|
HNumber: '',
|
HName: '',
|
ColName: '0',
|
Comparator: '0',
|
ColContent: '',
|
ColName1: '0',
|
Comparator1: '0',
|
ColContent1: '',
|
ColName2: '0',
|
Comparator2: '0',
|
ColContent2: ''
|
}
|
this.pagination.page = 1
|
this.loadTableData()
|
},
|
|
// 刷新
|
handleRefresh() {
|
this.loadTreeData()
|
this.loadTableData()
|
},
|
|
|
toggleCollapse() {
|
this.collapse = !this.collapse
|
},
|
|
// 行双击事件
|
handleRowDblClick(row) {
|
this.selectedRow = row
|
this.confirmSelection()
|
},
|
|
// 行点击事件
|
handleRowClick(row) {
|
this.$refs.table.toggleRowSelection(row)
|
this.selectedRow = row
|
},
|
|
handleCustomerTypeCodeClick(row) {
|
console.log('点击客户分类代码:', row)
|
this.selectedRow = row
|
this.confirmSelection()
|
},
|
|
|
handleSelectionChange(selection) {
|
this.multipleSelection = selection
|
if (selection.length === 1) {
|
this.selectedRow = selection[0]
|
}
|
},
|
|
|
confirmSelection() {
|
if (this.selectedRow) {
|
this.$emit('selected', {
|
HItemID: this.selectedRow.HItemID,
|
客户分类名称: this.selectedRow.客户分类名称
|
})
|
this.dialogVisible = false
|
} else {
|
this.$message.warning('请选择一条数据')
|
}
|
},
|
|
// 退出
|
handleExit() {
|
this.dialogVisible = false
|
},
|
|
// 关闭对话框
|
handleClose(done) {
|
this.$confirm('确认关闭？')
|
.then(_ => {
|
done()
|
})
|
.catch(_ => {})
|
},
|
|
// 分页大小改变
|
handleSizeChange(size) {
|
this.pagination.size = size
|
this.pagination.page = 1
|
this.loadTableData()
|
},
|
|
// 当前页改变
|
handleCurrentChange(page) {
|
this.pagination.page = page
|
this.loadTableData()
|
},
|
|
// 格式化日期
|
formatDate(dateString) {
|
if (!dateString) return ''
|
try {
|
const date = new Date(dateString)
|
return date.toLocaleDateString('zh-CN')
|
} catch (error) {
|
return dateString
|
}
|
},
|
|
// 获取默认过滤方案
|
async getDefaultFilterScheme() {
|
try {
|
const response = await axios.get(`${this.baseURL}/Xt_FastICScheme/Chooselist`, {
|
params: {
|
user: this.user,
|
HModuleName: this.HModuleName,
|
HInterID: 0,
|
Type: "Default"
|
}
|
})
|
|
if (response.data.count === 1) {
|
const data = response.data.data[0]
|
this.HInterID_Choose = data.hmainid
|
this.currentFilterScheme = `当前过滤方案：${data.方案名称} (${data.备注})`
|
|
// 应用过滤条件
|
this.applyFilterConditions(response.data.data)
|
}
|
} catch (error) {
|
console.error('获取过滤方案失败:', error)
|
}
|
},
|
|
// 应用过滤条件
|
applyFilterConditions(filterData) {
|
filterData.forEach(item => {
|
if (this.queryParams.hasOwnProperty(item.过滤字段ID)) {
|
this.queryParams[item.过滤字段ID] = item.过滤值
|
}
|
})
|
},
|
|
// 保存过滤方案
|
handleSaveScheme() {
|
this.$message.info('保存方案功能')
|
},
|
|
// 读取过滤方案
|
handleReadScheme() {
|
this.$message.info('读取方案功能')
|
},
|
|
// 列设置
|
handleColumnSetting() {
|
this.$message.info('列设置功能')
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.customer-type-dialog {
|
height: 80vh;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.search-card {
|
margin-bottom: 15px;
|
}
|
|
.content-area {
|
flex: 1;
|
display: flex;
|
gap: 15px;
|
}
|
|
.tree-card {
|
width: 25%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.table-card {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.table-card >>> .el-card__body {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.tree-card >>> .el-card__body {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.clearfix:before,
|
.clearfix:after {
|
display: table;
|
content: "";
|
}
|
.clearfix:after {
|
clear: both;
|
}
|
|
.el-form-item {
|
margin-bottom: 15px;
|
}
|
|
.el-table {
|
flex: 1;
|
}
|
|
.filter-scheme {
|
text-align: center;
|
font-size: 15px;
|
font-weight: bold;
|
color: #fc9393;
|
margin: 10px 0;
|
}
|
|
.custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
padding-right: 8px;
|
}
|
|
/* 树节点选中样式 */
|
.el-tree >>> .el-tree-node.is-current > .el-tree-node__content {
|
background-color: #aef0f7;
|
}
|
</style>
|
