2025-5-26提交

杨磊

2025-05-26 96be59a64cc1d8fcaf1034e787717663c68df4a7

 src/views/system/userManage.vue

@@ -1,7 +1,7 @@
<template>
  <div class="user-manage">
    <div class="flex jc-sb ai-c">
      <div class="addBox">
      <div class="addBox" @click="addBtn">
        <el-icon><Plus /></el-icon>
        <span>新建</span>
      </div>
@@ -26,12 +26,19 @@
        class="roverTable"
      >
        <el-table-column prop="index" label="序号" width="60" />
        <el-table-column prop="userName" label="用户姓名" />
        <el-table-column prop="name" label="用户名" />
        <el-table-column prop="state" label="状态" />
        <el-table-column prop="name" label="用户姓名" />
        <el-table-column prop="loginName" label="用户名" />
        <el-table-column prop="state" label="状态">
          <template #default="scope">
            <span v-if="scope.row.isEnable" style="color: rgb(46, 236, 21)"
              >已启用</span
            >
            <span v-else style="color: rgb(255, 30, 0)">已禁用 </span>
          </template>
        </el-table-column>
        <el-table-column prop="role" label="类型" />
        <el-table-column prop="creatTime" label="创建时间" />
        <el-table-column label="操作"  width="220" >
        <el-table-column prop="createDate" label="创建时间" />
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button size="small" @click="update(scope.row)">
              编辑
@@ -56,12 +63,69 @@
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      v-model="dialogFormVisible"
      :title="dialogTitle"
      width="500"
      @close="closeDialog(formRef)"
    >
      <el-form
        :model="form"
        ref="formRef"
        :rules="formRules"
        label-width="140px"
      >
        <el-form-item label="用户名" prop="loginName">
          <el-input
            v-model="form.loginName"
            autocomplete="off"
            placeholder="请输入"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            autocomplete="off"
            placeholder="请输入"
            style="width: 240px"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="form.confirmPassword"
            autocomplete="off"
            placeholder="请输入"
            style="width: 240px"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog(formRef)">取消</el-button>
          <el-button type="primary" @click="submitBtn(formRef)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted, reactive, inject, watch } from "vue";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
const MG: any = inject("MG");

const searchValue = ref();
const tableData = ref([]);
@@ -69,88 +133,154 @@
const currentPage = ref(4);
const pageSize = ref(100);
const background = ref(true);

onMounted(() => {
  getUserData();
const dialogFormVisible = ref(false);
const dialogTitle = ref();
const form = reactive({
  name: "",
  password: "",
  loginName: "",
  confirmPassword: "",
});

const getUserData =() =>{
  let list=[
    {
      index: 1,
      userName:'',
      name:'',
      state:'',
      role:'',
      creatTime:'',
    },
    {
      index: 2,
      userName:'',
      name:'',
      state:'',
      role:'',
      creatTime:'',
    },
    {
      index: 3,
      userName:'',
      name:'',
      state:'',
      role:'',
      creatTime:'',
    },
  ]
  tableData.value = list
const formRef = ref<FormInstance>();
import { curStoreInfo } from "@/store/index";
const seleStore = curStoreInfo();

watch(
  () => seleStore.departmentInfo, // 监听 reactive 对象（默认深度监听）
  (newVal) => {
    if (newVal) {
      getUserData();
    }
  }
);

const closeDialog = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogFormVisible.value = false;
};

const submitBtn = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const body = {
        ...form,
        state: "Normal",
        type: "Normal",
        source: "",
        info: "",
        departmentId: seleStore.departmentInfo.id,
      };
      delete body.confirmPassword;
      const res = await MG.dps5.NewUser(body);
      console.log(res);
      if (res) {
        ElMessage({
          message: "新建用户成功",
          type: "success",
        });
        getUserData();
        dialogFormVisible.value = false;
      }
    }
  });
};

interface formInfo {
  name: string;
  refCode: string;
  password: string;
  confirmPassword: string;
  loginName: string;
}

// 自定义密码校验规则
const validatePassword = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (value.length < 6) {
    callback(new Error("密码长度不能少于6位"));
  } else {
    if (form.confirmPassword !== "") {
      // 如果确认密码已输入，触发确认密码的重新验证
      formRef.value.validateField("confirmPassword", () => null);
    }
    callback();
  }
};

// 自定义确认密码校验规则
const validateConfirmPassword = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== form.password) {
    callback(new Error("两次输入的密码不一致!"));
  } else {
    callback();
  }
};
const formRules = reactive<FormRules<formInfo>>({
  loginName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
  password: [{ required: true, validator: validatePassword, trigger: "blur" }],
  confirmPassword: [
    { required: true, validator: validateConfirmPassword, trigger: "blur" },
  ],
});

const getUserData = async () => {
  const body = {
    departmentId: seleStore.departmentInfo.id,
    filterList: [],
    searchList: [],
    sort: {
      field: "CreateDate",
      subSorts: [],
      type: "Desc",
    },
    start: 0,
    size: 9999,
  };
  const res = await MG.dps5.GetDepartmentUserList(body);
  tableData.value = res.datas;
};

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};

//新增用户
const addBtn = () => {
  dialogFormVisible.value = true;
  dialogTitle.value = "新增用户";
};
// 编辑
const update = (row) =>{

}
const update = (row) => {};
//禁用
const goDisable = (row) =>{
  ElMessageBox.confirm(
    '确定要禁用该用户?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
const goDisable = (row) => {
  ElMessageBox.confirm("确定要禁用该用户?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      console.log(row)
     
      console.log(row);
    })
    .catch(() => {
      
    })
  
}
    .catch(() => {});
};
//删除
const goDelete = () =>{
  ElMessageBox.confirm(
    '确定要删除该用户?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
const goDelete = () => {
  ElMessageBox.confirm("确定要删除该用户?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      console.log(row)
      console.log(row);
    })
    .catch(() => {
      
    })
}
    .catch(() => {});
};
</script>

<style lang="less" scoped>
@@ -161,16 +291,17 @@
  display: flex;
  align-items: center;
  color: #409eff;
  cursor: pointer;
}
.list{
  margin-top:20px;
.list {
  margin-top: 20px;
}
.rover-pagination-block {
    height: 60px;
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
  }
  height: 60px;
  display: flex;
  justify-content: flex-end;
  background-color: #fff;
  padding: 0 10px;
  box-sizing: border-box;
}
</style>