admin-fiveFollowing/src/views/systemManage/rolePermission/addRoleCom.vue

<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="400px"
    @close="closeDialog()"
    @open="open"
  >
    <el-form
      ref="formInfo"
      :model="form"
      class="demo-form-inline"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="角色名称：" prop="roleName">
        <el-input v-model="form.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色权限：" prop="roleKey">
        <el-input v-model="form.roleKey"></el-input>
      </el-form-item>
      <el-form-item label="角色状态：" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio label="0" value="0">正常</el-radio>
          <el-radio label="1" value="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="角色排序:" prop="roleSort">
        <el-input-number
          v-model="form.roleSort"
          controls-position="right"
          :min="0"
          :max="255"
        ></el-input-number>
      </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 } from 'vue'
import * as api from '@/api/systemManage/rolePermission.js'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'AddRoleCom',
  emits: ['closeDialog'],
  props: {
    flag: Boolean,
    dialogTitle: String,
    itemInfo: Object,
  },
  setup(props, context) {
    context

    const dialogVisible = ref(false)
    const formInfo = ref(null)

    const form = ref([])

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

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

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

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

    // 保存-修改操作
    const submitForm = () => {
      console.log(formInfo)
      formInfo.value.validate((valid) => {
        if (valid) {
          // 走保存请求
          if (props.dialogTitle === '角色新增') {
            api.roleAdd(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '新增成功',
                  type: 'success',
                })
                closeDialog()


                //角色新增成功后，提交全选按钮权限给后台




              } else {
                ElMessage.error(requset.msg)
              }
            })
          } else {
              // alert('修改')
            api.roleUpdate(form.value).then((requset) => {
            
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '修改成功',
                  type: 'success',
                })
                closeDialog()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

    return {
      closeDialog,
      dialogVisible,
      roleValid,
      formInfo,
      form,
      open,
      submitForm,
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
        ],
        roleKey: [
          { required: true, message: '请输入角色权限', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请选择角色状态', trigger: 'change' },
        ],
      },
    }
  },
})
</script>
 
<style scoped lang="scss">
</style>