1

WX

2023-07-13 95db84d44298bf695b843d7555d671a41595c814

 src/views/layer/layerManage.vue

@@ -19,7 +19,8 @@
        :data="menuOption"
        :expand-on-click-node="false"
        show-checkbox
        @check-change="handleCheckChange"
        @check="handleCheckChange"
        ref="estreeRef"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
@@ -38,10 +39,10 @@
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="clickdropdown(1)"
                  <el-dropdown-item @click.native="clickdropdown(1, data)"
                    >详细</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="clickdropdown(2)"
                  <el-dropdown-item @click.native="clickdropdown(2, data)"
                    >属性</el-dropdown-item
                  >
                </el-dropdown-menu>
@@ -53,7 +54,11 @@
    </div>
  </div>
  <layer-set v-show="layerSetIsshow" @SETstate="SETstate"></layer-set>
  <attribute-list></attribute-list>
  <attribute-list
    v-show="layerAttributeIsshow"
    :layerData="layerObjData"
    @spatialClose="setSpatialClose"
  ></attribute-list>
</template>

<script lang="ts" setup>
@@ -67,8 +72,11 @@
} from "vue";
import layerSet from "./layerSet";
import attributeList from "./attributeList";
import { useStore } from "vuex"; // 引入useStore 方法
const store = useStore(); // 该方法用于返回store 实例
const stretchValue = ref("");

let estreeRef = ref();
const stretchOptions = [
  {
    value: "Option1",
@@ -97,11 +105,27 @@
    name: "测试",
    isShow: false,
    checkedAll: false,
    type: 1,
    children: [
      {
        layerState: false,
        name: "图层名称",
        layerUrl: "",
        type: 2,
      },
      {
        layerState: false,
        name: "图层菜单",
        layerUrl: "",
        type: 1,
        children: [
          {
            layerState: false,
            name: "图层名称11",
            layerUrl: "",
            type: 2,
          },
        ],
      },
    ],
  },
@@ -110,13 +134,16 @@
    isShow: false,
    checkedAll: true,
    layerState: false,
    type: 1,
  },
]);
const layerSetIsshow = ref(false);
const layerAttributeIsshow = ref(false);
const props = {
  label: "name",
  children: "children",
};
const layerObjData = ref(null);
// 当前选中的节点 id
const selectedNodeId = ref(null as any); //做类型断言处理
const emits = defineEmits(["setCloseLayer"]);
@@ -153,15 +180,21 @@
    console.log(selectedNodeId.value, "当前选中的节点");
  }
}
const handleCheckChange = (
  data: Tree,
  checked: boolean,
  indeterminate: boolean
) => {
  console.log(data, checked, indeterminate);
const handleCheckChange = (data, checked) => {
  let son = estreeRef.value.getCheckedNodes();
  console.log(son); //选中的数据

  store.commit("SET_CHECKLAYER", son);
};
const clickdropdown = (res) => {
  console.log(res);
const clickdropdown = (res, e) => {
  if (res == 2) {
    layerAttributeIsshow.value = true;
    layerObjData.value = e;
  }
  console.log(res, e);
};
const setSpatialClose = (res) => {
  layerAttributeIsshow.value = res;
};
</script>