gas-injection/src/views/vent/deviceManager/deviceTable/index.vue

<template>
  <div class="device-manager-box">
    <NormalTable
      v-if="isRefresh"
      :columns="columns"
      :searchFormSchema="searchFormSchema"
      :list="list"
      :formSchema="formSchema"
      :deleteById="deleteById"
      :batchDelete="batchDeleteById"
      :saveOrUpdate="saveOrUpdate"
      designScope="device-tabel"
      title="设备列表"
      :showTab="true"
      :deviceType="deviceType"
    />
  </div>
</template>

<script lang="ts" name="system-user" setup>
  //ts语法
  import { ref, onMounted, unref } from 'vue'
  import { FormSchema } from '/@/components/Table';
  import NormalTable from '../comment/NormalTable.vue';
  import { searchFormSchema } from './device.data';
  import { list, deleteById, batchDeleteById, saveOrUpdate } from './device.api';
  import { getFormSchemaColumns, getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { list as substationList } from '../substationTabel/substation.api';
  import { useRouter } from 'vue-router';

  const { currentRoute } = useRouter()

  const formSchema = ref<FormSchema[]>([])
  const isRefresh = ref(false)

  const deviceType = ref('')

  const columns = ref<any[]>([])

  const arrToFormColumns = (tableHeaderColumns = []) => {
    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
    formSchema.value.unshift(
      {
        label: '设备id', //_dictText
        field: 'id',
        component: 'Input',
        componentProps: {
          disabled: true
        },
      }, 
      {
        label: '点表',
        field: 'strtype',
        component: 'JDictSelectTag',
        componentProps: {
          dictCode: `${deviceType.value}kind`,
          placeholder: '请选择点表',
        },
      }
    )
    formSchema.value.push(
      {
        label: '备用分站',
        field: 'stationids',
        component: 'ApiSelect',
        componentProps: {
          api: substationList,
          labelField: 'strname',
          valueField: 'id',
        },
      },
    )
  };

  onMounted(() => {
    const route = unref(currentRoute)
    const pageType = route.name
    deviceType.value = pageType
    searchFormSchema[0].componentProps['dictCode'] =  `${deviceType.value}kind`
    columns.value = getTableHeaderColumns(`${deviceType.value}_list`) || []
    const formSchemaColumns = getFormSchemaColumns(`${deviceType.value}_edit`) || []
    
    arrToFormColumns(formSchemaColumns)
    isRefresh.value = true
  })

</script>

<style scoped></style>