drag-create-back/src/pages/index/user/list/components/AddUserDialog.vue

<template>
  <DialogForm
    ref="formRef"
    :model="model"
    :rules="rules"
    title="添加用户"
    openButton="添加"
    :dialogProps="{ width: '900px' }"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item :label-width="labelWidth" label="用户名" prop="user_name">
          <el-input
            v-model="model.user_name"
            type="text"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item :label-width="labelWidth" label="登录密码" prop="user_password">
          <el-input
            placeholder="请输入登录密码"
            v-model="model.user_password"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          :label-width="labelWidth"
          label="确认密码"
          prop="check_user_password"
        >
          <el-input
            placeholder="请确认密码"
            v-model="model.check_user_password"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item :label-width="labelWidth" label="角色" prop="roles">
          <el-select
            v-model="model.roles"
            multiple
            placeholder="请选择角色"
            style="width: 100%"
          >
            <el-option
              v-for="item in roles"
              :key="item.role_guid"
              :label="item.role_name"
              :value="item.role_guid"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label-width="labelWidth" label="手机号码" prop="user_phone">
          <el-input
            v-model="model.user_phone"
            type="text"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item :label-width="labelWidth" label="头像" prop="user_img">
          <UploadImage ref='uploadRef' v-model='model.user_img' :data=uoloadData :limit='1' :fileSize='5'
              :drag='true' :isShowTip='false' />
        </el-form-item>
      </el-col>
    </el-row>

    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          :loading="loading"
          @click="handleCommitClick()"
        >
          添加
        </el-button>
        <el-button @click="handleResetClick()"> 重置 </el-button>
      </span>
    </template>
  </DialogForm>

</template>

<script setup>
import { Plus } from '@element-plus/icons-vue';
import { reactive, ref } from 'vue';
import { addUser } from '~/service/user';
import { getRoleList } from '~/service/role';
import { useLoginStore } from '~/store';

const formRef = ref();
const roles = ref([]);
const loading = ref(false);
const labelWidth = 90;
const uoloadData = ref({
  dirName: "User"
})
const store = useLoginStore();

const headers = {
  Accept: 'application/json',
  ...store.headers
};
const props = defineProps({
  done: Function
});

getRoleList({
  scope: 'customer_user',
  role_status: 1
}).then(res => {
  if (res.code == 0) {
    roles.value = res.data;
  }
});

const rules = {
  user_name: [
    {
      required: true,
      message: '请输入姓名'
    }
  ],
  user_password: [
    {
      required: true,
      message: '请输入密码'
    }
  ],
  check_user_password: [
    {
      required: true,
      message: '请输入确认密码'
    },
    {
      validator(rule, value, cb) {
        if (value != model.user_password) {
          cb(new Error('密码不一致'));
        } else {
          cb();
        }
      },
      trigger: 'blur'
    }
  ],
  roles: [
    {
      required: true,
      message: "请选择角色",
    },
  ],
};

const model = reactive({
  user_name: '',
  user_account: '',
  user_password: ''
});

// const handleDepartmentClick = value => {
//   model.department_guid = value.department_guid;
//   model.department_name = value.department_name;
// };

const handleCommitClick = async () => {
  loading.value = true;
  try {
    await formRef.value.validate();
    const { code } = await addUser({
      ...model,
    });
    if (code == 0) {
      props.done();
      formRef.value.close();
    }
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
const handleResetClick = () => {
  formRef.value.resetFields();
};
</script>