pc_vue_admin/src/components/Selector/lineSelectorPlus.vue

<template>
	<div></div>
	<a-modal v-model:open="visible" title="生产线选择" width="80%" @ok="handleOk" @cancel="handleClose">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="名称" name="name">
						<a-input v-model:value="searchFormState.name" placeholder="请输入名称" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="编码" name="number">
						<a-input v-model:value="searchFormState.number" placeholder="请输入编码" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="可用状态" name="enabledState">
						<a-select
							v-model:value="searchFormState.enabledState"
							placeholder="请选择可用状态"
							:options="$TOOL.dictList('COMMON_STATUS')"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" @click="tableRef.refresh()">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
				</a-col>
			</a-row>
		</a-form>

		<a-row :gutter="24">
			<a-col :span="6">
				<dynamic-tree
					ref="dynamicTreeRef"
					treeTitle="生产组织"
					:tableRef="tableRef"
					:apiModel="{
						getTree: productionOrganizationApi.productionOrganizationTree,
						delTree: productionOrganizationApi.productionOrganizationDelete
					}"
					@selectTree="onSelectTree"
					@treeRefresh="treeRefresh"
					:toolConfig="{
						plus: false,
						edit: false,
						delete: false,
						refresh: true
					}"
				></dynamic-tree>
			</a-col>
			<a-col :span="18">
				<s-table
					ref="tableRef"
					:columns="columns"
					:data="loadData"
					:alert="options.alert.show"
					bordered
					:row-key="(record) => record.id"
					:tool-config="options.toolConfig"
					:row-selection="tableRowSelection"
					:scroll="{
						x: 100
					}"
				>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'number'">
							<a href="#">{{ record.number }}</a>
						</template>
						<template v-if="column.dataIndex === 'enabledState'">
							<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
							<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
						</template>
						<template v-if="column.dataIndex === 'type'">
							{{ $TOOL.dictTypeData('PRODUCTION_ORGANIZATION_TYPE', record.type) }}
						</template>
					</template>
				</s-table>
			</a-col>
		</a-row>
	</a-modal>
</template>

<script setup>
	import { useTableManagement } from '@/hook/useTableManagement'
	import { message } from 'ant-design-vue'
	import productionOrganizationApi from '@/api/base/production-organization/productionOrganizationApi'
	const publicAccountColumn = [
		{
			title: '编码',
			dataIndex: 'number',
			sorter: true,
			sortDirections: ['descend', 'ascend'],
			align: 'center',
			resizable: true,
			width: 300,
			ellipsis: true
		},
		{
			title: '类型',
			dataIndex: 'type',
			align: 'center',
			resizable: true,
			width: 100
		},
		{
			title: '名称',
			dataIndex: 'name',
			align: 'center',
			resizable: true,
			width: 300,
			ellipsis: true
		},
		{
			title: '可用状态',
			dataIndex: 'enabledState',
			align: 'center',
			resizable: true,
			width: 100,
			ellipsis: true
		},
		{
			title: '创建时间',
			dataIndex: 'createTime',
			sorter: true,
			sortDirections: ['descend', 'ascend'],
			align: 'center',
			resizable: true,
			width: 300,
			ellipsis: true
		}
	]
	const emits = defineEmits(['ok'])

	// 弹窗是否打开
	const visible = ref(false)
	// 生产线分类
	const dynamicTreeRef = ref(null)

	// 列表查询
	const { searchFormState, tableRef, columns, loadData, reset, options, searchFormRef } = useTableManagement(
		{
			page: productionOrganizationApi.productionOrganizationPage,
			delete: productionOrganizationApi.productionOrganizationDelete
		},
		publicAccountColumn,
		[],
		false
	)

	// 选择树
	let treeValue = ref({})
	const onSelectTree = (value) => {
		treeValue.value = value
		searchFormState.value.parentId = value.id
		tableRef.value.refresh()
	}

	// 刷新树
	const treeRefresh = () => {
		searchFormState.value.parentId = null
		tableRef.value.refresh()
	}

	// 生产线单选
	let tissueSelectedRowKey = []
	let tissueSelectedRows = []
	const tableRowSelection = {
		type: 'radio',
		onChange: (selectedRowKey, selectedRows) => {
			tissueSelectedRowKey = selectedRowKey
			tissueSelectedRows = selectedRows
		}
	}

	// 确认
	const handleOk = () => {
		if (tissueSelectedRowKey.length === 0) return message.error('请选择生产线')
		if (tissueSelectedRows[0].type !== 'LINE') return message.error('请选择产线')

		emits('ok', {
			tissueSelectedRowKey,
			tissueSelectedRows
		})

		closeModal()
	}

	// 关闭弹窗
	const handleClose = () => {
		closeModal()
	}

	// 关闭方法
	const closeModal = () => {
		// 关闭弹窗
		visible.value = false
		// 清空table 选项
		tableRef.value.clearSelected()
	}

	// 打开方法
	const showOpen = () => {
		visible.value = true

		nextTick(() => {
			// 加载生产线分类
			dynamicTreeRef.value.loadTreeData()

			// 加载表格
			tableRef.value.refresh()
		})
	}

	// 导出方法
	defineExpose({
		showOpen
	})
</script>

<style scoped></style>