Smart_platform_ui/src/components/selectComponent/userSelect.vue

<template>
  <span class="select-component" style="display:inline-flex;width: 100%;">
    <el-select
      v-model.trim="value"
      size="small"
      :placeholder="configuration.placeholder"
      style="border-right: none;width: 100%"
      :disabled="disabled?disabled:false"
      :multiple="configuration.multiple?configuration.multiple:false"
      :clearable="configuration.clearable?configuration.clearable:false"
      :collapse-tags="configuration.collapseTags?configuration.collapseTags:false"
      filterable
      remote
      @change="changeName()"
      :remote-method="remoteMethod"
    >
      <el-option
        v-for="item in configuration.dicData.length !== 0?dicData.length !== 0?dicData:configuration.dicData:dicData"
        :key="item.id"
        :label="item.realName"
        :value="item.realName"
        @click.native="getRow(item)"
      />
    </el-select>
    <el-button slot="append" icon="el-icon-search" size="mini" @click="dialogVisible = true"
               :disabled="disabled?disabled:false"></el-button>
  <el-dialog
    v-dialogdrag
    title="用户"
    :fullscreen="dialogFull"
    :visible.sync="dialogVisible"
    class="el-dialogDeep"
    :close-on-click-modal="false"
    append-to-body
    width="80%">
    <template slot="title">
      <span class="el-dialog__title">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
        用户
      </span>
      <div style="float: right" class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
        <i class="el-icon-full-screen"></i>
      </div>
    </template>
    <el-row style="height: 0">
      <el-col :span="5">
        <div class="box">
          <el-scrollbar>
            <basic-container>
              <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" style="height: 40vh;"/>
            </basic-container>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="19">
        <basic-container>
          <avue-crud :option="option"
                     :data="dataList"
                     ref="crud"
                     v-model="form"
                     :page.sync="page"
                     :table-loading="loadings"
                     :before-close="beforeClose"
                     @search-change="searchChange"
                     @search-reset="searchReset"
                     @refresh-change="refreshChange"
                     @selection-change="selectionChange"
                     @on-load="onLoad"
                     @saveColumn="saveColumn"
                     @tree-load="treeLoad">
          </avue-crud>
        </basic-container>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmSelection"
                 :disabled="configuration.multipleChoices === true?false:selection.length === 1?false:true">确 定</el-button>
    </span>
  </el-dialog>
  </span>
</template>

