vent-template/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 NormalTable from '../comment/NormalTable.vue';
  import { list, deleteById, batchDeleteById, saveOrUpdate } from './device.api';
  import { list as substationList } from '../substationTabel/substation.api';

  import { searchFormSchema } from './device.data';
  import { FormSchema } from '/@/components/Table';
  import { getFormSchemaColumns, getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { useRouter } from 'vue-router';
  import { getAutoScrollContainer } from '/@/utils/common/compUtils';

  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.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,
            },
          };
        }
        // date日期
        if (item.type == 8) {
          columnsItem = {
            label: item.des, //_dictText
            field: item.monitorcode,
            component: 'DatePicker',
            componentProps: {
              showTime: false,
              valueFormat: 'YYYY-MM-DD',
              getPopupContainer: getAutoScrollContainer,
            },
          };
        }
        // 日期+时间
        if (item.type == 9) {
          columnsItem = {
            label: item.des, //_dictText
            field: item.monitorcode,
            component: 'DatePicker',
            componentProps: {
              showTime: true,
              valueFormat: 'YYYY-MM-DD HH:mm:ss',
              getPopupContainer: getAutoScrollContainer,
            },
          };
        }
      }
      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: '请选择点表',
          // stringToNumber: true,
        },
      }
    );
    formSchema.value.push(
      {
        label: '备用分站',
        field: 'stationids',
        component: 'ApiSelect',
        componentProps: {
          api: substationList,
          labelField: 'strname',
          valueField: 'id',
        },
      },
      {
        label: '是否显示',
        field: 'linkId',
        component: 'RadioGroup',
        defaultValue: 1,
        componentProps: () => {
          return {
            options: [
              { label: '是', value: 1, key: '1' },
              { label: '否', value: 0, key: '2' },
            ],
            stringToNumber: true,
          };
        },
      }
    );
  };

  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>