图层管理修改

surprise

2023-10-30 5251468b491c8cbc34b92bd2fdf144c08ae38196

 src/views/layer/layerSet.vue

@@ -3,10 +3,7 @@
    <div class="layerBox">
      <div class="layerTitle">
        <div class="tileLeft">
          <div
            class="titleImg"
            @click="editState"
          >
          <div class="titleImg" @click="editState">
            <ArrowLeft />
          </div>
          <div class="titleLable">图层编辑</div>
@@ -22,64 +19,28 @@
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
          ref="treeRef"
          style="font-size: 16px;"
          style="font-size: 16px"
        />
      </div>
    </div>
    <div class="edit_box">
      <div class="edit_box_btn btnstyle">
        <el-button
          type="primary"
          :icon="Plus"
          @click="insertLayerData(1)"
        >新增同级</el-button>
        <el-button
          type="primary"
          :icon="Plus"
          @click="insertLayerData(2)"
        >新增子级</el-button>
        <el-button
          type="primary"
          :icon="Delete"
          class="delbtn"
          @click="delLayer"
        >删除</el-button>
        <el-button
          type="primary"
          :icon="Top"
          @click="move(1)"
        >向上移动</el-button>
        <el-button
          type="primary"
          :icon="Bottom"
          @click="move(2)"
        >向下移动</el-button>
        <el-button type="primary" :icon="Plus" @click="insertLayerData(1)">新增同级</el-button>
        <el-button type="primary" :icon="Plus" @click="insertLayerData(2)">新增子级</el-button>
        <el-button type="primary" :icon="Delete" class="delbtn" @click="delLayer">删除</el-button>
        <el-button type="primary" :icon="Top" @click="move(1)">向上移动</el-button>
        <el-button type="primary" :icon="Bottom" @click="move(2)">向下移动</el-button>
      </div>
      <div class="edit_box_form">
        <el-form
          :model="formInline"
          label-width="120px"
        >
        <el-form :model="formInline" label-width="120px">
          <el-form-item label="图层类型">
            <el-select
              style="width: 100%"
              v-model="formInline.isLayer"
            >
              <el-option
                label="图层组"
                value="0"
              ></el-option>
              <el-option
                label="图层"
                value="1"
              ></el-option>
            <el-select style="width: 100%" v-model="formInline.isLayer">
              <el-option label="图层组" value="0"></el-option>
              <el-option label="图层" value="1"></el-option>
            </el-select>
          </el-form-item>
          <!-- 服务资源-->
          <el-form-item
            v-show="formInline.isLayer == 1"
            label="服务资源"
          >
          <el-form-item v-show="formInline.isLayer == 1" label="服务资源">
            <el-button
              size="small"
              class="serviceButton"
@@ -97,45 +58,24 @@
          </el-form-item>

          <el-form-item label="图层名称">
            <el-input
              v-model="formInline.cnName"
              placeholder="请输入图层名称"
            />
            <el-input v-model="formInline.cnName" placeholder="请输入图层名称" />
          </el-form-item>
          <!-- 服务类别 -->
          <el-form-item
            v-show="formInline.isLayer == 1"
            label="服务类别"
          >
            <el-select
              style="width: 100%"
              v-model="formInline.category"
              :disabled="serviceActive"
            >
          <el-form-item v-show="formInline.isLayer == 1" label="服务类别">
            <el-select style="width: 100%" v-model="formInline.category" :disabled="serviceActive">
              <el-option
                v-for="item in category_type"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="表名称"
            v-show="formInline.category == 2"
          >
            <el-input
              v-model="formInline.tab"
              placeholder="请输入表名称"
              :disabled="serviceActive"
            />
          <el-form-item label="表名称" v-show="formInline.category == 2">
            <el-input v-model="formInline.tab" placeholder="请输入表名称" :disabled="serviceActive" />
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item
            v-show="formInline.isLayer == 1"
            label="数据类型"
          >
          <el-form-item v-show="formInline.isLayer == 1" label="数据类型">
            <el-select
              style="width: 100%"
              v-model="formInline.data"
@@ -147,34 +87,22 @@
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item
            v-show="formInline.isLayer == 1"
            label="服务类型"
          >
            <el-select
              style="width: 100%"
              v-model="formInline.type"
              :disabled="serviceActive"
            >
          <el-form-item v-show="formInline.isLayer == 1" label="服务类型">
            <el-select style="width: 100%" v-model="formInline.type" :disabled="serviceActive">
              <el-option
                v-for="item in dataType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="服务地址"
            v-show="formInline.isLayer == 1"
          >
          <el-form-item label="服务地址" v-show="formInline.isLayer == 1">
            <el-input
              v-model="formInline.serviceUrl"
              placeholder="请输入服务地址"
