管道基础大数据平台系统开发-【前端】-新系統界面
王旭
2023-05-10 7a0c7de021aebbef3ec137f2f94ff73ab41014d7
src/views/datamanage/layerManagement.vue
@@ -12,7 +12,11 @@
        style="border: 1px solid #dcdfe6;"
      >
        <div>
          <el-input v-model="filterText"></el-input>
          <el-input
            v-model="filterText"
            :placeholder="$t('dataManage.layerObj.prompt1')"
            suffix-icon="el-icon-search"
          ></el-input>
          <el-tree
            ref="tree"
@@ -102,19 +106,22 @@
            label-width="150px"
          >
            <!-- 菜单名称 -->
            <el-form-item :label="$t('dataManage.layerObj.menuName')">
            <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-form-item>
            <!-- 菜单类型 -->
            <el-form-item :label="$t('dataManage.layerObj.menuType')">
            <el-form-item :label="$t('dataManage.layerObj.layerType')">
              <el-select
                :placeholder="$t('dataManage.layerObj.prompt2')"
                clearable
                style="width: 60%;"
                v-model="formInline.type"
                placeholder=" "
              >
                <el-option
                  label="目录"
@@ -135,7 +142,7 @@
                clearable
                style="width: 60%;"
                v-model="formInline.serveType"
                placeholder=" "
                :placeholder="$t('dataManage.layerObj.prompt3')"
              >
                <el-option
                  v-for="item in serveType"
@@ -152,8 +159,20 @@
              :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>
            <!-- 数据类型 -->
@@ -162,7 +181,7 @@
                clearable
                style="width: 60%;"
                v-model="formInline.dataType"
                placeholder=" "
                :placeholder="$t('dataManage.layerObj.prompt8')"
              >
                <el-option
                  v-for="item in dataType"
@@ -206,6 +225,7 @@
              <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">
@@ -236,19 +256,20 @@
          label-width="150px"
        >
          <!-- 菜单名称 -->
          <el-form-item :label="$t('dataManage.layerObj.menuName')">
          <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-form-item>
          <!-- 菜单类型 -->
          <el-form-item :label="$t('dataManage.layerObj.menuType')">
          <el-form-item :label="$t('dataManage.layerObj.layerType')">
            <el-select
              clearable
              style="width: 80%;"
              v-model="insertData.type"
              placeholder=" "
              :placeholder="$t('dataManage.layerObj.prompt2')"
            >
              <el-option
                label="目录"
@@ -269,7 +290,7 @@
              clearable
              style="width: 80%;"
              v-model="insertData.serveType"
              placeholder=" "
              :placeholder="$t('dataManage.layerObj.prompt3')"
            >
              <el-option
                v-for="item in serveType"
@@ -286,8 +307,20 @@
            :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>
          <!-- 数据类型 -->
@@ -296,7 +329,7 @@
              clearable
              style="width: 80%;"
              v-model="insertData.dataType"
              placeholder=" "
              :placeholder="$t('dataManage.layerObj.prompt8')"
            >
              <el-option
                v-for="item in dataType"
@@ -338,8 +371,10 @@
          <!-- 描述 -->
          <el-form-item :label="$t('common.bak')">
            <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">
@@ -438,19 +473,24 @@
          if (currentId != 0) {
            const tempChildrenNodex1 = pchildNodes[currentId - 1];
            const tempChildrenNodex2 = pchildNodes[currentId];
            tempChildrenNodex2.orderNum =
              pchildNodes[currentId - 1].data.orderNum;
            tempChildrenNodex1.orderNum = pchildNodes[currentId].data.orderNum;
            // tempChildrenNodex2.orderNum =
            //   pchildNodes[currentId - 1].data.orderNum;
            // tempChildrenNodex1.orderNum = pchildNodes[currentId].data.orderNum;
            var arr = [];
            this.oriData.filter((res) => {
              if (res.id == tempChildrenNodex2.data.id) {
                res.orderNum = tempChildrenNodex2.orderNum;
                // res.orderNum = tempChildrenNodex2.orderNum;
                arr.push(res);
              } else if (res.id == tempChildrenNodex1.data.id) {
                res.orderNum = tempChildrenNodex1.orderNum;
                // res.orderNum = tempChildrenNodex1.orderNum;
                arr.push(res);
              }
            });
            const orderNum = arr[1].orderNum
            arr[1].orderNum = arr[0].orderNum
            arr[0].orderNum = orderNum
            this.newData = arr;
            this.sendChange();
          } else {
@@ -464,19 +504,22 @@
          if (currentId < pchildNodes.length - 1) {
            const tempChildrenNodex1 = pchildNodes[currentId + 1];
            const tempChildrenNodex2 = pchildNodes[currentId];
            tempChildrenNodex2.orderNum =
              pchildNodes[currentId + 1].data.orderNum;
            tempChildrenNodex1.orderNum = pchildNodes[currentId].data.orderNum;
            // tempChildrenNodex2.orderNum =
            //   pchildNodes[currentId + 1].data.orderNum;
            // tempChildrenNodex1.orderNum = pchildNodes[currentId].data.orderNum;
            var arr = [];
            this.oriData.filter((res) => {
              if (res.id == tempChildrenNodex2.data.id) {
                res.orderNum = tempChildrenNodex2.orderNum;
                // res.orderNum = tempChildrenNodex2.orderNum;
                arr.push(res);
              } else if (res.id == tempChildrenNodex1.data.id) {
                res.orderNum = tempChildrenNodex1.orderNum;
                // res.orderNum = tempChildrenNodex1.orderNum;
                arr.push(res);
              }
            });
            const orderNum = arr[1].orderNum
            arr[1].orderNum = arr[0].orderNum
            arr[0].orderNum = orderNum
            this.newData = arr;
            this.sendChange();
          } else {
@@ -622,13 +665,17 @@
      });
    },
    layerFormInline(res) {
      var val = JSON.parse(JSON.stringify(res))
      this.backUpData = JSON.stringify(res)
      this.currentData = JSON.stringify(res)
      this.formInline = val;
      this.formInline.type = val.type.toString();
      this.formInline.isShow = val.isShow.toString();
      this.formInline.isProject = val.isProject.toString();
      var data = this.$refs.tree.getNode(val.id).data;
      var result = JSON.parse(JSON.stringify(data))
      this.backUpData = JSON.stringify(result)
      this.currentData = JSON.stringify(result)
      this.formInline = result;
      this.formInline.type = result.type.toString();
      this.formInline.isShow = result.isShow.toString();
      this.formInline.isProject = result.isProject.toString();
    },
    //图层列表点击事件
    handleNodeClick(data, node) {
@@ -640,11 +687,13 @@
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid);
        if (branchArr.length > 0) {
          branchArr.sort(function (a, b) {
            return a.orderNum - b.orderNum
          })
        }
        branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性,并赋值
        // 属于同一对象问题,例如:令 a=b、c=1 ,然后再令 b.c=c , 那么 a.c=b.c=c=1 ;同理,后续令 c.d=2 ,那么 a.c.d 也是=2;
        // 由此循环多次后,就能形成相应的树形数据结构
@@ -767,4 +816,9 @@
    }
  }
}
/deep/ .el-input__suffix {
    top: 50%;
    transform: translateY(-50%);
}
</style>