<template>
|
<el-dialog v-model="visible" title="请选择 所属运营主体" width="80%" destroy-on-close>
|
<el-form :inline="true" :model="searchForm" class="search-form">
|
<el-form-item label="运营主体编号:">
|
<el-input v-model="searchForm.customerCode" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="运营主体简称:">
|
<el-input v-model="searchForm.customerShortName" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="运营主体全称:">
|
<el-input v-model="searchForm.customerFullName" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
<el-button @click="resetSearch">清空</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-table :data="tableData" ref="singleTableRef" highlight-current-row @current-change="handleCurrentChange"
|
:row-class-name="tableRowClassName" border style="width: 100%">
|
<el-table-column prop="customerCode" label="运营主体编号" />
|
<el-table-column prop="customerShortName" label="运营主体简称" />
|
<el-table-column prop="customerFullName" label="运营主体全称" />
|
<el-table-column prop="contactName" label="联系人姓名" />
|
<el-table-column prop="operatingStatus" label="经营状态">
|
<template #default="scope">
|
{{ dictFormat(business_status, scope.row.operatingStatus) }}
|
</template>
|
</el-table-column>
|
|
</el-table>
|
<pagination v-show="pageF.total > 0" :total="pageF.total" v-model:page="pageF.pageNum"
|
v-model:limit="pageF.pageSize" @pagination="getList" />
|
|
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="visible = false">取消</el-button>
|
<el-button type="primary" @click="handleConfirm" :disabled="!selectedRow">
|
确定
|
</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from 'vue'
|
import { listTmsSettlementEntity } from "@/api/tms/tmsSettlementEntity";
|
import { PageF } from "@/utils/globalInterface";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
|
const pageF = reactive({
|
...PageF,
|
});
|
const singleTableRef = ref() // 绑定 table 实例
|
// 模拟数据
|
const tableData = ref([
|
|
])
|
const dictFormat = (dict, value) => {
|
return proxy.selectDictLabel(dict, value);
|
}
|
const { proxy } = useCurrentInstance();
|
const { business_status } =
|
proxy.useDict(
|
'business_status'
|
);
|
|
|
const visible = ref(false)
|
const selectedRow = ref(null)
|
const searchForm = reactive({ id: '', shortName: '', fullName: '', pageNum: 1, pageSize: 10 })
|
|
// 定义向父组件发送的事件
|
const emit = defineEmits(['selected'])
|
|
// 打开弹窗的方法 (由父组件调用)
|
const open = (name) => {
|
|
|
// 获取最新列表数据
|
listTmsSettlementEntity(searchForm).then(res => {
|
if (res.code === 200) {
|
tableData.value = res.rows
|
pageF.total = res.total
|
visible.value = true
|
|
// 必须返回 res，这样链式调用才能继续
|
if (name) {
|
nextTick(() => {
|
// 在当前页 tableData 中查找“全称”匹配的那一行
|
const row = tableData.value.find(item => item.customerFullName === name)
|
|
if (row) {
|
// 1. 设置表格的 UI 高亮状态
|
singleTableRef.value?.setCurrentRow(row)
|
// 2. 更新当前组件记录的选中行，确保 tableRowClassName 能加上自定义绿色
|
selectedRow.value = row
|
}
|
})
|
}
|
}
|
})
|
|
}
|
|
// 选中行变化
|
const handleCurrentChange = (val) => {
|
selectedRow.value = val
|
}
|
|
// 重点：实现图片中的绿色高亮效果
|
const tableRowClassName = ({ row }) => {
|
if (selectedRow.value && row.id === selectedRow.value.id) {
|
return 'selected-row'
|
}
|
return ''
|
}
|
|
// 确定并传出数据
|
const handleConfirm = () => {
|
emit('selected', selectedRow.value)
|
visible.value = false
|
}
|
|
const handleSearch = () => { /* 实现搜索逻辑 */
|
getList()
|
}
|
const getList = () => {
|
/* 实现分页逻辑 */
|
listTmsSettlementEntity(
|
searchForm,
|
).then(res => {
|
if (res.code === 200) {
|
tableData.value = res.rows
|
pageF.total = res.total
|
}
|
|
})
|
}
|
// getList()
|
const resetSearch = () => {
|
// 使用 Object.assign 清空属性，而不是直接给 searchForm 赋值
|
Object.assign(searchForm, {
|
customerCode: '',
|
customerShortName: '',
|
customerFullName: '',
|
pageNum: 1,
|
pageSize: 10
|
})
|
getList()
|
}
|
|
// 暴露方法给父组件
|
defineExpose({ open })
|
</script>
|
|
<style scoped>
|
/* 自定义选中行的绿色背景，匹配图片颜色 */
|
:deep(.selected-row) {
|
--el-table-tr-bg-color: #d1f2d1 !important;
|
/* 浅绿色背景 */
|
}
|
|
.search-form {
|
margin-bottom: 20px;
|
}
|
</style>
|
