修改字样

zhouwx

2025-01-16 3bc936191cf6a6994f4be4610f90a95e7a4abcee

 src/views/system/user/index.vue

@@ -6,7 +6,7 @@
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            placeholder="请输入组织架构名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
@@ -30,10 +30,10 @@
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="用户名称" prop="userName">
          <el-form-item label="用户名" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入用户名称"
              placeholder="请输入用户名"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
@@ -139,10 +139,10 @@
        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
          <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
          <el-table-column label="真实姓名" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
          <el-table-column label="用户名" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
          <el-table-column label="组织架构" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
          <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
            <template slot-scope="scope">
              <el-switch
@@ -175,6 +175,7 @@
              <el-button
                size="mini"
                type="text"
                style="color: #f56c6c"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:user:remove']"
@@ -203,21 +204,33 @@
    </el-row>

    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
            <el-form-item label="真实姓名" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入真实姓名" maxlength="30" />
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="归属部门" prop="deptId">-->
<!--              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户名" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户名" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
@@ -229,22 +242,15 @@
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
            <el-form-item label="身份证号">
              <el-input v-model="form.idCard" placeholder="请输入身份证号" maxlength="18"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="form.sex" placeholder="请选择性别">
              <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%">
                <el-option
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
@@ -254,35 +260,24 @@
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in dict.type.sys_normal_disable"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        <el-row :gutter="20">
<!--          <el-col :span="12">-->
<!--            <el-form-item label="岗位">-->
<!--              <el-select v-model="form.postIds" multiple placeholder="请选择岗位">-->
<!--                <el-option-->
<!--                  v-for="item in postOptions"-->
<!--                  :key="item.postId"-->
<!--                  :label="item.postName"-->
<!--                  :value="item.postId"-->
<!--                  :disabled="item.status == 1"-->
<!--                ></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="岗位">
              <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
                <el-option
                  v-for="item in postOptions"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色">
              <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
            <el-form-item label="角色" prop="roleIds">
              <el-select v-model="form.roleIds" multiple placeholder="请选择角色" style="width: 100%" @change="getSections">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
@@ -293,8 +288,46 @@
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="showInstitutuion">
            <el-form-item label="所属机构" prop="institutionIds">
              <el-select v-model="form.institutionIds" multiple placeholder="请选择所属机构" style="width: 100%">
                <el-option
                  v-for="item in sectionOptions"
                  :key="item.institutionId"
                  :label="item.institutionName"
                  :value="item.institutionId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属地区">
              <el-select v-model="form.districtId" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in areaList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status" style="width: 100%;">
                <el-radio
                  v-for="dict in dict.type.sys_normal_disable"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
@@ -345,6 +378,7 @@
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getAreaList, getTrainPage} from "@/api/coalMine/placeManage/train";

export default {
  name: "User",
@@ -380,6 +414,8 @@
      dateRange: [],
      // 岗位选项
      postOptions: [],
      sectionOptions: [],
      areaList: [],
      // 角色选项
      roleOptions: [],
      // 表单参数
@@ -412,12 +448,13 @@
        status: undefined,
        deptId: undefined
      },
      showInstitutuion: false,
      // 列信息
      columns: [
        { key: 0, label: `用户编号`, visible: true },
        { key: 1, label: `用户名称`, visible: true },
        { key: 2, label: `用户昵称`, visible: true },
        { key: 3, label: `部门`, visible: true },
        { key: 1, label: `用户名`, visible: true },
        { key: 2, label: `真实姓名`, visible: true },
        { key: 3, label: `组织架构`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true }
@@ -425,15 +462,21 @@
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '用户名长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
          { required: true, message: "真实姓名不能为空", trigger: "blur" }
        ],
        roleIds: [
          { required: true, message: "角色不能为空", trigger: "blur" }
        ],
        institutionIds: [
          { required: true, message: "所属机构不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
          { pattern: /^(?![a-zA-Z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-Z\d]+$)(?![a-zA-Z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*\-_]{6,16}$/, message: "用户密码必须包含同时包含字母、数字和特殊字符，长度介于 6 和 16 之间", trigger: 'blur' }
        ],
        email: [
          {
@@ -461,17 +504,19 @@
  created() {
    this.getList();
    this.getDeptTree();
    this.getConfigKey("sys.user.initPassword").then(response => {
      this.initPassword = response.msg;
    });
    this.getArea()
    // this.getConfigKey("sys.user.initPassword").then(response => {
    //   console.log(response,55)
    //   this.initPassword = response.msg;
    // })
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.userList = response.rows
          this.total = response.total
          this.loading = false;
        }
      );
@@ -517,12 +562,14 @@
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        idCard: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: []
        roleIds: [],
        institutionIds: []
      };
      this.resetForm("form");
    },
@@ -539,6 +586,49 @@
      this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    getSections(val){
      this.sectionOptions = []
      if(val.indexOf(100)>-1 && val.indexOf(102)>-1){
        this.getSectionList()
        this.showInstitutuion = true
      }else if(val.indexOf(100)>-1 && val.indexOf(102) == -1){
        this.getSectionList(0)
        this.showInstitutuion = true
      }else if(val.indexOf(100) == -1 && val.indexOf(102) > -1){
        this.getSectionList(1)
        this.showInstitutuion = true
      }else{
        this.sectionOptions = []
        this.showInstitutuion = false
      }
    },

    async getSectionList(type) {
      this.loading = true;
      const param = {
        isCm: type,
        pageNum: 1,
        pageSize: 999
      }
      const res = await getTrainPage(param);
      if(res.code == 200) {
        this.sectionOptions = res.rows;
      }else {
        this.$message({
          message: res.msg,
          type: 'warning'
        })
      }
      this.loading = false;
    },

    async getArea() {
      const res = await getAreaList();
      if(res.code == 200) {
        this.areaList = res.data;
      }
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId);
@@ -566,7 +656,7 @@
        this.roleOptions = response.roles;
        this.open = true;
        this.title = "添加用户";
        this.form.password = this.initPassword;
        // this.form.password = this.initPassword;
      });
    },
    /** 修改按钮操作 */
@@ -582,6 +672,11 @@
        this.open = true;
        this.title = "修改用户";
        this.form.password = "";
        if(response.roleIds.indexOf(100)>-1 || response.roleIds.indexOf(102)>-1){
          this.getSectionList()
          this.showInstitutuion = true
          this.form.institutionIds = response.data.institutions.map(i=>i.institutionId.toString())
        }
      });
    },
    /** 重置密码按钮操作 */
@@ -590,8 +685,8 @@
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        inputPattern: /^.{5,20}$/,
        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间"
        inputPattern: /^(?![a-zA-Z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-Z\d]+$)(?![a-zA-Z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*\-_]{6,16}$/,
        inputErrorMessage: "用户密码必须包含同时包含字母、数字和特殊字符，长度介于 6 和 16 之间"
      }).then(({ value }) => {
          resetUserPwd(row.userId, value).then(response => {
            this.$modal.msgSuccess("修改成功，新密码是：" + value);
@@ -607,6 +702,7 @@
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log(this.form,'form')
          if (this.form.userId != undefined) {
            updateUser(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
@@ -615,9 +711,9 @@
            });
          } else {
            addUser(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            });
          }
        }
@@ -667,4 +763,4 @@
    }
  }
};
</script>
</script>