for_client/src/views/tentative/collect/monthly.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-search-box">
                <div class="hc-search-tree-val">
                    <el-input
                        v-model="searchTreeVal" block clearable placeholder="请输入名称关键词检索" size="large"
                        @keyup="searchTreeKeyUp"
                    >
                        <template #suffix>
                            <HcIcon name="search-2" ui="text-xl" />
                        </template>
                    </el-input>
                </div>
                <div v-loading="treeLoading" class="hc-tree-scrollbar" element-loading-text="获取数据中...">
                    <el-scrollbar>
                        <KeepAlive>
                            <template v-if="isSearchTree">
                                <HcTreeData :datas="searchTreeData" @change="testTreeCheckChange" />
                            </template>
                            <template v-else>
                                <TestTree
                                    :contract-id="contractId" :project-id="projectId"
                                    @change="testTreeCheckChange"
                                />
                            </template>
                        </KeepAlive>
                    </el-scrollbar>
                </div>
            </div>
            <!-- 左右拖动 -->
            <div class="horizontal-drag-line" @mousedown="onmousedown" />
        </div>
        <div class="hc-page-content-box">
            <HcCard>
                <template #header>
                    <div class="w-40">
                        <el-select v-model="searchForm.type" clearable placeholder="请选择材料类别" size="large">
                            <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 size="large" @change="betweenTimeUpdate" />
                    </div>
                    <div class="ml-2">
                        <el-button size="large" type="primary" @click="searchClick">
                            <HcIcon name="search-2" />
                            <span>搜索</span>
                        </el-button>
                    </div>
                </template>
                <template #extra>
                    <HcTooltip keys="tentative_collect_monthly_report">
                        <el-button hc-btn type="primary">
                            <HcIcon name="send-plane-2" />
                            <span>上报</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_collect_monthly_print">
                        <el-button hc-btn color="#567722">
                            <HcIcon name="printer" />
                            <span>打印</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_collect_monthly_download">
                        <el-button hc-btn color="#A16222">
                            <HcIcon name="download" />
                            <span>下载</span>
                        </el-button>
                    </HcTooltip>
                </template>
                <div class="hc-table-ref-box">
                    <el-table
                        :data="tableData" :span-method="tableSpanMethod" class="hc-table-diy-box" height="100%"
                        style="width: 100%" border
                    >
                        <el-table-column align="right" label="试验组数" width="300">
                            <el-table-column align="left" label="试验项目" prop="title" width="220" />
                            <el-table-column align="center" label="月" prop="month" width="80" />
                        </el-table-column>
                        <el-table-column align="center" label="承包人">
                            <el-table-column align="center" label="合格数" prop="name" />
                            <el-table-column align="center" label="不合格数" prop="state" />
                            <el-table-column align="center" label="备注" prop="zip" />
                        </el-table-column>
                        <el-table-column align="center" label="操作" width="140">
                            <template #default="scope">
                                <!-- scope.row scope.$index -->
                                <HcTooltip keys="tentative_material_approach_annex">
                                    <el-button
                                        plain size="small" type="primary"
                                        @click="editorsNoteModalClick(scope.row)"
                                    >
                                        编辑备注
                                    </el-button>
                                </HcTooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <template #action>
                    <HcPages :pages="searchForm" @change="pageChange" />
                </template>
            </HcCard>
        </div>

        <!-- 编辑备注 -->
        <HcDialog
            :loading="editorsNoteLoading" :show="editorsNoteModal" title="编辑备注信息" widths="45rem"
            @close="editorsNoteModalClose" @save="editorsNoteModalSave"
        >
            <el-input v-model="editorsNoteVal" :autosize="{ minRows: 5 }" placeholder="编辑备注信息" type="textarea" />
        </HcDialog>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { useRoute, useRouter } from 'vue-router'
import TestTree from './components/TestTree.vue'
import HcTreeData from './components/HcTreeData.vue'
import queryApi from '~api/data-fill/query'
import { getArrValue } from 'js-fast-way'

//初始变量
const router = useRouter()
const useRoutes = useRoute()
const useAppState = useAppStore()

//全局变量
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)
const projectInfo = ref(useAppState.getProjectInfo)
const isCollapse = ref(useAppState.getCollapse)

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

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

})

