measure/src/views/periods/ledgers/components/pay/periodModal.vue

<template>
    <hc-new-dialog is-table widths="800px" :show="isShow" title="计量期选择" @save="modalSave" @close="modalClose">
        <hc-table
            :column="tableColumn" :datas="tableData" :loading="tableLoading"
            is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
            @selection-change="tableCheckChange"
        />
    </hc-new-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    ids: {
        type: [String, Number],
        default: '',
    },
})

//事件
const emit = defineEmits(['finish', 'close'])

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//监听
watch(() => [
    props.ids,
], ([ids]) => {
    console.log('ids', ids)
}, { immediate: true })

//监听
watch(isShow, (val) => {
    if (val) {
        console.log('处理数据')
    }
})
//表格数据
const tableLoading = ref(false)
const tableColumn = [
    { key: 'key1', name: '计量期' },
    { key: 'key2', name: '开始日期' },
    { key: 'key3', name: '结束日期' },
]
const tableData = ref([
    { key1: '1111' },
])

//表格选择
const tableCheckChange = (checks) => {
    console.log(checks)
}
const modalSave = () => {
    emit('finish')
    modalClose()
}
const modalClose = () => {
    isShow.value = false
    emit('close')
}
</script>

<style scoped lang="scss">

</style>