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

<template>
    <hc-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>
            <div class="ml-5 font-400 text-orange">温馨提示：已经被变更方案引用的预变更，无法进行修改、删除操作</div>
        </template>
        <template #extra>
            <el-button hc-btn type="primary" @click="addModalClick">
                <HcIcon name="add" />
                <span>新增</span>
            </el-button>
        </template>
        <div class="relative h-full flex">
            <div id="hc_table_card" class="flex-1">
                <hc-card-item>
                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading">
                        <template #action="{ row }">
                            <el-link type="success" @click="rowEditClick(row)">修改</el-link>
                            <el-link type="danger">删除</el-link>
                        </template>
                    </hc-table>
                    <template #action>
                        <hc-pages :pages="searchForm" @change="pageChange" />
                    </template>
                </hc-card-item>
            </div>
            <div id="hc_info_card">
                <el-scrollbar>
                    <hc-card-item title="详情信息">
                        <hc-info-table>
                            <tr>
                                <hc-info-table-td center is-title>预变更编号：</hc-info-table-td>
                                <hc-info-table-td width="120px">33</hc-info-table-td>
                                <hc-info-table-td center is-title>预变更名称：</hc-info-table-td>
                                <hc-info-table-td width="120px">测试的</hc-info-table-td>
                                <hc-info-table-td center is-title>变更申请金额：</hc-info-table-td>
                                <hc-info-table-td width="120px">1</hc-info-table-td>
                            </tr>
                            <tr>
                                <hc-info-table-td center is-title>变更类型：</hc-info-table-td>
                                <hc-info-table-td width="120px">一般变更</hc-info-table-td>
                                <hc-info-table-td center is-title>延长工期：</hc-info-table-td>
                                <hc-info-table-td width="120px">-</hc-info-table-td>
                                <hc-info-table-td center is-title>变更发起单位：</hc-info-table-td>
                                <hc-info-table-td width="120px">-</hc-info-table-td>
                            </tr>
                            <tr>
                                <hc-info-table-td center is-title>业务日期：</hc-info-table-td>
                                <hc-info-table-td width="auto">-</hc-info-table-td>
                                <hc-info-table-td center is-title>实际变更桩号：</hc-info-table-td>
                                <hc-info-table-td width="auto" colspan="3">-</hc-info-table-td>
                            </tr>
                            <tr>
                                <hc-info-table-td center is-title>变更原因：</hc-info-table-td>
                                <hc-info-table-td width="auto" colspan="5">-</hc-info-table-td>
                            </tr>
                        </hc-info-table>
                    </hc-card-item>
                    <hc-card-item class="mt-3" title="变更申请部位">
                        <hc-table :column="tableColumn1" :datas="tableData1" />
                    </hc-card-item>
                    <hc-card-item class="mt-3" title="变更申请清单">
                        <div class="hc-table-ref-box no-border">
                            <el-table class="w-full" :data="tableData" row-key="id" height="100%" highlight-current-row border>
                                <el-table-column type="index" label="序号" />
                                <el-table-column prop="key1" label="清单编号" />
                                <el-table-column prop="key2" label="清单名称" />
                                <el-table-column prop="key3" label="单价" />
                                <el-table-column label="数量" align="center">
                                    <el-table-column prop="key5" label="变更前" />
                                    <el-table-column prop="key6" label="变更增减" />
                                    <el-table-column prop="key7" label="变更后" />
                                </el-table-column>
                                <el-table-column label="金额" align="center">
                                    <el-table-column prop="key8" label="变更前" />
                                    <el-table-column prop="key9" label="变更增减" />
                                    <el-table-column prop="key10" label="变更后" />
                                </el-table-column>
                            </el-table>
                        </div>
                    </hc-card-item>
                </el-scrollbar>
            </div>
        </div>
        <!-- 新增修改的弹窗 -->
        <addModal v-model="isAddShow" />
    </hc-card>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import addModal from './components/pre/addModal.vue'

defineOptions({
    name: 'AlterAdminPre',
})

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

//类型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 setSplitRef = () => {
    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
    nextTick(() => {
        window.$split(['#hc_table_card', '#hc_info_card'], {
            sizes: [60, 40],
            snapOffset: 0,
            minSize: [100, 400],
        })
    })
}

//搜索表单
const searchForm = ref({
    key1: null, current: 1, size: 10, total: 0,
})

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

//表格数据
const tableLoading = ref(false)
const tableColumn = ref([
    { key: 'key1', name: '预变更编号' },
    { key: 'key2', name: '预变更名称' },
    { key: 'key3', name: '预变更金额' },
    { key: 'key4', name: '变更类型' },
    { key: 'key5', name: '业务日期' },
    { key: 'action', name: '操作', width: 94 },
])
const tableData = ref([
    { key1: '1111' },
])

const rowEditClick = () => {

}

//申请部位
const tableColumn1 = ref([
    { key: 'key1', name: '工程名称' },
    { key: 'key2', name: '节点路径' },
    { key: 'key3', name: '合同图号' },
    { key: 'key4', name: '变更金额(元)' },
    { key: 'key5', name: '是否增补' },
])
const tableData1 = ref([
    { key1: '1111' },
])

//新增修改的弹窗
const isAddShow = ref(false)
const addModalClick = () => {
    isAddShow.value = true
}
</script>