shuiwu/src/system/moduleNormal/roleManage/modules/add.vue

<template>
  <div>
    <a-button type="primary" @click="showDrawer">新建</a-button>
    <a-drawer
      v-model:visible="visible"
      class="custom-class"
      title="创建角色"
      placement="right"
      width="600"
      :closable="false"
      @close="onClose"
    >
      <a-form ref="formRef" :model="form" size="small" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="角色名称" name="rolename" :rules="[{ required: true, message: '请输入角色名称'}]">
              <a-input v-model:value="form.rolename" placeholder="角色名称" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="角色描述" name="remarks" :rules="[{ required: true, message: '请输入角色描述'}]">
              <a-input v-model:value="form.remarks" placeholder="输入角色描述" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="角色类型" name="usertype" :rules="[{ required: true, message: '请输入角色描述'}]">
              <a-select
                ref="select"
                v-model:value="form.usertype"
                placeholder="选择角色类型"
                style="width: 100%"
              >
                <a-select-option v-for="item in userTypeOptions" :key="item.value" :value="item.value">{{item.remarks}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否隐藏敏感信息">
              <a-select
                ref="select"
                v-model:value="form.isshieldinfo"
                placeholder="选择角色"
                style="width: 100%"
              >
                <a-select-option :value="1">是</a-select-option>
                <a-select-option :value="0">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <template #extra>
        <a-space>
          <a-button @click="onClose">关闭</a-button>
          <a-button type="primary" @click="submit">保存</a-button>
        </a-space>
      </template>
    </a-drawer>
  </div>
</template>

<script setup>
import {ref,defineEmits} from 'vue'
import Api from '@/api/api'
import utils from '@/utils/utils'
import { useRouter } from "vue-router";
const router = useRouter()
const emit = defineEmits(['onSuccess'])
const visible = ref(false)
const form = ref({
  roleid:0,
  userid: 0,
  isshieldinfo:0
})
const validatePhoneNumber = async (rule, value)=> {
  const phoneNumberPattern = /^1\d{10}$/;
  if (phoneNumberPattern.test(value)) {
    return Promise.resolve();
  }
  return Promise.reject('请输入有效的手机号码');
}
const showDrawer = ()=>{
  visible.value = true
  roles()
}
const onClose = () => {
  visible.value = false;
  formRef.value.resetFields();
};
const formRef = ref()
const submit = async ()=>{
  try {
    const values = await formRef.value.validateFields();
    const res = await Api.requested({
      id:20230608102302,
      "content": form.value
    })
    utils.message(res,'创建成功',()=>{
      onClose()
      emit('onSuccess')
      router.push({path:'/roleManageDetail',query:{id:res.data.roleid}})
    })
  } catch (errorInfo) {
    console.log('Failed:', errorInfo);
  }
}
const userTypeOptions = ref([])
const roles = async ()=>{
  const res = await Api.optionstype('usertype')
  userTypeOptions.value = res.data
}
</script>
<style>
</style>