多表单验证

标签：node const 验证 airportForm value 表单 item ref
<script setup lang="ts">
import { ref } from 'vue';
import { Modal, message } from 'ant-design-vue';
import { AIRPLANE_MISSION_MODE } from '../enum';
import type { deviceAirPortLoad } from './columns';
import { defaultDeviceKindColumns, deviceAirportLoadColumns, deviceDefaultAbilityColumns } from './columns';
import orgSelectDropTree from './orgSelectDropTree.vue';
import LoadSelect from './loadSelect.vue';

// const emit = defineEmits(['confirm']);
defineOptions({
  name: 'DeviceAirportAdd',
});
const loadBind = {
  1: '机场 ',
  2: '无人机',
};
const loading = {
  1: '内置',
  2: '外挂',
};
// 获取默认飞控能力信息
const defaultDeviceUavModelList = ref<API.DeviceModelAbilityBo[]>();
// const deviceUavForm = ref<API.DeviceUavDto>({ deviceName: '', deviceSn: '', orgId: '', deviceType: '', deviceSubType: '' });
function getDefaultAbility(factoryCode: string | undefined, modelId: any) {
  const params = ref<API.DeviceUavModelListDto>({
    factoryCode,
    modelId,
  });
  postDeviceUavModelGetModelAbility({ ...params.value }).then((res) => {
    if (res.success) {
      defaultDeviceUavModelList.value = res.data ? res.data : [];
    }
  });
}
const airportLoadData = ref<deviceAirPortLoad[]>([]); // 机场设备种类
const deviceLoadData = ref<deviceAirPortLoad[]>([]); // 无人机默认设备种类
// 获取无人机默认设备种类信息
const defaultDeviceKindList = ref<API.DeviceUavModelKindBo[]>([]);
function getDefaultDeviceKindList(factoryCode: string | undefined, modelId: any) {
  const params = ref<API.DeviceUavModelListDto>({
    factoryCode,
    modelId,
  });
  postDeviceUavModelGetModelKind({ ...params.value }).then((res) => {
    if (res.success) {
      defaultDeviceKindList.value = res.data?.map((item: any) => {
        return {
          ...item,
          abilityName: getDeviceAblity(item),
          loadBingName: loadBind[item.loadBind],
          loadingName: loading[item.loading],
        };
      });
    }
  });
}
const airPlaneUavMode = ref<string[]>([]); // 无人机-航线配置
const deviceAirportAddDetail = ref();
// 表单数据
const airportForm = ref<API.DeviceAirportDto>({
  deviceName: '',
  orgId: '',
  airLine: '',
  deviceType: '',
  firmwareVersion: '',
  deviceSn: '',
  deviceSonType: '',
});
//  窗口
const modelValue = ref<boolean>(false);
const deviceUavFormList: any = ref([]);
const factorynametext = ref('');
function openModel(node: API.FlyDockEquipmentDTO, factory: any, factoryname: any) {
  // console.log('node', node)
  // console.log('factory', factory);
  // console.log('factoryname', factoryname);
  factorynametext.value = factoryname;
  modelValue.value = true;
  airportForm.value.deviceName = node.deviceName;
  airportForm.value.deviceType = node.deviceType;
  airportForm.value.firmwareVersion = node.firmwareVersion;
  airportForm.value.deviceSonType = node.deviceSubType;
  airportForm.value.deviceSn = node.deviceSn;
  airportForm.value.dockerId = node.id;
  airportForm.value.modelName = node.deviceName;
  airportForm.value.department = node.workspaceName; // 机场
  airportForm.value.factoryCode = node.manufacturer; // 厂家id
  // console.log('node.uavList列表多个', node.uavList)
  deviceUavFormList.value = [];
  if (node.uavList) {
    // deviceUavForm.value.airportId = node.id; //机场id
    // deviceUavForm.value.deviceName = node.uavList[0]?.deviceName;//设备名称
    // deviceUavForm.value.deviceSn = node.uavList[0]?.deviceSn;
    // deviceUavForm.value.deviceType = node.uavList[0]?.deviceType;
    // deviceUavForm.value.deviceSubType = node.uavList[0]?.deviceSubType;
    // deviceUavForm.value.uavId = node.uavList[0]?.id;
    // // deviceUavForm.value.factoryId = node.uavList[0]?.manufacturer; //厂家id
    // deviceUavForm.value.factoryId = node.manufacturer; //厂家id
    // deviceUavForm.value.relStatue = node.uavList[0]?.relStatue;
    // // getTypeList(deviceUavForm.value.factoryId);
    // 型号下拉
    node.uavList.forEach((item) => {
      deviceUavFormList.value.push({
        airportId: node.id,
        deviceName: item.deviceName,
        deviceSn: item.deviceSn,
        deviceType: item.deviceType,
        deviceSubType: item.deviceSubType,
        uavId: item.id,
        factoryId: node.manufacturer,
        relStatue: item.relStatue,
      });
    });
    // console.log('deviceUavFormList', deviceUavFormList.value)
    // getTypeList(deviceUavForm.value.factoryId);
    getTypeList(node.manufacturer);
  }
}
// 校验表单
const airportRef = ref(); // 机场信息
// const airplaneRef = ref();//无人机信息
const uavDialogRefs: Ref<any> = ref({});
// 确认新增
async function confirmCheck() {
  try {
    await airportRef.value.validateFields();
    // await airplaneRef.value.validateFields();
    for (let i = 0; i < deviceUavFormList.value.length; i++) {
      await uavDialogRefs.value[deviceUavFormList.value[i].uavId];
    }
    // deviceUavForm.value.orgId = airportForm.value.orgId;
    // deviceUavForm.value.deviceRelKindOtherList = deviceLoadData.value; // 无人机列表
    // deviceUavForm.value.uavLine = airPlaneUavMode.value.toString();
    // deviceUavForm.value.deviceRelKindList = defaultDeviceKindList.value;
    deviceUavFormList.value.forEach((item: any) => {
      item.orgId = airportForm.value.orgId;
      item.deviceRelKindOtherList = deviceLoadData.value;
      item.uavLine = airPlaneUavMode.value.toString();
      item.deviceRelKindList = defaultDeviceKindList.value;
    });
    // console.log('deviceUavFormList.value2222', deviceUavFormList.value)
    // airportForm.value.deviceUav = deviceUavForm.value;
    airportForm.value.deviceUav = deviceUavFormList.value;
    airportForm.value.deviceRelKindList = airportLoadData.value; // 无人机列表
    // console.log('保存传参', airportForm.value)
    postDeviceAirportSave(airportForm.value).then((res) => {
      if (res.success) {
        message.success('新增成功');
        modelValue.value = false;
      }
    });
  }
  catch (errorInfo) {

  }
}
// 根据无人机厂商获取型号列表
const typeModelList = ref<API.DeviceUavModel[] | undefined>([]);
async function getTypeList(factoryCode: string | undefined) {
  const params = { factoryCode };
  const res = await postDeviceUavModelGetAll(params);
  if (res.success) {
    typeModelList.value = res.data;
  }
}

