马宇豪
2025-03-04 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c
src/views/system/user/index.vue
@@ -12,7 +12,7 @@
                    size="default"
                ></el-cascader>
                <el-input size="default" v-model.trim="userTableData.listQuery.searchParams.username" placeholder="请输入用户名" style="max-width: 180px;margin-left: 10px;margin-right: 10px"> </el-input>
                <el-input size="default" v-model.trim="userTableData.listQuery.searchParams.realName" placeholder="请输入真实姓名" style="max-width: 180px"> </el-input>
<!--                <el-input size="default" v-model.trim="userTableData.listQuery.searchParams.realName" placeholder="请输入真实姓名" style="max-width: 180px"> </el-input>-->
                <el-button size="default" type="primary" class="ml10" @click="initUserTableData">
                    <el-icon>
                        <ele-Search />
@@ -31,22 +31,22 @@
                <el-table-column prop="username" label="用户名" show-overflow-tooltip></el-table-column>
                <el-table-column prop="realName" label="真实姓名" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gender" label="性别" show-overflow-tooltip>
                  <template #default="scope">
                    <el-tag type="success" v-if="scope.row.gender == 1">男</el-tag>
                    <el-tag type="success" v-else-if="scope.row.gender == 0">女</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="positionId" label="职务" show-overflow-tooltip>
                  <template #default="scope">
                    {{ parseNumber(scope.row.positionId) }}
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="职务" show-overflow-tooltip>
                    <template #default="scope">
                        {{ `${userTypeList.find(item => item.id === scope.row.type)?.name}` }}
                        <el-tag type="success" v-if="scope.row.gender == 1">男</el-tag>
                        <el-tag type="success" v-else-if="scope.row.gender == 0">女</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="department.depName" label="部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="positionId" label="职务" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.positions?.map(i=>i.positionName).join('、') }}
                    </template>
                </el-table-column>
