123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- <template>
- <hc-card>
- <template #header>
- <hc-new-switch :datas="tabTab" :keys="tabKey" :round="false" size="default" @change="tabChange" />
- <div 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">
- <hc-card-item scrollbar>
- <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
- </hc-card-item>
- </div>
- <div id="hc_table_card" 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">
- <HcIcon name="delete-bin" />
- <span>批量删除</span>
- </el-button>
- <el-button hc-btn type="primary">
- <HcIcon 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">
- <template #action="{ row }">
- <el-link type="danger">删除</el-link>
- </template>
- </hc-table>
- </hc-card-item>
- </div>
- </div>
- </hc-card>
- </template>
- <script setup>
- import { nextTick, onMounted, ref } from 'vue'
- defineOptions({
- name: 'AlterAdminZero',
- })
- //渲染完成
- onMounted(() => {
- setSplitRef()
- })
- //初始化设置拖动分割线
- const setSplitRef = () => {
- //配置参考: https://split.js.org/#/?direction=vertical&snapOffset=0
- nextTick(() => {
- window.$split(['#hc_tree_card', '#hc_table_card'], {
- 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>
|