@@ -183,49 +111,24 @@
          </el-form-item>
          <el-form-item>
            <div class="btnstyle editBtn">
              <el-button
                type="primary"
                @click="onSubmit"
              >确定</el-button>
              <el-button
                class="delbtn"
                @click="updateRest"
              >取消</el-button>
              <el-button type="primary" @click="onSubmit">确定</el-button>
              <el-button class="delbtn" @click="updateRest">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog
      title="新增"
      v-model="dialogVisible"
      width="50%"
    >
    <el-dialog title="新增" v-model="dialogVisible" width="50%">
      <div style="width: 100%; max-height: 63vh; overflow-y: auto">
        <el-form
          :model="insertData"
          label-width="120px"
        >
        <el-form :model="insertData" label-width="120px">
          <el-form-item label="图层类型">
            <el-select
              style="width: 100%"
              v-model="insertData.isLayer"
            >
              <el-option
                label="图层组"
                value="0"
              ></el-option>
              <el-option
                label="图层"
                value="1"
              ></el-option>
            <el-select style="width: 100%" v-model="insertData.isLayer">
              <el-option label="图层组" value="0"></el-option>
              <el-option label="图层" value="1"></el-option>
            </el-select>
          </el-form-item>
          <!-- 服务资源-->
          <el-form-item
            v-show="insertData.isLayer == 1"
            label="服务资源"
          >
          <el-form-item v-show="insertData.isLayer == 1" label="服务资源">
            <el-button
              size="small"
              class="serviceButton"
@@ -243,16 +146,10 @@
          </el-form-item>

          <el-form-item label="图层名称">
            <el-input
              v-model="insertData.cnName"
              placeholder="请输入图层名称"
            />
            <el-input v-model="insertData.cnName" placeholder="请输入图层名称" />
          </el-form-item>
          <!-- 服务类别 -->
          <el-form-item
            v-show="insertData.isLayer == 1"
            label="服务类别"
          >
          <el-form-item v-show="insertData.isLayer == 1" label="服务类别">
            <el-select
              style="width: 100%"
              v-model="insertData.category"
@@ -263,14 +160,10 @@
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="表名称"
            v-show="insertData.category == 2"
          >
          <el-form-item label="表名称" v-show="insertData.category == 2">
            <el-input
              v-model="insertData.tab"
              placeholder="请输入表名称"
@@ -278,10 +171,7 @@
            />
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item
            v-show="insertData.isLayer == 1"
            label="数据类型"
          >
          <el-form-item v-show="insertData.isLayer == 1" label="数据类型">
            <el-select
              style="width: 100%"
              v-model="insertData.data"
@@ -293,15 +183,11 @@
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 数据类型 -->
          <el-form-item
            v-show="insertData.isLayer == 1"
            label="服务类型"
          >
          <el-form-item v-show="insertData.isLayer == 1" label="服务类型">
            <el-select
              style="width: 100%"
              v-model="insertData.type"
@@ -312,15 +198,11 @@
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="服务地址"
            v-show="insertData.isLayer == 1"
          >
          <el-form-item label="服务地址" v-show="insertData.isLayer == 1">
            <el-input
              v-model="insertData.serviceUrl"
              placeholder="请输入服务地址"
@@ -329,111 +211,41 @@
          </el-form-item>
          <el-form-item>
            <div class="btnstyle editBtn">
              <el-button
                type="primary"
                size="small"
                @click="added()"
              >确定</el-button>
              <el-button
                class="delbtn"
                type="info"
                size="small"
                @click="submitCancel()"
              >取消</el-button>
              <el-button type="primary" size="small" @click="added()">确定</el-button>
              <el-button class="delbtn" type="info" size="small" @click="submitCancel()">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog
      v-model="dialogService"
      width="50%"
      :show-close="false"
    >
    <el-dialog v-model="dialogService" width="50%" :show-close="false">
      <div style="width: 100%; max-height: 63vh; overflow-y: auto">
        <div
          style="display: flex; justify-content: space-between"
          class="tableForm"
        >
        <div style="display: flex; justify-content: space-between" class="tableForm">
          <div>
            <el-input
              size="small"
              v-model="listData.name"
            >
            <el-input size="small" v-model="listData.name">
              <template #suffix>
                <el-icon
                  class="el-input__icon el-icon-search"
                  @click="setServiceQuery"
                >
                <el-icon class="el-input__icon el-icon-search" @click="setServiceQuery">
                  <search />
                </el-icon>
              </template>
            </el-input>
          </div>
          <div class="btnstyle">
            <el-button
              type="info"
              size="small"
              @click="setServiceRest"
            >
              重置
            </el-button>
            <el-button type="info" size="small" @click="setServiceRest">重置</el-button>

            <el-button
              type="primary"
              size="small"
              @click="setServiceConfirm"
            >
              确认
            </el-button>
            <el-button
              type="info"
              size="small"
              @click="setServiceCanel"
              class="delbtn"
            >
              取消
            </el-button>
            <el-button type="primary" size="small" @click="setServiceConfirm">确认</el-button>
            <el-button type="info" size="small" @click="setServiceCanel" class="delbtn">取消</el-button>
          </div>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          @select="selectChange"
        >
          <el-table-column
            type="selection"
            width="55"
          > </el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="70px"
          />
          <el-table-column
            align="center"
            prop="cnName"
            label="资源名称"
          />
        <el-table ref="multipleTable" :data="tableData" @select="selectChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" label="序号" width="70px" />
          <el-table-column align="center" prop="cnName" label="资源名称" />

          <el-table-column
            align="center"
            prop="category"
            label="服务类型"
            :formatter="setResCategory"
          />
          <el-table-column
            align="center"
            prop="type"
            label="数据类型"
            :formatter="setResType"
          />
          <el-table-column align="center" prop="category" label="服务类型" :formatter="setResCategory" />
          <el-table-column align="center" prop="type" label="数据类型" :formatter="setResType" />
        </el-table>
        <div
          class="pagination_box"
          style="margin-top: 15px"
        >
        <div class="pagination_box" style="margin-top: 15px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
