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

<template>
  <el-dialog ref="wf-dialog"
             custom-class="wf-dialog"
             :visible.sync="visible"
             title="人员选择"
             width="60%"
             :before-close="handleClose"
             append-to-body>
    <avue-crud v-if="visible"
               :option="crudOption"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               v-model="form"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionList=$event"
               @current-change="page.currentPage=$event"
               @size-change="page.pageSize=$event"
               @row-click="rowClick"
               @on-load="onLoad">
      <template v-if="checkType == 'radio'"
                #radio="{row}">
        <el-radio v-model="form.radio"
                  :label="row.id"><i></i></el-radio>
      </template>
    </avue-crud>
    <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>
  </el-dialog>
</template>
<script>
import { userList as getList } from "@/api/plugin/workflow/process";

export default {
  props: {
    checkType: {
      type: String,
      default: () => {
        return 'radio'
      }
    }
  },
  watch: {
    checkType: {
      handler(val) {
        if (val == 'radio') {
          this.$set(this.crudOption, 'selection', false)
          this.findObject(this.crudOption.column, 'radio').hide = false
        } else {
          this.$set(this.crudOption, 'selection', true)
          this.findObject(this.crudOption.column, 'radio').hide = true
        }
      },
      immediate: true
    }
  },
  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(",");
    }
  },
  data() {
    return {
      visible: false,
      form: {},
      query: {},
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      data: [],
      crudOption: {
        size: 'mini',
        searchSize: 'mini',
        align: 'center',
        menu: false,
        addBtn: false,
        header: false,
        border: true,
        tip: false,
        reserveSelection: true,
        highlightCurrentRow: true,
        gutter: 5,
        searchMenuSpan: 6,
        selection: true,
        column: [{
          label: '',
          prop: 'radio',
          type: 'radio',
          width: 55,
          hide: true
        }, {
          label: '头像',
          prop: 'avatar',
          type: 'upload',
          width: 90
        }, {
          label: '姓名',
          prop: 'name',
          overHidden: true,
          search: true
        }, {
          label: '部门',
          prop: 'deptName',
          overHidden: true,
          search: true
        }, {
          label: '职位',
          prop: 'postName',
          overHidden: true,
          search: true
        }]
      }
    }
  },
  methods: {
    handleConfirm() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据")
        return
      }
      this.$emit('onConfirm', this.ids, this.names)
    },
    handleClose() {
      if (this.checkType == 'checkbox') this.$refs.crud.toggleSelection()
      this.$set(this, 'selectionList', [])
      this.$set(this, 'form', { radio: '' })
      this.visible = false
    },
    searchReset() {
      this.query = {}
      this.onLoad(this.page)
    },
    searchChange(params, done) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      done()
    },
    selectionClear() {
      this.selectionList = []
      this.$refs.crud.toggleSelection()
    },
    rowClick(row) {
      if (this.checkType == 'radio') {
        this.selectionList = [row]
        this.$set(this.form, 'radio', row.id)
      } else this.$refs.crud.toggleSelection([row])
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data
        this.page.total = data.total
        this.data = data.records
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss">
.wf-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
  .el-dialog__body {
    flex: 1;
    overflow: auto;
  }
}
</style>