wujingjing
2024-10-25 a34acfc9181792e2c4a6fa113bd9e21780c5224d
src/views/project/yw/systemManage/userMgr/optDlg/OptDlg.vue
@@ -3,48 +3,71 @@
      v-model="dialogIsShow"
      :headerIcon="dialogHeaderIcon"
      :title="dialogTitle"
      width="470"
      width="680"
      @dlgClosed="closeDialog"
      @submit="submitFormValue"
   >
      <el-form :model="dialogFormValue" ref="dialogFormRef" :rules="dialogFormRules" label-width="76">
         <template v-if="!isEditDialog">
            <el-form-item label="用户名" prop="user_name">
               <el-input v-model="dialogFormValue.user_name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" auto-complete="new-password">
               <el-input type="password" v-model="dialogFormValue.password"></el-input>
            </el-form-item>
         </template>
      <el-form :model="dialogFormValue" ref="dialogFormRef" :rules="dialogFormRules" :label-width="isEditDialog ? 54 : 78">
         <el-row :gutter="35">
            <template v-if="!isEditDialog">
               <el-col :span="12" class="mb20">
                  <el-form-item label="用户名" prop="user_name">
                     <el-input v-model="dialogFormValue.user_name"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="12" class="mb20"
                  ><el-form-item label="密码" prop="password" auto-complete="new-password" label-width="54">
                     <el-input type="password" v-model="dialogFormValue.password"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="12" class="mb20"
                  ><el-form-item label="确认密码" prop="confirmPassword" auto-complete="new-password">
                     <el-input type="password" v-model="dialogFormValue.confirmPassword"></el-input>
                  </el-form-item>
               </el-col>
            </template>
            <el-col :span="12" class="mb20"
               ><el-form-item label="电话" prop="phone" label-width="54">
                  <el-input v-model="dialogFormValue.phone"></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
               <el-form-item label="中文名" prop="real_name">
                  <el-input v-model="dialogFormValue.real_name"></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
               <el-form-item label="部门" prop="part" label-width="54">
                  <el-input v-model="dialogFormValue.part"></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20"
               ><el-form-item label="性别" prop="sex">
                  <el-select v-model="dialogFormValue.sex">
                     <el-option v-for="item in Object.keys(userSexMap)" :key="item" :value="item" :label="userSexMap[item]"></el-option>
                  </el-select>
               </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
               <el-form-item label="邮箱" prop="email" label-width="54">
                  <el-input v-model="dialogFormValue.email"></el-input>
               </el-form-item>
            </el-col>
            <template v-if="!isEditDialog"
               ><el-col :span="12" class="mb20"
                  ><el-form-item label="角色" prop="user_roles">
                     <el-select class="w100" placeholder="请选择角色" filterable multiple v-model="dialogFormValue.user_roles">
                        <el-option v-for="(item, index) in roleList" :key="index + ''" :value="item.id" :label="item?.title"></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
            </template>
         <el-form-item label="电话" prop="phone">
            <el-input v-model="dialogFormValue.phone"></el-input>
         </el-form-item>
         <el-form-item label="中文名" prop="real_name">
            <el-input v-model="dialogFormValue.real_name"></el-input>
         </el-form-item>
         <el-form-item label="部门" prop="part">
            <el-input v-model="dialogFormValue.part"></el-input>
         </el-form-item>
         <el-form-item label="性别" prop="sex">
            <el-select v-model="dialogFormValue.sex">
               <el-option v-for="item in Object.keys(userSexMap)" :key="item" :value="item" :label="userSexMap[item]"></el-option>
            </el-select>
         </el-form-item>
         <el-form-item label="邮箱" prop="email">
            <el-input v-model="dialogFormValue.email"></el-input>
         </el-form-item>
         <template v-if="!isEditDialog">
            <el-form-item label="角色" prop="user_roles">
               <el-select class="w100" placeholder="请选择角色" filterable multiple v-model="dialogFormValue.user_roles">
                  <el-option v-for="(item, index) in roleList" :key="index + ''" :value="item.id" :label="item?.title"></el-option>
               </el-select>
            </el-form-item>
         </template>
         <el-form-item label="说明" prop="note">
            <el-input placeholder="请输入说明" v-model="dialogFormValue.note" type="textarea" :rows="3" />
         </el-form-item>
            <el-col :span="24" class="mb20">
               <el-form-item label="说明" prop="note">
                  <el-input placeholder="请输入说明" v-model="dialogFormValue.note" type="textarea" :rows="3" /> </el-form-item
            ></el-col>
         </el-row>
      </el-form>
   </ywDialog>
</template>
@@ -62,6 +85,7 @@
import { userSexMap } from '../types';
import * as userApi from '/@/api/auth/user';
import { formatDate } from '/@/utils/formatTime';
const props = defineProps(['item', 'roleList']);
const emit = defineEmits(['update', 'insert']);
@@ -78,10 +102,19 @@
   type: Boolean,
});
const dialogFormRef = ref<FormInstance>(null);
const validatePassword = (_rule: any, value: any, callback: any) => {
   if (!dialogFormValue.value.password) {
      callback('请先输入新密码!');
   } else if (dialogFormValue.value.password !== dialogFormValue.value.confirmPassword) {
      callback(new Error('两次密码不一致!'));
   } else {
      callback();
   }
};
const dialogFormRules = ref<FormRules>({
   user_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
   confirmPassword: [{ required: true, validator: validatePassword, trigger: 'blur' }],
});
const openOperateDialog = (row?) => {
   if (row) {
@@ -94,6 +127,7 @@
      dialogFormValue.value = {
         user_name: '',
         password: '',
         confirmPassword: '',
         phone: null,
         real_name: null,
         part: null,
@@ -112,6 +146,7 @@
const submitFormValue = async () => {
   const valid = await dialogFormRef.value.validate().catch(() => {});
   if (!valid) return;
   const updateTime = formatDate(new Date());
   if (isEditDialog.value) {
      const res = await userApi.updateUserInfoByPost(dialogFormValue.value);
@@ -124,8 +159,9 @@
      const res = await userApi.addUserInfoByPost(sendForm);
      const newData = {
         id: res.user_id,
         user_id: res.user_id,
         ...dialogFormValue.value,
         create_time: updateTime.slice(0, 10),
      };
      emit('insert', newData);
      // tableData.value.push(newData);