<!--                <el-table-column prop="type" label="职务" show-overflow-tooltip>-->
<!--                    <template #default="scope">-->
<!--                        {{ `${userTypeList.find(item => item.id === scope.row.type)?.name}` }}-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column prop="depName" label="部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="用户状态" show-overflow-tooltip>
@@ -56,9 +56,12 @@
                    </template>
                </el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="100">
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenUserDialog('查看', scope.row)">查看</el-button>
                        <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenUserDialog('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="primary" @click="onPwdDialog(scope.row.uid)">修改密码</el-button>
                        <el-button size="small" text type="primary" @click="onCertificate(scope.row)">证书管理</el-button>
                        <el-button style="color: red" :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
@@ -69,6 +72,27 @@
            <br />
        </el-card>
        <userDialog ref="userRef" @getUserList="initUserTableData" />
        <dialog-certificate ref="ctfRef" @getUserList="initUserTableData"></dialog-certificate>
      <el-dialog title="修改密码" v-model="showPwdDialog" width="500px">
        <el-form :model="pwdForm" size="default" ref="pwdRef" :rules="pwdFormRules" label-width="110px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model.trim="pwdForm.newPassword" placeholder="请输入" type="password" show-password>
              </el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="rePassword">
              <el-input v-model.trim="pwdForm.rePassword" placeholder="请输入" type="password" show-password>
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showPwdDialog = !showPwdDialog" size="default">取 消</el-button>
                    <el-button type="primary" v-throttle @click="onPwdSubmit" size="default">确 定</el-button>
                </span>
        </template>
      </el-dialog>
    </div>
</template>
@@ -76,10 +100,15 @@
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import userDialog from '/@/views/system/user/component/userDialog.vue';
import dialogCertificate from "/@/views/system/user/component/dialogCertificate.vue";
import { userApi } from '/@/api/systemManage/user';
import { dutyApi } from '/@/api/systemManage/duty';
import { departmentApi } from '/@/api/systemManage/department';
import { useRoleApi } from '/@/api/systemManage/role';
import {verifyPwd} from "/@/utils/toolsValidate";
import {useLoginApi} from "/@/api/login";
import {Session} from "/@/utils/storage";
import Cookies from "js-cookie";
// 定义接口来定义对象的类型
interface TableDataRow {
@@ -117,13 +146,42 @@
    dutyList: [];
    userTypeList: Array<{id:number,name:string}>;
    props:{}
    showPwdDialog: boolean
    pwdForm: {
      uid: number|string| null
      newPassword: string
      rePassword: string
    }
    pwdFormRules: {}
}
export default defineComponent({
    name: 'systemUser',
    components: { userDialog },
    components: { userDialog,dialogCertificate },
    setup() {
        const userRef = ref();
        const pwdRef = ref();
        const ctfRef = ref()
        let validatePwd = (rule: any, value: any, callback: any)=>{
          if(value === ''){
            callback(new Error('请输入密码'))
          }else{
            if(!verifyPwd(value)){
              callback(new Error('密码须包含字母、数字、特殊字符,长度在6-16之间'))
            }else{
              callback()
            }
          }
        }
      const equalToPassword = (rule: any, value: any, callback: any) => {
        if(value == ''){
          callback(new Error("请再次确认密码"))
        }else if (state.pwdForm.newPassword !== value) {
          callback(new Error("两次输入的密码不一致"))
        } else {
          callback();
        }
      };
        const state = reactive<TableDataState>({
            userTableData: {
                data: [],
@@ -143,16 +201,26 @@
            roleList: [],
            dutyList: [],
            props: {
              label: 'depName',
              value: 'depId',
              checkStrictly: true,
              emitPath: false
                label: 'depName',
                value: 'depId',
                checkStrictly: true,
                emitPath: false
            },
            userTypeList: [
                { id: 1, name: '超级管理员' },
                { id: 2, name: '管理员' },
                { id: 3, name: '普通员工' }
            ]
            ],
          showPwdDialog: false,
          pwdForm: {
            uid: null,
            newPassword: '',
            rePassword: ''
          },
          pwdFormRules: {
            newPassword: [{ required: true, validator: validatePwd, trigger: 'blur' }],
            rePassword: [{ required: true, validator: equalToPassword, trigger: "blur" }]
          }
        });
        // 初始化表格数据
        const initUserTableData = async () => {
@@ -196,22 +264,77 @@
            }
        };
      const getDutyData = async () => {
        let res = await dutyApi().getAllList({positionName: '',positionCode: ''});
        if (res.data.code === '200') {
          state.dutyList = res.data.data;
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      };
        const getDutyData = async () => {
            let res = await dutyApi().getAllList({positionName: '',positionCode: ''});
            if (res.data.code === '200') {
                state.dutyList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
        // 打开新增修改用户弹窗
        const onOpenUserDialog = (type: string, value: any) => {
            userRef.value.openDialog(type, value, state.departmentList, state.roleList, state.dutyList);
        };
        const onPwdDialog = (uid: string)=>{
          state.pwdForm = {
            uid: uid,
            newPassword: '',
            rePassword: ''
          }
          state.showPwdDialog = true
        }
        const onPwdSubmit = async () => {
          pwdRef.value.validate(async (valid:Boolean) => {
            if(valid){
              const {rePassword,...data} = state.pwdForm
              let res = await userApi().pwdMod(data);
              if (res.data.code === '200') {
                state.showPwdDialog = false;
                if(state.pwdForm.uid == Cookies.get('uid')){
                  ElMessage({
                    type: 'success',
                    message: '密码修改成功,请重新登录',
                    duration: 2000
                  })
                  setTimeout(()=>{
                    useLoginApi()
                        .signOut()
                        .then(() => {
                          Session.clear()
                          window.location.href = '/'
                        })
                  },2000)
                }else{
                  ElMessage({
                    type: 'success',
                    message: '修改密码成功',
                    duration: 2000
                  })
                }
              } else {
                ElMessage({
                  type: 'warning',
                  message: res.data.msg
                });
              }
            }else{
              ElMessage({
                type:'warning',
                message:'请完善信息'
              })
            }
          })
        }
        const onCertificate = (value: any)=>{
          ctfRef.value.openDialog(value);
        }
        // 删除用户
        const onRowDel = (row: TableDataRow) => {
@@ -250,10 +373,6 @@
        };
        // 页面加载时
        onMounted(() => {
            let a = { name: 1, c: { name: 1 } };
            let b = Object.assign({}, a);
            b.c.name = 2;
            console.log(a.c.name);
            initUserTableData();
            getDepartmentData();
            getRoleData();
@@ -261,7 +380,12 @@
        });
        return {
            userRef,
            ctfRef,
          pwdRef,
          onPwdDialog,
          onPwdSubmit,
            onOpenUserDialog,
            onCertificate,
            onRowDel,
            parseNumber,
            onHandleSizeChange,