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

<template>
  <div class="siteManage-main groupInfo p20">
    <el-form :model="form" :rules="rules" ref="formInfo" label-width="100px">
      <div class="el-form-item blockTitle">分组信息</div>
      <div></div>
      <el-form-item label="分组名称" prop="groupingName" label-width="130px">
        <el-input v-model="form.groupingName" v-if="label == '所有站点'" disabled></el-input>
        <el-input v-model="form.groupingName" v-else></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('formInfo')" v-if="label != '所有站点'">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { ElMessage, ElNotification } from 'element-plus'
import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, watchEffect } from 'vue'
/*----------------------------------接口引入-----------------------------------*/
import * as api from '@/api/siteManage/index'
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const props = defineProps({
  groupingId: Number,
  groupingName: String,
}) //数据双向绑定
const emit = defineEmits(['handleSelect']);
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const formInfo = ref(null)
const state = reactive({
  form: {},
  rules: {
    groupingName: [
      { required: true, message: '请输入分组名称', trigger: 'blur' },
    ],
  },
})
const { form, rules } = toRefs(state)

// 保存-修改操作
function submitForm() {
  proxy.$refs['formInfo'].validate((valid) => {
    if (valid) {
      state.form.groupingId = props.groupingId

      api
        .siteGroupingUpdate({
          id: props.groupingId,
          groupingName: state.form.groupingName,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            ElMessage.success({
              message: '修改成功',
              type: 'success',
            })

            emit('handleSelect')
          } else {
            ElMessage.error(requset.msg)
          }
        })
    } else {
      console.log('error submit!!')
      return false
    }
  })
}


//监听变化
watch(
  () => props.groupingName,
  (newVal) => {
    form.value.groupingName = newVal
  }
)
onMounted(() => {
  form.value.groupingName = props.groupingName
})
</script>
<style scoped lang="scss"></style>