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 bg-white">
            <div class="hc-tree-box ">
                <div class="title_box">
                    汇总分类
                </div>
                <el-scrollbar>
                    <div v-for="(item, index) in testOpt" :key="item.id" class="mt-4" :class="item.id === curItem?.id ? 'bg-slate-200' : ''" @click="handleItem(item)">
                        <i v-if="true" class="ri-circle-fill" />
                        <i v-else class="ri-arrow-right-s-fill" style="font-size: larger;" />
                        {{ item.className }}
                        <span v-if="false" class="ml-4 bg-blue-100">222</span>
                    </div>
                    <!-- <HcLazyTree :auto-expand-keys="treeAutoExpandKeys" is-type @load="treeLoadNode" @node-tap="wbsElTreeClick" /> -->
                </el-scrollbar>
            </div>
            <!-- 左右拖动 -->
            <div class="horizontal-drag-line" @mousedown="onmousedown" />
        </div>
        <div class="hc-page-content-box">
            <HcNewCard :scrollbar="false" action-size="lg">
                <template #extra>
                    <HcTooltip keys="tentative_collect_test_print">
                        <el-button hc-btn color="#567722" @click="addClick">
                            <HcIcon name="add" />
                            <span>新增</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_collect_test_download">
                        <el-button hc-btn color="#A16222" :loading="downLoading" :disabled="tableCheckedKeys.length === 0" @click="downClick">
                            <HcIcon name="download" />
                            <span>下载</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_collect_test_del">
                        <el-button hc-btn color="#e03997" :disabled="tableCheckedKeys.length === 0" @click="delModalClick">
                            <HcIcon name="delete-bin-2" />
                            <span>删除</span>
                        </el-button>
                    </HcTooltip>
                </template>
                <template #header>
                    <div class="w-64">
                        <el-select
                            v-model="searchForm.contractId"
                            placeholder="请选择"
                            @change="changeContract"
                        >
                            <el-option
                                v-for="item in contractOptions"
                                :key="item.id"
                                :label="item.contractName"
                                :value="item.id"
                            />
                        </el-select>
                    </div>
                    <div class="w-64 ml-2">
                        <el-select v-model="searchForm.detectionType" block clearable placeholder="检测类别" @change="changeType">
                            <el-option
                                v-for="item in typeData" :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>
                </template>
                <HcTable
                    ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading"
                    is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
                    @selection-change="tableSelection"
                >
                    <template #action="{ row }">
                        <el-button
                            hc-btn
                            type="primary"
                            @click="viewPdf(row)"
                        >
                            <HcIcon name="eye" />
                            <span>查看</span>
                        </el-button>
                    </template>
                </HcTable>
                <template #action>
                    <HcPages :pages="searchForm" @change="pageChange" />
                </template>
            </HcNewCard>
        </div>
        <hc-new-dialog
            v-model="addFormShow" :loading="addFormLoading" title="新增分类"
            widths="30rem" @close="addModalClose" @save="addModalSave"
        >
            <el-form
                ref="addFormRef" :model="addFormModal" :rules="addFormRules"
                label-position="left" label-width="auto" size="large"
            >
                <el-form-item class="mb-0" label="合同段:" prop="contractId">
                    <el-select
                        v-model="addFormModal.contractId"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in contractOptions"
                            :key="item.id"
                            :label="item.contractName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item class="mb-0 mt-4" label="汇总类别:" prop="classId">
                    <el-select
                        v-model="addFormModal.classId"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in testOpt"
                            :key="item.id"
                            :label="item.className"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item class="mb-0 mt-4" label="报告时间:">
                    <HcDatePicker :dates="addbetweenTime" clearable @change="addbetweenTimeUpdate" />
                </el-form-item>
            </el-form>
            <el-form-item class="mb-0 mt-4" label="单位类型:" prop="unitType	">
                <el-select
                    v-model="addFormModal.unitType	"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in unitOpt"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item class="mb-0 mt-4" label="检测类型:" prop="detectionType">
                <el-select
                    v-model="addFormModal.detectionType"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in typeData" :key="item.value" :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
        </hc-new-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { download, getContractList, getPage, getSummaryList, removeByIds, save } from '~api/tentative/collect/test'
import { arrToId, getArrValue, isString } from 'js-fast-way'
import { HcDelMsg } from 'hc-vue3-ui'
import { getDictionary } from '~api/other'
import { toPdfPage } from '~uti/btn-auth'

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)

const isCollapse = ref(useAppState.getCollapse)




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



//渲染完成
onMounted(async () => {
   await gettypeData()
   await getContractOpt()
   await getTextOpt()
   getTableData()
})

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

//获取合同段列表
const getContractOpt = async () => {
    const { error, code, data } = await getContractList({
        contractId: contractId.value,
        projectId: projectId.value,

    })
    //判断状态
    if (!error && code === 200) {
        let resdata = getArrValue(data)
       contractOptions.value = resdata
       if ( contractOptions.value.length > 0) {
        searchForm.value.contractId = contractOptions.value[0].id
       }

    } else {
        contractOptions.value = []
    }
}

