hsq-pro/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: false,
          },
        };
      }
    }
    columnList.push(columnsItem);
  });
  formSchema.value = columnList;
  console.log(formSchema.value, 'sssssssssssssssssssss');
  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>