Smart_platform_ui/src/components/mainProject/index.vue

<template>
  <div>
    <el-row>
      <el-col :span="5" >
        <div>
          <el-scrollbar>
            <basic-container>
              <avue-tree :option="serviceTreeOption"  @node-click="serviceNodeClick"/>
            </basic-container>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="19">
        <basic-container>
          <avue-crud ref="serviceCrud"
                     :page.sync="servicePage"
                     :search.sync="serviceSearch"
                     :option="serviceOption"
                     :table-loading="serviceLoading"
                     :data="serviceData"
                     @refresh-change="serviceRefreshChange"
                     @selection-change="serviceSelectionChange"
                     @search-change="serviceSearchChange"
                     @on-load="serviceOnLoad">
          </avue-crud>
        </basic-container>
        <div style="float: right;margin: 8px">
          <el-button type="primary" size="small" @click="serviceConfirm()" :disabled="this.serviceSelectList.length == 0">导 入</el-button>
          <el-button size="small" @click="$emit('chose')">取 消</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import serviceOption from "../../views/workManagement/main-items/configuration/serviceDialogList.json";
import {getServiceProjectList,getServiceTypeTree,} from "@/api/workManagement/serviceProject";

export default {
  data() {
    return {
      serviceTreeOption: {
        nodeKey: 'id',
        lazy: true,
        treeLoad: function(node, resolve) {
          const parentId = node.level === 0 ? 0 : node.data.id;
          getServiceTypeTree(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'
        }
      },
      serviceOption:serviceOption,
      serviceLoading:false,
      serviceData:[],
      servicePage:{
        currentPage: 1,
        total: 0,
        pageSize: 10
      },
      serviceSearch:{},
      serviceTreeDeptId:"",
      serviceSelectList:[],
    };
  },
  props: {
    chose:{
      type: Function
    }
  },
  methods: {
    //服务窗口事件
    serviceNodeClick(data) {
      this.serviceTreeDeptId = data.id;
      this.serviceOnLoad(this.servicePage);
    },
    serviceRefreshChange(){
      this.serviceOnLoad(this.servicePage, this.serviceSearch)
    },
    serviceSearchChange(params, done){
      this.serviceOnLoad(this.servicePage, params)
      done();
    },
    serviceSelectionChange(row){
      this.serviceSelectList = row;
    },
    serviceOnLoad(page, params = {}) {
      this.serviceLoading = true;
      getServiceProjectList(page.currentPage, page.pageSize, params, this.serviceTreeDeptId).then(res => {
        this.serviceData = res.data.data.records
        this.servicePage.total = res.data.data.total
        this.serviceLoading = false
      })
    },
    serviceConfirm(){
      if(this.serviceSelectList.length != 0){
        this.$emit("serviceConfirm",this.serviceSelectList)
      }
      this.serviceSelectList = []
    },
  },
};
</script>

<style lang="scss" scoped>

</style>