<script>
  import option from "./configuration/userOption.json";
  import { getList } from "@/api/system/user";
  import { getDeptLazyTree} from "@/api/system/dept";

  export default {
    name: "index",
    props: {
      disabled: Boolean,
      value: String,
      configuration: Object,
    },
    model: {
      prop: 'value',
      event: 'returnBack'
    },
    data() {
      return {
        dialogFull: false,
        loadings:false,
        form: {},
        dicData: [],
        dialogVisible: false,
        value: null,
        option: option,
        parentId: 0,
        dataList: [],
        selection: [],
        treeOption: {
          nodeKey: 'id',
          lazy: true,
          treeLoad: function (node, resolve) {
            const parentId = (node.level === 0) ? 0 : node.data.id;
            getDeptLazyTree(parentId).then(res => {
              resolve(res.data.data.map(item => {
                return {
                  ...item,
                  leaf: !item.hasChildren
                }
              }))
            });
          },
          addBtn: false,
          menu: false,
          size: 'small',
          props: {
            labelText: '标题',
            label: 'title',
            value: 'value',
            children: 'children'
          }
        },
        page: {
          pageSize: 10,
          pagerCount: 5,
          total: 0,
        },
        // 远程模糊查找loading
        loading: false,
        queryParams: {
          size: 10,
          current: 1
        },
      }
    },
    async created() {
      this.remoteMethod()
    },
    methods: {
      changeName(){
        this.$emit('returnBack', this.value)
        let optionList = this.configuration.dicData.length !== 0?this.dicData.length !== 0?this.dicData:this.configuration.dicData:this.dicData;
        let value ;
        optionList.map(item =>{
          if(item.realName === this.value){
            value = {
              id : item.id,
              deptId : item.deptId
            }
          }
        })
        this.$emit('value',value)
      },
      getRow(row) {
        this.$emit('getRow', row)
      },
      //刷新触发
      refreshChange() {
        this.page = {
          pageSize: 10,
          pagerCount: 5,
          total: 0,
        }
      },
      //确认导出触发
      confirmSelection() {
        this.dicData = []
        if (this.configuration.multipleChoices === true) {
          let value = []
          for (let item in this.selection) {
            this.dicData.push({realName: this.selection[item].realName})
            value.push(this.selection[item].realName)
          }
          this.value = value
        } else {
          this.dicData.push({realName: this.selection[0].realName})
          this.value = this.selection[0].realName
        }
        this.$emit('returnRow', this.selection)
        this.$emit('returnBack', this.value)
        this.dialogVisible = false
        this.$emit('receiveList',this.dicData)
        let value = {
          id : this.selection[0].id,
          deptId : this.selection[0].deptId
        } ;
        this.$emit('value',value)
        this.selection = []
      },
      //选中触发
      selectionChange(selection) {
        this.selection = selection
      },
      nodeClick(data) {
        this.treeDeptId = data.id;
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      //查询全部
      initData() {
        getList().then(res => {
          const column = this.findObject(this.option.column, "parentId");
          column.dicData = res.data.data.records;
        });
      },
      //新增子项触发
      handleAdd(row) {
        this.parentId = row.id;
        const column = this.findObject(this.option.column, "parentId");
        column.value = row.id;
        column.addDisabled = true;
        this.$refs.crud.rowAdd();
      },
      //点击新增时触发
      beforeClose(done) {
        this.parentId = "";
        const column = this.findObject(this.option.column, "parentId");
        column.value = "";
        column.addDisabled = false;
        done();
      },
      //点击搜索按钮触发
      searchChange(params, done) {
        this.treeDeptId = '';
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done()
      },
      //搜索重置按钮触发
      searchReset() {
        this.treeDeptId = '';
        this.onLoad(this.page);
      },
      onLoad(page, params = {parentId: 0}) {
        this.loadings = true;
        getList(page.currentPage, page.pageSize, params,this.treeDeptId).then(res => {
          this.dataList = res.data.data.records
          this.page.total = res.data.data.total
          if (this.page.total) {
            this.option.height = window.innerHeight - 500;
          } else {
            this.option.height = window.innerHeight - 200;
          }
        }).finally(()=>{
          this.loadings = false
        })
      },
      //树桩列点击展开触发
      treeLoad(tree, treeNode, resolve) {
        const deptId = tree.id;
        this.loadings = true;
        getList(1, 10,deptId).then(res => {
          resolve(res.data.data.records);
        }).finally(()=>{
          this.loadings = false
        });
      },
      // 远程模糊查找
      remoteMethod(query) {
        if (query) {
          this.loading = true;
          let params = {
            realName: query
          }
          getList(1, 10, params).then(res => {
            this.dicData = res.data.data.records
            this.loading = false;
          });
        } else {
          this.loading = true
          this.queryParams = {
            size: 10,
            current: 1
          }
          getList(1, 10).then(res => {
            this.dicData = []
            this.configuration.dicData.forEach((e,index) => {
              res.data.data.records.forEach(item => {
                if (e.realName == item.realName) {
                  this.configuration.dicData.splice(index, 1)
                }
              })
            })
            this.configuration.dicData = this.configuration.dicData.concat(res.data.data.records)
            // this.configuration.dicData = res.data.data.records
            this.removeRepeat()
            this.loading = false;
          });
        }
      },
      // 去重
      removeRepeat() {
        let obj = []
        this.configuration.dicData = this.configuration.dicData.reduce((current,next) => {
          obj[next.realName] ? '': obj[next.realName] = true && current.push(next)
          return current
        }, [])
      },
      //列保存触发
      async saveColumn() {
        const inSave = await this.saveColumnData(
          this.getColumnName(49),
          this.option
        );
        if (inSave) {
          this.$message.success("保存成功");
          //关闭窗口
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      },
    }
  };
</script>

<style scoped lang="scss">
  .el-dialogDeep {
    ::v-deep .el-dialog {
      .el-dialog__body, .el-dialog__footer {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
      }
    }
  }
</style>