更新

Your Name

2022-07-27 b78c039181ac316964a0f0de077170de178d90ab

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

@@ -16,13 +16,7 @@
               <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-option v-for="item in roleData" :key="item.roleId" :label="item.roleName" :value="item.roleId"> </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
@@ -30,7 +24,7 @@
                  <el-form-item label="部门">
                     <el-cascader
                        :options="departmentData"
                        :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                        placeholder="请选择部门"
                        clearable
                        class="w100"
@@ -45,20 +39,19 @@
                  </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.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 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>
@@ -82,7 +75,7 @@
         <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>
                    <el-button type="primary" v-throttle @click="onSubmit" size="default">新 增</el-button>
            </span>
         </template>
      </el-dialog>
@@ -92,19 +85,14 @@
<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,
    title: string;
   isShowUserDialog: boolean;
   userForm: {
      username: string;
@@ -113,14 +101,15 @@
      depId: number | null;
      phone: string;
      email: string;
      sex: number | null;
        gender: number | null;
      password: string;
      expireTime: string;
      status: number;
        identify: string;
   };
   departmentData: Array<DeptData>;
   roleData: Array<roleData>;
   sexList:Array<sexData>,
    sexList: Array<sexData>;
}

export default defineComponent({
@@ -136,14 +125,18 @@
            depId:null, // 部门
            phone: '', // 手机号
            email: '', // 邮箱
            sex: null, // 性别
                identify: '',
                gender: null, // 性别
            password: '', // 账户密码
            expireTime: '', // 账户过期
            status: 1, // 用户状态
                status: 1 // 用户状态
         },
         departmentData: [], // 部门数据
         roleData:[],//角色数据
         sexList:[{id:1,name:'男'},{id:0,name:'女'}]
            sexList: [
                { id: 1, name: '男' },
                { id: 0, name: '女' }
            ]
      });
      // 打开弹窗
      const openDialog = (type: string,value: any,departmentList:[], roleList: []) => {
@@ -151,7 +144,7 @@
         state.departmentData = departmentList;
         state.roleData = roleList;
         if(type === '新增'){
            state.title = '新增用户'
                state.title = '新增用户';
            state.userForm = {
               username: '',
               realName: '',
@@ -159,63 +152,62 @@
               depId: null,
               phone: '',
               email: '',
               sex: null,
                    identify: '',
                    gender: null,
               password: '',
               expireTime: '',
               status: 1,
            }
                    status: 1
                };
         }else{
            state.title = '修改用户'
            state.userForm = JSON.parse(JSON.stringify(value))
                state.title = '修改用户';
                state.userForm = JSON.parse(JSON.stringify(value));
         }
      };


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

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