jfcloud-coldchain/snowy-admin-web/src/views/basicset/mem/form copy.vue

<template>
	<xn-form-container
		:title="formData.id ? '编辑采集器' : '新增采集器'"
		:width="'60%'"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-form
			ref="formRef"
			:model="formData"
			:rules="formRules"
			layout="inline"
			:label-col="{ style: { width: '100px', justifyContent: 'end' } }"
		>
			<a-tabs v-model:activeKey="activeKey" type="editable-card" @edit="onEdit">
				<a-tab-pane tab="对象信息" key="object" :closable="false">
					<a-row :gutter="10">
						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
							<a-form-item label="采集器名称" name="name">
								<a-input v-model:value="formData.name" placeholder="请输入采集器名称" allow-clear />
							</a-form-item>
						</a-col>

						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
							<a-form-item label="采集器编号" name="code">
								<a-input v-model:value="formData.code" placeholder="请输入采集器编号" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
							<a-form-item label="采集器条码" name="barcode">
								<a-input v-model:value="formData.barcode" placeholder="请输入采集器条码" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
							<a-form-item label="品牌" name="brand">
								<a-input v-model:value="formData.brand" placeholder="请输入品牌" allow-clear />
							</a-form-item>
						</a-col>

						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
							<a-form-item label="状态" name="state">
								<a-select ref="select" v-model:value="formData.state">
									<a-select-option value="1">正常</a-select-option>
									<a-select-option value="2">维修</a-select-option>
									<a-select-option value="3">闲置</a-select-option>
									<a-select-option value="4">报废</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
							<a-form-item label="所属部门">
								<a-input v-model:value="formData.division" placeholder="请输入所属部门" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
							<a-form-item label="采集时间">
								<a-time-range-picker v-model:value="formData.collectionTime" style="width: 100%" />
							</a-form-item>
						</a-col>
						<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<a-form-item label="位置">
								<a-input v-model:value="formData.location" placeholder="请输入位置" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<a-form-item label="备注">
								<a-textarea
									v-model:value="formData.remarks"
									placeholder="请输入备注"
									allow-clear
									:maxlength="200"
									:rows="4"
								/>
							</a-form-item>
						</a-col>
					</a-row>
				</a-tab-pane>
				<a-tab-pane tab="报警信息" key="report" :closable="false">
					<a-form-item :label-col="{ style: { width: '200px' } }">
						<template #label>
							<a-tooltip>
								<template #title>
									重复通知间隔:同一设备同一故障类型出现报警进行过一次报警通知后，进行下一次报普通知的间隔时间，如果在这个时间间隔内该设备同一故障类型
									还在产生报警则不再进行通知。
									最多报警次数:同一设备同一故障类型连续报警最多报警通知次数，在达到最多报警次数后如果报警还未及时处理，系统也不再进行报警通知。
									延时时间:为屏蔽误报，系统报警在达到延时时间之后才进行报警通知。
								</template>
								<question-circle-outlined />
							</a-tooltip>
							重复发送通知：
						</template>

						<a-radio-group v-model:value="formData.repeat">
							<a-radio value="1">1次</a-radio>
							<a-radio value="2">多次</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item label="延时报警" :label-col="{ style: { width: '200px' } }">
						<a-radio-group v-model:value="formData.delayed">
							<a-radio value="1">是</a-radio>
							<a-radio value="0">否</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item label="报警关闭发送通知" :label-col="{ style: { width: '200px' } }">
						<a-radio-group v-model:value="formData.close">
							<a-radio value="1">是</a-radio>
							<a-radio value="0">否</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item label="多级报警" :label-col="{ style: { width: '200px' } }">
						<a-radio-group v-model:value="formData.multistage">
							<a-radio value="1">是</a-radio>
							<a-radio value="0">否</a-radio>
						</a-radio-group>
					</a-form-item>

					<a-form-item label="报警通知方式" :label-col="{ style: { width: '200px' } }">
						<a-checkbox-group v-model:value="formData.noticeway" style="width: 100%">
							<a-checkbox value="1">短信</a-checkbox>
							<a-checkbox value="2">电话</a-checkbox>
							<a-checkbox value="3">微信</a-checkbox>
							<a-checkbox value="4">电子邮件</a-checkbox>
							<a-checkbox value="5">弹出</a-checkbox>
							<a-checkbox value="6">音乐</a-checkbox>
						</a-checkbox-group>
					</a-form-item>

					<!-- 表格区域 -->
					<div>
						<a-button type="primary" style="margin-left: 90%; margin-bottom: 5px" @click="tableAdd">
							<template #icon><plus-outlined /></template>新增
						</a-button>
						<a-table
							ref="tableRef"
							bordered
							:columns="columns"
							:data-source="formData.loadData"
							:row-key="(record) => record.startTime"
							:pagination="false"
						>
							<template #headerCell="{ column }">
								<template v-if="column.dataIndex === 'startTime'">
									<text style="color: #e74032"> * </text>开始时间
								</template>
								<template v-if="column.dataIndex === 'endTime'">
									<text style="color: #e74032"> * </text>结束时间
								</template>
								<template v-if="column.dataIndex === 'name'"> <text style="color: #e74032"> * </text>姓名 </template>
								<template v-if="column.dataIndex === 'remindType'">
									<text style="color: #e74032"> * </text>提醒方式
								</template>
								<template v-if="column.dataIndex === 'level'"> <text style="color: #e74032"> * </text>级别 </template>
								<template v-if="column.dataIndex === 'phone'">
									<text style="color: #e74032"> * </text>电话号码
								</template>
							</template>
							<template #bodyCell="{ column, record, index }">
								<!-- 表格内容 -->
								<template v-if="column.dataIndex === 'startTime'">
									<a-time-picker v-model:value="record.startTime" value-format="HH:mm:ss" style="width: 100%" />
								</template>

								<template v-if="column.dataIndex === 'endTime'">
									<a-time-picker v-model:value="record.endTime" value-format="HH:mm:ss" style="width: 100%" />
								</template>

								<template v-if="column.dataIndex === 'name'">
									<a-input v-model:value="record.name" placeholder="请输入姓名" />
								</template>

								<template v-if="column.dataIndex === 'remindType'">
									<a-select v-model:value="record.remindType" placeholder="请选择提醒方式" style="width: 100%">
										<a-select-option value="1">短信报警</a-select-option>
										<a-select-option value="2">电话报警</a-select-option>
										<a-select-option value="3">微信公众号报警</a-select-option>
										<a-select-option value="4">邮件报警</a-select-option>
										<a-select-option value="5">弹出报警</a-select-option>
										<a-select-option value="6">音乐报警</a-select-option>
									</a-select>
								</template>

								<template v-if="column.dataIndex === 'level'">
									<a-select v-model:value="record.level" placeholder="请选择级别" style="width: 100px">
										<a-select-option value="1">1</a-select-option>
										<a-select-option value="2">2</a-select-option>
										<a-select-option value="3">3</a-select-option>
										<a-select-option value="4">4</a-select-option>
										<a-select-option value="5">5</a-select-option>
									</a-select>
								</template>

								<template v-if="column.dataIndex === 'phone'">
									<a-input v-model:value="record.phone" placeholder="请输入电话号码" />
								</template>

								<template v-if="column.dataIndex === 'action'">
									<a-popconfirm title="确定要删除吗？" @confirm="tableDelete(record, index)">
										<a-button type="link" danger size="small">删除</a-button>
									</a-popconfirm>
								</template>
							</template>
						</a-table>
					</div>
				</a-tab-pane>

				<a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
					<!-- 新增路数-->
					<div v-for="(item, index) in formData.list" :key="index">
						<a-row :gutter="10" v-if="activeKey == item.key">
							<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
								<a-form-item label="传感器路数">
									<a-input v-model:value="item.number" placeholder="请输入传感器路数" allow-clear />
								</a-form-item>
							</a-col>

							<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
								<a-form-item label="传感器类型">
									<a-select ref="select" v-model:value="item.sensorType" placeholder="请选择传感器类型">
										<a-select-option value="1">温度</a-select-option>
										<a-select-option value="2">温湿度</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>

							<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<a-form-item label="备注">
									<a-textarea
										v-model:value="item.numberRemarks"
										placeholder="请输入备注"
										allow-clear
										:maxlength="200"
										:rows="4"
									/>
								</a-form-item>
							</a-col>
						</a-row>
					</div>
				</a-tab-pane>
			</a-tabs>
		</a-form>

		<template #footer>
			<a-button class="xn-mr8" @click="onClose">取消</a-button>
			<a-button type="primary" @click="onSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup>
	import { message } from 'ant-design-vue'
	import { required } from '@/utils/formRules'
	import moduleApi from '@/api/sys/resource/moduleApi'
	// 默认是关闭状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()

	const tableRef = ref()

	const columns = [
		{
			title: '开始时间',
			dataIndex: 'startTime',
			align: 'center'
		},
		{
			title: '结束时间',
			dataIndex: 'endTime',
			align: 'center'
		},
		{
			title: '姓名',
			dataIndex: 'name',
			align: 'center'
		},
		{
			title: '提醒方式',
			dataIndex: 'remindType',
			align: 'center'
		},
		{
			title: '级别',
			dataIndex: 'level',
			align: 'center'
		},
		{
			title: '电话号码',
			dataIndex: 'phone',
			align: 'center'
		},
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			scopedSlots: { customRender: 'action' }
		}
	]
	// 表单数据
	const formData = ref({
		repeat: '1',
		delayed: '0',
		close: '1',
		multistage: '0',
		noticeway: ['1'],
		loadData: [],
		list: []
	})

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		activeKey.value = 'object'
		panes.value = []
		newTabIndex.value = 1
		if (record) {
			formData.value = Object.assign({}, record)
		} else {
			formData.value = {
				repeat: '1',
				delayed: '0',
				close: '1',
				multistage: '0',
				noticeway: ['1'],
				loadData: [],
				list: []
			}
		}
	}
	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		visible.value = false
	}

	// 默认要校验的
	const formRules = {
		name: [required('请输入采集器名称')],
		code: [required('请输入采集器编号')]
	}

	// 表格添加一行空数据
	const tableAdd = () => {
		const newRow = {
			startTime: '00:00:00',
			endTime: '23:59:59',
			name: '',
			level: '',
			phone: ''
		}
		formData.value.loadData.push(newRow)
	}

	// 删除某一行
	const tableDelete = (record, index) => {
		formData.value.loadData.splice(index, 1)
	}

	// 验证并提交数据
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				// 校验表格信息里面的表单是否有空数据
				for (let i = 0; i < formData.value.loadData.length; i++) {
					if (
						!formData.value.loadData[i].startTime ||
						!formData.value.loadData[i].endTime ||
						!formData.value.loadData[i].name ||
						!formData.value.loadData[i].remindType ||
						!formData.value.loadData[i].level ||
						!formData.value.loadData[i].phone
					) {
						console.log(i, 'xxxxxx')

						message.warning(`请完善表格中的必填项`)
					} else {
						console.log(formData.value.list, '提交数据')
						// moduleApi.submitForm(formData.value, formData.value.id).then(() => {
						// 	onClose()
						// 	emit('successful')
						// })
					}
				}
			})
			.catch((error) => {
				console.log(error)
			})
	}

	// 新增或删除路数
	const onEdit = (targetKey, action) => {
		if (action === 'add') {
			add()
		} else {
			remove(targetKey)
		}
	}
	const activeKey = ref('object') //选中的tabs
	const panes = ref([]) //tabs数组
	const newTabIndex = ref(1)
	// 添加tabs
	const add = () => {
		const newIndex = newTabIndex.value++
		if (panes.value.length >= 5) return //最多只能5路
		panes.value.push({
			title: `${newIndex}路`,
			key: newIndex
		})

		formData.value.list.push({
			title: `${newIndex}路`,
			key: newIndex
		})
	}

	// 删除tabs
	const remove = (targetKey) => {
		let lastIndex = 0
		panes.value.forEach((pane, i) => {
			if (pane.key === targetKey) {
				lastIndex = i - 1
			}
		})
		panes.value = panes.value.filter((pane) => pane.key !== targetKey)
		if (panes.value.length && activeKey.value === targetKey) {
			if (lastIndex >= 0) {
				activeKey.value = panes.value[lastIndex].key
			} else {
				activeKey.value = panes.value[0].key
			}
		}

		if (panes.value.length == 0) {
			activeKey.value = 'object'
		}

		formData.value.list = formData.value.list.filter((item) => item.key !== targetKey) //删除表单
	}

	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>

<style lang="less" scoped>
	.ant-tabs {
		width: 100%;
	}
	:deep(.ant-col) {
		margin-bottom: 10px;
	}
</style>