measure/src/views/debit-pay/admin/components/apply/addModal.vue

<template>
    <hc-new-dialog is-table widths="95%" :show="isShow" title="中间收方新增" @save="addModalSave" @close="addModalClose">
        <div class="relative h-full flex">
            <div :id="`hc_tree_card_${uuid}`" class="hc_tree_card_border relative">
                <hc-body scrollbar padding="0px">
                    <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
                </hc-body>
            </div>
            <div :id="`hc_table_card_${uuid}`" class="relative flex-1">
                <hc-body scrollbar padding="0px">
                    <!-- 基础表单 -->
                    <hc-card-item title="基础表单">
                        <el-form ref="baseFormRef" :model="baseForm" :rules="baseFormRules" label-position="left" label-width="auto">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="收方期：">
                                        <el-input v-model="baseForm.key1" disabled />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="收方单编号：">
                                        <el-input v-model="baseForm.key2" disabled />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="收方日期：">
                                        <el-date-picker v-model="baseForm.key3" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" disabled />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="16">
                                    <el-form-item label="工程划分：">
                                        <el-input v-model="baseForm.key4" disabled />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="部位名称：">
                                        <el-input v-model="baseForm.key5" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="收方金额：">
                                        <el-input v-model="baseForm.key6" disabled />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="交工证书编号：">
                                        <el-input v-model="baseForm.key7" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="排序号：">
                                        <el-input v-model="baseForm.key8" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="草图文件：">
                                        <hc-form-upload v-model="baseForm.key9" @item="uploadFileItem" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="计算式：">
                                        <el-input v-model="baseForm.key10" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </hc-card-item>
                    <!-- 收方清单列表 -->
                    <hc-card-item class="mt-3">
                        <template #header>
                            <span class="mr-3">收方清单列表</span>
                            <span class="text-orange font-400">温馨提示：超计,累计收方量> 变更后数量，分解清单超计整行红色</span>
                        </template>
                        <template #extra>
                            <el-button type="primary" text @click="addBillBaseModalClick">
                                <HcIcon name="add" />
                                <span>添加</span>
                            </el-button>
                        </template>
                        <hc-table is-new :index-style="{ width: 60 }" :column="addTableColumn" :datas="addTableData">
                            <template #key3="{ row }">
                                <hc-table-input v-model="row.key3" disabled />
                            </template>
                            <template #key5="{ row }">
                                <hc-table-input v-model="row.key5" disabled />
                            </template>
                            <template #key6="{ row }">
                                <hc-table-input v-model="row.key6" />
                            </template>
                            <template #key7="{ row }">
                                <hc-table-input v-model="row.key7" />
                            </template>
                            <template #key8="{ row }">
                                <hc-table-input v-model="row.key8" />
                            </template>
                            <template #key9="{ row }">
                                <hc-table-input v-model="row.key9" disabled />
                            </template>
                            <template #key10="{ row }">
                                <hc-table-input v-model="row.key10" disabled />
                            </template>
                            <template #action="{ row }">
                                <el-link type="danger">删除</el-link>
                            </template>
                        </hc-table>
                    </hc-card-item>
                    <!-- 附件列表 -->
                    <hc-card-item class="mt-3" title="附件列表">
                        <template #extra>
                            <span class="text-orange font-400">可上传 图片(png、jpg、jpeg)、Excel(xls、xlsx)、PDF、Word(doc、docx)文件</span>
                        </template>
                        <el-form :model="baseForm" label-position="left" label-width="auto">
                            <el-form-item label="上传附件">
                                <hc-form-upload v-model="baseForm.key11" :options="{ type: 'list', num: 99 }" @item="uploadFileItem" />
                            </el-form-item>
                        </el-form>
                    </hc-card-item>
                </hc-body>
            </div>
        </div>
    </hc-new-dialog>

    <!-- 添加分解清单 -->
    <HcBillBaseModal v-model="addBillBaseModalShow" />
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import { toPdfPage } from '~uti/btn-auth'
import HcBillBaseModal from '../addBillBaseModal.vue'
import { getObjValue, getRandom, isNullES } from 'js-fast-way'

const props = defineProps({
    ids: {
        type: [String, Number],
        default: '',
    },
})

//事件
const emit = defineEmits(['finish', 'close'])
const uuid = getRandom(4)

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//监听
watch(() => [
    props.ids,
], ([ids]) => {
    console.log('ids', ids)
}, { immediate: true })

//监听
watch(isShow, (val) => {
    if (val) {
        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],
        })
    })
}

//基础表单
const baseFormRef = ref(null)
const baseForm = ref({})
const baseFormRules = {}

//数据格式
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 addTableColumn = ref([
    { key: 'key1', name: '清单编号', width: '120' },
    { key: 'key2', name: '清单名称', minWidth: '280' },
    { key: 'key3', name: '单价(元)', width: '100' },
    { key: 'key4', name: '分解数量', width: '100' },
    { key: 'key5', name: '变更后数量', width: '100' },
    { key: 'key6', name: '本期计划收方数量', width: '140' },
    { key: 'key7', name: '本期实际收方数量', width: '140' },
    { key: 'key8', name: '含变更数量', width: '100' },
    { key: 'key9', name: '本期收方金额', width: '120' },
    { key: 'key10', name: '累计收方量', width: '100' },
    { key: 'action', name: '操作', fixed: 'right', width: 80, align: 'center' },
])
const addTableData = ref([
    { key1: '101-1-a', key2: '按合同条款规定，提供建筑工程一切险' },
])

//添加分解单
const addBillBaseModalShow = ref(false)
const addBillBaseModalClick = () => {
    addBillBaseModalShow.value = true
}

//文件被点击
const uploadFileItem = ({ file }) => {
    const { url } = getObjValue(file)
    if (isNullES(url)) return
    toPdfPage(url)
}

const addModalSave = () => {
    emit('finish')
    addModalClose()
}

//关闭弹窗
const addModalClose = () => {
    isShow.value = false
    emit('close')
}
</script>

<style scoped lang="scss">

</style>