archives/src/views/transfer/entry-sampling.vue

<template>
    <div class="hc-page-layout-box">
        <div :class="isCard ? '' : 'is-action'" class="hc-layout-left-box" style="width: 400px;">
            <div class="hc-project-box">
                <div class="hc-project-icon-box">
                    <HcIcon name="book-read" />
                </div>
                <div class="ml-2 project-name-box">
                    <span class="text-xl text-cut project-alias">调卷抽检范围配置</span>
                    <div class="text-xs text-cut project-name text-orange">请勾选您所擅长或侧重想要查看的验收类别</div>
                </div>
            </div>
            <div class="hc-type-choose-content">
                <el-scrollbar>
                    <el-checkbox-group v-model="checkList" size="large" :disabled="!isNull">
                        <div v-for="item in checkData" :key="item.key" class="hc-type-choose-checkbox">
                            <el-checkbox :label="item.key">{{ item.name }}</el-checkbox>
                        </div>
                    </el-checkbox-group>
                </el-scrollbar>
            </div>
            <div class="hc-type-choose-tip text-orange">
                <div>提示：</div>
                <div class="text-2">1、勾选抽检侧重偏好，系统会自动根据您的偏好及案卷数量分配抽检范围</div>
                <div class="text-3">
                    2、若您勾选的侧重偏好与其他专家一致，系统会根据登录的先后顺序，优先分配；若系统检测您设置的偏好范围，未有可抽检的案卷，则系统会随机给您分配其他未抽检的案卷范围
                </div>
            </div>
            <div class="hc-type-choose-action">
                <el-button :disabled="checkList.length <= 0" hc-btn @click="emptyTypeClick">
                    <HcIcon name="close" />
                    <span>清空重置</span>
                </el-button>
                <el-button :disabled="checkList.length <= 0" hc-btn type="primary" @click="confirmAllocationClick">
                    <HcIcon name="check" />
                    <span>确认分配</span>
                </el-button>
            </div>
        </div>
        <div class="hc-page-content-box">
            <div v-if="isCard" class="arrow-right-icon-box">
                <HcIcon class="icon" name="arrow-right-circle" />
            </div>

            <div v-if="isNull" class="hc-type-choose-null">
                <div class="null-flex-view">
                    <HcIcon class="icon" fill name="spam-2" />
                    <div class="mt-4">请在左侧勾选您验收侧重范围</div>
                </div>
            </div>

            <hc-new-card v-if="isCard" scrollbar>
                <template #header>
                    <div class="title text-lg hc-card-header-title">
                        <HcIcon name="book-2" />
                        <span class="ml-2">抽检目录范围</span>
                    </div>
                </template>
                <template #extra>
                    <span class="text-orange text-sm">为您分配抽检范围，若有异动，可手动勾选想要验收的部分</span>
                </template>

                <HcTree ref="treeRef" style="margin-bottom: 10px;" :tree-data="ElTreeData" :default-checked-keys="defaultCheckedKeys" @check="checkChange" />

                <template #action>
                    <div class="hc-card-action-diy">
                        <el-button hc-btn @click="clearResetClick">
                            <HcIcon name="refresh" />
                            <span>清空重置</span>
                        </el-button>
                        <el-button hc-btn type="primary" :loading="inspectionLoaing" @click="ToInspection">
                            <HcIcon name="check" />
                            <span>确认并进入抽检</span>
                        </el-button>
                    </div>
                </template>
            </hc-new-card>
        </div>

        <HcLoading v-if="isLoading" num="76" />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAppStore } from '~src/store'
import { useRouter } from 'vue-router'
import HcTree from './components/entry-sampling/hc-tree.vue'
import initialgApi from '~api/initial/initial'
import { arrUnion, getArrValue } 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 checkList = ref([])
const checkData = ref([
    { name: '业主', key: '1' }, { name: '监理', key: '2' }, { name: '施工', key: '3' },
    { name: '影像', key: '4' }, { name: '竣工图', key: '5' },
])

//清空重置
const emptyTypeClick = () => {
    checkList.value = []
}

//是否显示
const isNull = ref(true)
const isCard = ref(false)
const isLoading = ref(false)
const treeLoaing = ref(false)
const getElTreeData = async ()=>{
    treeLoaing.value = true
    const { error, code, data } = await initialgApi.getUnitAllNode({
        projectId: projectId.value,
        types:checkList.value.join(','),
    })
    treeLoaing.value = false
    if (!error && code === 200) {
        console.log(data, 'data')
        ElTreeData.value = getArrValue(data['list'])
        defaultCheckedKeys.value = getArrValue(data['ids'])
  
 


    } else {
        ElTreeData.value = []
        defaultCheckedKeys.value = []
     
    }
}
const ElTreeData = ref( [])
const treeRef = ref(null)
const checkKeys = ref([])
const defaultCheckedKeys = ref([])
const checkChange = ( val, val1 )=>{
    const { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys } = val1

   const arr = arrUnion(checkedKeys, halfCheckedKeys)
    checkKeys.value = arr
}
//确认分配
const confirmAllocationClick = async () => {
    isNull.value = false
    isLoading.value = true
    await getElTreeData()
    isCard.value = true
    isLoading.value = false
   setTimeout(() => {
        const ortreeRef = treeRef.value?.getRef() //树的原始ref
        const halfCheckedKeys = ortreeRef.getHalfCheckedKeys() //获取半选中的节点
        const checkedKeys = ortreeRef.getCheckedKeys() //获取全选选中的节点
        const arr = arrUnion(checkedKeys, halfCheckedKeys)
        checkKeys.value = arr
   }, 100)
}

//确认并进入抽检
const ToInspection = () => {
  const ids = checkKeys.value.join(',')
  if (checkKeys.value.length > 0) {
    goInspection(ids)
  } else {
    window.$message.warning('请您勾选想要验收的目录')
  }
 
    // router.push({
    //     name: 'transfer-preliminary-examination',
    // })
    
}
//抽检
const inspectionLoaing = ref(false)
const goInspection = async (ids)=>{
    inspectionLoaing.value = true
    const { error, code, data, msg } = await initialgApi.saveAllSelectNodes({
        ids: ids,
       
    })
    inspectionLoaing.value = false
    if (!error && code === 200) {
        window.$message.success(msg)
         router.push({
            name: 'transfer-preliminary-examination',
        })
        
    } 
}

//清空重置
const clearResetClick = () => {
    isNull.value = true
    isLoading.value = false
    isCard.value = false
    checkList.value = []
}
</script>

<style lang="scss" scoped>
@import '~style/transfer/scoped/entry-sampling.scss';
.hc-page-content-box {
    padding-left: 34px;
    .arrow-right-icon-box {
        position: absolute;
        left: -10px;
        z-index: 9;
        font-size: 30px;
        top: 10px;
        .icon {
            color: #e99d42;
        }
    }
}
</style>

<style lang="scss">
@import '~style/transfer/entry-sampling.scss';
</style>