<template>
|
<el-dialog
|
title="选择地区"
|
:visible.sync="dialogVisible"
|
width="80%"
|
:before-close="handleClose"
|
append-to-body
|
>
|
<div class="area-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
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="地区名称">
|
<el-input
|
v-model="queryParams.HName"
|
placeholder="请输入地区名称"
|
clearable
|
/>
|
</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>
|
</div>
|
</el-collapse-transition>
|
</el-form>
|
</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 }">
|
<span v-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>
|
</el-dialog>
|
</template>
|
|
<script>
|
import axios from 'axios'
|
|
export default {
|
name: 'AreaDialog',
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
collapse: false,
|
loading: false,
|
|
// 查询参数
|
queryParams: {
|
HNumber: '',
|
HName: '',
|
ColName: '0',
|
Comparator: '0',
|
ColContent: ''
|
},
|
|
// 表格数据
|
tableData: [],
|
tableColumns: [],
|
selectedRow: null,
|
multipleSelection: [],
|
|
// 分页
|
pagination: {
|
page: 1,
|
size: 50,
|
total: 0
|
},
|
|
// 隐藏字段
|
hiddenFields: ["HItemID", "短代码", "父级ID", "等级", "末级标志", "助记码", "创建组织", "英文名称"],
|
|
baseURL: process.env.VUE_APP_BASE_URL || 'http://47.96.97.237/API/',
|
user: 'admin',
|
HModName: 'Gy_AreaSet'
|
}
|
},
|
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.loadTableData()
|
},
|
|
async loadTableData() {
|
this.loading = true
|
try {
|
const sWhere = this.buildQueryCondition()
|
|
const response = await axios.get(`${this.baseURL}/Gy_BadReason/Gy_AreaSetList`, {
|
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}%'`
|
}
|
|
if (this.queryParams.ColName && this.queryParams.ColName !== "0" &&
|
this.queryParams.Comparator && this.queryParams.Comparator !== "0") {
|
let com = ""
|
switch (this.queryParams.Comparator) {
|
case "7":
|
com = `like '%${this.queryParams.ColContent}%'`
|
break
|
case "8":
|
com = `like '%${this.queryParams.ColContent}'`
|
break
|
case "9":
|
com = `like '${this.queryParams.ColContent}%'`
|
break
|
case "10":
|
com = `not like '%${this.queryParams.ColContent}%'`
|
break
|
default:
|
com = `${this.queryParams.Comparator} '${this.queryParams.ColContent}'`
|
break
|
}
|
sWhere += ` and ${this.queryParams.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]
|
}
|
},
|
|
// 查询
|
handleQuery() {
|
this.pagination.page = 1
|
this.loadTableData()
|
},
|
|
// 重置查询
|
handleReset() {
|
this.queryParams = {
|
HNumber: '',
|
HName: '',
|
ColName: '0',
|
Comparator: '0',
|
ColContent: ''
|
}
|
this.pagination.page = 1
|
this.loadTableData()
|
},
|
|
// 刷新
|
handleRefresh() {
|
this.loadTableData()
|
},
|
|
// 切换折叠状态
|
toggleCollapse() {
|
this.collapse = !this.collapse
|
},
|
|
// 行双击事件
|
handleRowDblClick(row) {
|
this.selectedRow = row
|
this.confirmSelection()
|
},
|
|
// 行点击事件
|
handleRowClick(row) {
|
this.$refs.table.toggleRowSelection(row)
|
this.selectedRow = row
|
},
|
|
// 选择变化
|
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
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.area-dialog {
|
height: 70vh;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.search-card {
|
margin-bottom: 15px;
|
}
|
|
.table-card {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.table-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;
|
}
|
</style>
|