// 选取组织
function onSelectOrg(value: string | number) {
  airportForm.value.orgId = value;
}
// 打开新增负载窗口
const loadSelectRef = ref();
const loadDataType = ref<number>(1); // 负载挂在哪个设备上 1机场，2无人机
function openLoadDrawer(type: number) {
  loadDataType.value = type;
  loadSelectRef.value.open();
}
// 设置新增设备种类数据
function setLoadData(data: deviceAirPortLoad[]) {
  data.forEach((item) => {
    item.open = '1';
    item.kindId = item.id; // 将装置id 转换为kindId
  });
  if (loadDataType.value === 1) { // 新增机场设备种类
    airportLoadData.value = [...airportLoadData.value, ...data];
  }
  else { // 新增无人机其他设备种类
    deviceLoadData.value = [...deviceLoadData.value, ...data];
  }
}
// 复制设备种类
function copyLoad(record: any, index: number, type: number) {
  if (type === 1) {
    airportLoadData.value.splice(index, 0, JSON.parse(JSON.stringify(record)));
  }
  else {
    deviceLoadData.value.splice(index, 0, JSON.parse(JSON.stringify(record)));
  }
}
// 删除设备种类
function deleteLoad(index: number, type: number) {
  if (type === 1) {
    airportLoadData.value.splice(index, 1);
  }
  else {
    deviceLoadData.value.splice(index, 1);
  }
}
// 无人机型号更改时获取默认信息
function getModelAbilityAndKind(v: any) {
  getDefaultAbility(airportForm.value.factoryCode, v); // 获取无人机默认飞控能力
  getDefaultDeviceKindList(airportForm.value.factoryCode, v); // 获取无人机默认种类
}
defineExpose({
  openModel,
});

