mky-vent-base/src/views/vent/deviceManager/comment/DeviceReportInfo.vue

<template>
  <BasicForm ref="FormRef" @register="registerForm" />
  <div class="j-box-bottom-button offset-20" style="margin-top: 30px">
    <div class="j-box-bottom-button-float">
      <a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
      <a-button type="primary" preIcon="ant-design:save-filled" @click="handleSubmit">保存</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, defineEmits, onUnmounted, watch, PropType, nextTick, inject, onBeforeMount } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { FormSchema } from '/@/components/Form';
  import { getFormSchemaColumns } from '/@/hooks/web/useWebColumns';
  import { list as substationList } from '/@/views/vent/deviceManager/substationTabel/substation.api';
  import { list, updateReportInfo, sysList, sysInput } from '../../monitorManager/comment/comment.api';
  const deviceData = inject('formData') as any;
  const emit = defineEmits(['close', 'register']);
  const FormRef = ref();
  const tabType = ref('');

  const formSchema = ref<any[]>([]);
  const formData = ref(deviceData);
  const deviceTypeName = ref(deviceData.devicekind ? deviceData.devicekind : deviceData.strtype);

  const arrToFormColumns = (tableHeaderColumns = [], devicetype) => {
    const columnList: any[] = [];
    tableHeaderColumns.forEach((item: any) => {
      let columnsItem;
      if (item.type == 1 || item.type == 10) {
        columnsItem = {
          label: item.des, //_dictText
          field: item.monitorcode,
          component: item.type == 1 ? 'Input' : item.type == 10 ? 'InputTextArea' : '',
        };
      } else {
        if (item.type == 2 && item['monitorcode'] == 'nsubstationid') {
          columnsItem = {
            label: item.des, //_dictText
            field: item.monitorcode,
            component: 'ApiSelect',
            componentProps: {
              api: substationList,
              labelField: 'strname',
              valueField: 'id',
            },
          };
        }
        if (item.type == 3) {
          columnsItem = {
            label: item.des, //_dictText
            field: item.monitorcode,
            component: 'RadioGroup',
            defaultValue: 1,
            componentProps: () => {
              return {
                options: [
                  { label: '是', value: 1, key: '1' },
                  { label: '否', value: 0, key: '2' },
                ],
                stringToNumber: true,
              };
            },
          };
        }
        if (item.type == 4) {
          columnsItem = {
            label: item.des, //_dictText
            field: item.monitorcode,
            component: 'JDictSelectTag',
            componentProps: {
              dictCode: item.dict,
              placeholder: '请选择',
              stringToNumber: true,
            },
          };
        }
      }
      columnList.push(columnsItem);
    });
    formSchema.value = columnList;
    if (tabType.value === 'deviceInfo') {
      formSchema.value.unshift(
        {
          label: '设备id', //_dictText
          field: 'id',
          component: 'Input',
          componentProps: {
            disabled: true,
            show: false,
          },
        },
        {
          label: '点表',
          field: 'strtype',
          component: 'JDictSelectTag',
          componentProps: {
            dictCode: `${devicetype.split('_')[0]}kind`,
            placeholder: '请选择点表',
          },
        }
      );
      formSchema.value.push({
        label: '备用分站',
        field: 'stationids',
        component: 'ApiSelect',
        componentProps: {
          api: substationList,
          labelField: 'strname',
          valueField: 'id',
        },
      });
    } else {
      formSchema.value.unshift({
        label: '设备id', //_dictText
        field: 'id',
        component: 'Input',
        componentProps: {
          disabled: true,
          show: false,
        },
      });
    }
  };

  const [registerForm, { resetSchema, getFieldsValue, setFieldsValue, resetFields }] = useForm({
    schemas: <FormSchema[]>formSchema.value,
    showActionButtonGroup: false,
  });

  function getColumns() {
    let formSchemaArr = getFormSchemaColumns(`${deviceData.devicekind ? deviceData.devicekind : deviceData.strtype}_input`) || [];
    if (formSchemaArr && formSchemaArr.length < 1) {
      const arr = deviceTypeName.value.split('_');
      formSchemaArr = getFormSchemaColumns(arr[0] + '_input') || [];
    }
    arrToFormColumns(formSchemaArr, deviceTypeName.value);
    resetSchema(formSchema.value);
  }

  async function onReset() {
    await resetFields();
    await setFieldsValue({ ...deviceData });
  }

  async function handleSubmit() {
    const data = await getFieldsValue();
    if (!deviceData.devicekind) {
      await sysInput(data);
    } else {
      await updateReportInfo(data);
    }
  }

  onBeforeMount(async () => {});

  onMounted(async () => {
    getColumns();
    let result;
    if (!deviceData.devicekind) {
      result = await sysList({ id: deviceData.id });
    } else {
      result = await list({ id: deviceData.id });
    }
    formData.value = result['records'][0] || [];
    await setFieldsValue({
      ...formData.value,
    });
  });
  onUnmounted(() => {});
</script>
<style scoped lang="less">
  @import '/@/design/theme.less';
  @import '/@/design/vent/modal.less';
</style>