alert-front/src/views/run/model/PointTable.vue

<script lang="ts" setup>
import {defineExpose, h, onMounted, reactive, ref, watch} from 'vue'
import { autoCompleteProps } from 'ant-design-vue/es/auto-complete'
import PointModal from '../../exa/history/PointModal.vue'
import { columns } from './point.data'
import { BasicTable, TableAction, useTable } from '@/components/Table'
import { useI18n } from '@/hooks/web/useI18n'
import { IconEnum } from '@/enums/appEnum'
import { useModal } from '@/components/Modal'
import {Tag} from 'ant-design-vue'
defineOptions({ name: 'ModelTable' })
const props = defineProps({
  data: {
    type: Array<Recordable>,
    default: () => [],
  },
  type: {
    type: Boolean,
    default: false,
  },
})

const { t } = useI18n()
const updateIndex = ref<number>(0)

const [registerPointModal, { openModal: openPointModal }] = useModal()
function handlePoint(record) {
  openPointModal(true, record)
  console.log(record)
  updateIndex.value = record.LAY_TABLE_INDEX
}
const [registerTable, { setColumns, getDataSource, updateTableDataRecord }] = useTable({
  title: '测点列表',
  maxHeight: 300,
  dataSource: props.data,
  size: 'small',
  columns,
  useSearchForm: false,
  showTableSetting: false,
  showIndexColumn: true,
  actionColumn: {
    width: 140,
    title: t('common.action'),
    dataIndex: 'action',
    fixed: 'right',
  },
})
// 自动请求并暴露内部方法
onMounted(() => {
  console.log(props.type)
  if (props.type) {
    console.log('改变列')
    setColumns([...columns, {
      title: '测点类型',
      dataIndex: 'type',
      width: 80,
      // slots: { customRender: 'type' },
      customRender: ({ record }) => {
        return h(
          Tag,
          {
            color: record.type ? 'default' : 'blue',
          },
          () => (record.type ? '输出' : '输入'),
        )
      }
    }])
  }
})
const source = ref<string>('run')
const rowSelectType = ref<string>('radio')

function updateTableData(selectedData) {
  const item = getDataSource()[updateIndex.value]
  item.PointId = selectedData[0].itemName
  item.Description = selectedData[0].descriptor
  item.Unit = selectedData[0].engUnits
  updateTableDataRecord(updateIndex.value, item)

  console.log(selectedData)

  // 替换测点列表中的测点
  console.log('更新表格数据')
}
function getPointTableData() {
  const tableData = getDataSource()

  return tableData
}
//  <!-- 使用defineExpose将组件中的数据交给外部，这样父组件中的demoRef.value才可以访问到如下数据 -->
defineExpose({ getPointTableData })
</script>

<template>
  <div>
    <BasicTable @register="registerTable">
<!--      <template #type="{ record }">-->
<!--        {{ record.type ? '输出' : '输入' }}-->
<!--      </template>-->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[{ icon: IconEnum.CHANGE, label: t('action.pointConfig'), auth: 'run:instant:update', onClick: handlePoint.bind(null, record) },

            ]"
          />
        </template>
      </template>
    </BasicTable>
    <PointModal :source="source" :row-select-type="rowSelectType" @register="registerPointModal" @success="updateTableData" />
  </div>
</template>

<style lang="less" scoped>
:deep(.ant-table-body){
  height:100% !important;
  max-height:100% !important
}
</style>