Smart_platform_ui/src/components/costBreakdown/costBreakdown.vue

<template>
  <span class="select-component" style="display:inline-flex;width: 100%;">
    <el-select
      v-model="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.cname"
        :value="item.id"
      />
    </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="70%">
    <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"/>
            </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"
                     :before-close="beforeClose"
                     @search-change="searchChange"
                     @search-reset="searchReset"
                     @refresh-change="refreshChange"
                     @selection-change="selectionChange"
                     @on-load="onLoad"
                     @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 "./config/feeList.json";
  import { getDeptLazyTree, customerList } from "@/api/basicData/basicFeesDesc";

  export default {
    name: "costBreakdown",
    props: {
      disabled: Boolean,
      value: String,
      configuration: Object,
    },
    model: {
      prop: 'value',
      event: 'returnBack'
    },
    data() {
      return {
        dialogFull: false,
        form: {},
        dicData: [],
        dialogVisible: false,
        value: '',
        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
        },
      }
    },
    created() {
      // this.option.searchShow = this.configuration.searchShow ? this.configuration.searchShow : false
      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 selectValue ;
        optionList.map(item =>{
          if(item.id === this.value){
            selectValue = {
              id : item.id,
              cname:item.cname,
              ename:item.ename,
              unitno : item.unitno,
              fcyno:item.fcyno
            }
          }
        })
        this.$emit('selectValue',selectValue)
      },
      //刷新触发
      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({id: this.selection[item].id, cname: this.selection[item].cname})
            value.push(this.selection[item].id)
          }
          this.value = value
        } else {
          this.dicData.push({id: this.selection[0].id, cname: this.selection[0].cname})
          this.value = this.selection[0].id
        }
        let selectValue = {
          id : this.selection[0].id,
          cname : this.selection[0].cname,
          unitno :  this.selection[0].unitno,
          fcyno: this.selection[0].fcyno,

        } ;
        this.$emit('selectValue',selectValue)
        this.selection = []
        this.$emit('returnBack', this.value)
        this.dialogVisible = false
        this.$emit('receiveList',this.dicData)
      },
      //选中触发
      selectionChange(selection) {
        this.selection = selection
      },
      nodeClick(data) {
        this.treeDeptId = data.id;
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      //查询全部
      initData() {
        customerList().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.page.currentPage = 1;
        this.onLoad(this.page, params);
        done()
      },
      //搜索重置按钮触发
      searchReset() {
        this.treeDeptId = '';
        this.onLoad(this.page);
      },
      onLoad(page, params = {parentId: 0}) {
        let queryParams = Object.assign({}, params, {
          size: page.pageSize,
          current: page.currentPage,
          feesTypeId: this.treeDeptId
        })
        customerList(queryParams).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;
          }
        })
      },
      //树桩列点击展开触发
      treeLoad(tree, treeNode, resolve) {
        const parentId = tree.id;
        customerList({parentId: parentId}).then(res => {
          resolve(res.data.data.records);
        });
      },
      // 远程模糊查找
      remoteMethod(query) {
        if (query) {
          this.loading = true;
          this.queryParams = {
            size: 10,
            current: 1,
            cname: query
          }
          customerList(this.queryParams).then(res => {
            this.dicData = res.data.data.records
            this.loading = false;
          });
        } else {
          this.loading = true
          this.queryParams = {
            size: 10,
            current: 1
          }
          customerList(this.queryParams).then(res => {
            this.dicData = []
            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.id] ? '': obj[next.id] = true && current.push(next)
          return current
        }, [])
      },
    }
  };
</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>