slow_live/src/views/plugin/workflow/process/components/user-select.vue

<template>
  <div class="select-user">
    <el-dialog title="选择人员"
               :visible.sync="visible"
               width="900px"
               top="5vh"
               :before-close="handleClose"
               append-to-body>
      <template v-if="visible">
        <!-- 搜索栏 -->
        <el-row :gutter=8>
          <el-col :xs="12"
                  :sm="6"
                  :md="6">
            <el-input placeholder="请输入用户名"
                      v-model="query.realName"
                      clearable
                      size="mini"></el-input>
          </el-col>
          <el-col :xs="12"
                  :sm="6"
                  :md="6">
            <el-input placeholder="请输入部门"
                      v-model="query.deptName"
                      clearable
                      size="mini"></el-input>
          </el-col>
          <el-col :xs="12"
                  :sm="6"
                  :md="6">
            <el-input placeholder="请输入职位"
                      v-model="query.postName"
                      clearable
                      size="mini"></el-input>
          </el-col>
          <el-col :xs="24"
                  :sm="6"
                  :md="6">
            <el-button type="primary"
                       icon="el-icon-search"
                       size="mini"
                       @click="onLoad">搜索</el-button>
            <el-button icon="el-icon-delete"
                       size="mini"
                       @click="handleRefresh">清空</el-button>
          </el-col>
        </el-row>
        <!-- table -->
        <el-table ref="table"
                  style="width: 100%; margin-top: 40px"
                  size="mini"
                  tooltip-effect="dark"
                  class='avue-crud'
                  border
                  :data="userList"
                  @current-change="handleRadio"
                  @selection-change="handleCheckbox">
          <template v-if="checkType == 'checkbox'">
            <el-table-column type="selection"
                             width="55"
                             align="center">
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column align="center"
                             width="55">
              <template slot-scope="scope">
                <el-radio v-model="tableRadio"
                          :label="scope.row.id">
                  <i></i>
                </el-radio>
              </template>
            </el-table-column>
          </template>

          <el-table-column prop="avatar"
                           label="头像"
                           align="center"
                           width="60">
            <template slot-scope="scope">
              <el-avatar fit="cover"
                         :size="35"
                         :src="scope.row.avatar"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="realName"
                           label="姓名"
                           align="center">
          </el-table-column>
          <el-table-column prop="deptName"
                           label="部门"
                           align="center">
          </el-table-column>
          <el-table-column prop="postName"
                           label="职位"
                           align="center">
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination background
                         layout="total, sizes, prev, pager, next, jumper"
                         @current-change="currentChange"
                         @size-change="sizeChange"
                         :current-page="page.currentPage"
                         :page-size="page.pageSize"
                         :total="page.total">
          </el-pagination>
        </div>

        <span slot="footer"
              class="dialog-footer">
          <el-button @click="handleClose"
                     size="mini">取 消</el-button>
          <el-button type="primary"
                     @click="handleConfirm"
                     size="mini">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { userList as getList } from "@/api/plugin/workflow/process";
export default {
  name: 'userSelect',
  props: {
    checkType: {
      type: String,
      default: () => {
        return 'checkbox'
      },
    },
  },
  data() {
    return {
      visible: false,
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      query: {},
      treeDeptId: '',
      userList: [],
      selectionList: [],
      tableRadio: '',
    }
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    names() {
      let names = [];
      this.selectionList.forEach(ele => {
        names.push(ele.realName);
      });
      return names.join(",");
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    handleClose() { //弹窗关闭
      this.$set(this, 'selectionList', [])
      this.$set(this, 'tableRadio', '')
      this.visible = false
      this.$emit('onClose')
    },
    handleConfirm() { //弹窗确定
      if (this.checkType == 'checkbox') {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$emit('onConfirm', this.ids, this.names)
      } else {
        if (!this.tableRadio) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$emit('onConfirm', this.tableRadio, this.tableRadioName)
      }
    },
    handleRefresh() { // 搜索表头重置
      this.query = {}
      this.page = {
        currentPage: 1,
        pageSize: 10,
      }
      this.onLoad();
    },
    currentChange(val) { //分页
      this.page.currentPage = val;
      this.onLoad()
    },
    sizeChange(val) { //分页
      this.page.pageSize = val;
      this.onLoad()
    },
    onLoad() { //获取列表
      const params = {}
      getList(this.page.currentPage, this.page.pageSize, Object.assign(params, this.query), this.treeDeptId).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.userList = data.records;
        this.selectionClear();
      });
    },
    selectionClear() { //清除选择
      this.selectionList = [];
      // this.$refs.table.clearSelection();
    },
    handleCheckbox(val) { //全选
      this.selectionList = val;
    },
    handleRadio(val) { //单选
      this.tableRadio = val.id
      this.tableRadioName = val.realName
    },
  },
}
</script>

<style lang="scss" scped>
.pagination {
  padding: 30px 0;
  display: flex;
  justify-content: flex-end;
}
</style>
<style lang="scss">
// .select-user {
//   position: relative;
//   .el-dialog {
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     margin: 0 !important;
//     -webkit-transform: translate(-50%, -50%);
//     transform: translate(-50%, -50%);
//   }
// }
</style>