archives/src/views/custody/ledger.vue

<template>
    <hc-body>
        <hc-new-card>
            <template #header>
                <div class="ml-4 w-40">
                    <el-select v-model="searchForm.storageTime" clearable placeholder="标段">
                        <el-option v-for="item in sectionData" :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 transferornData" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="ml-3 w-64">
                    <HcDatePicker :dates="betweenTime" clearable start-placeholder="移交开始时间" end-placeholder="移交结束时间" @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="h-full">
                <div class="hc-c-table-box h-full">
                    <HcTable
                        ref="tableRef" :check-style="{ width: 29 }" :column="tableColumn" :datas="tableData"
                        :index-style="{ width: 70 }" :is-arr-index="false" :loading="tableLoading" 
                        is-new is-current-row
                    >
                        <template #index="{ index }">
                            <span>{{ index + 1 }}</span>
                        </template>
                        <template #secretLevelValue="{ row }">
                            <span class="text-link">{{ row.secretLevelValue }}</span>
                        </template>
                        <template #pageN="{ row }">
                            <span class="text-link">{{ row.pageN }}</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 { getArrValue } from 'js-fast-way'


import tuningApi from '~api/archiveConfig/tuning.js'


import { getStoreValue, setStoreValue } from '~src/utils/storage'


//变量
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()
  

})




//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({ val, arr }) => {
    betweenTime.value = arr
    searchForm.value.startTimeValue = val['start']
    searchForm.value.endTimeValue = val['end']
}
//标段
const sectionData = ref([
    { label: 'T.J01标', value: '3' },
    { label: 'T.J02标', value: '2' },
    { label: 'T.J03标', value: '1' },
])
const transferornData = ref([
    { label: '张三', value: '3' },
    { label: '李四', value: '2' },
    { label: '王五', value: '1' },
])



//搜索表单
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>