@@ -442,8 +254,7 @@
            :page-size="listData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listData.count"
          >
          </el-pagination>
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
@@ -466,7 +277,7 @@
import { res_selectByPageAndCount } from "@/api/api";
import { Search } from "@element-plus/icons-vue";
const stretchValue = ref("");
const emits = defineEmits(["SETstate", "addlayer", "delLayer"]);
const emits = defineEmits(["SETstate", "addlayer", "delLayer","onSubmit"]);
//defineProps 来接收组件的传值
const defineProp = defineProps({
  layerTree: Array,
@@ -653,7 +464,8 @@
      multipleSelection.value.proxy.indexOf("{token}") > -1
    ) {
      serviceUrl =
        BASE_URL + multipleSelection.value.proxy.replaceAll("{token}", token);
        config.BASE_URL +
        multipleSelection.value.proxy.replaceAll("{token}", token);
    } else {
      serviceUrl = multipleSelection.value.url;
    }
@@ -723,7 +535,9 @@
    formInline.value = res;
    formInline.value.isLayer = res.isLayer.toString();

    formInline.value.status = res.status.toString();
    if (formInline.value.status) {
      formInline.value.status = res.status.toString();
    }
  }
  dialogVisible.value = false;
  // this.formInline.isProject = res.isProject.toString();
@@ -793,9 +607,7 @@
  data: Tree,
  checked: boolean,
  indeterminate: boolean
) => {
  console.log(data, checked, indeterminate);
};
) => {};
const onSubmit = () => {
  if (!checkedStaste) {
    return ElMessage.warning("请先点击选中相应图层");
@@ -807,10 +619,7 @@
  copyNode.previousSibling = { ...node.previousSibling };
  copyNode.nextSibling = { ...node.nextSibling };
  copyNode.parent = { ...node.parent };

  // console.log(1111111111111, copyNode.previousSibling);
  // console.log(2222222222222, copyNode.nextSibling);
  // console.log(3333333333333, copyNode.parent);
  emits("onSubmit",true);
  if (Object.keys(copyNode.previousSibling).length !== 0) {
    // 删除原先的node
    treeRef.value.remove(node.data);
@@ -834,6 +643,8 @@

    return;
  }
 

  ElMessage({
    message: "修改成功",
    type: "success",
@@ -843,8 +654,6 @@

// 处理节点点击事件
function handleNodeClick(data: any) {
  console.log(data);

  if (data.id === selectedNodeId.value) {
    // 如果当前节点已经选中，则取消选中
    selectedNodeId.value = null;
@@ -857,7 +666,8 @@
    backUpData.value = JSON.stringify(data);
    // this.currentData = JSON.stringify(result)
    formInline.value = JSON.parse(backUpData.value);
    formInline.value.isLayer = data.isLayer.toString();
    ;
    formInline.value.isLayer = parseInt(data.isLayer) == 0 ? "0" : "1";
    if (data.resid && data.resid > 0) {
      serviceActive.value = true;
    } else {
@@ -869,7 +679,7 @@
    } else if (serviceActive.value) {
      var token = getToken();
      if (data.url.indexOf("{token}") > -1) {
        url = BASE_URL + data.url.replaceAll("{token}", token);
        url = config.BASE_URL + data.url.replaceAll("{token}", token);
      } else {
        url = data.url;
      }
@@ -884,7 +694,7 @@
    id += Math.floor(Math.random() * 10);
  }
  var addObj = {
    isLayer: insertData.value.isLayer.toString(),
    isLayer: parseInt(insertData.value.isLayer),
    id: id,
    cnName: insertData.value.cnName,
    url: insertData.value.serviceUrl,
@@ -894,7 +704,6 @@
    tab: insertData.value.tab, //Geoserver 名称，
    category: insertData.value.category, //服务类别 Geoserver , 1 GisServer 2 GeoServer 3数简
  };

  if (addlocation == 1) {
    //新增同级
    treeRef.value.insertAfter(addObj, treeRef.value.getNode(selectedObj.value));
@@ -937,6 +746,7 @@
//移动
const move = (type) => {
  // let node = treeRef.value.getCurrentNode();
  
  let node = treeRef.value.getNode(selectedObj.value);
  let data = selectedObj.value;
  // 将变动之前的node备份