更新

Your Name

2022-07-27 b78c039181ac316964a0f0de077170de178d90ab

 src/views/system/user/component/userDialog.vue

@@ -1,221 +1,213 @@
<template>
   <div class="system-add-user-container">
      <el-dialog :title="title" v-model="isShowUserDialog" width="769px">
         <el-form :model="userForm" size="default" label-width="90px">
            <el-row :gutter="35">
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="账户名称">
                     <el-input v-model="userForm.username" placeholder="请输入账户名称" clearable></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="用户昵称">
                     <el-input v-model="userForm.realName" placeholder="请输入用户昵称" clearable></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="关联角色">
                     <el-select v-model="userForm.roleId" placeholder="请选择" clearable class="w100">
                        <el-option
                           v-for="item in roleData"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id"
                        >
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="部门">
                     <el-cascader
                        :options="departmentData"
                        :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                        placeholder="请选择部门"
                        clearable
                        class="w100"
                        v-model="userForm.depId"
                     >
                     </el-cascader>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="手机号">
                     <el-input v-model="userForm.phone" placeholder="请输入手机号" clearable></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="邮箱">
                     <el-input v-model="userForm.email" placeholder="请输入" clearable></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="性别">
                     <el-select v-model="userForm.sex" placeholder="请选择" clearable class="w100">
                        <el-option
                        v-for="item in sexList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                        >
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="账户密码">
                     <el-input v-model="userForm.password" placeholder="请输入" type="password" clearable></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="账户过期">
                     <el-date-picker v-model="userForm.expireTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
                  </el-form-item>
               </el-col>
<!--               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
<!--                  <el-form-item label="用户状态">-->
<!--                     <el-switch v-model="userForm.status" inline-prompt active-value = 1 inactive-value= 0 active-text="启" inactive-text="禁"></el-switch>-->
<!--                  </el-form-item>-->
<!--               </el-col>-->
            </el-row>
         </el-form>
         <template #footer>
            <span class="dialog-footer">
               <el-button @click="isShowUserDialog = !isShowUserDialog" size="default">取 消</el-button>
               <el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
            </span>
         </template>
      </el-dialog>
   </div>
    <div class="system-add-user-container">
        <el-dialog :title="title" v-model="isShowUserDialog" width="769px">
            <el-form :model="userForm" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="账户名称">
                            <el-input v-model="userForm.username" placeholder="请输入账户名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="用户昵称">
                            <el-input v-model="userForm.realName" placeholder="请输入用户昵称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="关联角色">
                            <el-select v-model="userForm.roleId" placeholder="请选择" clearable class="w100">
                                <el-option v-for="item in roleData" :key="item.roleId" :label="item.roleName" :value="item.roleId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="部门">
                            <el-cascader
                                :options="departmentData"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                placeholder="请选择部门"
                                clearable
                                class="w100"
                                v-model="userForm.depId"
                            >
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="手机号">
                            <el-input v-model="userForm.phone" placeholder="请输入手机号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="身份证">
                            <el-input v-model="userForm.identify" placeholder="请输入身份证" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="邮箱">
                            <el-input v-model="userForm.email" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="性别">
                            <el-select v-model="userForm.gender" placeholder="请选择" clearable class="w100">
                                <el-option v-for="item in sexList" :key="item.id" :value="item.id" :label="item.name"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="账户密码">
                            <el-input v-model="userForm.password" placeholder="请输入" type="password" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="账户过期">
                            <el-date-picker v-model="userForm.expireTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <!--               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
                    <!--                  <el-form-item label="用户状态">-->
                    <!--                     <el-switch v-model="userForm.status" inline-prompt active-value = 1 inactive-value= 0 active-text="启" inactive-text="禁"></el-switch>-->
                    <!--                  </el-form-item>-->
                    <!--               </el-col>-->
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowUserDialog = !isShowUserDialog" size="default">取 消</el-button>
                    <el-button type="primary" v-throttle @click="onSubmit" size="default">新 增</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {userApi} from "/@/api/user";
import { userApi } from '/@/api/user';

// 定义接口来定义对象的类型
interface DeptData {
}
interface roleData{

}
interface sexData{

}
interface DeptData {}
interface roleData {}
interface sexData {}
interface UserState {
   title:string,
   isShowUserDialog: boolean;
   userForm: {
      username: string;
      realName: string;
      roleId: number | null;
      depId: number | null;
      phone: string;
      email: string;
      sex: number | null;
      password: string;
      expireTime: string;
      status: number;
   };
   departmentData: Array<DeptData>;
   roleData: Array<roleData>;
   sexList:Array<sexData>,
    title: string;
    isShowUserDialog: boolean;
    userForm: {
        username: string;
        realName: string;
        roleId: number | null;
        depId: number | null;
        phone: string;
        email: string;
        gender: number | null;
        password: string;
        expireTime: string;
        status: number;
        identify: string;
    };
    departmentData: Array<DeptData>;
    roleData: Array<roleData>;
    sexList: Array<sexData>;
}

