usky-ssr/src/components/layout/dialogPersonal.vue

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { useStore  } from 'vuex'
import { ElMessage } from 'element-plus'
import { siteReview } from '@/api/index'
const { proxy } = getCurrentInstance();
const store = useStore()
const platName = ref("智慧安防")//选取类型值
let consultationType:any = ref([])//咨询类型
store.state.menuList.map((item:any)=>{
    if(item.path == "/cases"){
        platName.value = item.children[0].categoryName
        return consultationType.value = item.children
    }
})
//表单数据
let ruleform:any =ref({
    platName: platName.value,
    consultName: '',
    consultPhone: '',
    mail: '',
    company: '',
    consultContent: "",
})
// 规则
let rules:any = ref({
    platName: [{
        required: true,
        message: '请选择类型',
        trigger: 'change'
    }, ],
    consultName: [{
        required: true,
        message: '请输入姓名',
        trigger: 'blur'
    }, ],
    consultPhone: [{
        required: true,
        message: '请输入正确的电话号码',
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        trigger: 'change'
    }],
    mail: [{
        required: false,
        type: "email",
        message: "请输入正确的邮箱地址",
        trigger: 'blur'
    }],
})
function ruleformNull(){
    ruleform.value = {
        platName: platName.value,
        consultName: '',
        consultPhone: '',
        mail: '',
        company: '',
        consultContent: "",
    }
    platName.value = consultationType.value[0]
}
function handle(type:string,e:any){
    if(type == "close"){
        store.commit("setDialogPersonalStatus",false)
        ruleformNull()
    }
    if(type == "submit"){
        platName.value = consultationType.value[0]
        proxy.$refs["form"].validate((valid:any) => {
            if (valid) {
                siteReview(ruleform.value).then((res:any)=>{
                    if(res?.status == "SUCCESS"){
                        ElMessage({
                            message: '提交成功',
                            type: 'success'
                        })
                        handle("close",null)
                        ruleformNull()
                    }else{
                        ElMessage.error(res.msg)
                    }
                })
            }
        })
    }
}
</script>
<template>
    <el-dialog title="项目咨询"   @close="handle('close')" v-model="store.state.dialogPersonalStatus" width="700px" center class="feedBackDialog" :lock-scroll="false">
        <el-form :model="ruleform" :rules="rules" ref="form" label-width="80px" class="demo-ruleform">
            <el-form-item label="" prop="ruleform.platName" style="" class="dialogTypeLabel">
                <el-radio-group v-model="platName">
                    <el-radio-button :label="item.categoryName" :value="item.categoryName" v-for="(item,index) in consultationType" :key="index"></el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="姓名" prop="consultName">
                        <el-input v-model="ruleform.consultName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="consultPhone">
                        <el-input v-model="ruleform.consultPhone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮箱" prop="mail">
                        <el-input v-model="ruleform.mail"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="公司" prop="company">
                        <el-input v-model="ruleform.company"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="需求描述" prop="consultContent">
                <el-input type="textarea" v-model="ruleform.consultContent"></el-input>
            </el-form-item>
        </el-form>
        <!-- <span>需要注意的是内容是默认不居中的</span> -->
        <span slot="footer" class="dialog-footer" style="width:100%;text-align:center">
            <el-button @click="handle('close')">取 消</el-button>
            <el-button type="primary" @click="handle('submit')">提 交</el-button>
        </span>
    </el-dialog>
</template>
<style lang="scss" scoped>
</style>