vue element tree树形

客官°小女子只卖身不卖艺 2022-12-24 04:53 107阅读 0赞

<template>
      <div class="app-container">
        <el-card  class="filter-container"  shadow="never">
          <el-tree
            :data="servcieCategoryData"
            style="margin-bottom: 20px"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            :check-strictly="isCheck"
            highlight-current
            :default-checked-keys="categoryIdList"
            :props="{ label: getServcieCategoryName }"
          >
            
            
          </el-tree>
          <el-button
            style="margin-left: 50px"
            :loading="loading"
            type="primary"
            @click="saveData()"
            >保存</el-button
          >
        </el-card>
      </div>
    </template>
    
    <script>
    import request from "@/utils/request";
    
    export default {
      components: {},
      props: {
        serviceProviderId: {
          type: Number,
          default: null,
        },
      },
      filters: {},
      data() {
        var validatePass = (rule, value, callback) => {
          callback();
        };
        return {
          loading: false,
          isCheck: true,
          getServcieCategoryDataUrl: "/serviceCategory/list/withChildren",
          servcieCategoryData: [],
          listCategoryIdByProviderIdUrl:
            "/service/serviceProviderCategory/listCategoryIdByProviderId",
          categoryIdList: [],
          saveProviderCategoryIdsUrl:
            "/service/serviceProviderCategory/saveProviderCategoryIds",
        };
      },
      created() {
        this.getServcieCategoryData();
    
        this.getCategoryIdList();
      },
      methods: {
        getServcieCategoryName(data, node) {
          return data.name;
        },
        // 获取服务分类
        getServcieCategoryData() {
          var _this = this;
          request({
            url: _this.getServcieCategoryDataUrl,
            method: "GET",
          })
            .then((response) => {
              const { data } = response;
              _this.servcieCategoryData = data;
              console.log(data);
            })
            .catch((error) => {
              console.log(error);
            });
        },
        // 获取服务商分配的服务分类
        getCategoryIdList() {
          var _this = this;
    
          request({
            url:
              _this.listCategoryIdByProviderIdUrl + "/" + _this.serviceProviderId,
            method: "GET",
          })
            .then((response) => {
              const { data } = response;
              _this.categoryIdList = data;
                
              _this.$refs.tree.setCheckedKeys(_this.categoryIdList);
            
              console.log(data);
    
            })
            .catch((error) => {
              console.log(error);
            });
        },
        saveData() {
          var _this = this;
          _this.loading = true;
          // 当子节点未全部选中时，父节点为半选中状态 将选中的节点数组和半选中的节点数组组合
          var newCategoryIdList = this.$refs.tree
            .getCheckedKeys();
            // .concat(this.$refs.tree.getHalfCheckedKeys());
          console.log(newCategoryIdList);
    
          var data = {
            serviceProviderId: _this.serviceProviderId,
            categoryIds: newCategoryIdList,
          };
    
          request({
            url: _this.saveProviderCategoryIdsUrl,
            method: "POST",
            data: data,
          })
            .then((response) => {
              const { data } = response;
              _this.loading = false;
              console.log(data);
              _this.$message({
                message: "保存成功",
                type: "success",
              });
            })
            .catch((error) => {
              _this.loading = false;
              console.log(error);
            });
        },
      },
    };
    </script>