archives/src/views/config/certified.vue

<template>
    <div class="hc-page-layout-box">
        <div class="hc-layout-left-box" :style="'width:' + leftWidth + 'px;'">
            <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">
                    <el-scrollbar>
                         <HcMenuSimple :datas="menuOptions" :keys="menuKey" @change="handleMenuValue"/>
                    </el-scrollbar>
            </div>
            <!--左右拖动-->
            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
        </div>
        <div class="hc-page-content-box">
            <HcCard>
                <template #header>
                  <div class="hc-card-header-table-title">
                      证书信息
                  </div>
                </template>
                 <template #extra>
                    <HcTooltip keys="file_collection_btn_upload_scanned_files">
                        <el-button type="primary" hc-btn >
                            <HcIcon name="save"/>
                            <span>保存设置</span>
                        </el-button>
                    </HcTooltip>
                </template>
                 
             <el-alert title="数字化扫描文件的二次安全认证管理，指定认证证书，方可进行认证。注意: 只有被指派的证书所有者才可以进行认证操作" type="error" :closable="false"  class="btn30" />
                    <el-menu :default-active="projectKey" class="hc-project-menu" unique-opened>
                        <el-sub-menu index="1">
                            <template #title>
                                <HcIcon name="folder-2" class="hc-menu-icon"/>
                                <span>单位证书</span>
                            </template>
                            <!-- <el-menu-item v-for="items in item?.contractInfoList ?? []" :index="items?.id" @click="projectMenuValue(item,items)"  :key="items.id">
                                <HcIcon name="star" class="hc-menu-icon" fill v-if="projectKey === items?.id"/>
                                <span>{{ items?.name }}</span>
                            </el-menu-item> -->
                             <el-menu-item index="1-1">
                                <HcIcon name="star" class="hc-menu-icon" fill v-if="projectKey === index"/>
                                <span>建设单位证书</span>
                            </el-menu-item>
                             <el-menu-item index="1-2">
                                <HcIcon name="star" class="hc-menu-icon" fill v-if="projectKey === index"/>
                                <span>监理单位证书</span>
                            </el-menu-item>
                            <el-menu-item index="1-3">
                                <HcIcon name="star" class="hc-menu-icon" fill v-if="projectKey === index"/>
                                <span>施工单位证书</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <HcIcon name="folder-2" class="hc-menu-icon"/>
                                <span>安全环保部</span>
                            </template>
                             <el-menu-item index="2-1">
                                <HcIcon name="star" class="hc-menu-icon" fill v-if="projectKey === index"/>
                                <span>张三</span>
                            </el-menu-item>
                             <el-menu-item index="21-2">
                                <HcIcon name="star" class="hc-menu-icon" fill v-if="projectKey === index"/>
                                <span>李四</span>
                            </el-menu-item>
                            <el-menu-item index="2-3">
                                <HcIcon name="star" class="hc-menu-icon" fill v-if="projectKey === index"/>
                                <span>XX</span>
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                    
            </HcCard>
        </div>

    </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {useAppStore} from "~src/store";

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);
const isCollapse = ref(useAppState.getCollapse);
//左侧菜单
const menuKey = ref('basic')
const menuItem = ref({})
const menuOptions = ref([
    {key: 'basic', label: '建设单位'},
    {key: 'password', label: '监理单位'},
    {key: 'project', label: '施工单位'}
]); 


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

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

})

//菜单被点击
const handleMenuValue = (item) => {
    menuItem.value = item
    menuKey.value = item.key
}








//左右拖动，改变树形结构宽度
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>


.btn30{
    margin-bottom: 30px;
}
.hc-card-header-table-title{
 font-size: 1.125rem;
line-height: 1.75rem;
}



</style>