admin-fiveFollowing/src/views/siteManage/addSiteCom.vue

<template>
    <el-dialog
      :title="dialogTitle"
       v-model="dialogVisible"
     
      @close="closeDialog2()"
         @open="open"
          width="500px"
    >
      <el-form
        ref="formInfo"
        :model="form"
        class="demo-form-inline"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="站点名称：" prop="siteName">
          <el-input v-model="form.siteName"></el-input>
        </el-form-item>
         <!-- <el-form-item label="站点编号：" prop="siteName">
          <el-input v-model="form.siteName"></el-input>
        </el-form-item> -->
         <el-form-item label="选择模板：" prop="region">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option v-for="(item,index) in listData" :key="index" :label="item.siteName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
      
        <div style="text-align: right">
          <el-button type="primary" @click="submitForm('formInfo')"
            >保存</el-button
          >
        </div>
      </el-form>
    </el-dialog>
</template>
<script>
import { defineComponent, ref, watchEffect,onMounted } from 'vue'

import * as api from '@/api/siteManage/index'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'AddSiteCom',
  emits: ['closeDialog2'],
  props: {
    flag: Boolean,
    dialogTitle: String,
    itemInfo: Object,
    treeLevel:Number,
    groupingId:Number
  },
  setup(props, context) {
    context

    const dialogVisible = ref(false)
    const formInfo = ref(null)
    const form = ref([])

    const listData=ref([])

    
    // open(): Dialog弹窗打开之前做的事
    const open = () => {
      form.value = props.itemInfo.value

    }

    // 关闭弹框
    const closeDialog2 = () => {
      context.emit('closeDialog2')
      //  context.emit('treeLevel', 3)
      // dialogVisible.value = false
    }

    watchEffect((fn, options) => {
      fn, options
      dialogVisible.value = props.flag
    })

    const roleValid = (rule, value, callback) => {
      rule
      if (value.length === 0) {
        callback(new Error('角色不能为空'))
      } else {
        callback()
      }
    }

    // 保存-修改操作
    const submitForm = () => {
    console.log('form.region')
    console.log(form.value.region)
    console.log('form.siteName')
    console.log(form.value.siteName)
      formInfo.value.validate((valid) => {
        if (valid) {
           context.emit('changeFather', form.value.siteName,form.value.region?form.value.region:'',props.groupingId.value)

        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

    //站点模板下拉列表
    function list() {
      api.list({}).then((requset) => {
        if (requset.status === 'SUCCESS') {
          listData.value=requset.data
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    onMounted(() => {
      list()
    })



    return {
      closeDialog2,
      dialogVisible,
      listData,

      roleValid,
      formInfo,
      form,
      open,
      submitForm,
       rules: {
        siteName: [
          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
          { required: true, message: "请输入站点名称", trigger: "blur" },
          // {
          //   min: 3,
          //   max: 6,
          //   message: "用户名长度在 3 到 6 个字符",
          //   trigger: "blur",
          // },
        ],
      },
    }
  },

})
</script>
 
<style scoped lang="scss">

</style>