export default defineComponent({
   name: 'user',
   setup(props,context) {
      const state = reactive<UserState>({
         title:'',
         isShowUserDialog: false,
         userForm: {
            username: '', // 账户名称
            realName: '', // 用户昵称
            roleId: null, // 关联角色
            depId:null, // 部门
            phone: '', // 手机号
            email: '', // 邮箱
            sex: null, // 性别
            password: '', // 账户密码
            expireTime: '', // 账户过期
            status: 1, // 用户状态
         },
         departmentData: [], // 部门数据
         roleData:[],//角色数据
         sexList:[{id:1,name:'男'},{id:0,name:'女'}]
      });
      // 打开弹窗
      const openDialog = (type: string,value: any,departmentList:[], roleList: []) => {
         state.isShowUserDialog = true;
         state.departmentData = departmentList;
         state.roleData = roleList;
         if(type === '新增'){
            state.title = '新增用户'
            state.userForm = {
               username: '',
               realName: '',
               roleId: null,
               depId: null,
               phone: '',
               email: '',
               sex: null,
               password: '',
               expireTime: '',
               status: 1,
            }
         }else{
            state.title = '修改用户'
            state.userForm = JSON.parse(JSON.stringify(value))
         }
      };
    name: 'user',
    setup(props, context) {
        const state = reactive<UserState>({
            title: '',
            isShowUserDialog: false,
            userForm: {
                username: '', // 账户名称
                realName: '', // 用户昵称
                roleId: null, // 关联角色
                depId: null, // 部门
                phone: '', // 手机号
                email: '', // 邮箱
                identify: '',
                gender: null, // 性别
                password: '', // 账户密码
                expireTime: '', // 账户过期
                status: 1 // 用户状态
            },
            departmentData: [], // 部门数据
            roleData: [], //角色数据
            sexList: [
                { id: 1, name: '男' },
                { id: 0, name: '女' }
            ]
        });
        // 打开弹窗
        const openDialog = (type: string, value: any, departmentList: [], roleList: []) => {
            state.isShowUserDialog = true;
            state.departmentData = departmentList;
            state.roleData = roleList;
            if (type === '新增') {
                state.title = '新增用户';
                state.userForm = {
                    username: '',
                    realName: '',
                    roleId: null,
                    depId: null,
                    phone: '',
                    email: '',
                    identify: '',
                    gender: null,
                    password: '',
                    expireTime: '',
                    status: 1
                };
            } else {
                state.title = '修改用户';
                state.userForm = JSON.parse(JSON.stringify(value));
            }
        };

        // 新增修改
        const onSubmit = async () => {
            if (state.title === '新增用户') {
                let res = await userApi().addUser(state.userForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '用户新增成功',
                        duration: 2000
                    });
                    state.isShowUserDialog = false;
                    context.emit('getUserList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            } else {
                let res = await userApi().modUser(state.userForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '用户修改成功',
                        duration: 2000
                    });
                    state.isShowUserDialog = false;
                    context.emit('getUserList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }
        };

      // 新增修改
      const onSubmit = async () => {
         if(state.title === '新增用户'){
            let res = await userApi().addUser(state.userForm)
            if(res.data.code === '200'){
               ElMessage({
                  type:'success',
                  message:'用户新增成功',
                  duration:2000
               })
               state.isShowUserDialog = false;
               context.emit('getUserList')
            }else{
               ElMessage({
                  type:'warning',
                  message:res.data.msg
               })
            }
         }else{
            let res = await userApi().modUser(state.userForm)
            if(res.data.code === '200'){
               ElMessage({
                  type:'success',
                  message:'用户修改成功',
                  duration:2000
               })
               state.isShowUserDialog = false;
               context.emit('getUserList')
            }else{
               ElMessage({
                  type:'warning',
                  message:res.data.msg
               })
            }
         }
      };

      // 页面加载时
      onMounted(() => {
      });
      return {
         openDialog,
         onSubmit,
         ...toRefs(state),
      };
   },
        // 页面加载时
        onMounted(() => {});
        return {
            openDialog,
            onSubmit,
            ...toRefs(state)
        };
    }
});
</script>