树结构下拉框点击选中收回

王旭

2023-05-11 0f03522d5a541c26875c1279ba5b18ef59e933fe

 src/views/maintenance/userManagement.vue

@@ -13,20 +13,16 @@
        <div class="flex_box">
          <div style="margin-right: auto">
            <el-form-item
              prop="uname"
              :label="$t('userManage.userInfoObj.uname')"
            >
              <el-input v-model="queryForm.uname" style="width: 200px" />
            </el-form-item>
            <el-form-item
              prop="depid"
              :label="$t('userManage.userInfoObj.depName')"
            >
              <el-select
                :popper-append-to-body="false"
                v-model="queryForm.depName"
                size="small"
                placeholder="请选择"
                style="width: 200px"
                ref="treeSelect"
              >
                <el-option
                  :value="queryForm.depid"
@@ -43,16 +39,40 @@
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              prop="uname"
              :label="$t('userManage.userInfoObj.uname')"
            >
              <el-input
                v-model="queryForm.uname"
                size="small"
                :placeholder="$t('userManage.userInfoObj.unamePlaceholder')"
                style="width: 200px"
              >
                <i slot="suffix" class="el-icon-search" @click="queryInfo"></i>
              </el-input>
            </el-form-item>
          </div>
          <div>
            <!--            <el-form-item>-->
            <!--              <el-button-->
            <!--                type="primary"-->
            <!--                size="small"-->
            <!--                @click="queryInfo('queryForm')"-->
            <!--                icon="el-icon-search"-->
            <!--              >-->
            <!--                {{ $t("operatManage.ELM.search") }}-->
            <!--              </el-button>-->
            <!--            </el-form-item>-->
            <el-form-item>
              <el-button
                type="info"
                v-if="menuStatus.insert"
                type="success"
                size="small"
                @click="resetInfo('queryForm')"
                icon="el-icon-refresh"
                @click="showAddDialog"
                icon="el-icon-plus"
              >
                {{ $t("operatManage.ELM.reset") }}
                {{ $t("common.append") }}
              </el-button>
            </el-form-item>
            <el-form-item v-show="setbatchFlag">
@@ -78,26 +98,28 @@
            </el-form-item>
            <el-form-item>
              <el-button
                v-if="menuStatus.insert"
                type="success"
                type="info"
                size="small"
                @click="showAddDialog"
                icon="el-icon-plus"
                @click="resetInfo('queryForm')"
                icon="el-icon-refresh"
              >
                {{ $t("common.append") }}
                {{ $t("operatManage.ELM.reset") }}
              </el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="dividing-line"></div>
    <div class="table_box" :style="styleVar">
      <el-table
        ref="filterTable"
        :data="tableData"
        style="width: 100%"
        border
        class="table_height"
        height="calc(100% - 57px)"
        height="calc(100% - 45px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
@@ -190,7 +212,7 @@
        <!-- <el-table-column
          align="center"
          prop="bak"
          

          :label="$t('userManage.userInfoObj.bak')"
        /> -->
        <el-table-column
@@ -209,7 +231,7 @@
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 25px" class="pagination_box">
      <div style="margin-top: 10px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -225,7 +247,6 @@

    <el-dialog
      width="910px"
      top="15vh"
      :title="
        behavior == '新增用户'
          ? `${$t('common.append')}`
@@ -233,38 +254,47 @@
      "
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form
        :model="editForm"
        ref="editForm"
        :rules="rules"
        style="display: flex"
      >
        <div>
          <el-form-item
            prop="uid"
            :label="$t('userManage.userInfoObj.uid')"
            v-if="behavior == '新增用户'"
            :label-width="formLabelWidth"
          >
            <el-input v-model="editForm.uid" autocomplete="off"></el-input>
            <div class="isNewUser" v-if="isNewUser">
              <img src="../../assets/img/success.png" />
              {{ $t("userManage.userInfoObj.uid") }}
            </div>
          </el-form-item>
          <el-form-item
            v-if="behavior == '修改信息'"
            :label="$t('userManage.userInfoObj.uid')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.uid"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
          <!-- <el-form-item
      <div style="height: 500px; overflow: auto">
        <el-form
          :model="editForm"
          ref="editForm"
          :rules="rules"
          style="display: flex"
        >
          <div>
            <el-form-item
              prop="uid"
              :label="$t('userManage.userInfoObj.uid')"
              v-if="behavior == '新增用户'"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="editForm.uid"
                autocomplete="off"
                :placeholder="
                  $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
                  $t('userManage.userInfoObj.uid')
                "
              ></el-input>
              <div class="isNewUser" v-if="isNewUser">
                <img src="../../assets/img/success.png" />
                {{ $t("userManage.userInfoObj.uid") }}
              </div>
            </el-form-item>
            <el-form-item
              v-if="behavior == '修改信息'"
              :label="$t('userManage.userInfoObj.uid')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="editForm.uid"
                autocomplete="off"
                disabled
              ></el-input>
            </el-form-item>
            <!-- <el-form-item
            v-if="behavior == '修改信息'"
            prop="oldPwd"
            :label="$t('userManage.userInfoObj.origpassword')"
