页面修改

surprise

2023-12-19 fd73e99196e00c82885c83ee2f1253c2fc343756

 src/views/datamanage/layerManagement.vue

@@ -7,39 +7,22 @@
    <el-divider />
    <div class="mainBox">

      <div
        class="cataLogContent leftTree subpage_Div"
        style="border: 1px solid #dcdfe6;"
      >
      <div class="cataLogContent leftTree subpage_Div" style="border: 1px solid #dcdfe6;">
        <div>
          <el-input
            v-model="filterText"
            :placeholder="$t('dataManage.layerObj.prompt1')"
            suffix-icon="el-icon-search"
          ></el-input>
          <el-input v-model="filterText" :placeholder="$t('dataManage.layerObj.prompt1')"
            suffix-icon="el-icon-search"></el-input>

          <el-tree
            ref="tree"
            :props="defaultProps"
            node-key="id"
            accordion
            :data="treeData"
            :default-expanded-keys="expandData"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
          >
          <el-tree ref="tree" :props="defaultProps" node-key="id" accordion :data="treeData"
            :default-expanded-keys="expandData" @node-click="handleNodeClick" :filter-node-method="filterNode">
          </el-tree>
        </div>
      </div>
      <div class="cataLog_rightContent right subpage_Div">
        <div
          class="inquire"
          style="
        <div class="inquire" style="
            align-items: center;
            display: flex;
            justify-content: space-between;
          "
        >
          ">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">{{
              
@@ -50,48 +33,28 @@
              <el-form :inline="true">
                <el-form-item v-show="menuStatus.insert">
                  <!-- 同级节点添加 -->
                  <el-button
                    type="success"
                    size="small"
                    icon="el-icon-plus"
                    @click="insertLayerData(1)"
                  >{{ $t("shuJuGuanLi.butten.NewPeer") }}</el-button>
                  <el-button type="success" size="small" icon="el-icon-plus" @click="insertLayerData(1)">{{
                    $t("shuJuGuanLi.butten.NewPeer") }}</el-button>
                </el-form-item>
                <!-- 子级节点添加 -->
                <el-form-item v-show="menuStatus.insert">
                  <el-button
                    type="success"
                    size="small"
                    icon="el-icon-plus"
                    @click="insertLayerData(2)"
                  >{{ $t("shuJuGuanLi.butten.AddChild") }}</el-button>
                <el-form-item v-show="menuStatus.insert" v-if="treeData.length > 0">
                  <el-button type="success" size="small" icon="el-icon-plus" @click="insertLayerData(2)">{{
                    $t("shuJuGuanLi.butten.AddChild") }}</el-button>
                </el-form-item>
                <!-- 删除 -->
                <el-form-item v-show="menuStatus.delete">
                  <el-button
                    icon="el-icon-delete"
                    type="danger"
                    size="small"
                    @click="setDeleteNode( )"
                  >{{ $t("shuJuGuanLi.butten.Delete") }}</el-button>
                  <el-button icon="el-icon-delete" type="danger" size="small" @click="setDeleteNode()">{{
                    $t("shuJuGuanLi.butten.Delete") }}</el-button>
                </el-form-item>
                <!-- 向上移动 -->
                <el-form-item v-show="menuStatus.delete">
                  <el-button
                    type="info"
                    icon="el-icon-top"
                    size="small"
                    @click="setEditNode(1)"
                  >{{ $t("shuJuGuanLi.butten.MoveUp") }}</el-button>
                  <el-button type="info" icon="el-icon-top" size="small" @click="setEditNode(1)">{{
                    $t("shuJuGuanLi.butten.MoveUp") }}</el-button>
                </el-form-item>
                <!-- 向下移动 -->
                <el-form-item v-show="menuStatus.delete">
                  <el-button
                    type="info"
                    icon="el-icon-bottom"
                    size="small"
                    @click="setEditNode(2)"
                  >{{ $t("shuJuGuanLi.butten.MoveDown") }}</el-button>
                  <el-button type="info" icon="el-icon-bottom" size="small" @click="setEditNode(2)">{{
                    $t("shuJuGuanLi.butten.MoveDown") }}</el-button>
                </el-form-item>
              </el-form>
            </div>
@@ -100,293 +63,131 @@
        </div>
        <div class="dividing-line"></div>
        <div style="padding: 10px;">
          <el-form
            :model="formInline"
            class="demo-form-inline"
            label-width="150px"
          >
          <el-form :model="formInline" class="demo-form-inline" label-width="150px">
            <!-- 菜单名称 -->
            <el-form-item :label="$t('dataManage.layerObj.layerName')">
              <el-input
                :placeholder="$t('dataManage.layerObj.prompt1')"
                style="width: 60%;"
                v-model="formInline.cnName"
               
              ></el-input>
              <el-input :placeholder="$t('dataManage.layerObj.prompt1')" style="width: 60%;"
                v-model="formInline.cnName"></el-input>
            </el-form-item>
            <!-- 菜单类型 -->
            <el-form-item :label="$t('dataManage.layerObj.layerType')">
              <el-select
                :placeholder="$t('dataManage.layerObj.prompt2')"
                clearable
                style="width: 60%;"
                v-model="formInline.type"
               
              >
                <el-option
                  label="目录"
                  value='1'
                ></el-option>
                <el-option
                  label="图层"
                  value='2'
                ></el-option>
              <el-select :placeholder="$t('dataManage.layerObj.prompt2')" clearable style="width: 60%;"
                v-model="formInline.type">
                <el-option label="目录" value='1'></el-option>
                <el-option label="图层" value='2'></el-option>
              </el-select>
            </el-form-item>
            <!-- 服务类型 -->
            <el-form-item
              v-show="formInline.type == 2"
              :label="$t('dataManage.layerObj.serviceType')"
            >
              <el-select
                clearable
                style="width: 60%;"
                v-model="formInline.serveType"
                :placeholder="$t('dataManage.layerObj.prompt3')"
              >
                <el-option
                  v-for="item in serveType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
            <el-form-item v-show="formInline.type == 2" :label="$t('dataManage.layerObj.serviceType')">
              <el-select clearable style="width: 60%;" v-model="formInline.serveType"
                :placeholder="$t('dataManage.layerObj.prompt3')">
                <el-option v-for="item in serveType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 服务地址 -->
            <el-form-item
              v-show="formInline.type == 2"
              :label="$t('dataManage.layerObj.serviceAddress')"
            >
              <el-input
                :placeholder="$t('dataManage.layerObj.prompt4')"
                style="width: 60%;"
                v-model="formInline.url"
              ></el-input>
            <el-form-item v-show="formInline.type == 2" :label="$t('dataManage.layerObj.serviceAddress')">
              <el-input :placeholder="$t('dataManage.layerObj.prompt4')" style="width: 60%;"
                v-model="formInline.url"></el-input>
            </el-form-item>
            <!-- 英文表名 -->
            <el-form-item
              v-show="formInline.type == 2 && formInline.serveType =='WMS'"
              :label="$t('dataManage.layerObj.enTableName')"
            >
              <el-input
                :placeholder="$t('dataManage.layerObj.prompt6')"
                style="width: 60%;"
                v-model="formInline.enName"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item v-show="formInline.type == 2 && formInline.serveType == 'WMS'"
              :label="$t('dataManage.layerObj.enTableName')">
              <el-input :placeholder="$t('dataManage.layerObj.prompt6')" style="width: 60%;"
                v-model="formInline.enName"></el-input>
            </el-form-item> -->
            <!-- 数据类型 -->
            <el-form-item :label="$t('dataManage.layerObj.dataType')">
              <el-select
                clearable
                style="width: 60%;"
                v-model="formInline.dataType"
                :placeholder="$t('dataManage.layerObj.prompt8')"
              >
                <el-option
                  v-for="item in dataType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
            <el-form-item v-show="formInline.type==2" :label="$t('dataManage.layerObj.dataType')">
              <el-select clearable style="width: 60%;" v-model="formInline.dataType"
                :placeholder="$t('dataManage.layerObj.prompt8')">
                <el-option v-for="item in dataType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 是否显示 -->
            <el-form-item
              v-show="formInline.type == 2"
              :label="$t('dataManage.layerObj.displayOrNot')"
            >
              <el-radio
                v-model="formInline.isShow"
                label="0"
              > {{$t('dataManage.layerObj.isfalse')}}</el-radio>
              <el-radio
                v-model="formInline.isShow"
                label="1"
              >{{$t('dataManage.layerObj.istrue')}}</el-radio>
            <el-form-item v-show="formInline.type == 2" :label="$t('dataManage.layerObj.displayOrNot')">
              <el-radio v-model="formInline.isShow" label="0"> {{ $t('dataManage.layerObj.isfalse') }}</el-radio>
              <el-radio v-model="formInline.isShow" label="1">{{ $t('dataManage.layerObj.istrue') }}</el-radio>
            </el-form-item>
            <!-- 是否为项目数据 -->
            <el-form-item
              v-show="formInline.type == 2"
              :label="$t('dataManage.layerObj.isItProjectData')"
            >
              <el-radio
                v-model="formInline.isProject"
                label="0"
              > {{$t('dataManage.layerObj.isfalse')}}</el-radio>
              <el-radio
                v-model="formInline.isProject"
                label="1"
              >{{$t('dataManage.layerObj.istrue')}}</el-radio>
            </el-form-item>
            <!-- <el-form-item v-show="formInline.type == 2" :label="$t('dataManage.layerObj.isItProjectData')">
              <el-radio v-model="formInline.isProject" label="0"> {{ $t('dataManage.layerObj.isfalse') }}</el-radio>
              <el-radio v-model="formInline.isProject" label="1">{{ $t('dataManage.layerObj.istrue') }}</el-radio>
            </el-form-item> -->
            <!-- 描述 -->
            <el-form-item :label="$t('common.bak')">
              <el-input
                style="width: 60%;"
                v-model="formInline.bak"
                :placeholder="$t('dataManage.layerObj.prompt7')"
              ></el-input>
              <el-input style="width: 60%;" v-model="formInline.bak"
                :placeholder="$t('dataManage.layerObj.prompt7')"></el-input>
            </el-form-item>
            <el-form-item v-show="menuStatus.update">
              <el-button
                type="primary"
                size="small"
                @click="updateSend()"
              >{{$t('common.confirm')}}</el-button>
              <el-button
                type="info"
                size="small"
                @click="updateRest()"
              >{{$t('common.reset')}}</el-button>
              <el-button type="primary" size="small" @click="updateSend()">{{ $t('common.confirm') }}</el-button>
              <el-button type="info" size="small" @click="updateRest()">{{ $t('common.reset') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <el-dialog
      :title="$t('common.append')"
      :visible.sync="dialogVisible"
      width="50%"
    >
    <el-dialog :title="$t('common.append')" :visible.sync="dialogVisible" width="50%">
      <div style="width: 100%;max-height: 63vh;overflow-y: auto; ">
        <el-form
          :model="insertData"
          class="demo-form-inline"
          label-width="150px"
        >
        <el-form :model="insertData" class="demo-form-inline" label-width="150px">
          <!-- 菜单名称 -->
          <el-form-item :label="$t('dataManage.layerObj.layerName')">
            <el-input
              style="width: 80%;"
              v-model="insertData.cnName"
              :placeholder="$t('dataManage.layerObj.prompt1')"
            ></el-input>
            <el-input style="width: 80%;" v-model="insertData.cnName"
              :placeholder="$t('dataManage.layerObj.prompt1')"></el-input>
          </el-form-item>
          <!-- 菜单类型 -->
          <el-form-item :label="$t('dataManage.layerObj.layerType')">
            <el-select
              clearable
              style="width: 80%;"
              v-model="insertData.type"
              :placeholder="$t('dataManage.layerObj.prompt2')"
            >
              <el-option
                label="目录"
                value='1'
              ></el-option>
              <el-option
                label="图层"
                value='2'
              ></el-option>
            <el-select clearable style="width: 80%;" v-model="insertData.type"
              :placeholder="$t('dataManage.layerObj.prompt2')">
              <el-option label="目录" value='1'></el-option>
              <el-option label="图层" value='2'></el-option>
            </el-select>
          </el-form-item>
          <!-- 服务类型 -->
          <el-form-item
            v-show="insertData.type == 2"
            :label="$t('dataManage.layerObj.serviceType')"
          >
            <el-select
              clearable
              style="width: 80%;"
              v-model="insertData.serveType"
              :placeholder="$t('dataManage.layerObj.prompt3')"
            >
              <el-option
                v-for="item in serveType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
          <el-form-item v-show="insertData.type == 2" :label="$t('dataManage.layerObj.serviceType')">
            <el-select clearable style="width: 80%;" v-model="insertData.serveType"
              :placeholder="$t('dataManage.layerObj.prompt3')">
              <el-option v-for="item in serveType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 服务地址 -->
          <el-form-item
            v-show="insertData.type == 2"
            :label="$t('dataManage.layerObj.serviceAddress')"
          >
            <el-input
              :placeholder="$t('dataManage.layerObj.prompt4')"
              style="width: 80%;"
              v-model="insertData.url"
            ></el-input>
          <el-form-item v-show="insertData.type == 2" :label="$t('dataManage.layerObj.serviceAddress')">
            <el-input :placeholder="$t('dataManage.layerObj.prompt4')" style="width: 80%;"
              v-model="insertData.url"></el-input>
          </el-form-item>
          <!-- 英文表名 -->
          <el-form-item
            v-show="insertData.type == 2 && insertData.serveType =='WMS'"
            :label="$t('dataManage.layerObj.enTableName')"
          >
            <el-input
              :placeholder="$t('dataManage.layerObj.prompt6')"
              style="width: 80%;"
              v-model="insertData.enName"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item v-show="insertData.type == 2 && insertData.serveType == 'WMS'"
            :label="$t('dataManage.layerObj.enTableName')">
            <el-input :placeholder="$t('dataManage.layerObj.prompt6')" style="width: 80%;"
              v-model="insertData.enName"></el-input>
          </el-form-item> -->
          <!-- 数据类型 -->
          <el-form-item :label="$t('dataManage.layerObj.dataType')">
            <el-select
              clearable
              style="width: 80%;"
              v-model="insertData.dataType"
              :placeholder="$t('dataManage.layerObj.prompt8')"
            >
              <el-option
                v-for="item in dataType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
            <el-select clearable style="width: 80%;" v-model="insertData.dataType"
              :placeholder="$t('dataManage.layerObj.prompt8')">
              <el-option v-for="item in dataType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 是否显示 -->
          <el-form-item
            v-show="insertData.type == 2"
            :label="$t('dataManage.layerObj.displayOrNot')"
          >
            <el-radio
              v-model="insertData.isShow"
              label="0"
            > {{$t('dataManage.layerObj.isfalse')}}</el-radio>
            <el-radio
              v-model="insertData.isShow"
              label="1"
            >{{$t('dataManage.layerObj.istrue')}}</el-radio>
          <el-form-item v-show="insertData.type == 2" :label="$t('dataManage.layerObj.displayOrNot')">
            <el-radio v-model="insertData.isShow" label="0"> {{ $t('dataManage.layerObj.isfalse') }}</el-radio>
            <el-radio v-model="insertData.isShow" label="1">{{ $t('dataManage.layerObj.istrue') }}</el-radio>
          </el-form-item>
          <!-- 是否为项目数据 -->
          <el-form-item
            v-show="insertData.type == 2"
            :label="$t('dataManage.layerObj.isItProjectData')"
          >
            <el-radio
              v-model="insertData.isProject"
              label="0"
            > {{$t('dataManage.layerObj.isfalse')}}</el-radio>
            <el-radio
              v-model="insertData.isProject"
              label="1"
            >{{$t('dataManage.layerObj.istrue')}}</el-radio>
          </el-form-item>
          <!-- <el-form-item v-show="insertData.type == 2" :label="$t('dataManage.layerObj.isItProjectData')">
            <el-radio v-model="insertData.isProject" label="0"> {{ $t('dataManage.layerObj.isfalse') }}</el-radio>
            <el-radio v-model="insertData.isProject" label="1">{{ $t('dataManage.layerObj.istrue') }}</el-radio>
          </el-form-item> -->
          <!-- 描述 -->
          <el-form-item :label="$t('common.bak')">
            <el-input
              :placeholder="$t('dataManage.layerObj.prompt7')"
              style="width: 80%;"
              v-model="insertData.bak"
        
            ></el-input>
            <el-input :placeholder="$t('dataManage.layerObj.prompt7')" style="width: 80%;"
              v-model="insertData.bak"></el-input>
          </el-form-item>
          <el-form-item v-show="menuStatus.update">
            <el-button
              type="primary"
              size="small"
              @click="submitForm( )"
            >{{$t('common.confirm')}}</el-button>
            <el-button
              type="info"
              size="small"
            >{{$t('common.cancel')}}</el-button>
            <el-button type="primary" size="small" @click="submitForm()">{{ $t('common.confirm') }}</el-button>
            <el-button type="info" size="small">{{ $t('common.cancel') }}</el-button>
          </el-form-item>

        </el-form>
@@ -575,10 +376,14 @@
      this.insertStart();
    },
    insertLayerData(res) {
      debugger
      console.log(this.formInline)
      this.insertStart();
      var node = this.$refs.tree.getCurrentNode();
      this.newNode = node;
      var id, lever, orderNum;

      if (this.treeData.length > 0) {
      if (res == 1) {
        //新增同级
        id = this.formInline.pid;
@@ -592,6 +397,13 @@
        orderNum = this.getMaxOrderNum(pchildNodes);
        lever = this.formInline.level + 1;
      }
      } else {
        id = 0;
        orderNum = 1;
        lever = 1;
      }


      this.insertData.pid = id;
      this.insertData.level = lever;
      this.insertData.orderNum = orderNum;
@@ -652,16 +464,22 @@
      this.newData = data.result;
      var val = this.setTreeData(data.result);
      this.treeData = val;
      console.log("this.treeData", this.treeData)
      debugger
      var cdata;
      if (this.currentData) {
        cdata = JSON.parse(this.currentData);
      } else {
        cdata = this.treeData[0]
      }

      this.$nextTick(() => {
        if (cdata) {
        this.expandData = [cdata.id];
        this.$refs.tree.setCurrentKey(cdata.id);
        this.layerFormInline(cdata)
        }

      });
    },
    layerFormInline(res) {
@@ -794,6 +612,7 @@
  height: calc(100% - 75px);
  display: flex;
  justify-content: space-around;

  .leftTree {
    width: calc(28% - 0px);
    height: 100%;
@@ -802,6 +621,7 @@
    box-sizing: border-box;
    overflow-y: auto;
  }

  .right {
    width: 68%;
    height: 100%;
@@ -809,6 +629,7 @@
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;

    .menuTop {
      /deep/ .el-form-item {
        margin: 5px;
@@ -816,6 +637,7 @@
    }
  }
}

/deep/ .el-input__suffix {

    top: 50%;