123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <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>
|