archives/src/views/transfer/components/table-collect.vue

<template>
    <HcCard scrollbar>
        <template #header>
            <HcNewSwitch :datas="tabData" :keys="tabKey" :round="false" @change="tabChange" />
        </template>
        <template #extra>
            <HcTooltip keys="file_collection_btn_upload_scanned_files">
                <el-button type="primary" hc-btn @click="reportModalClick">
                    <HcIcon name="git-pull-request" />
                    <span>申请验收</span>
                </el-button>
            </HcTooltip>
        </template>
        <div class="hc-card-table-title">建设单位归档资料（1200卷）</div>
        <HcCardItem ui="h-half">
            <template #header>
                <span>一、立项审批</span>
                <span class="text-gray">（238卷）</span>
            </template>
            <HcTable
                ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading"
                heights="auto" is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
                @selection-change="tableSelection"
            />
        </HcCardItem>

        <HcCardItem ui="h-half">
            <template #header>
                <span>二、勘察设计文件</span>
                <span class="text-gray">（95卷）</span>
            </template>
            <HcTable ref="tableFileRef" :column="tableFileColumn" :datas="tableFileData" :loading="tableFileLoading" heights="auto" is-check @selection-change="tableeFileSelection" />
        </HcCardItem>
    </HcCard>

    <!-- 批量上报审批 -->
    <HcReportModal
        title="申请验收"
        widths="1080px"
        url="informationWriteQuery/batchTask"
        :show="showReportModal"
        :project-id="projectId"
        :contract-id="contractId"
        :task-name="reportTaskName"
        :ids="reportIds"
        is-datas
        :datas="reportDatas"
        @hide="showReportModal = false"
        @finish="showReportFinish"
        @tagClose="reportTaskTagClose"
    />
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import { getArrValue, getObjValue } from 'js-fast-way'
import { rowsToId } from '~uti/tools'

//参数
const props = defineProps({
    projectId: {
        type: [String, Number],
        default: '',
    },
    contractId: {
        type: [String, Number],
        default: '',
    },
    treeData: {
        type: Object,
        default: () => ({}),
    },
})

//变量
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)
const nodeData = ref(props.treeData)

//监听
watch(() => [
    props.treeData,
], ([treeData]) => {
    nodeData.value = treeData
})

//渲染完成
onMounted(() => {

})

//tab数据和相关处理
const tabKey = ref('tab1')
const tabData = ref([
    { key:'tab1', name: '全部汇总' },
    { key:'tab2', name: '历史验收报告' },
    { key:'tab3', name: '历史整改报告' },
])
const tabChange = (item) => {
    tabKey.value = item?.key
}


//------立项审批

//搜索表单
const searchForm = ref({
    current: 1, size: 20, total: 0,
})

//分页被点击
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表头
const tableRef = ref(null)
const tableColumn = ref([
    { key:'key1', name: '档号', width: 180 },
    { key:'key2', name: '案卷题名' },
    { key:'key3', name: '总页数', width: 120 },
    { key:'key4', name: '保管期限', width: 120 },
    { key:'key5', name: '备注' },
])
const tableData = ref([
    {
        id: 1,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
])

//获取数据
const tableLoading = ref(false)
const getTableData = async () => {

}

//多选
const tableKeys = ref([])
const tableSelection = (rows) => {
    tableKeys.value = rows
}

//------勘察设计文件

//搜索表单
const searchFormFile = ref({
    current: 1, size: 20, total: 0,
})

//分页被点击
const pageFileChange = ({ current, size }) => {
    searchFormFile.value.current = current
    searchFormFile.value.size = size
    getTableFileData()
}

//表头
const tableFileRef = ref(null)
const tableFileColumn = ref([
    { key:'key1', name: '档号', width: 180 },
    { key:'key2', name: '案卷题名' },
    { key:'key3', name: '总页数', width: 120 },
    { key:'key4', name: '保管期限', width: 120 },
    { key:'key5', name: '备注' },
])
const tableFileData = ref([
    {
        id: 1,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
])

//获取数据
const tableFileLoading = ref(false)
const getTableFileData = async () => {

}

//多选
const tableFileKeys = ref([])
const tableeFileSelection = (rows) => {
    tableFileKeys.value = rows
}


//上报
const reportIds = ref('')
const reportTaskName = ref('')
const reportDatas = ref([])
const showReportModal = ref(false)
const reportLoading = ref(false)
const reportModalClick = async () => {
    const rows = tableKeys.value
    if (rows.length > 0) {
        //初始ID
        const row = getObjValue(rows[0])
        reportIds.value = rowsToId(rows)
        //设置任务数据
        let reportDataArr = []
        rows.forEach(item => {
            reportDataArr.push({
                id: item?.id,
                name: item?.key2,
            })
        })
        reportDatas.value = reportDataArr
        //设置任务名称
        reportTaskName.value = rows.length > 1 ? `${row.key2}等${rows.length}个文件` : row.key2
        reportLoading.value = false
        showReportModal.value = true
    } else {
        window.$message?.warning('请先勾选需要申请验收的数据')
    }
}

//上报的审批内容移除
const reportTaskTagClose = (index) => {
    //const row = tableCheckedKeys.value[index];
    //tableListRef.value?.toggleRowSelection(row,false)
}

//上报完成
const showReportFinish = () => {
    showReportModal.value = false
    //getTableData()
}
</script>

<style lang="scss" scoped>
@import '~style/transfer/scoped/initial.scss';
</style>