@@ -277,7 +307,7 @@
              show-password
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item
            <!-- <el-form-item
            prop="pwd"
            v-if="behavior == '新增用户'"
            :label="$t('userManage.userInfoObj.pwd')"
@@ -290,7 +320,7 @@
              show-password
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item
            <!-- <el-form-item
            prop="checkPass"
            v-if="behavior == '新增用户'"
            :label="$t('userManage.userInfoObj.confirmPassword')"
@@ -303,67 +333,87 @@
              autocomplete="off"
            ></el-input>
          </el-form-item> -->
          <el-form-item
            prop="uname"
            :label="$t('userManage.userInfoObj.username')"
            :label-width="formLabelWidth"
          >
            <el-input v-model="editForm.uname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="sex"
            :label="$t('userManage.userInfoObj.sex')"
            :label-width="formLabelWidth"
          >
            <el-select
              :popper-append-to-body="false"
              v-model="editForm.sex"
              clearable
              :placeholder="$t('userManage.userInfoObj.pleaseSelect')"
            <el-form-item
              prop="uname"
              :label="$t('userManage.userInfoObj.username')"
              :label-width="formLabelWidth"
            >
              <el-option
                v-for="item in sexOpt"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="natives"
            :label="$t('userManage.userInfoObj.nativePlace')"
            :label-width="formLabelWidth"
          >
            <el-input v-model="editForm.natives" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="depid"
            :label-width="formLabelWidth"
            :label="$t('userManage.userInfoObj.depName')"
          >
            <el-select
              :popper-append-to-body="false"
              v-model="editForm.depid"
              placeholder="请选择"
              @focus="setOptionWidth"
              <el-input
                v-model="editForm.uname"
                autocomplete="off"
                :placeholder="
                  $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
                  $t('userManage.userInfoObj.username')
                "
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="sex"
              :label="$t('userManage.userInfoObj.sex')"
              :label-width="formLabelWidth"
            >
              <el-option
                :value="editForm.depid"
                :label="editForm.depName"
                :style="{ width: selectOptionWidth, height: selectheight }"
              <el-select
                :popper-append-to-body="false"
                v-model="editForm.sex"
                clearable
                :placeholder="
                  $t('shuJuGuanLi.shuJuJianSuo.valuetree') +
                  $t('userManage.userInfoObj.sex')
                "
              >
                <el-tree
                  ref="editcaderHandle"
                  :data="treeOptions"
                  :default-expand-all="defaultexpand"
                  node-key="id"
                  :props="defaultProps"
                  @node-click="handeditChange"
                />
              </el-option>
            </el-select>
            <!-- <el-cascader
                <el-option
                  v-for="item in sexOpt"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              prop="natives"
              :label="$t('userManage.userInfoObj.nativePlace')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="editForm.natives"
                autocomplete="off"
                :placeholder="
                  $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
                  $t('userManage.userInfoObj.nativePlace')
                "
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="depid"
              :label-width="formLabelWidth"
              :label="$t('userManage.userInfoObj.depName')"
            >
              <el-select
                :popper-append-to-body="false"
                v-model="editForm.depid"
                :placeholder="
                  $t('shuJuGuanLi.shuJuJianSuo.valuetree') +
                  $t('userManage.userInfoObj.depName')
                "
                @focus="setOptionWidth"
              >
                <el-option
                  :value="editForm.depid"
                  :label="editForm.depName"
                  :style="{ width: selectOptionWidth, height: selectheight }"
                >
                  <el-tree
                    ref="editcaderHandle"
                    :data="treeOptions"
                    :default-expand-all="defaultexpand"
                    node-key="id"
                    :props="defaultProps"
                    @node-click="handeditChange"
                  />
                </el-option>
              </el-select>
              <!-- <el-cascader
              v-model="editForm.depid"
              :options="treeOptions"
              filterable
