pqs-9100_client/frontend/src/views/authority/role/components/rolePopup.vue

<template>
    <!-- 基础信息弹出框 -->
  <el-dialog :model-value="dialogVisible" :title="dialogTitle" v-bind="dialogSmall" @close="close" >
    <div>

        <el-form :model="formContent" 
                  ref='dialogFormRef'
                  :rules='rules'
                  >
        <el-form-item label="名称" prop='name' :label-width="100" >
          <el-input v-model="formContent.name" placeholder="请输入名称" autocomplete="off" :disabled="rootIsEdit" maxlength="32" show-word-limit/>
        </el-form-item>

        <el-form-item label="编码" prop='code' :label-width="100">
          <el-input v-model="formContent.code" placeholder="请输入编码" autocomplete="off" :disabled="rootIsEdit" maxlength="32" show-word-limit/>
        </el-form-item>
        <el-form-item label='类型'  prop='type' :label-width="100">
          <el-select v-model="formContent.type"  clearable placeholder="请选择类型" :disabled="rootIsEdit">
            <el-option label="普通角色" :value="2"></el-option>
            <el-option label="管理员角色" :value="1"></el-option>     
            <el-option label="超级管理员" :value="0" v-if="rootIsShow"></el-option>                              
          </el-select>                           
        </el-form-item>     
        <el-form-item label="描述" prop='remark' :label-width="100">
          <el-input v-model="formContent.remark" :rows="2" type="textarea" placeholder="请输入备注" autocomplete="off" :disabled="rootIsEdit"/>
        </el-form-item>
      </el-form>
      </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="save()" :disabled="rootIsEdit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  </template>
  
  <script lang="ts" setup>
  import{  ElMessage, type FormInstance,type FormItemRule } from 'element-plus'
  import type { ProTableInstance } from '@/components/ProTable/interface'
  import { ref,computed, Ref  } from 'vue'
  import { type Role } from '@/api/user/interface/role'
  import {dialogSmall} from '@/utils/elementBind'
  import { useDictStore } from '@/stores/modules/dict'
  import {addRole,editRole} from '@/api/user/role'

  const dictStore = useDictStore()
 // 定义弹出组件元信息
 const dialogFormRef = ref()
 //超级管理员有3个下拉框，其他两个
  const rootIsShow = ref(false)
  //超级管理员下拉框不可编辑
  const rootIsEdit = ref(false)
 function useMetaInfo() {
    const dialogVisible = ref(false)
    const titleType = ref('add')
    const formContent = ref<Role.RoleBO>({
      id: '',    //角色类型ID
      name: '',   //角色类型名称
      code: '',  //角色代码
      type: 2, //角色类型
      remark:'',  //角色描述
      state:1,
    })
    return { dialogVisible, titleType, formContent }
  }
  
  const { dialogVisible, titleType, formContent } = useMetaInfo()


// 清空formContent
const resetFormContent = () => {
    formContent.value = {
      id: '',    //角色类型ID
      name: '',   //角色类型名称
      code: '',  //角色代码
      type: 2, //角色类型
      remark:'',  //角色描述
      state:1,
    }
  }
  
  let dialogTitle = computed(() => {
    return titleType.value === 'add' ? '新增角色' : '编辑角色'
  })




  //定义规则
  const formRuleRef = ref<FormInstance>()
  //定义校验规则
  const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
    name: [{ required: true, message: '名称必填！', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5]{1,20}$/, message: '名称为长度1-20的中文', trigger: 'blur' }],
    code: [{ required: true, message: '编码必填！', trigger: 'blur' }],
    type: { required: true, message: '类型必选！', trigger: 'change' },
  })

  
// 关闭弹窗
const close = () => {
    dialogVisible.value = false
    // 清空dialogForm中的值
    resetFormContent()
    // 重置表单
    dialogFormRef.value?.resetFields()
  }
  
  // 保存数据
  const save = () => {
    try {
        dialogFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
          if (formContent.value.id) {
              await editRole(formContent.value);
            } else {
               await addRole(formContent.value);
          }
          ElMessage.success({ message: `${dialogTitle.value}成功！` })
          close()
          // 刷新表格
          await props.refreshTable!()
        }
      })
    } catch (err) {
      //error('验证过程中出现错误', err)
    }
  }
  
  // 打开弹窗，可能是新增，也可能是编辑
  const open = async (sign: string, data: Role.RoleBO) => {
    // 重置表单
    dialogFormRef.value?.resetFields()
    titleType.value = sign
    dialogVisible.value = true

    if(data.type == 0){
      rootIsShow.value = true
      rootIsEdit.value = true
    }else{
      rootIsShow.value = false
      rootIsEdit.value = false
    }
    
    if (data.id) {
      formContent.value = { ...data }
    } else {
      resetFormContent()
    }
  }
  
  // 对外映射
  defineExpose({ open })
  const props = defineProps<{
    refreshTable: (() => Promise<void>) | undefined;
  }>()
  
  </script>