shuiwu/src/system/moduleNormal/userManage/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="12">
            <a-form-item label="选择角色">
              <a-select
                ref="select"
                mode="multiple"
                v-model:value="form.roleids"
                placeholder="选择角色"
                style="width: 100%"
              >
                <a-select-option v-for="item in rolesOptions" :key="item.roleid" :value="item.roleid">{{item.rolename}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="账号" name="accountno">
              <a-input v-model:value="form.accountno" placeholder="账号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="手机号码" name="phonenumber" :rules="[{ required: true, message: '请输入手机号码'},{ validator: validatePhoneNumber, message: '请输入有效的手机号码' }]">
              <a-input v-model:value="form.phonenumber" placeholder="输入手机号码" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="用户名称" name="name" :rules="[{ required: true, message: '请输入用户名称' }]">
              <a-input v-model:value="form.name" placeholder="输入用户名称" />
            </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({
  userid: 0,
  remarks:''
})
const validatePhoneNumber = async (rule, value)=> {
  const phoneNumberPattern = /^1\d{10}$/;
  if (phoneNumberPattern.test(value)) {
    return Promise.resolve();
  }
  return Promise.reject('请输入有效的手机号码');
}
const showDrawer = ()=>{
  form.value = Object.assign({},form.value,props.data)
  form.value.roleids = props.data.userrole.map(e=>e.roleid)
  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:20230608104302,
      "content": form.value
    })
    utils.message(res,'编辑成功',()=>{
      onClose()
      emit('onSuccess')
    })
  } catch (errorInfo) {
    console.log('Failed:', errorInfo);
  }
}
const rolesOptions = ref([])
const roles = async ()=>{
  const res = await Api.optionstype('role')
  rolesOptions.value = res.data
}
</script>
<style>
</style>