//  获取飞机能力信息
function getDeviceAblity(record: any) {
  const str = record.deviceKindAbilityBoList.map((item: any, index: number) => {
    return (index + 1) + item.abilityName;
  });
  return str.join(',');
}
const activeKey = ref(['0']);
// const tableData = ref<API.[]>()
</script>

<template>
  <Modal
    ref="deviceAirportAddDetail" v-model:open="modelValue" width="1000px" :destroy-on-close="true"
    :body-style="{ height: '500px', overflow: 'auto' }" title="新增设备(2/2)" @ok="confirmCheck"
  >
    <div>
      <p class="font-bold mb-2">
        机场信息
      </p>
      <a-form
        ref="airportRef" :model="airportForm" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-row>
          <a-col :span="8">
            <a-form-item label="厂家">
              <a-input v-model:value="factorynametext" :disabled="true" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="8">
            <a-form-item label="设备信息" name="deviceName" :rules="[{ required: true, message: '请输入设备信息!' }]">
              <a-input v-model:value="airportForm.deviceName" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="所属组织" name="orgId" :rules="[{ required: true, message: '请选中组织!' }]">
              <orgSelectDropTree :bordered="true" auth="organization" @change="onSelectOrg" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="作业半径" name="airLine" :rules="[{ required: true, message: '请输入作业半径!' }]">
              <a-input v-model:value="airportForm.airLine" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item label="机身序列号">
              <a-input v-model:value="airportForm.deviceSn" :disabled="true" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="固件版本">
              <a-input v-model:value="airportForm.firmwareVersion" :disabled="true" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="型号" name="modelName">
              <a-input v-model:value="airportForm.modelName" :disabled="true" />
            </a-form-item>
          </a-col>
        </a-row>
        <div class="flex justify-between">
          <p class="font-bold mb-2">
            机场设备种类
          </p>
          <a-space>
            <a-button class="mb-1" type="primary" @click="openLoadDrawer(1)">
              添加机场设备种类
            </a-button>
          </a-space>
        </div>
        <a-table :columns="deviceAirportLoadColumns" :data-source="airportLoadData" :pagination="false">
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex === 'action'">
              <a-space>
                <a-button type="primary" @click="copyLoad(record, index, 1)">
                  <template #icon>
                    <CopyOutlined />
                  </template>
                </a-button>
                <a-button type="primary" danger @click="deleteLoad(index, 1)">
                  <template #icon>
                    <DeleteOutlined />
                  </template>
                </a-button>
              </a-space>
            </template>
            <template v-if="column.dataIndex === 'loadIndex'">
              <a-input v-model:value="record.loadIndex" />
            </template>
            <template v-if="column.dataIndex === 'showName'">
              <a-input v-model:value="record.showName" />
            </template>
            <template v-if="column.dataIndex === 'open'">
              <a-switch v-model:checked="record.open" checked-value="0" un-checked-value="1" />
            </template>
          </template>
        </a-table>
      </a-form>
      <!-- 多个设备多个无人机信息 -->
      <a-collapse v-model:activeKey="activeKey">
        <a-collapse-panel v-for="(item, index) in deviceUavFormList" :key="index" header="无人机配置">
          <div>
            <p class="font-bold mb-2">
              无人机信息
            </p>
          </div>
          <a-form
            :ref="(el: any) => {
              uavDialogRefs[item.uavId] = el
            }" :model="item" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
          >
            <a-row>
              <a-col :span="8">
                <a-form-item label="设备名称" name="deviceName" :rules="[{ required: true, message: '请输入设备信息!' }]">
                  <a-input v-model:value="item.deviceName" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="厂家" name="factory">
                  <a-input v-model:value="item.factoryId" :disabled="true" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-item label="型号" name="deviceType">
                  <a-select
                    v-model:value="item.modelId" :field-names="{ label: 'modelName', value: 'id' }"
                    :options="typeModelList" @change="getModelAbilityAndKind"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="机身序列号">
                  <a-input v-model:value="item.deviceSn" :disabled="true" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <div>
            <p class="font-bold mb-2">
              无人机-默认设备种类
            </p>
          </div>
          <a-table :columns="defaultDeviceKindColumns" :data-source="defaultDeviceKindList" :pagination="false">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'action'" />
              <template v-if="column.dataIndex === 'loadIndex'">
                <a-input v-model:value="record.loadIndex" />
              </template>
              <template v-if="column.dataIndex === 'showName'">
                <a-input v-model:value="record.showName" />
              </template>
              <template v-if="column.dataIndex === 'open'">
                <a-switch v-model:checked="record.open" checked-value="0" un-checked-value="1" />
              </template>
            </template>
          </a-table>
          <div>
            <div class="flex justify-between mr-1">
              <p class="font-bold mb-2">
                无人机-其他设备种类
              </p>
              <a-space>
                <a-button class="mb-1" type="primary" @click="openLoadDrawer(2)">
                  添加无人机其他设备种类
                </a-button>
              </a-space>
            </div>
            <a-table :columns="deviceAirportLoadColumns" :data-source="deviceLoadData" :pagination="false">
              <template #bodyCell="{ column, record, index }">
                <template v-if="column.dataIndex === 'action'">
                  <a-space>
                    <a-button type="primary" @click="copyLoad(record, index, 1)">
                      <template #icon>
                        <CopyOutlined />
                      </template>
                    </a-button>
                    <a-button type="primary" danger @click="deleteLoad(index, 2)">
                      <template #icon>
                        <DeleteOutlined />
                      </template>
                    </a-button>
                  </a-space>
                </template>
                <template v-if="column.dataIndex === 'loadIndex'">
                  <a-input v-model:value="record.loadIndex" />
                </template>
                <template v-if="column.dataIndex === 'showName'">
                  <a-input v-model:value="record.showName" />
                </template>
                <template v-if="column.dataIndex === 'open'">
                  <a-switch v-model:checked="record.open" checked-value="0" un-checked-value="1" />
                </template>
              </template>
            </a-table>
          </div>
          <div>
            <div class="flex justify-between">
              <p class="font-bold mb-2">
                无人机-默认飞控能力
              </p>
            </div>
            <a-table
              :columns="deviceDefaultAbilityColumns" :data-source="defaultDeviceUavModelList"
              :pagination="false"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'action'" />
                <template v-if="column.dataIndex === 'loadIndex'">
                  <a-input v-model:value="record.loadIndex" />
                </template>
                <template v-if="column.dataIndex === 'showName'">
                  <a-input v-model:value="record.showName" />
                </template>
                <template v-if="column.dataIndex === 'open'">
                  <a-switch v-model:checked="record.open" checked-value="0" un-checked-value="1" />
                </template>
              </template>
            </a-table>
          </div>
          <div>
            <p class="font-bold mb-2">
              无人机-航线模式配置
            </p>
            <a-checkbox-group v-model:value="airPlaneUavMode" name="checkboxgroup" :options="AIRPLANE_MISSION_MODE" />
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <LoadSelect ref="loadSelectRef" @select-load-data="setLoadData" />
  </Modal>
</template>
标签：node,const,验证,airportForm,value,表单,item,ref
From： https://www.cnblogs.com/Byme/p/18410658
相关文章

赞助商

阅读排行
