for_client/src/views/tentative/collect/test.vue

<template>
    <div class="hc-page-layout-box">
        <div :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">
                <el-scrollbar>
                    <HcLazyTree :auto-expand-keys="treeAutoExpandKeys" is-type @load="treeLoadNode" @nodeTap="wbsElTreeClick" />
                </el-scrollbar>
            </div>
            <!-- 左右拖动 -->
            <div class="horizontal-drag-line" @mousedown="onmousedown" />
        </div>
        <div class="hc-page-content-box">
            <HcCard :scrollbar="false" action-size="lg">
                <template #header>
                    <HcTooltip keys="tentative_collect_test_del">
                        <el-button hc-btn color="#e03997" @click="delModalClick">
                            <HcIcon name="delete-bin-2" />
                            <span>删除</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_collect_test_print">
                        <el-button hc-btn color="#567722">
                            <HcIcon name="printer" />
                            <span>打印</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_collect_test_download">
                        <el-button hc-btn color="#A16222">
                            <HcIcon name="download" />
                            <span>下载</span>
                        </el-button>
                    </HcTooltip>
                </template>
                <template #search>
                    <div class="w-auto">
                        <el-select v-model="searchForm.contractId" block clearable placeholder="请选择合同段">
                            <el-option
                                v-for="item in projectInfo?.contractInfoList" :key="item.id"
                                :label="item.name" :value="item.id"
                            />
                        </el-select>
                    </div>
                    <div class="w-32 ml-2">
                        <el-select v-model="searchForm.type" block clearable placeholder="检测类别">
                            <el-option
                                v-for="item in typeData" :key="item.value" :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="w-32 ml-2">
                        <el-select v-model="searchForm.approval" block clearable placeholder="审批状态">
                            <el-option
                                v-for="item in approvalData" :key="item.value" :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="w-64 ml-2">
                        <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
                    </div>
                    <div class="ml-2">
                        <el-button type="primary" @click="searchClick">
                            <HcIcon name="search-2" />
                            <span>搜索</span>
                        </el-button>
                    </div>
                </template>
                <HcTable
                    ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check
                    border @selection-change="tableSelection"
                />
                <template #action>
                    <HcPages :pages="searchForm" @change="pageChange" />
                </template>
            </HcCard>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import queryApi from '~api/data-fill/query'
import { getArrValue, getObjValue } from 'js-fast-way'
import { getStoreValue, setStoreValue } from '~src/utils/storage'
import { delMessageV2 } from '~com/message/index.js'

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)
const projectInfo = ref(useAppState.getProjectInfo)
const isCollapse = ref(useAppState.getCollapse)
const contractInfo = ref(useAppState.getContractInfo)
const { contractType } = contractInfo.value
const classifyType = ref(contractType === 2 ? '2' : '1')
//监听
watch(() => [
    useAppState.getCollapse,
], ([Collapse]) => {
    isCollapse.value = Collapse
})

//自动展开缓存
const treeAutoExpandKeys = ref(getStoreValue('wbsTreeExpandKeys') || [])

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

})

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

//树相关的变量
const primaryKeyId = ref('')
const nodeItemInfo = ref({})
const nodeDataInfo = ref({})

//懒加载的数据
const treeLoadNode = async ({ node, item, level }, resolve) => {
    let contractIdRelation = '', parentId = '', primaryKeyId = ''
    if (level !== 0) {
        const nodeData = getObjValue(item)
        contractIdRelation = nodeData?.contractIdRelation || ''
        parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
        primaryKeyId = nodeData?.id || ''
    }
    //获取数据
    const { data } = await queryApi.queryWbsTreeData({
        contractId: contractId.value || '',
        contractIdRelation,
        primaryKeyId,
        parentId,
        classifyType: classifyType.value,
    })
    resolve(getArrValue(data))
}

//树被点击
const wbsElTreeClick = ({ node, data, keys }) => {
    nodeItemInfo.value = node
    nodeDataInfo.value = data
    primaryKeyId.value = data['primaryKeyId'] || ''
    //缓存自动展开
    treeAutoExpandKeys.value = keys
    setStoreValue('wbsTreeExpandKeys', keys)
    //改变搜索表单数据
    //searchForm.value.wbsId = data['contractIdRelation'] ? data['id'] : data['primaryKeyId']
    //searchForm.value.contractIdRelation = data['contractIdRelation']
    searchForm.value.current = 1
    getTableData()
}

//检测类别
const typeData = ref([
    { label: '自检', value: '1' },
    { label: '抽检', value: '2' },
    { label: '平行试验', value: '3' },
    { label: '验证试验', value: '4' },
    { label: '中心试验', value: '5' },
])

//审批状态
const approvalData = ref([
    { label: '未上报', value: '1' },
    { label: '待审批', value: '2' },
    { label: '已审批', value: '3' },
])

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({ arr, query }) => {
    betweenTime.value = arr
    searchForm.value.betweenTime = query
}

//搜索
const searchClick = () => {
    searchForm.value.current = 1
    getTableData()
}

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

//表格数据
const tableRef = ref(null)
const tableColumn = ref([
    { key: 'key1', name: '报告编号' },
    { key: 'key2', name: '工程部位' },
    { key: 'key3', name: '试验日期' },
    { key: 'key4', name: '样品编号' },
    { key: 'key5', name: '生产厂家' },
    { key: 'key6', name: '规格型号' },
    { key: 'key7', name: '代表数量' },
    { key: 'key8', name: '密度(开kg/m3)' },
    { key: 'key9', name: '比表面积(m2/kg)' },
    { key: 'key10', name: '细度(%)' },
    { key: 'key11', name: '标准稠度用水量(%)' },
    { key: 'key12', name: '初凝结时间(min)' },
    { key: 'key13', name: '终凝结时间(min)' },
    { key: 'key14', name: '安定性霍氏夹法' },
    { key: 'key15', name: '抗折3D胶砂强度(Mpa)' },
    { key: 'key16', name: '抗折28D胶砂强度(Mpa)' },
    { key: 'key17', name: '抗压3D胶砂强度(Mpa)' },
    { key: 'key18', name: '抗压28D胶砂强度(Mpa)' },
    { key: 'key19', name: '试验结果' },
    { key: 'key20', name: '检测类型' },
    { key: 'key21', name: '检测人' },
])

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

}

//多选
const tableCheckedKeys = ref([])
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows.filter((item) => {
        return (item ?? '') !== ''
    })
}

//删除
const delModalClick = () => {
    delMessageV2(async (action, instance, done) => {
            if (action === 'confirm') {
                instance.confirmButtonLoading = true
                  //removeContractTreeNode()
                instance.confirmButtonLoading = false
                done()
            } else {
                done()
            }
     })
}

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

</style>