measure/src/views/periods/material/components/order/dataModal.vue

<template>
    <hc-dialog is-to-body is-table widths="1200px" :show="isShow" title="材料计量单新增" @save="modalSave" @close="modalClose">
        <div class="relative h-full flex">
            <div id="hc_modal_tree">
                <hc-card-item scrollbar>
                    <hc-lazy-tree :h-props="treeProps" @load="treeLoadNode" />
                </hc-card-item>
            </div>
            <div id="hc_modal_form">
                <hc-card-item>
                    <el-form ref="baseFormRef" :model="baseForm" :rules="baseFormRules" label-position="top" label-width="auto">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="材料到场编号：">
                                    <el-input v-model="baseForm.key1" />
                                </el-form-item>
                            </el-col>
                            <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.key1" disabled />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="单价：">
                                    <el-input v-model="baseForm.key1" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="数量：">
                                    <el-input v-model="baseForm.key1" />
                                </el-form-item>
                            </el-col>
                            <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-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="8">
                                <el-form-item label="材料来源：">
                                    <el-input v-model="baseForm.key1" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="材料是否符合要求：">
                                    <el-select v-model="baseForm.key2" block>
                                        <el-option label="是" value="1" />
                                        <el-option label="否" value="2" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="备料堆放地点：">
                                    <el-input v-model="baseForm.key1" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="存储情况：">
                                    <el-input v-model="baseForm.key1" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="存储方法是否符合要求：">
                                    <el-select v-model="baseForm.key2" block>
                                        <el-option label="是" value="1" />
                                        <el-option label="否" value="2" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="合格证号：">
                                    <el-input v-model="baseForm.key1" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item label="备注：">
                                    <el-input v-model="baseForm.key1" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <!-- 附件列表 -->
                    <div class="hc-flex my-5">
                        <div class="flex-1 text-[16px] text-blue">附件列表</div>
                        <div class="font-400 text-orange">可上传 图片(png、jpg、jpeg)、Excel(xls、xlsx)、PDF、Word(doc、docx)文件</div>
                    </div>
                    <el-form :model="baseForm" label-position="top">
                        <el-form-item label="">
                            <hc-form-upload type="list" :src="baseForm.key11" />
                        </el-form-item>
                    </el-form>
                </hc-card-item>
            </div>
        </div>
    </hc-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'

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

//事件
const emit = defineEmits(['close'])

//双向绑定
// 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) {
        detailsModalShow()
    }
})

const detailsModalShow = () => {
    nextTick(() => {
        window.$split(['#hc_modal_tree', '#hc_modal_form'], {
            sizes: [30, 70],
            snapOffset: 0,
            minSize: [170, 500],
        })
    })
}

//数据格式
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 baseFormRef = ref(null)
const baseForm = ref({})
const baseFormRules = {}

const modalSave = () => {
    modalClose()
}

const modalClose = () => {
    isShow.value = false
    emit('close')
}
</script>

<style scoped lang="scss">

</style>