You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
3.0 KiB
111 lines
3.0 KiB
8 months ago
|
<script lang="ts" setup>
|
||
|
|
import { defineExpose, 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'
|
||
|
|
|
||
|
|
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' },
|
||
|
|
}])
|
||
|
|
}
|
||
|
|
})
|
||
|
|
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>
|