measure/src/views/alter/admin/zero_bak.vue

<template>
    <hc-new-card>
        <template #header>
            <hc-new-switch :datas="tabTab" :keys="tabKey" :round="false" size="default" @change="tabChange" />
            <div v-if="tabKey === 'key2'" class="ml-3 w-40">
                <el-select v-model="searchForm.key1" filterable block placeholder="选择工区">
                    <el-option label="工区1" value="1" />
                    <el-option label="工区2" value="2" />
                    <el-option label="工区3" value="3" />
                </el-select>
            </div>
        </template>
        <div class="relative h-full flex">
            <div :id="`hc_tree_card_${uuid}`">
                <hc-card-item scrollbar>
                    <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
                </hc-card-item>
            </div>
            <div :id="`hc_table_card_${uuid}`" class="flex-1">
                <hc-card-item style="height: 106px">
                    <template #header>
                        <div class="font-400 text-orange">温馨提示： 可选择树节点生成和删除该节点下所有清单的零号变更</div>
                    </template>
                    <template #extra>
                        <el-button hc-btn type="danger">
                            <hc-icon name="delete-bin" />
                            <span>批量删除</span>
                        </el-button>
                        <el-button hc-btn type="primary">
                            <hc-icon name="pencil-ruler-2" />
                            <span>一键生成零号变更</span>
                        </el-button>
                    </template>
                    <el-form inline :model="searchForm" class="search-form-box">
                        <el-form-item label="零号变更编号">
                            <el-input v-model="searchForm.key1" placeholder="零号变更编号" clearable />
                        </el-form-item>
                        <el-form-item label="生成时间">
                            <el-date-picker v-model="searchForm.key2" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
                        </el-form-item>
                        <el-form-item label="零号变更金额">
                            <el-input v-model="searchForm.key3" placeholder="零号变更金额" clearable />
                        </el-form-item>
                    </el-form>
                </hc-card-item>
                <!-- 数据列表 -->
                <hc-card-item class="mt-3" style="height: calc(100% - 106px - 0.75rem);">
                    <template #header>
                        <div class="font-400 text-orange">零号变更数据列表</div>
                    </template>
                    <hc-table :is-index="false" :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new>
                        <template #action="{ row }">
                            <el-link type="danger">删除</el-link>
                        </template>
                    </hc-table>
                </hc-card-item>
            </div>
        </div>
    </hc-new-card>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import { getRandom } from 'js-fast-way'

defineOptions({
    name: 'AlterAdminZero',
})

const uuid = getRandom(4)

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

//初始化设置拖动分割线
const setSplitRef = () => {
    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
    nextTick(() => {
        window.$split(['#hc_tree_card_' + uuid, '#hc_table_card_' + uuid], {
            sizes: [20, 80],
            snapOffset: 0,
            minSize: [50, 500],
        })
    })
}

//类型tab数据和相关处理
const tabKey = ref('key1')
const tabTab = ref([
    { key: 'key1', name: '普通变更' },
    { key: 'key2', name: '工区变更' },
])

const tabChange = (item) => {
    tabKey.value = item?.key
    console.log(item)
}

//数据格式
const treeProps = {
    label: 'name',
    children: 'children',
    isLeaf: 'leaf',
}

//懒加载的数据
const treeLoadNode = ({ level }, resolve) => {
    if (level === 0) {
        return resolve([{ name: 'region' }])
    }
    if (level > 3) {
        return resolve([])
    }
    setTimeout(() => {
        resolve([
            { name: 'leaf', leaf: true },
            { name: 'zone' },
        ])
    }, 500)
}

//搜索表单
const searchForm = ref({
    key1: null,
})

//表格数据
const tableLoading = ref(false)
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: '修正量' },
    { key: 'key9', name: '修正金额' },
    { key: 'key10', name: '核实量' },
    { key: 'key11', name: '核实金额' },
    { key: 'key12', name: '状态' },
    { key: 'action', name: '操作', width: 80, align: 'center' },
])
const tableData = ref([
    { key1: '1111' },
])
</script>

<style lang="scss">
.search-form-box .el-form-item {
    margin-bottom: 0;
}
</style>