archives/src/views/using/borrow/borrow.vue

<template>
    <hc-body :loading="treeLoading" :project-nmae="projectInfo?.name" split>
        <template #tree>
            <HcTree
                :auto-expand-keys="treeAutoExpandKeys" :contract-id="contractId" :project-id="projectId"
                @node-tap="nodeElTreeClick" @menu-tap="ElTreeMenuClick"
                @node-loading="treeNodeLoading"
            />
        </template>
        <hc-new-card>
            <template #header>
                <div class="w-40">
                    <el-select v-model="searchForm.storageTime" clearable placeholder="保管期限">
                        <el-option v-for="item in retentionPeriod" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="ml-3 w-40">
                    <el-select v-model="searchForm.secretLevel" clearable placeholder="密级">
                        <el-option v-for="item in securityLevelData" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                    </el-select>
                </div>
                <div class="ml-3 w-64">
                    <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
                </div>
                <div class="ml-3 w-56">
                    <el-input v-model="searchForm.name" clearable block placeholder="请输入档号/案卷题名" @keyup="keyUpEvent" />
                </div>
              
               
                <div class="ml-2">
                    <el-button type="primary" @click="searchClick">
                        <HcIcon name="search-2" />
                        <span>搜索</span>
                    </el-button>
                </div>
            </template>
          
            <div :class="tableFileShow ? 'file-table' : ''" class="body">
                <div class="hc-c-table-box">
                    <HcTable
                        ref="tableRef" :check-style="{ width: 29 }" :column="tableColumn" :datas="tableData"
                        :index-style="{ width: 70 }" :is-arr-index="false" :loading="tableLoading" :ui="hoverHand ? 'hover-hand' : ''"
                        is-new is-current-row
                    >
                        <template #index="{ index }">
                            <span>{{ index + 1 }}</span>
                        </template>
                    </HcTable>
                </div>
            </div>
            <template #action>
                <HcPages :pages="searchForm" :sizes="[20, 50, 100, 200, 300, 500]" @change="pageChange" />
            </template>
        </hc-new-card>
    </hc-body>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import HcTree from '~src/components/tree/hc-tree.vue'
import { getArrValue } from 'js-fast-way'


import tasksApi from '~api/tasks/data'


import { getStoreValue, setStoreValue } from '~src/utils/storage'
import { toPdfPage } from '~uti/btn-auth'


//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)
const projectInfo = ref(useAppState.getProjectInfo)
const isCollapse = ref(useAppState.getCollapse)
const hoverHand = ref(true)

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

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

})



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

//项目树被点击

// const isBuiltDrawing = ref(0)
//自动展开缓存
const treeAutoExpandKeys = ref(getStoreValue('turningExpandKeys') || [])
const nodeElTreeClick = ({ node, data, keys, key }) => {
    //缓存展开的节点
    setStoreValue('turningExpandKeys', keys)
    treeAutoExpandKeys.value = keys || []
    console.log('点击', data)
    searchForm.value.total = 0
    searchForm.value.current = 1
    searchForm.value.size = 20
    searchForm.value.nodeIds = data.id || ''
    getTableData()
}
//树菜单被点击
const ElTreeMenuClick = async ({ key, node, data, keys }) => {
    setStoreValue('turningExpandKeys', keys)
    treeAutoExpandKeys.value = keys || []
}

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({ val, arr }) => {
    betweenTime.value = arr
    searchForm.value.startTimeValue = val['start']
    searchForm.value.endTimeValue = val['end']
}
//保管期限
const retentionPeriod = ref([
    { label: '永久', value: '3' },
    { label: '30年', value: '2' },
    { label: '10年', value: '1' },
])

//获取密级
const securityLevelData = ref([])
const getSecurityLevel = async () => {
    const { error, code, data } = await tasksApi.queryTaskTypeStatus({
        typeOrStatus: 'security_level',
    })
    //处理数据
    if (!error && code === 200) {
        securityLevelData.value = getArrValue(data).filter(item => item.dictKey !== '0')
    } else {
        securityLevelData.value = []
    }
}


//搜索表单
const searchForm = ref({
    contractId: null, storageTime:'', secretLevel:'', name:'', startTimeValue: '', endTimeValue: '',
    current: 1, size: 20, total: 0,
})
const searchClick = ()=>{
    getTableData()
}
//回车搜索
const keyUpEvent = (e) => {
    if (e.key === 'Enter') {
        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([])
//设置表头
const setTableColumns = () => {
    tableColumn.value = [
        { key: 'fileNumber', name: '标段' },
        { key: 'name', name: '移交人', width: 300 },
        { key: 'storageTimeValue', name: '移交时间' },
        { key: 'secretLevelValue', name: '登记表' },
        { key: 'pageN', name: '清单' },
     
    ]
}
const tableData = ref([
    { fileNumber: 'T.J01标', name: '张三', storageTimeValue: '2022-06-20 14：52：30', secretLevelValue: '电子档案移交接收登记表(TJ01标)', pageN: '电子档案移交接收登记表(TJ01标)' },
])
//获取数据
const tableLoading = ref(false)
const getTableData = async () => {
 
    // tableLoading.value = true
    // const { error, code, data } = await tuningApi.pageByArchive({
    //     ...searchForm.value,
    //     projectId: projectId.value,
    //     contractId: contractId.value,
    //     isArchive: 1,
    // })
    // 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
    // }
}



//设置表头
</script>