|
@@ -0,0 +1,83 @@
|
|
|
+<template>
|
|
|
+ <xn-form-container title="区域配置" :width="'500px'" :visible="visible" :destroy-on-close="true" @close="onClose">
|
|
|
+ <a-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="formData"
|
|
|
+ :rules="formRules"
|
|
|
+ layout="inline"
|
|
|
+ :label-col="{ style: { width: '85px', justifyContent: 'end' } }"
|
|
|
+ >
|
|
|
+ <!-- <a-form-item label="目标端口" name="code">
|
|
|
+ <a-input v-model:value="formData.code" placeholder="请输入目标端口" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="设备型号" name="modelName">
|
|
|
+ <a-select ref="select" v-model:value="formData.modelName" :options="modeOptions"> </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="目标端口" name="code">
|
|
|
+ <a-input-number id="inputNumber" v-model:value="formData.code" style="width: 100%" />
|
|
|
+ </a-form-item> -->
|
|
|
+ </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 tool from '@/utils/tool'
|
|
|
+ import { required } from '@/utils/formRules'
|
|
|
+ import memApi from '@/api/basicset/memApi'
|
|
|
+ const emit = defineEmits({ successful: null })
|
|
|
+ const visible = ref(false) // 默认是关闭状态
|
|
|
+ const formRef = ref()
|
|
|
+ const formData = ref({}) // 表单数据
|
|
|
+ const modeOptions = tool.dictList('COIDCHAIN') // 设备型号
|
|
|
+ // 默认要校验的
|
|
|
+ const formRules = {
|
|
|
+ code: [required('请输入设备名称')]
|
|
|
+ }
|
|
|
+
|
|
|
+ // 打开抽屉
|
|
|
+ const onOpen = (record) => {
|
|
|
+ visible.value = true
|
|
|
+ if (record) {
|
|
|
+ formData.value = Object.assign({}, record)
|
|
|
+ } else {
|
|
|
+ formData.value = {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 关闭抽屉
|
|
|
+ const onClose = () => {
|
|
|
+ formRef.value.resetFields()
|
|
|
+ visible.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ // 验证并提交数据
|
|
|
+ const onSubmit = () => {
|
|
|
+ formRef.value
|
|
|
+ .validate()
|
|
|
+ .then(() => {
|
|
|
+ memApi.submitForm(formData.value, formData.value.id).then(() => {
|
|
|
+ onClose()
|
|
|
+ emit('successful')
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log(error)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 调用这个函数将子组件的一些数据和方法暴露出去
|
|
|
+ defineExpose({
|
|
|
+ onOpen
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ :deep(.ant-form-item) {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+</style>
|