archives/src/views/transfer/preliminary-examination.vue

<template>
    <div id="carry-spot-checks-layout-target" class="hc-page-layout-box">
        <div v-show="!isCarrySpotChecksDrawer" :style="`width:${leftWidth}px;`" class="hc-layout-left-box">
            <div class="hc-project-box">
                <div class="hc-project-icon-box">
                    <HcIcon name="stack" />
                </div>
                <div class="ml-2 project-name-box">
                    <span class="text-xl text-cut project-alias">{{ projectInfo.projectAlias }}</span>
                    <div class="text-xs text-cut project-name">{{ projectInfo.name }}</div>
                </div>
            </div>
            <div class="hc-tree-new-switch">
                <HcNewSwitch :datas="tabData" :keys="tabKey" size="small" :round="false" @change="tabChange" />
            </div>
            <div v-if="tabKey === 'tab1'" v-loading="treeLoading" class="hc-tree-box" element-loading-text="加载中...">
                <el-scrollbar>
                    <HcTree :contract-id="contractId" :project-id="projectId" :is-own="false" :is-show-number="false" :is-show-menu="false" @node-tap="projectTreeClick" @node-loading="treeNodeLoading" />
                </el-scrollbar>
            </div>
            <div v-else v-loading="treeLoading" element-loading-text="加载中..." class="hc-tree-box">
                <el-scrollbar>
                    <HcTree :contract-id="contractId" :project-id="projectId" :is-own="true" :is-show-number="false" :is-show-menu="false" @node-tap="projectTreeClick" @node-loading="treeNodeLoading" />
                </el-scrollbar>
            </div>
            <!-- 左右拖动 -->
            <div class="horizontal-drag-line" @mousedown="onmousedown" />
        </div>
        <div v-show="!isCarrySpotChecksDrawer" class="hc-page-content-box">
            <hc-new-card padding>
                <template #header>
                    <HcIcon name="volume-up" />
                    <span class="ml-2">您本次验收抽检案卷共</span>
                    <span class="text-orange mx-2">{{ stats?.total }}</span>
                    <span>卷，目前已抽检</span>
                    <span class="text-green mx-2">{{ stats?.reviewed }}</span>
                    <span>卷，抽检率为</span>
                    <span class="text-blue mx-2">{{ stats?.ratio }}</span>
                </template>
                <template #extra>
                    <el-button hc-btn type="primary" @click="writingConclusion">编写结论</el-button>
                    <el-button hc-btn type="warning" @click="toBackHomeClick">返回主页</el-button>
                </template>
                <div class="hc-card-diy-search-box">
                    <div class="text-gray text-sm mr-4 hc-card-diy-tip-view">
                        <span class="mr-4">通过关键词、题名、桩号等相关信息进行搜索:</span>
                        <el-radio-group v-model="checkList" class="ml-4" @change="getTableData">
                            <el-radio label="1" size="large">案卷</el-radio>
                            <el-radio label="2" size="large">文件</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="autocomplete-box">
                        <el-input
                            v-model="state1" class="w-full" clearable
                            placeholder="搜索" 
                            @change="getTableData"
                        />
                        <el-button class="ml-10" type="primary" @click="logShowClick">抽检记录</el-button>
                    </div>
                </div>

                <div class="hc-card-diy-table-box">
                    <HcTable
                        :column="tableColumn" :datas="tableData" :loading="tableLoading"
                        is-new :index-style="{ width: 60 }"
                    >
                        <template #key4="{ row, index }">
                            <span :style="row.key4_1 === '1' ? 'color: #81b337' : ''">{{ row.key4 }}</span>
                        </template>
                        <template #key5="{ row, index }">
                            <span :style="row.key5_1 === '1' ? 'color: #81b337' : 'color: #bd3124'">{{ row.key5 }}</span>
                        </template>
                        <template #action="{ row, index }">
                            <el-button size="small" type="primary" @click="tableClick(row)">查看</el-button>
                        </template>
                    </HcTable>
                </div>
                <template #action>
                    <HcPages :pages="searchForm" @change="pageChange" />
                </template>
            </hc-new-card>
        </div>

        <!-- 展开抽查 -->
        <CarrySpotChecks
            :show="isCarrySpotChecksDrawer" close-text="关闭案卷" check-text="保存抽检意见" :file-id="fileId" :file-info="fileInfo" :project-id="projectId" :is-opinion="isOpinion" @check="onCarrySpotChecksClose"
            @close="onCarrySpotChecksClose"
        />

        <!-- 抽检记录 -->
        <hc-new-dialog v-model="isLogModal" is-slot-footer is-table widths="70%" title="抽检记录" @close="isLogModalClose">
            <TableOpinion :contract-id="contractId" :project-id="projectId" :search-log-form="searchLogForm" @change-file="changeFile" />
            <template #footer>
                <HcPages :pages="searchLogForm" @change="pageLogChange" />
            </template>
        </hc-new-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { useRouter } from 'vue-router'
import HcTree from '~src/components/tree/hc-tree.vue'
import CarrySpotChecks from './components/carry-spot-checks.vue'
import TableOpinion from './components/examination/table-opinion.vue'
import initialgApi from '~api/initial/initial'
import { getArrValue, getObjValue } from 'js-fast-way'