@@ -380,80 +430,133 @@
              }"
            >
            </el-cascader> -->
          </el-form-item>
          <el-form-item
            prop="idcard"
            :label="$t('userManage.userInfoObj.identityCard')"
            :label-width="formLabelWidth"
          >
            <el-input v-model="editForm.idcard" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div style="width: 45%">
          <el-form-item
            prop="job"
            :label="$t('userManage.userInfoObj.job')"
            :label-width="formLabelWidth"
          >
            <el-input v-model="editForm.job" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="edu"
            :label="$t('userManage.userInfoObj.edu')"
            :label-width="formLabelWidth"
          >
            <el-input v-model="editForm.edu" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="addr"
            :label="$t('userManage.userInfoObj.addr')"
            :label-width="formLabelWidth"
          >
            <el-input v-model="editForm.addr" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="email"
            :label="$t('userManage.userInfoObj.email')"
            :label-width="formLabelWidth"
          >
            <el-input v-model="editForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="contact"
            :label="$t('userManage.userInfoObj.contact')"
            :label-width="formLabelWidth"
          >
            <el-input v-model="editForm.contact" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="status"
            :label="$t('userManage.userInfoObj.status')"
            :label-width="formLabelWidth"
          >
            <el-select
              :popper-append-to-body="false"
              v-model="editForm.status"
              clearable
              :placeholder="$t('userManage.userInfoObj.pleaseSelect')"
            </el-form-item>
            <el-form-item
              prop="idcard"
              :label="$t('userManage.userInfoObj.identityCard')"
              :label-width="formLabelWidth"
            >
              <el-option
                v-for="item in statusOpt"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              <el-input
                v-model="editForm.idcard"
                autocomplete="off"
                :placeholder="
                  $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
                  $t('userManage.userInfoObj.identityCard')
                "
              ></el-input>
            </el-form-item>
          </div>
          <div style="width: 45%">
            <el-form-item
              prop="job"
              :label="$t('userManage.userInfoObj.job')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="editForm.job"
                autocomplete="off"
                :placeholder="
                  $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
                  $t('userManage.userInfoObj.job')
                "
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="edu"
              :label="$t('userManage.userInfoObj.edu')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="editForm.edu"
                autocomplete="off"
                :placeholder="
                  $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
                  $t('userManage.userInfoObj.edu')
                "
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="addr"
              :label="$t('userManage.userInfoObj.addr')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="editForm.addr"
                autocomplete="off"
                :placeholder="
                  $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
                  $t('userManage.userInfoObj.addr')
                "
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="email"
              :label="$t('userManage.userInfoObj.email')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="editForm.email"
                autocomplete="off"
                :placeholder="
                  $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
                  $t('userManage.userInfoObj.email')
                "
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="contact"
              :label="$t('userManage.userInfoObj.contact')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="editForm.contact"
                autocomplete="off"
                :placeholder="
                  $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
                  $t('userManage.userInfoObj.contact')
                "
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="status"
              :label="$t('userManage.userInfoObj.status')"
              :label-width="formLabelWidth"
            >
              <el-select
                :popper-append-to-body="false"
                v-model="editForm.status"
                clearable
                :placeholder="
                  $t('shuJuGuanLi.shuJuJianSuo.valuetree') +
                  $t('userManage.userInfoObj.status')
                "
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="bak"
            :label="$t('userManage.userInfoObj.remarks')"
            :label-width="formLabelWidth"
          >
            <el-input v-model="editForm.bak" autocomplete="off"></el-input>
          </el-form-item>
        </div>
      </el-form>
                <el-option
                  v-for="item in statusOpt"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              prop="bak"
              :label="$t('userManage.userInfoObj.remarks')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="editForm.bak"
                autocomplete="off"
                :placeholder="
                  $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
                  $t('userManage.userInfoObj.remarks')
                "
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div v-if="behavior == '修改信息'" slot="footer" class="dialog-footer">
        <el-button size="small" type="info" @click="cancelEdit()">{{
          $t("common.reset")
@@ -480,13 +583,17 @@
      </div>
    </el-dialog>
    <el-dialog
      width="520px"
      top="30vh"
      :title="$t('common.changepassWord')"
      :visible.sync="resetPwd"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form :model="pwdForm" ref="pwdForm" :rules="rules">
      <el-form
        :model="pwdForm"
        ref="pwdForm"
        :rules="rules"
        label-position="top"
      >
        <el-form-item
          prop="adminPwd"
          :label="$t('common.AdminPassword')"
@@ -497,6 +604,11 @@
            v-model="pwdForm.adminPwd"
            autocomplete="off"
            show-password
            style="width: 85%"
            :placeholder="
              $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
              $t('common.AdminPassword')
            "
          ></el-input>
        </el-form-item>
        <el-form-item
@@ -509,6 +621,10 @@
            v-model="pwdForm.newPwd"
            autocomplete="off"
            show-password
            style="width: 85%"
            :placeholder="
              $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + $t('common.NPassword')
            "
          ></el-input>
        </el-form-item>
        <el-form-item
@@ -521,9 +637,14 @@
            v-model="pwdForm.checkPwd"
            autocomplete="off"
            show-password
            style="width: 85%"
            :placeholder="
              $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + $t('common.SPassword')
            "
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="info" @click="cancelReset - 'pwdForm'">{{
          $t("common.reset")
@@ -794,9 +915,14 @@
      tableHeight: 0,
      timer: 0,
      styleVar: {
        "height": "calc(100% - 109px)",
        height: "calc(100% - 109px)",
      },
    };
  },
  watch: {
    "queryForm.depName"() {
      this.$refs.treeSelect.visible = false;
    },
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
@@ -813,7 +939,7 @@
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 30}px)`;
      });
    },
    ...mapActions(["login", "getpublickey"]),
@@ -825,6 +951,9 @@
          if (res.code == 200) {
            this.depList = this.treeData(res.result);
            this.treeOptions = this.treeData(res.result);
            this.queryForm.depName = this.depList[0].name;
            this.queryInfo.depid = this.depList[0].id;
            this.queryInfo();
          } else {
            this.$notify.error({
              title: res.code,
@@ -862,14 +991,14 @@
    },

    handleNodeClickto(data, node, nodeData) {
      this.queryForm.depid = data.id;
      this.queryForm.depid = data.code;
      this.queryForm.depName = data.name;
    },
    //搜索按钮
    queryInfo() {
      let searchData = {
        uname: this.queryForm.uname.trim(),
        depid: this.queryForm.depid,
        depcode: this.queryForm.depid,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      };
@@ -888,6 +1017,9 @@
    //重置按钮
    resetInfo(formName) {
      this.$refs[formName].resetFields();
      this.queryForm.depName = this.depList[0].name;
      this.queryInfo.depid = this.depList[0].id;
      this.queryInfo();
    },
    //新增按钮
    showAddDialog() {
@@ -984,13 +1116,11 @@
    },
    //重置密码
    editPwd() {

 
      var std = [];
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].id);
      }
 

      if (std.length == 0) {
        alert("请先选择用户");
        return;
@@ -1031,6 +1161,11 @@
                  this.resetPwd = false;

                  this.getUserInfo();
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error",
                  });
                }
              }, 500);
            })
@@ -1061,6 +1196,7 @@
    handeditChange(data, node, nodeData) {
      this.$set(this.editForm, "depid", data.id);
      this.$set(this.editForm, "depName", data.name);
      this.$set(this.editForm, "depcode", data.code);
      this.$refs.editcaderHandle.dropDownVisible = false;
    },
    //关闭弹出框
@@ -1195,7 +1331,7 @@
    this.getUserInfo();
    this.getpublickey();
    window.addEventListener("resize", this.onResize);
    this.calHeight()
    this.calHeight();
  },
  created() {
    var val = this.$store.state.currentPerms;
@@ -1208,13 +1344,13 @@
  },
};
</script>
 

<style lang="less" scoped>
//@import url(); 引入公共css类
.userInfo_box {
  height: 98%;
  width: 98%;
  padding: 1%;
  padding: 0.5%;

  .el-input {
    width: 300px;
@@ -1223,12 +1359,12 @@
    position: relative;
    height: auto;

    padding: 8px;
    margin-top: 20px;
    //padding: 10px;
    //margin-top: 20px;

    border-radius: 5px;

    margin-bottom: 20px;
    //margin-bottom: 20px;
    .el-form-item {
      margin: 5px;
    }
@@ -1262,4 +1398,4 @@
  }
}
</style>