measure/src/views/project/debit/project/components/pay/system-pay.vue

<template>
    <hc-new-dialog v-model="isShow" is-table widths="1200px" title="引用系统支付项" :loading="saveLoading" @save="modalSave">
        <hc-table
            :column="tableColumn" :datas="tableData" :loading="tableLoading"
            is-new :check-style="{ width: 29 }" :index-style="{ width: 60 }"
            is-check @selection-change="tableCheckChange"
        >
            <template #isDeduct="{ row }">
                <span>{{ row?.isDeduct === 1 ? '是' : '否' }}</span>
            </template>
            <template #isTotalTerms="{ row }">
                <span>{{ row?.isTotalTerms === 1 ? '是' : '否' }}</span>
            </template>
        </hc-table>
    </hc-new-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import payApi from '~api/project/debit/project/pay.js'
import { arrToId, getArrValue } from 'js-fast-way'
import { useAppStore } from '~src/store'
const props = defineProps({
    ids: {
        type: [String, Number],
        default: '',
    },
})
//事件
const emit = defineEmits(['finish', 'close'])
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
//双向绑定
// 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('处理数据')
        getTableData()
    }
})
//表格数据
const tableLoading = ref(false)
const tableColumn = [
    { key: 'payNumber', name: '支付项编号' },
    { key: 'payName', name: '支付项名称' },
    { key: 'payType', name: '支付项类型' },
    { key: 'isDeduct', name: '是否为扣款项' },
    { key: 'isTotalTerms', name: '是否合计项' },
    { key: 'payApplicableType', name: '适用类型' },
]
const tableData = ref([])
//获取数据

const getTableData = async () => {
    tableLoading.value = true
    const { error, code, data } = await payApi.getSyslist({
       projectId:projectId.value,
    })
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data)

    } else {
        tableData.value = []

    }
}

//表格选择
const selectList = ref([])
const tableCheckChange = (checks) => {
    selectList.value = checks
}
const saveLoading = ref(false)
const modalSave = async () => {

    saveLoading.value = true
    const { error, code, msg } = await payApi.referenced({
          projectId:projectId.value,
          ids:arrToId(selectList.value),
        })
        //判断状态
        saveLoading.value = false
        if (!error && code === 200) {
            window?.$message?.success(msg)

        }
        emit('finish')
}
</script>