//变量
const router = useRouter()
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)
const projectInfo = ref(useAppState.getProjectInfo)
const isCollapse = ref(useAppState.getCollapse)
const isBubble = ref(useAppState.getBubble)

//监听
watch(() => [
    useAppState.getCollapse,
    useAppState.getBubble,
], ([Collapse, bubble]) => {
    isCollapse.value = Collapse
    isBubble.value = bubble
})

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

})

//树加载
const treeLoading = ref(true)
const treeNodeLoading = () => {
    treeLoading.value = false
}

//tab数据和相关处理
const tabKey = ref('tab1')
const tabData = ref([
    { key: 'tab1', name: '所有树' },
    { key: 'tab2', name: '分配树' },
])
const tabChange = (item) => {
    tabKey.value = item?.key
}


//项目树被点击
const projectTreeClick = ({ data }) => {
    console.log(data, 'data')
    searchForm.value.nodeId = data.id
    getTableData()
    getUserInspectStats()
}

const checkList = ref('1')

const state1 = ref('')





const tableColumn = ref([
    { key: 'fileNumber', name: '档号', width: 180 },
    { key: 'name', name: '案卷题名' },
    { key: 'unit', name: '立卷单位' },
    { key: 'inspectStatusName', name: '抽检状态' },
    { key: 'updateStatusName', name: '抽检意见' },
    { key: 'action', name: '操作', width: 100 },
])
const tableData = ref([])

//获取数据
const tableLoading = ref(false)
//搜索表单
const searchForm = ref({
    current: 1, size: 20, total: 0,
})
//分页被点击
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

const getTableData = async () => {
    if (searchForm.value.nodeId) {
        tableLoading.value = true
        const { error, code, data } = await initialgApi.getNodeArchives({
            ...searchForm.value,
            projectId: projectId.value,
        type:tabKey.value === 'tab1' ? 1 : 2,
        searchValue:state1.value,
        searchType:checkList.value,
        })
        tableLoading.value = false
        if (!error && code === 200) {
            tableData.value = getArrValue(data['records'])
            searchForm.value.total = data['total'] || 0
        } else {
            tableData.value = []
            searchForm.value.total = 0
        }
    } else {
        window.$message.warning('请先选择左侧节点')
    }

}
//获取抽检统计
const stats = ref({})
const getUserInspectStats = async ()=>{
    const { error, code, data } = await initialgApi.userInspectStats({
            projectId: projectId.value,
    })
        if (!error && code === 200) {
         console.log(data, 'DATA')
         stats.value = getObjValue(data)
        } else {
            stats.value = {}
        }
}

const isCarrySpotChecksDrawer = ref(false)
const isOpinion = ref(false)
const fileId = ref('')//案卷ID
const fileInfo = ref({})//案卷信息
const tableClick = (row) => {
    console.log(row, 'row11111')
    isCarrySpotChecksDrawer.value = true
    fileId.value = row.id
    fileInfo.value = row
    isOpinion.value = false
    console.log( fileInfo.value, '  fileInfo.value')
}
const changeFile = (row)=>{
    fileId.value = row.archiveId
    isOpinion.value = true
    fileInfo.value = row
    isCarrySpotChecksDrawer.value = true
}
//关闭抽查
const onCarrySpotChecksClose = () => {
    isCarrySpotChecksDrawer.value = false
}

//编写结论
const writingConclusion = () => {
    router.push({
        name: 'transfer-writing-conclusion',
    })
}

//返回主页
const toBackHomeClick = () => {
    router.push({
        name: 'transfer-initial-expert',
    })
}

const isLogModal = ref(false)

//搜索表单
const searchLogForm = ref({
    current: 1, size: 20, total: 0,
})
//分页被点击
const pageLogChange = ({ current, size }) => {
    searchLogForm.value.current = current
    searchLogForm.value.size = size
}

const logShowClick = () => {
    isLogModal.value = true
}

const isLogModalClose = () => {
    isLogModal.value = false
}

//左右拖动，改变树形结构宽度
const leftWidth = ref(382)
const onmousedown = () => {
    const leftNum = isCollapse.value ? 142 : 272
    document.onmousemove = (ve) => {
        let diffVal = ve.clientX - leftNum
        if (diffVal >= 310 && diffVal <= 900) {
            leftWidth.value = diffVal
        }
    }
    document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
    }
}
</script>

<style lang="scss" scoped>
.hc-card-diy-search-box {
    position: relative;
    width: 100%;
    .autocomplete-box {
        position: relative;
        width: 100%;
        margin-top: 10px;
        display: flex;
        align-items: center;
    }
}
.hc-card-diy-table-box {
    position: relative;
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 90px);
}
.hc-card-diy-tip-view {
    display: flex;
    align-items: center;
}
.hc-tree-new-switch {
    position: relative;
    text-align: center;
    padding: 12px 0;
}
.hc-tree-box {
    height: calc(100% - 145px);
}
</style>

<style lang="scss">
.hc-csc-action-box .btn-box {
    .el-button + .el-button {
        margin-left: 50px;
    }
}
</style>