管道基础大数据平台系统开发-【前端】-新系統界面
王旭
2023-05-10 86cdd4e6eece0ee4679e62ae347ec003db7d7425
src/views/datamanage/layerManagement.vue
@@ -12,7 +12,8 @@
        style="border: 1px solid #dcdfe6;"
      >
        <div>
          <el-input v-model="filterText"></el-input>
          <el-input v-model="filterText" suffix-icon="el-icon-search" :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuelayerName')">
          </el-input>
          <el-tree
            ref="tree"
@@ -102,19 +103,20 @@
            label-width="150px"
          >
            <!-- 菜单名称 -->
            <el-form-item :label="$t('dataManage.layerObj.menuName')">
            <el-form-item :label="$t('dataManage.layerObj.layerName')">
              <el-input
                style="width: 60%;"
                v-model="formInline.cnName"
                 :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuelayerName')"
              ></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: 60%;"
                v-model="formInline.type"
                placeholder=" "
                 :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuelayerType')"
              >
                <el-option
                  label="目录"
@@ -135,7 +137,7 @@
                clearable
                style="width: 60%;"
                v-model="formInline.serveType"
                placeholder=" "
              >
                <el-option
                  v-for="item in serveType"
@@ -162,7 +164,7 @@
                clearable
                style="width: 60%;"
                v-model="formInline.dataType"
                placeholder=" "
                 :placeholder="$t('shuJuGuanLi.shuJuJianSuo.selectDataType')"
              >
                <el-option
                  v-for="item in dataType"
@@ -206,6 +208,7 @@
              <el-input
                style="width: 60%;"
                v-model="formInline.bak"
                :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueRemarks')"
              ></el-input>
            </el-form-item>
            <el-form-item v-show="menuStatus.update">
@@ -236,19 +239,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('shuJuGuanLi.shuJuJianSuo.valuelayerName')"
            ></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('shuJuGuanLi.shuJuJianSuo.valuelayerType')"
            >
              <el-option
                label="目录"
@@ -296,7 +300,7 @@
              clearable
              style="width: 80%;"
              v-model="insertData.dataType"
              placeholder=" "
               :placeholder="$t('shuJuGuanLi.shuJuJianSuo.selectDataType')"
            >
              <el-option
                v-for="item in dataType"
@@ -340,6 +344,7 @@
            <el-input
              style="width: 80%;"
              v-model="insertData.bak"
                :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueRemarks')"
            ></el-input>
          </el-form-item>
          <el-form-item v-show="menuStatus.update">
@@ -438,19 +443,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 +474,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 +635,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;
      this.backUpData = JSON.stringify(data)
      this.currentData = JSON.stringify(data)
      this.formInline = data;
      this.formInline.type = data.type.toString();
      this.formInline.isShow = data.isShow.toString();
      this.formInline.isProject = data.isProject.toString();
    },
    //图层列表点击事件
    handleNodeClick(data, node) {
@@ -640,11 +657,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 +786,9 @@
    }
  }
}
/deep/ .el-input__suffix {
    top: 50%;
    transform: translateY(-50%);
}
</style>