archives/src/views/transfer/leader-sampling.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-box" v-loading="treeLoading" element-loading-text="加载中...">
                <el-scrollbar>
                    <HcTree :contractId="contractId" :projectId="projectId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading"/>
                </el-scrollbar>
            </div>
            <!--左右拖动-->
            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
        </div>
        <div v-show="!isCarrySpotChecksDrawer" class="hc-page-content-box">
            <HcCard>
                <template #header>
                    <span>您抽检验收的分组类别为：业主组，本次验收共</span>
                    <span class="text-orange mx-2">1232</span>
                    <span>卷，目前已抽检</span>
                    <span class="text-green mx-2">0</span>
                    <span>卷</span>
                </template>
                <template #extra>
                    <el-button hc-btn type="primary" @click="entrySamplingClick">重置验收范围</el-button>
                    <el-button hc-btn type="warning" @click="toBackClick">
                        <HcIcon name="arrow-go-back"/>
                        <span>返回</span>
                    </el-button>
                </template>
                <div class="hc-card-diy-search-box">
                    <div class="text-gray text-sm mr-4">
                        <span>通过关键词、题名、桩号等相关信息进行搜索:</span>
                        <!--el-checkbox-group v-model="checkList">
                        <el-checkbox label="目录"/>
                        <el-checkbox label="案卷"/>
                        <el-checkbox label="文件"/>
                    </el-checkbox-group-->
                    </div>
                    <div class="autocomplete-box">
                        <el-autocomplete v-model="state1" :fetch-suggestions="querySearch" class="w-full" clearable
                                         placeholder="搜索" @select="handleSelect"/>
                    </div>
                </div>

                <div class="hc-card-diy-table-box">
                    <HcTable :column="tableColumn"
                             :datas="tableData"
                             :loading="tableLoading"
                             heights="auto">
                        <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>

            </HcCard>
        </div>

        <!--展开抽查-->
        <CarrySpotChecks :show="isCarrySpotChecksDrawer" @check="onCarrySpotChecksClose"
                         @close="onCarrySpotChecksClose"/>

    </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {useAppStore} from "~src/store";
import {useRouter} from "vue-router";
//import HcTree from "./components/hc-tree.vue"
import HcTree from "~src/components/tree/hc-tree.vue"
import CarrySpotChecks from "./components/carry-spot-checks.vue"

//变量
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
}

//项目树被点击
const projectTreeClick = () => {

}

const checkList = ref([]);

const state1 = ref('')
const restaurants = ref([
    {value: '重庆市水利局关于安康至来凤国家高速公路奉节至巫山（渝鄂界）段水土保持方案准予许可的决定.PDF'},
    {value: '水土保持方案报告书、水土保持方案报告书技术评审会议纪要、水土保持方案的批复'},
])
const querySearch = (queryString, cb) => {
    const results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value
    cb(results)
}
const createFilter = (queryString) => {
    return (restaurant) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}
const handleSelect = (item) => {
    console.log(item)
}

const tableColumn = ref([
    {key: 'key1', name: '档号', width: 180},
    {key: 'key2', name: '案卷题名'},
    {key: 'key3', name: '立卷单位'},
    {key: 'key4', name: '抽检状态'},
    {key: 'key5', name: '抽检意见'},
    {key: 'action', name: '操作', width: 100},
])
const tableData = ref([
    {
        id: 1,
        key1: 'xxxx',
        key2: '安康至来凤国家高速公路奉节至巫山（渝鄂界）段水土保持方案准予许可的决定',
        key3: 'xxxxxxx',
        key4: '已抽检',
        key4_1: '1',
        key5: '合格',
        key5_1: '1',
    },
    {
        id: 2,
        key1: 'xxxx',
        key2: '安康至来凤国家高速公路奉节至巫山（渝鄂界）段水土保持方案准予许可的决定',
        key3: 'xxxxxxx',
        key4: '未抽检',
        key4_1: '2',
        key5: '整改',
        key5_1: '2',
    },
])

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

}

const tableClick = (row) => {
    isCarrySpotChecksDrawer.value = true
}


const isCarrySpotChecksDrawer = ref(false)

//关闭抽查
const onCarrySpotChecksClose = () => {
    isCarrySpotChecksDrawer.value = false
}


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

//进入抽检
const entrySamplingClick = () => {
    router.push({
        name: 'transfer-entry-sampling'
    });
}

//左右拖动，改变树形结构宽度
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;
    }
}
.hc-card-diy-table-box {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: calc(100% - 70px);
}
</style>

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