element-ui部门人员选择

图例

场景

后台系统站内信功能，要求选择部门后，可单独选择部门下某个人员进行发送信息，翻页与却换部门时不会将之前选择的人员取消。
这个功能是刚开始工作时写的，功能没有问题可参考，但代码并不美观，请自主优化。

完整代码

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入名称" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="测点" prop="tagUuid">
        <tagRemote @selected="selectTag"></tagRemote>
      </el-form-item>
      <el-form-item label="限值类型" prop="limitType">
        <el-select v-model="queryParams.limitType" placeholder="请选择" clearable size="small"
          :style="'width:'+  maxLength(limitTypeOptions,'dictLabel')* 15 + 'px' ">
          <el-option v-for="dict in limitTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
            :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['overrun:conf:add']">
          新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['overrun:conf:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['overrun:conf:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['overrun:conf:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="confList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="名称" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <router-link :to="'/overrunmg/warnconf/data/' + scope.row.uuid" class="link-type">
            <span>{{ scope.row.name }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="测点" align="center" prop="tagName" />
      <el-table-column label="限值类型" align="center" prop="limitType" :formatter="limitTypeFormat" />
      <el-table-column label="上限参数" align="center" prop="upperLimit" />
      <el-table-column label="下限参数" align="center" prop="lowerLimit" />
      <el-table-column label="动态限值关联测点" align="center" prop="relationTag" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="260">
        <template slot-scope="scope">
          <el-button v-if="scope.row.limitType != null" size="mini" type="text">
            <router-link :to="'/overrunmg/warnconf/data/' + scope.row.uuid"> <i class="el-icon-setting"></i>报警方式
            </router-link>
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['overrun:conf:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['overrun:conf:remove']">删除</el-button>
          <el-button size="mini" type="text" icon="el-icon-s-order" v-if="scope.row.limitType != null"
            @click="handleLimit(scope.row)">限值</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 添加或修改超限配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="closeDialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="14">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入名称" style="width:90%" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="测点" prop="tagUuid">
              <el-select :remote-method="remoteMethod" remote v-model="form.tagUuid" placeholder="请选择" filterable
                clearable size="small" default-first-option @visible-change="changeSelTag">
                <el-option v-for="item in tagOptions" :key="item.uuid" :label="item.tagname" :value="item.uuid">
                  <span style="float: left ">{{ item.tagname }}</span>
                  <span style="float: right;color: #8492a6;font-size: 13px">{{ item.dsourceName }}
                    &nbsp;{{ item.tagdesc }}</span>
                </el-option>
                <div style="width:400px;text-align:center;height:50px">
                  <pagination v-show="tagTotal > 0" :total="tagTotal" :page.sync="tagQueryParams.pageNum"
                    :limit.sync="tagQueryParams.pageSize" :pager-count="5" @pagination="getTagList"
                    layout="total, prev, pager, next">
                  </pagination>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="上限参数" prop="upperLimit">
              <el-input id="upperLimit" v-model="form.upperLimit" placeholder="请输入上限参数" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="限值类型">
              <el-select id="limitType" v-model="form.limitType" placeholder="请选择限值类型" size="small">
                <el-option v-for="dict in limitTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="下限参数" prop="lowerLimit">
              <el-input id="lowerLimit" v-model="form.lowerLimit" placeholder="请输入下限参数" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="关联测点" prop="relationTag">
              <el-select id="relationTag" v-model="form.relationTag" placeholder="请输入关联测点" filterable clearable
                size="small" @focus="resetTag">
                <el-option v-for="item in tagOptions" :key="item.uuid" :label="item.tagname" :value="item.tagname">
                  <span style="float: left">{{ item.tagname }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dsourceName }}</span>
                </el-option>
                <div style="width:400px;text-align:center;height:50px">
                  <pagination v-show="tagTotal>0" :total="tagTotal" :page.sync="tagQueryParams.pageNum"
                    :limit.sync="tagQueryParams.pageSize" :pager-count="5" @pagination="getTagList"
                    layout="total, prev, pager, next">
                  </pagination>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item v-hasPermi="['overrun:conf:dataScope']" label="数据权限" prop="dataScope">
          <el-select id="dataScope" v-model="form.dataScope" placeholder="数据权限" clearable size="small"
            @change="handleNoticeType">
            <el-option v-for="dict in dataScopeOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-divider><strong style="color:red;font-size:20px">超限示例</strong></el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单限值" style="color:red;">
              {01-01,05-31:100}|{06-01,12-31:120}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="多限值" style="color:red;">
              {0,0:100,200,400}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="动态值" style="color:red;">
              {0,0:(1,1)(90,4)}
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="启停值 " style="color:red;" >
                {1,1:-458752} ,状态值根据测点查询
            </el-form-item>
          </el-col> -->
        </el-row>
        <transition name="el-zoom-in-top">
          <el-row :gutter="20" v-show="this.showUsers">
            <el-col :span="8">
              <div>
                <el-form-item label="部门">
                  <el-tree ref="usertree" :data="deptOptions" default-expand-all node-key="id"
                    :expand-on-click-node="false" empty-text="加载中，请稍后" :props="defaultProps"
                    @node-click="handleNodeClick"></el-tree>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="15">
              <div>
                <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChangeUser"
                  :row-key="getRowKeys" :row-class-name="tableRowClassName" ref="user" height="256">
                  <el-table-column type="selection" :reserve-selection="true" width="50" align="center" />
                  <el-table-column label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
                  <el-table-column label="部门" align="center" prop="dept.deptName" :show-overflow-tooltip="true" />
                </el-table>
                <pagination v-show="totalUser>0" :total="totalUser" :page.sync="queryParamsUser.pageNum"
                  :limit.sync="queryParamsUser.pageSize" @pagination="getUserList" />
              </div>
            </el-col>
            <el-col :span="1">
              <div></div>
            </el-col>
          </el-row>
        </transition>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 限值明细 -->
    <el-dialog title="限值明细" :visible.sync="limitOpen" append-to-body>
      <el-table :data="confLimitList" height="500">
        <el-table-column type="index" width="50" />
        <el-table-column property="type" width="70" label="类型" :formatter="confLimitTypeFormat"></el-table-column>
        <el-table-column property="startTime" width="100" label="开始时间"></el-table-column>
        <el-table-column property="endTime" width="100" label="结束时间"></el-table-column>
        <el-table-column property="level" width="70" label="级别"></el-table-column>
        <el-table-column align="center" label="限值" :formatter="limitValFormat"></el-table-column>
        <!-- <el-table-column align="center" property="relationTag" label="限值公式"></el-table-column> -->
      </el-table>
    </el-dialog>
    <guide :pagename="pageName"></guide>
  </div>
</template>
<script>
import { listConf, getConf, delConf, addConf, updateConf, exportConf, limitList } from "@/api/overrun/conf";
import { listTag } from "@/api/tagmg/tag";
import { treeselect as deptTreeselect, modleDeptTreeselect, listDept } from "@/api/system/dept";
import { noticeListUser, getUserProfile } from "@/api/system/user";
import tagRemote from "@/views/tagmg/tag/tagRemote";
import Guide from "@/components/Guide"
export default {
  name: "overrunconf",
  components: { Guide, tagRemote },
  data () {
    return {
      pageName: 'overrunconf',
      // 遮罩层
      loading: true,
      // 选中数组
      uuids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      tagTotal: 0,
      // 超限配置表格数据
      confList: [],
      tagOptions: [],
      confLimitList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      limitOpen: false,
      // 限值类型1：单限值2：多限值3：动态限值4：启停值字典
      limitTypeOptions: [],
      dataScopeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        uuid: null,
        tagUuid: null,
        limitType: null,
        upperLimit: null,
        lowerLimit: null,
        name: null,
        relationTag: null
      },
      tagQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {
        dataScope: '0'
      },
      // 表单校验
      rules: {
        name: { required: true, message: '请输入名称', trigger: 'blur' },
        tagUuid: { required: true, message: '请输入测点', trigger: 'blur' },
        dataScope: { required: true, message: '请选择数据权限', trigger: 'blur' },
      },
      showUsers: false,
      queryParamsDept: {
        deptName: undefined,
        status: undefined
      },
      queryParamsUser: {
        pageNum: 1,
        pageSize: 10,
        createBy: undefined,
        status: undefined
      },
      totalUser: 0,
      // 获取row的key值
      getRowKeys (row) {
        return row.userId;
      },
      // 用户表格数据
      userList: null,
      userMap: {},
      userId: null,
      deptOptions: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      defaultTagUuid: null,
    };
  },
  created () {
    const tagUuid = this.$route.params && this.$route.params.tagUuid;
    this.queryParams.tagUuid = tagUuid
    this.defaultTagUuid = tagUuid;
    this.getList();
    this.getTagList()
    this.getUserList();
    this.getDeptTreeselect();
    this.getUser();
    this.getDicts("diz_tag_limit").then(response => {
      this.limitTypeOptions = response.data;
    });
    this.getDicts("sys_data_scope").then(response => {
      this.dataScopeOptions = response.data;
    });
  },
  methods: {
    remoteMethod (query) {
      this.tagQueryParams.pageNum = 1;
      this.tagQueryParams.tagname = query;
      this.getTagList();
    },
    //选择测点
    selectTag (tag) {
      this.queryParams.tagUuid = tag.uuid;
    },
    //限值类型
    confLimitTypeFormat (row, column) {
      if (1 == row.type) {
        return "上限";
      } else {
        return "下限";
      }
    },
    //限值
    limitValFormat (row, column) {
      if (row.relationTag) {
        return row.relationTag;
      } else {
        return row.limitVal;
      }
    },
    //当前登陆人
    getUser () {
      getUserProfile().then(response => {
        this.userId = response.data.userId
      });
    },
    closeDialog () {
      this.cancel();
    },
    handleNoticeType (selection) {
      if (selection === "2") {
        this.showUsers = true;
      } else {
        this.showUsers = false;
      }
    },
    deleteData () {
      //清除选中状态
      this.$refs.user.clearSelection();
    },
    // 添加索引
    tableRowClassName (row, index) {
      // 给每条数据添加一个索引
      row.row.index = row.rowIndex;
    },
    // 节点单击事件
    handleNodeClick (data) {
      this.queryParamsUser.deptId = data.id;
      this.userMap[data.id] = this.userIds;
      this.getUserList();
    },
    // 用户多选框选中数据
    handleSelectionChangeUser (selection) {
      this.userIds = selection.map(item => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
      this.getUserAll();
      this.selectedData = [];
      if (selection) {
        selection.forEach(row => {
          if (row) {
            this.selectedData.push(row.userId);
          }
        });
      }
    },
    handleSelect () {
      this.$nextTick(() => {
        if (
          this.userList !== undefined &&
          this.getUserAll() !== undefined &&
          this.getUserAll().length != 0
        ) {
          this.getUserAll().forEach((v, i) => {
            this.userList.forEach((_v, _i) => {
              if (_v.userId === v) {
                this.$refs.user.toggleRowSelection(_v, true);
              }
            });
          });
        }
      });
    },
    /** 查询用户列表 */
    getUserList () {
      this.loading = true;
      noticeListUser(this.addDateRange(this.queryParamsUser, this.dateRange)).then(
        response => {
          this.userList = response.rows;
          this.totalUser = response.total;
          this.loading = false;
          this.handleSelect();
        }
      );
    },
    /** 查询部门树结构 */
    getDeptTreeselect () {
      deptTreeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 所有部门树选中数据
    getUserAllCheckedKeys () {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.usertree.getHalfCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.usertree.getCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    // 所有部门树选中数据
    getUserAll () {
      var msg = [];
      var usermsg = [];
      for (var key in this.userMap) {
        for (var i in this.userMap[key]) {
          var num = this.userMap[key][i];
          msg.push(num);
        }
      }
      for (var key in this.userIds) {
        var num1 = this.userIds[key];
        msg.push(num1);
      }
      msg = new Set(msg);
      for (let key of msg.keys()) {
        usermsg.push(key);
      }
      return usermsg;
    },
    dataScopeFormat (row, column) {
      return this.selectDictLabel(this.dataScopeOptions, row.status);
    },
    resetTag () {
      this.tagQueryParams.pageNum = 1
      this.getTagList()
    },
    changeSelTag (isShow) {
      if (isShow) {
        this.tagQueryParams.pageNum = 1;
        this.tagQueryParams.tagname = "";
        this.getTagList();
      }
    },
    //查询测点
    getTagList () {
      listTag(this.tagQueryParams).then(response => {
        this.tagOptions = response.rows;
        this.tagTotal = response.total;
      });
    },
    /** 查询超限配置列表 */
    getList () {
      this.loading = true;
      listConf(this.queryParams).then(response => {
        this.confList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 限值类型1：单限值2：多限值3：动态限值4：启停值字典翻译
    limitTypeFormat (row, column) {
      return this.selectDictLabel(this.limitTypeOptions, row.limitType);
    },
    // 取消按钮
    cancel () {
      this.reset();
      this.open = false;
      this.showUsers = false;
      this.deleteData();
    },
    // 表单重置
    reset () {
      this.form = {
        id: null,
        uuid: null,
        tagUuid: null,
        limitType: null,
        upperLimit: null,
        lowerLimit: null,
        name: null,
        relationTag: null,
        dataScope: '0'
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.queryParams.tagUuid = this.defaultTagUuid;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.uuids = selection.map(item => item.uuid)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset();
      this.getDeptTreeselect();
      this.open = true;
      this.title = "添加报警配置";
      this.form.tagUuid = this.queryParams.tagUuid;
    },
    getConfDeptTreeSelect (confUuid) {
      return modleDeptTreeselect(confUuid, "conf").then(response => {
        this.deptOptions = response.deptUsers;
        return response;
      });
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      this.reset();
      const uuid = row.uuid || this.uuids
      const ConfUser = this.getConfDeptTreeSelect(uuid);
      getConf(uuid).then(response => {
        if (response.data.dataScope === "2") {
          this.showUsers = true;
        } else {
          this.showUsers = false;
        }
        this.form = response.data;
        this.open = true;
        this.$nextTick(() => {
          ConfUser.then(res => {
            if (
              this.userList !== undefined &&
              res.checkedKeys !== undefined &&
              res.checkedKeys.length !== 0
            ) {
              res.checkedKeys.forEach((v, i) => {
                this.userList.forEach((_v, _i) => {
                  if (_v.userId === v) {
                    this.$refs.user.toggleRowSelection(_v);
                  }
                });
              });
            }
            if (res.checkedKeys) {
              this.userIds = res.checkedKeys;
              this.getUserAll();
            }
            if (res.deptId !== undefined && res.deptId.length !== 0) {
              this.$refs.usertree.setCheckedKeys(res.deptId);
            }
          });
        });
        this.title = "修改报警配置";
      });
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.userIds = this.getUserAll();
          if (
            this.form.dataScope === "2" &&
            (this.form.userIds == null || this.form.userIds.length == 0)
          ) {
            this.msgError("请选择人员");
            return;
          } else {
            if (this.form.dataScope === "0") {
              this.form.userIds = []
              this.form.userIds.push(this.userId)
            }
            if (this.form.dataScope === "1") {
              this.form.userIds = []
            }
            if (this.form.dataScope === "2") {
              this.form.userIds = this.userIds
            }
          }
          // this.form.tagUuid = this.queryParams.tagUuid
          if (this.form.uuid != null) {
            updateConf(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
              this.deleteData();
            });
          } else {
            addConf(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
              this.deleteData();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const uuids = row.uuid || this.uuids;
      this.$confirm('是否确认删除报警配置的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delConf(uuids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function () { });
    },
    /** 导出按钮操作 */
    handleExport () {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有报警配置数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return exportConf(queryParams);
      }).then(response => {
        this.download(response.msg);
      }).catch(function () { });
    },
    /** 查询限值明细 */
    handleLimit (row) {
      const confUuid = row.uuid;
      const lqp = {
        overrunConfUuid: confUuid
      };
      limitList(lqp).then(res => {
        this.confLimitList = res.data;
      });
      this.limitOpen = true;
    }
  }
};
</script>