<template>
|
<el-dialog v-model="dialogVisible" title="请选择 关联服务商" width="80%" destroy-on-close @close="handleClose"
|
append-to-body>
|
<div class="search-bar">
|
<el-form inline :model="queryParams" class="search-form">
|
<el-form-item label="服务商简称:">
|
<el-input v-model="queryParams.serviceShortName" placeholder="请输入服务商简称" style="width: 180px" />
|
</el-form-item>
|
<el-form-item label="服务商全称:">
|
<el-input v-model="queryParams.serviceName" placeholder="请输入服务商全称" style="width: 180px" />
|
</el-form-item>
|
<el-form-item label="服务商编码:">
|
<el-input v-model="queryParams.serviceCode" placeholder="请输入服务商编码" style="width: 180px" />
|
</el-form-item>
|
<el-form-item label="服务类型:">
|
<el-select v-model="queryParams.serviceType" style="width: 180px;" placeholder="请选择服务类型" clearable>
|
<el-option v-for="dict in service_type" :key="dict.value" :label="dict.label"
|
:value="dict.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
|
<el-button plain icon="RefreshLeft" @click="handleReset">清空</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<el-table ref="customerTableRef" :data="customerList" border size="small" style="width: 100%"
|
:highlight-current-row="true" @current-change="handleRowSelect" :current-row-key="selectedRow?.id"
|
class="customer-table">
|
<el-table-column prop="serviceCode" label="服务商编码" width="150" />
|
<el-table-column prop="serviceShortName" label="服务商简称" width="180" />
|
<el-table-column prop="serviceName" label="服务商全称" min-width="200" show-overflow-tooltip />
|
<el-table-column prop="serviceType" label="服务类型" width="120">
|
<template #default="scope">
|
{{ dictFormat(service_type, scope.row.serviceType) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="businessStatus" label="经营状态" width="100">
|
<template #default="scope">
|
{{ dictFormat(business_status, scope.row.businessStatus) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="isTransport" label="是否运输服务商" width="130" align="center">
|
<template #default="scope">
|
{{ dictFormat(sys_number_is, scope.row.isTransport) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="isStorage" label="是否仓储服务商" width="130" align="center">
|
<template #default="scope">
|
{{ dictFormat(sys_number_is, scope.row.isStorage) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="isExpress" label="是否快递服务商" width="130" align="center">
|
<template #default="scope">
|
{{ dictFormat(sys_number_is, scope.row.isExpress) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="contactName" label="联系人姓名" width="120" />
|
</el-table>
|
|
<pagination v-show="pageF.total > 0" :total="pageF.total" v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="handleConfirm">确定选择</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive, watch, nextTick } from 'vue';
|
import type { Table, TableCurrentRow } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import { PageF } from "@/utils/globalInterface";
|
import { listTmsServiceProvider } from "@/api/tms/tmsServiceProvider";
|
|
// 获取全局实例和字典
|
const { proxy } = useCurrentInstance();
|
const {
|
service_type,
|
business_status,
|
sys_number_is
|
} = proxy.useDict('service_type', 'business_status', 'sys_number_is');
|
|
const dictFormat = (dict: any, value: any) => {
|
return proxy.selectDictLabel(dict, value);
|
}
|
|
const pageF = reactive({ ...PageF });
|
|
interface ServiceProvider {
|
id: string | number;
|
serviceCode: string;
|
serviceShortName: string;
|
serviceName: string;
|
serviceType: string;
|
contactName: string;
|
// ... 其他属性
|
}
|
|
const props = defineProps({
|
visible: { type: Boolean, default: false },
|
defaultSelectedId: { type: [String, Number], default: '' }
|
});
|
|
const emit = defineEmits<{
|
(e: 'confirm', selected: ServiceProvider): void;
|
(e: 'close'): void;
|
}>();
|
|
const dialogVisible = ref(false);
|
const queryParams = reactive({
|
serviceShortName: '',
|
serviceName: '',
|
serviceCode: '',
|
serviceType: '',
|
pageNum: 1,
|
pageSize: 10
|
});
|
|
const customerList = ref<ServiceProvider[]>([]);
|
const selectedRow = ref<ServiceProvider>();
|
const customerTableRef = ref<InstanceType<typeof Table>>();
|
|
// 数据加载与逻辑处理
|
const getDataList = async () => {
|
try {
|
const res = await listTmsServiceProvider(queryParams);
|
if (res.code === 200) {
|
customerList.value = res.rows;
|
pageF.total = res.total;
|
}
|
} catch (err) {
|
console.error('加载服务商列表失败：', err);
|
}
|
};
|
|
const handleSearch = () => {
|
queryParams.pageNum = 1;
|
getDataList();
|
};
|
|
const handleReset = () => {
|
queryParams.serviceShortName = '';
|
queryParams.serviceName = '';
|
queryParams.serviceCode = '';
|
queryParams.serviceType = '';
|
queryParams.pageNum = 1;
|
getDataList();
|
};
|
|
const getList = () => {
|
getDataList();
|
};
|
|
const handleRowSelect = (val: TableCurrentRow<ServiceProvider>) => {
|
selectedRow.value = val as ServiceProvider;
|
};
|
|
const handleConfirm = () => {
|
if (!selectedRow.value) {
|
ElMessage.warning('请选择一个服务商');
|
return;
|
}
|
emit('confirm', selectedRow.value);
|
dialogVisible.value = false;
|
};
|
|
const handleClose = () => {
|
dialogVisible.value = false;
|
emit('close');
|
};
|
|
watch(() => props.visible, (val) => {
|
dialogVisible.value = val;
|
if (val) handleReset();
|
}, { immediate: true });
|
|
getDataList();
|
</script>
|
