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

<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    @close="closeDialog2('默认关闭')"
    @open="open"
    width="400px"
  >
    <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()">保存</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'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'AddSiteCom',
  emits: ['closeDialog','changeFather'],
  props: {
    flag: Boolean,
    dialogTitle: String,
    itemInfo: Object,
    treeLevel: Number,
    groupingId: Number,
  },
  setup(props, context) {
    const store = useStore()
    context

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

    const listData = ref([])

    // open(): Dialog弹窗打开之前做的事
    const open = () => {

      //  store.commit('publicSiteList')  
      //  listData.value=store.state.siteList

      api.list({}).then((requset) => {
        if (requset.status === 'SUCCESS') {
          listData.value = requset.data
        } else {
          ElMessage.error(requset.msg)
        }
      })


      store.state.basicInfoConst = 1
      form.value = props.itemInfo.value;
    }

    // 关闭弹框
    const closeDialog2 = (res) => {
      context.emit('closeDialog', res)
      store.state.basicInfoConst++
    }

    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 = () => {
      // store.state.basicInfoConst = 1
      console.log('form.region')
      console.log(form.value.region)
      console.log('form.siteName')
      console.log(form.value.siteName)
      formInfo.value.validate((valid) => {
        if (valid) {
          store.state.basicInfoSiteName = form.value.siteName
          context.emit(
            'changeFather',
            form.value.siteName,
            form.value.region ? form.value.region : '',
            props.groupingId
          )
          closeDialog2('')
        } 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>