shuiwu/src/operation/moduleNormal/roleManage/detail/modules/edit.vue

<template>
  <div>
    <a-button :disabled="disabled" 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="Number(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,defineProps} from 'vue'
import Api from '@/api/api'
import utils from '@/utils/utils'
const emit = defineEmits(['onSuccess'])
const visible = ref(false)
const props = defineProps(['data','disabled'])
const form = ref({
})
const showDrawer = ()=>{
  roles()
  visible.value = true
  form.value = Object.assign({},form.value,props.data)
}
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')
    })
  } 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>