<template>
|
<el-dialog
|
:title="dialogTitle"
|
:visible.sync="isVisible"
|
width="90%"
|
top="5vh"
|
:close-on-click-modal="false"
|
@closed="handleClosed"
|
>
|
<div class="supplier-dialog">
|
<el-card>
|
<el-form :inline="true" :model="queryForm" class="mb-8" ref="queryFormRef">
|
<el-collapse v-model="activeCollapse">
|
<el-collapse-item title="更多" name="more">
|
<el-row :gutter="12">
|
<el-col :span="8">
|
<el-form-item label="供应商代码">
|
<el-input
|
v-model="queryForm.HNumber"
|
placeholder="供应商代码"
|
@keydown.enter="handleSearch"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="供应商名称">
|
<el-input
|
v-model="queryForm.HName"
|
placeholder="供应商名称"
|
@keydown.enter="handleSearch"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="组织名称">
|
<el-select v-model="queryForm.HUSEORGID" placeholder="请选择组织">
|
<el-option
|
v-for="org in organizations"
|
:key="org.ID"
|
:label="org.Name"
|
:value="org.Name"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="12" style="margin-top: 12px;">
|
<el-col :span="24">
|
<!-- 过滤条件1 -->
|
<el-row :gutter="12" style="margin-bottom: 10px;">
|
<el-col :span="6">
|
<el-form-item label="过滤">
|
<el-select v-model="queryForm.ColName">
|
<el-option value="0" label=""></el-option>
|
<el-option
|
v-for="col in filterColumns"
|
:key="col.field"
|
:value="col.field"
|
:label="col.title"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-select v-model="queryForm.Comparator">
|
<el-option value="0" label=""></el-option>
|
<el-option value="=" label="=" />
|
<el-option value=">=" label=">=" />
|
<el-option value=">" label=">" />
|
<el-option value="<=" label="<=" />
|
<el-option value="<" label="<" />
|
<el-option value="<>" label="<>" />
|
<el-option value="7" label="包含" />
|
<el-option value="8" label="左包含" />
|
<el-option value="9" label="右包含" />
|
<el-option value="10" label="不包含" />
|
</el-select>
|
</el-col>
|
<el-col :span="6">
|
<el-input v-model="queryForm.ColContent" placeholder="过滤内容" />
|
</el-col>
|
</el-row>
|
|
<!-- 过滤条件2 -->
|
<el-row :gutter="12" style="margin-bottom: 10px;">
|
<el-col :span="6">
|
<el-form-item label="过滤1">
|
<el-select v-model="queryForm.ColName1">
|
<el-option value="0" label=""></el-option>
|
<el-option
|
v-for="col in filterColumns"
|
:key="col.field"
|
:value="col.field"
|
:label="col.title"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-select v-model="queryForm.Comparator1">
|
<el-option value="0" label=""></el-option>
|
<el-option value="=" label="=" />
|
<el-option value=">=" label=">=" />
|
<el-option value=">" label=">" />
|
<el-option value="<=" label="<=" />
|
<el-option value="<" label="<" />
|
<el-option value="<>" label="<>" />
|
<el-option value="7" label="包含" />
|
<el-option value="8" label="左包含" />
|
<el-option value="9" label="右包含" />
|
<el-option value="10" label="不包含" />
|
</el-select>
|
</el-col>
|
<el-col :span="6">
|
<el-input v-model="queryForm.ColContent1" placeholder="过滤内容" />
|
</el-col>
|
</el-row>
|
|
<!-- 过滤条件3 -->
|
<el-row :gutter="12">
|
<el-col :span="6">
|
<el-form-item label="过滤2">
|
<el-select v-model="queryForm.ColName2">
|
<el-option value="0" label=""></el-option>
|
<el-option
|
v-for="col in filterColumns"
|
:key="col.field"
|
:value="col.field"
|
:label="col.title"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-select v-model="queryForm.Comparator2">
|
<el-option value="0" label=""></el-option>
|
<el-option value="=" label="=" />
|
<el-option value=">=" label=">=" />
|
<el-option value=">" label=">" />
|
<el-option value="<=" label="<=" />
|
<el-option value="<" label="<" />
|
<el-option value="<>" label="<>" />
|
<el-option value="7" label="包含" />
|
<el-option value="8" label="左包含" />
|
<el-option value="9" label="右包含" />
|
<el-option value="10" label="不包含" />
|
</el-select>
|
</el-col>
|
<el-col :span="6">
|
<el-input v-model="queryForm.ColContent2" placeholder="过滤内容" />
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</el-collapse-item>
|
</el-collapse>
|
|
<div style="margin-top: 12px;">
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
<div v-if="currentFilterName" style="display: inline-block; margin-left: 12px; color: #fc9393; font-weight: 600">
|
当前过滤方案：{{ currentFilterName }}
|
</div>
|
</div>
|
</el-form>
|
|
<el-row :gutter="12" style="height: 500px;">
|
<!-- 左侧树形结构 -->
|
<el-col :span="6">
|
<el-card style="height: 100%;">
|
<div class="tree-container">
|
<el-tree
|
:data="treeData"
|
:props="treeProps"
|
node-key="id"
|
default-expand-all
|
highlight-current
|
@node-click="handleTreeNodeClick"
|
>
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
<span>{{ node.label }}</span>
|
</span>
|
</el-tree>
|
</div>
|
</el-card>
|
</el-col>
|
|
<!-- 右侧表格 -->
|
<el-col :span="18">
|
<el-card style="height: 100%;">
|
<el-table
|
:data="tableData"
|
stripe
|
border
|
style="width: 100%; height: 100%;"
|
v-loading="loading"
|
@row-dblclick="handleRowDoubleClick"
|
@selection-change="handleSelectionChange"
|
ref="tableRef"
|
>
|
<el-table-column type="selection" width="55" />
|
<el-table-column
|
v-for="column in tableColumns"
|
:key="column.field"
|
:prop="column.field"
|
:label="column.title"
|
:width="column.width"
|
:formatter="column.formatter"
|
>
|
<template v-if="column.field === '供应商代码'" #default="scope">
|
<span style="color: blue; cursor: pointer;" @click="handleCodeClick(scope.row)">
|
{{ scope.row.供应商代码 }}
|
</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-pagination
|
style="margin-top: 12px;"
|
background
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
:page-size.sync="pageSize"
|
:current-page.sync="page"
|
@current-change="handlePageChange"
|
@size-change="handleSizeChange"
|
:page-sizes="[50, 500, 5000, 50000]"
|
/>
|
</el-card>
|
</el-col>
|
</el-row>
|
</el-card>
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="handleCancel">取消</el-button>
|
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import axios from 'axios'
|
|
export default {
|
name: 'SupplierDialog',
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
dialogType: {
|
type: String,
|
default: 'supplier'
|
}
|
},
|
data() {
|
return {
|
|
isVisible: this.visible,
|
dialogTitle: '选择供应商',
|
queryForm: {
|
HNumber: '',
|
HName: '',
|
HUSEORGID: '',
|
ColName: '0',
|
Comparator: '0',
|
ColContent: '',
|
ColName1: '0',
|
Comparator1: '0',
|
ColContent1: '',
|
ColName2: '0',
|
Comparator2: '0',
|
ColContent2: ''
|
},
|
organizations: [],
|
tableData: [],
|
tableColumns: [],
|
filterColumns: [],
|
treeData: [],
|
treeProps: {
|
children: 'children',
|
label: 'title'
|
},
|
loading: false,
|
page: 1,
|
pageSize: 50,
|
total: 0,
|
selectedRows: [],
|
currentFilterName: '',
|
activeCollapse: ['more'],
|
baseURL: process.env.VUE_APP_BASE_URL || "http://47.96.97.237/API/"
|
}
|
},
|
watch: {
|
visible(val) {
|
this.isVisible = val
|
if (val) {
|
this.initDialog()
|
}
|
},
|
|
isVisible(val) {
|
this.$emit('update:visible', val)
|
}
|
},
|
methods: {
|
async initDialog() {
|
await this.getOrganizations()
|
await this.getSupplierTree()
|
await this.getSupplierList()
|
this.initFilterColumns()
|
},
|
|
// 获取组织列表
|
async getOrganizations() {
|
try {
|
const response = await axios.get(`${this.baseURL}/Web/GetOrganizations`)
|
if (response.data.count === 1) {
|
this.organizations = response.data.data
|
// 设置默认组织
|
const defaultOrg = sessionStorage.getItem('Organization') ||
|
sessionStorage.getItem('OrganizationID')
|
if (defaultOrg) {
|
this.queryForm.HUSEORGID = defaultOrg
|
}
|
}
|
} catch (error) {
|
console.error('获取组织列表失败:', error)
|
this.$message.error('获取组织列表失败')
|
}
|
},
|
|
// 获取供应商树形数据
|
async getSupplierTree() {
|
try {
|
const response = await axios.get(`${this.baseURL}/Gy_BadReason/Gy_SupTypeTreeListByLevel`)
|
if (response.data.count === 1) {
|
this.treeData = JSON.parse(response.data.data)
|
}
|
} catch (error) {
|
console.error('获取供应商树形数据失败:', error)
|
}
|
},
|
|
// 获取供应商列表
|
async getSupplierList(sWhere = '') {
|
this.loading = true
|
try {
|
const params = {
|
sWhere: sWhere,
|
user: sessionStorage.getItem('HUserName') || 'admin',
|
Organization: '浙江智云迈思',
|
page: this.page,
|
size: this.pageSize
|
}
|
console.log('请求参数:', params)
|
const response = await axios.get(`${this.baseURL}/Gy_Supplier/page`, { params })
|
|
if (response.data.code == 1) {
|
this.tableData = response.data.data || []
|
this.total = response.data.count || 0
|
|
if ( response.data.list.length > 0) {
|
this.setTableColumns(response.data.list)
|
}
|
} else {
|
this.$message.error(response.data.Message || '获取数据失败')
|
}
|
} catch (error) {
|
console.error('获取供应商列表失败:', error)
|
this.$message.error('获取供应商列表失败')
|
} finally {
|
this.loading = false
|
}
|
},
|
|
// 设置表格列
|
setTableColumns(columnDefs) {
|
const columns = []
|
const filterCols = []
|
const hideFields = ['HItemID', 'sorderid', 'HCurID', 'HSSID', 'HAreaID', 'HPSStyleID']
|
|
// 添加选择列
|
columns.push({ type: 'selection', fixed: 'left' })
|
|
columnDefs.forEach(item => {
|
const colDef = {
|
field: item.ColmCols,
|
title: item.ColmCols,
|
width: 140
|
}
|
|
// 设置列格式
|
switch (item.ColmType) {
|
case 'DateTime':
|
colDef.formatter = (row, col, cellValue) => this.formatDateTime(cellValue)
|
break
|
case 'Decimal':
|
case 'Int32':
|
colDef.width = 120
|
break
|
}
|
|
// 特殊处理供应商代码列
|
if (item.ColmCols === '供应商代码') {
|
colDef.width = 160
|
}
|
|
columns.push(colDef)
|
|
// 添加到过滤列（排除隐藏字段）
|
if (!hideFields.includes(item.ColmCols)) {
|
filterCols.push(colDef)
|
}
|
})
|
|
this.tableColumns = columns
|
this.filterColumns = filterCols
|
},
|
|
// 初始化过滤列
|
initFilterColumns() {
|
// 过滤列已经在 setTableColumns 中设置
|
},
|
|
// 处理查询
|
handleSearch() {
|
const sWhere = this.buildWhereClause()
|
this.page = 1
|
this.getSupplierList(sWhere)
|
},
|
|
// 构建查询条件
|
buildWhereClause() {
|
const sWhereParts = []
|
const q = this.queryForm
|
|
const buildComparator = (col, cmp, content) => {
|
if (!col || !cmp || cmp === '0' || !content) return ''
|
let com = ''
|
switch (cmp) {
|
case '7': com = `like '%${content}%'`; break
|
case '8': com = `like '%${content}'`; break
|
case '9': com = `like '${content}%'`; break
|
case '10': com = `not like '%${content}%'`; break
|
default: com = `${cmp} '${content}'`; break
|
}
|
return ` and ${col} ${com}`
|
}
|
|
// 添加过滤条件
|
if (q.ColName && q.Comparator && q.Comparator !== '0' && q.ColContent)
|
sWhereParts.push(buildComparator(q.ColName, q.Comparator, q.ColContent))
|
if (q.ColName1 && q.Comparator1 && q.Comparator1 !== '0' && q.ColContent1)
|
sWhereParts.push(buildComparator(q.ColName1, q.Comparator1, q.ColContent1))
|
if (q.ColName2 && q.Comparator2 && q.Comparator2 !== '0' && q.ColContent2)
|
sWhereParts.push(buildComparator(q.ColName2, q.Comparator2, q.ColContent2))
|
|
// 添加基本查询条件
|
if (q.HNumber) sWhereParts.push(` and 供应商代码 like '%${q.HNumber}%'`)
|
if (q.HName) sWhereParts.push(` and 供应商名称 like '%${q.HName}%'`)
|
|
return sWhereParts.join('')
|
},
|
|
// 处理重置
|
handleReset() {
|
this.queryForm = {
|
HNumber: '',
|
HName: '',
|
HUSEORGID: this.organizations.length > 0 ? this.organizations[0].Name : '',
|
ColName: '0',
|
Comparator: '0',
|
ColContent: '',
|
ColName1: '0',
|
Comparator1: '0',
|
ColContent1: '',
|
ColName2: '0',
|
Comparator2: '0',
|
ColContent2: ''
|
}
|
this.page = 1
|
this.getSupplierList()
|
},
|
|
// 处理树节点点击
|
handleTreeNodeClick(data) {
|
let sWhere = ''
|
if (data.id === "100") {
|
sWhere = " and HSupTypeID = 0 "
|
} else if (data.id === "0") {
|
sWhere = ""
|
} else {
|
sWhere = ` and HSupTypeID = '${data.id}' `
|
}
|
this.getSupplierList(sWhere)
|
},
|
|
// 处理行双击
|
handleRowDoubleClick(row) {
|
this.selectedRows = [row]
|
this.handleConfirm()
|
},
|
|
// 处理选择变化
|
handleSelectionChange(selection) {
|
this.selectedRows = selection
|
},
|
|
// 处理代码点击
|
handleCodeClick(row) {
|
// 可以在这里打开供应商详情页面
|
console.log('打开供应商详情:', row)
|
},
|
|
// 处理页码变化
|
handlePageChange(val) {
|
this.page = val
|
this.getSupplierList(this.buildWhereClause())
|
},
|
|
// 处理页大小变化
|
handleSizeChange(val) {
|
this.pageSize = val
|
this.page = 1
|
this.getSupplierList(this.buildWhereClause())
|
},
|
|
// 处理确定
|
handleConfirm() {
|
if (this.selectedRows.length === 0) {
|
this.$message.warning('请选择供应商')
|
return
|
}
|
|
const selectedData = this.selectedRows[0]
|
this.$emit('select', selectedData, this.dialogType)
|
this.$emit('update:visible', false)
|
},
|
|
// 处理取消
|
handleCancel() {
|
this.$emit('update:visible', false)
|
},
|
|
// 处理对话框关闭
|
handleClosed() {
|
this.selectedRows = []
|
this.$emit('closed')
|
},
|
|
// 格式化日期时间
|
formatDateTime(value) {
|
if (!value) return ''
|
try {
|
const d = new Date(value)
|
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
|
} catch (e) {
|
return value
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.supplier-dialog {
|
height: 70vh;
|
}
|
|
.tree-container {
|
height: 100%;
|
overflow-y: auto;
|
}
|
|
.mb-8 {
|
margin-bottom: 8px;
|
}
|
|
.custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
padding-right: 8px;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
</style>
|
