scd_tools_ui/src/pages/mission/modalComp/FlashCreate.vue

<template>
    <div>
        <el-dialog v-model="dialogVisible" title="选择模型" width="30%" @close="sureclose" :close-on-click-modal="false">
            <el-form :model="formData" label-width="120px" :rules="dataRule">
                <el-form-item label="区域名称" prop="areaName">
                    <el-input v-model="formData.areaName" />
                </el-form-item>
                <!-- <el-form-item label="父级区域">
                    <el-select v-model="formData.pids" placeholder="请选择父级区域">
                        <el-option v-for="(item, index) in fatherArea" :label="item.title" :value="item.pid" />
                    </el-select>
                </el-form-item>
                <el-form-item label="区域类型" prop="areaType">
                    <el-input v-model="formData.areaType" />
                </el-form-item> -->
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cleanBox">取消</el-button>
                    <el-button type="primary" @click="sureArr">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, watch, onBeforeUnmount, reactive } from 'vue'
import flashPower from '@/api/flashPower'
export default {
    props: {
        fcModal: {
            type: Boolean,
            required: true
        }
    },
    setup(props, { emit }) {
        let dialogVisible = ref(false)
        let formData = ref({
            pids: "",
            areaType: "",
            areaName: ""
        })
        let fatherArea = ref([])
        let dataRule = reactive({
            areaName: [
                { required: true, message: '请输入区域名称', trigger: 'blur' },
            ],
            areaType: [
                { required: true, message: '请输入区域类型', trigger: 'blur' },
            ],
        })
        function reload() {
            dialogVisible.value = props.fcModal
            flashPower.getAllArea({}).then(res => {
                fatherArea.value = res.data
                console.log(fatherArea.value);
            })
        }
        function modalClose() {
            dialogVisible.value = false
            emit("fcBack", dialogVisible.value)
        }
        function modalTrue() {
            flashPower.createFlash({
                // pid: formData.value.pids - 0,
                // area_type: formData.value.areaType - 0,
                area_name: formData.value.areaName,
            }).then(res => {
                console.log(res, 'tianjia');
            })
            dialogVisible.value = false
            emit("fcBack", dialogVisible.value)
        }
        onMounted(() => {
            reload()
        })
        return {
            dialogVisible,//模态框状态
            sureclose: modalClose,
            cleanBox: modalClose,
            sureArr: modalTrue,
            reload,//初始化页面
            formData,//表单数据
            fatherArea,//父级区域
            dataRule,
        }
    }
}
</script>

<style scoped></style>