//树搜索
const isSearchTree = ref(false)
const searchTreeVal = ref('')
const searchTreeData = ref([])

//回车
const treeLoading = ref(false)
const searchTreeKeyUp = (e) => {
    if (e.key === 'Enter') {
        searchTreeClick()
    }
}

const searchTreeClick = async () => {
    if (searchTreeVal.value) {
        isSearchTree.value = true
        treeLoading.value = true
        const { data } = await queryApi.searchContractTree({
            contractId: contractId.value,
            queryValue: searchTreeVal.value,
        })
        //判断状态
        treeLoading.value = false
        searchTreeData.value = getArrValue(data)
    } else {
        treeLoading.value = false
        isSearchTree.value = false
    }
}

//树被勾选
const nodeItemInfo = ref({})
const testTreeCheckChange = ({ data, checkeds }) => {
    console.log(data, checkeds)
    //nodeItemInfo.value = data
    //searchForm.value.current = 1;
    //getTableData()
}

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

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

//日期时间被选择
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 tableSpanMethod = ({ rowIndex, columnIndex }) => {
    if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
            return {
                rowspan: 2,
                colspan: 1,
            }
        } else {
            return {
                rowspan: 0,
                colspan: 0,
            }
        }
    }
}

//获取数据
const tableLoading = ref(false)
const tableData = ref([
    {
        title: 'No. 189, Grove St, Los Angeles',
        month: '本月',
        name: '100',
        state: '2',
        zip: 'CA 90036',
    },
    {
        title: 'No. 189, Grove St, Los Angeles',
        month: '累计',
        name: '100',
        state: '2',
        zip: 'CA 90036',
    },
    {
        title: 'No. 189, Grove St, Los Angeles',
        month: '本月',
        name: '100',
        state: '2',
        zip: 'CA 90036',
    },
    {
        title: 'No. 189, Grove St, Los Angeles',
        month: '累计',
        name: '100',
        state: '2',
        zip: 'CA 90036',
    },
    {
        title: 'No. 189, Grove St, Los Angeles',
        month: '本月',
        name: '100',
        state: '2',
        zip: 'CA 90036',
    },
    {
        title: 'No. 189, Grove St, Los Angeles',
        month: '累计',
        name: '100',
        state: '2',
        zip: 'CA 90036',
    },
])
const getTableData = () => {

}


//新增/编辑
const editorsNoteModal = ref(false)
const editorsNoteVal = ref('')
const editorsNoteModalClick = (row) => {
    editorsNoteModal.value = true
}

//保存
const editorsNoteLoading = ref(false)
const editorsNoteModalSave = () => {
    editorsNoteModal.value = true
}
const editorsNoteModalClose = () => {
    editorsNoteModal.value = false
}


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

<style lang="scss">
.hc-table-ref-box {
    height: 100%;
    border: 0;
    .el-table.hc-table-diy-box {
        --el-table-bg-color: initial;
        --el-table-header-bg-color: #DAE8F3;
        --el-table-header-text-color: #50545E;
        --el-table-tr-bg-color: #F1F5F8;
        --el-fill-color-light: #e7ebee;
        --el-table-text-color: #666666;
        --el-table-row-hover-bg-color: var(--el-color-primary-light-9);
        &.el-table--border {
            --el-table-border-color: #d7d7d7;
        }
        thead.is-group {
            background: none;
            //表头字体
            tr:first-of-type th:first-of-type,
            tr:first-of-type th:first-of-type {
                .cell {
                    display: inline-flex;
                    font-size: 16px;
                    line-height: initial;
                    position: relative;
                }
            }
            //表头其他样式
            tr:first-of-type th:first-of-type {
                border-bottom: none;
                .cell {
                    top: 7px;
                }
            }
            tr:last-of-type th:first-of-type {
                border-right: 0;
                .cell {
                    top: -7px;
                }
            }
            //斜线
            tr:last-of-type th:nth-of-type(2) {
                .cell {
                    visibility: hidden;
                    line-height: 0;
                    padding: 0;
                }
                &::before, {
                    content: '';
                    position: absolute;
                    width: 1px;
                    height: 308px;
                    background-color: #d7d7d7;
                    display: block;
                    bottom: 0;
                    right: 0;
                    transform: rotate(-75.5deg);
                    transform-origin: bottom;
                }
            }
        }
    }
}
</style>