hsq-pro/src/views/vent/monitorManager/comment/components/DeviceBaseInfo.vue

<template>
  <BasicModal @register="register" :title="tabType =='deviceInfo' ? '设备编辑' : '报表录入'" width="1000px" v-bind="$attrs" @ok="onSubmit" :mask-closable="false">
    <BasicForm ref="FormRef" @register="registerForm"/>
  </BasicModal>
</template>
<script lang="ts" setup>

import { onMounted, ref, defineEmits, onUnmounted, watch, PropType, nextTick } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
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, updateDeviceInfo, updateReportInfo } from '../comment.api'

const emit = defineEmits(['close', 'register'])
const props = defineProps({
  formSchema: {
    type: Array as PropType <FormSchema[]> ,
    default: () => []
  },
  deviceType: {
    type: String,
    default: ''
  },
})
const FormRef = ref()
const tabType = ref('deviceInfo')
const formSchema = ref<FormSchema[]>([])
const formData = ref({})
const deviceTypeName = ref('')

const arrToFormColumns = (tableHeaderColumns = [], devicetype) => {
  const columnList: any[] = [];
  tableHeaderColumns.forEach((item: any) => {
    let columnsItem;
    if (item.type == 1 || item.type == 10) {
      columnsItem = {
        label: item.unit ? `${item.des}(${item.unit})` : 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.unit ? `${item.des}(${item.unit})` : item.des, //_dictText
          field: item.monitorcode,
          component: 'ApiSelect',
          componentProps: {
            api: substationList,
            labelField: 'strname',
            valueField: 'id',
          },
        };
      }
      if (item.type == 3) {
        columnsItem = {
          label: item.unit ? `${item.des}(${item.unit})` : 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.unit ? `${item.des}(${item.unit})` : 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
        },
      })
  }
};

// 注册 modal
const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
  debugger
  tabType.value = data.type
  const deviceId = data.deviceId
  if (FormRef.value) {
    setModalProps({ confirmLoading: false });
    getColumns()
    resetSchema(formSchema.value)
    resetFields()
    const result = await list({ id: deviceId })
    formData.value = result['records'][0]
    await setFieldsValue({
      ...formData.value,
    });
  }
});

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

function getColumns() {
  let formSchemaArr = getFormSchemaColumns(tabType.value === 'deviceInfo' ? `${deviceTypeName.value}_edit` : `${deviceTypeName.value}_input`) || []
  if (formSchemaArr && formSchemaArr.length < 1) {
    const arr = deviceTypeName.value.split('_')
    formSchemaArr = getFormSchemaColumns(tabType.value === 'deviceInfo' ? arr[0] + '_edit' : arr[0] + '_input') || []
  }
  arrToFormColumns(formSchemaArr, deviceTypeName.value)
} 

watch(() => props.deviceType, (devicetype) => {
  deviceTypeName.value = devicetype
  getColumns()
  if(FormRef.value)resetSchema(formSchema.value)
})


async function onSubmit() {
  
  let formValue = getFieldsValue();
  setModalProps({ confirmLoading: true });
  if(tabType.value === 'deviceInfo'){
    await updateDeviceInfo(formValue)
  }else{
    await updateReportInfo(formValue)
  }
  
  setModalProps({ confirmLoading: false });
  emit('close')
  closeModal();
}

onMounted(async () => {
  debugger
});
onUnmounted(() => {

});
</script>
<style scoped lang="less">
@import '/@/design/vent/color.less';
@import '/@/design/vent/modal.less';
</style>