//获取汇总分类列表
const testOpt = ref([])
const getTextOpt = async () => {
    const { error, code, data } = await getSummaryList()
    //判断状态
    if (!error && code === 200) {
        let resdata = getArrValue(data)
        testOpt.value = resdata
        if ( testOpt.value.length > 0) {
        curItem.value = testOpt.value[0]
       }

    } else {
        testOpt.value = []
    }
}
const curItem = ref(null)
const handleItem = (item)=>{
    curItem.value = item
    getTableData()
}
//检测类别
const typeData = ref([])
//获取检测类别

const gettypeData = async () => {
    const { data } = await getDictionary({
        code: 'trial_detection_category',
    })
    //处理数据
    let newArr = []
    const newData = getArrValue(data)
    for (let i = 0; i < newData.length; i++) {
        newArr.push({
            label: newData[i]['dictValue'],
            value: Number(newData[i]['dictKey']),
        })
    }
    typeData.value = newArr
}


//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({ arr, query }) => {
    betweenTime.value = arr
    searchForm.value.startDate = arr[0]
    searchForm.value.endDate = arr[1]
    getTableData()
}
const addbetweenTime = ref(null)
const addbetweenTimeUpdate = ({ arr, query }) => {
    addbetweenTime.value = arr
    addFormModal.value.startDate = arr[0]
    addFormModal.value.endDate = arr[1]

}

//选择检测类别
const changeType = ()=>{
    getTableData()
}
const changeContract = ()=>{
    getTableData()
}


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

//表格数据
const tableRef = ref(null)
const tableColumn = ref([
    { key: 'summaryNumber', name: '汇总编号' },
    { key: 'classIdName', name: '汇总类别' },
    { key: 'detectionTypeName', name: '检测类型' },
    { key: 'summaryDateName', name: '汇总日期' },
    { key: 'action', name: '操作', width:100 },

])

//获取数据
const tableLoading = ref(false)
const tableData = ref([])
const getTableData = async () => {
    if (!searchForm.value.contractId) {
        window.$message.warning('请选择合同段')
        return
    }
    if (curItem.value) {
        const { error, code, data } = await getPage({
            ...searchForm.value,
            classId:curItem.value?.id,
        })
        //判断状态
        if (!error && code === 200) {
            let resdata = getArrValue(data['records'])
        tableData.value = resdata
        searchForm.value.total = data['total']

        } else {
            tableData.value = []
        }
    } else {
        window.$message.warning('请先选择汇总分类')
    }

}

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

//删除
const delModalClick = () => {
    if (tableCheckedKeys.value.length === 0) {
        window.$message.warning('请先选择数据')
        return
    }
    HcDelMsg({}, async (instance, resolve) => {
        instance.confirmButtonLoading = true
        instance.confirmButtonText = '删除中...'
        await removeContractTreeNode()
        resolve() //关闭弹窗的回调
        instance.confirmButtonLoading = false
    })
}
const removeContractTreeNode = async () => {
    const loadingInstance = window.$loading.service({
        fullscreen: true,
        text: '删除节点中，请耐心等待...',
        background: 'rgba(0, 0, 0, 0.7)',
    })

    const { error, code, msg } = await removeByIds({
        ids: arrToId( tableCheckedKeys.value),
    })
    loadingInstance.close()
    if (!error && code === 200) {
        window?.$message?.success('删除成功')
            getTableData()
    } else {
            window.$message.error(msg)
     }
}
//左右拖动，改变树形结构宽度
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
    }
}
//查看pdf
const viewPdf = (row)=>{
    const { pdfUrl } = row
    if (pdfUrl) {
        toPdfPage(pdfUrl)
    } else {
        window.$message.warning('暂无数据')
    }
}

//新增试验汇总
const addFormModal = ref({})
const addFormShow = ref(false)
const addFormLoading = ref(false)
const addClick = ()=>{

    addFormShow.value = true

}
const addModalClose = ()=>{
    addFormShow.value = false
    addFormModal.value = {}

}

const addFormRules = ref(null)
const addFormRef = ref(null)

const addModalSave = async ()=>{
    console.log(addFormModal.value)
    addFormLoading.value = true
    const { error, code, msg } = await save({
            ...addFormModal.value,

     })
     addFormLoading.value = false
        //判断状态
        if (!error && code === 200) {
         window.$message.success(msg)
         addFormShow.value = false
         getTableData()

        }
}
const unitOpt = ref([
    { name:'施工', id:'1' },
])
const downLoading = ref(false)
const downClick = async ()=>{
    downLoading.value = true
    const { error, code, data } = await download({
            ids: arrToId( tableCheckedKeys.value),
        })
        downLoading.value = false

    const res = isString(data) ? data || '' : ''
    if (!error && code === 200 && res) {
        window.open(res, '_blank')
    }
}
</script>

<style lang="scss" scoped>
.title_box{
    font-size: 24px;
    font-weight: bolder;
}
</style>