<template>
|
<ElDialog
|
:title="dialogTitle"
|
:model-value="visible"
|
width="980px"
|
align-center
|
destroy-on-close
|
@update:model-value="handleCancel"
|
@closed="handleClosed"
|
>
|
<ArtForm
|
ref="formRef"
|
v-model="form"
|
:items="formItems"
|
:rules="rules"
|
:span="12"
|
:gutter="20"
|
label-width="110px"
|
:show-reset="false"
|
:show-submit="false"
|
/>
|
|
<template #footer>
|
<span class="dialog-footer">
|
<ElButton @click="handleCancel">取消</ElButton>
|
<ElButton type="primary" @click="handleSubmit">确定</ElButton>
|
</span>
|
</template>
|
</ElDialog>
|
</template>
|
|
<script setup>
|
import { computed, nextTick, reactive, ref, watch } from 'vue'
|
import ArtForm from '@/components/core/forms/art-form/index.vue'
|
import {
|
buildDeviceSiteDialogModel,
|
createDeviceSiteFormState,
|
getDeviceSiteStatusOptions
|
} from '../deviceSitePage.helpers'
|
|
const props = defineProps({
|
visible: { type: Boolean, default: false },
|
dialogType: { type: String, default: 'add' },
|
deviceSiteData: { type: Object, default: () => ({}) },
|
typeOptions: { type: Array, default: () => [] },
|
deviceOptions: { type: Array, default: () => [] },
|
areaOptions: { type: Array, default: () => [] }
|
})
|
|
const emit = defineEmits(['update:visible', 'submit'])
|
const formRef = ref()
|
const form = reactive(createDeviceSiteFormState())
|
|
const isEdit = computed(() => props.dialogType === 'edit')
|
const dialogTitle = computed(() => (isEdit.value ? '编辑路径' : '新增路径'))
|
|
const rules = computed(() => ({
|
type: [{ type: 'array', required: true, message: '请选择站点类型', trigger: 'change' }],
|
site: [{ required: true, message: '请输入作业站点', trigger: 'blur' }],
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
target: [{ required: true, message: '请输入目标站点', trigger: 'blur' }],
|
label: [{ required: true, message: '请输入站点标签', trigger: 'blur' }],
|
device: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
|
deviceCode: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
|
deviceSite: [{ required: true, message: '请输入设备站点', trigger: 'blur' }],
|
channel: [{ required: true, message: '请输入巷道', trigger: 'blur' }],
|
areaIdStart: [{ required: true, message: '请选择源库区', trigger: 'change' }],
|
areaIdEnd: [{ required: true, message: '请选择目标库区', trigger: 'change' }],
|
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
|
}))
|
|
const formItems = computed(() => [
|
{ label: '站点类型', key: 'type', type: 'select', span: 24, props: { placeholder: '请选择站点类型', clearable: true, multiple: true, collapseTags: true, filterable: true, options: props.typeOptions || [] } },
|
{ label: '作业站点', key: 'site', type: 'input', props: { placeholder: '请输入作业站点', clearable: true } },
|
{ label: '名称', key: 'name', type: 'input', props: { placeholder: '请输入名称', clearable: true } },
|
{ label: '目标站点', key: 'target', type: 'input', props: { placeholder: '请输入目标站点', clearable: true } },
|
{ label: '站点标签', key: 'label', type: 'input', props: { placeholder: '请输入站点标签', clearable: true } },
|
{ label: '设备类型', key: 'device', type: 'select', props: { placeholder: '请选择设备类型', clearable: true, filterable: true, options: props.deviceOptions || [] } },
|
{ label: '设备编号', key: 'deviceCode', type: 'input', props: { placeholder: '请输入设备编号', clearable: true } },
|
{ label: '设备站点', key: 'deviceSite', type: 'input', props: { placeholder: '请输入设备站点', clearable: true } },
|
{ label: '巷道', key: 'channel', type: 'input', props: { placeholder: '请输入巷道', clearable: true } },
|
{ label: '源库区', key: 'areaIdStart', type: 'select', props: { placeholder: '请选择源库区', clearable: true, filterable: true, options: props.areaOptions || [] } },
|
{ label: '目标库区', key: 'areaIdEnd', type: 'select', props: { placeholder: '请选择目标库区', clearable: true, filterable: true, options: props.areaOptions || [] } },
|
{ label: '状态', key: 'status', type: 'select', props: { placeholder: '请选择状态', clearable: true, options: getDeviceSiteStatusOptions() } },
|
{ label: '备注', key: 'memo', type: 'input', span: 24, props: { type: 'textarea', rows: 3, placeholder: '请输入备注', clearable: true } }
|
])
|
|
const loadFormData = () => {
|
Object.assign(form, buildDeviceSiteDialogModel(props.deviceSiteData))
|
}
|
|
const resetForm = () => {
|
Object.assign(form, createDeviceSiteFormState())
|
formRef.value?.clearValidate?.()
|
}
|
|
const handleSubmit = async () => {
|
if (!formRef.value) return
|
try {
|
await formRef.value.validate()
|
emit('submit', { ...form })
|
} catch {
|
return
|
}
|
}
|
|
const handleCancel = () => {
|
emit('update:visible', false)
|
}
|
|
const handleClosed = () => {
|
resetForm()
|
}
|
|
watch(
|
() => props.visible,
|
(visible) => {
|
if (visible) {
|
loadFormData()
|
nextTick(() => {
|
formRef.value?.clearValidate?.()
|
})
|
}
|
},
|
{ immediate: true }
|
)
|
|
watch(
|
() => props.deviceSiteData,
|
() => {
|
if (props.visible) {
|
loadFormData()
|
}
|
},
|
{ deep: true }
|
)
|
</script>
|
