20230225@xingjs@优化完善数据管理样式

xing

2023-02-25 9f1b8ee28217deb20a4bf1b047603ed87edf17c2

 src/views/datamanage/catalogueManage.vue

@@ -1,14 +1,15 @@
<template>
  <div class="subpage_Box">
    <div class="cataLogContent">
      <div class="cataLog_leftTree subpage_Div">
        <My-bread
          :list="[
            `${$t('dataManage.dataManage')}`,
            `${$t('dataManage.catalogueManage')}`,
          ]"
        ></My-bread>
        <el-divider />
          <My-bread
        :list="[
          `${$t('dataManage.dataManage')}`,
          `${$t('dataManage.catalogueManage')}`,
        ]"
      ></My-bread>
      <el-divider />
    <div class="mainBox">

      <div class="cataLogContent leftTree subpage_Div" style="border: 1px solid #dcdfe6;">
        <div style="min-width: 450px">
          <el-tree
            ref="tree"
@@ -23,8 +24,9 @@
          </el-tree>
        </div>
      </div>
      <div class="cataLog_rightContent subpage_Div">
      <div class="cataLog_rightContent right subpage_Div">
        <div
        class="inquire"
          style="
            align-items: center;
            display: flex;
@@ -48,9 +50,7 @@
                    :on-change="handleChange"
                    :file-list="fileList"
                  >
                    <el-button type="success" icon="el-icon-plus" size="small"
                      >上传文件</el-button
                    >
                    <el-button type="success" icon="el-icon-plus" size="small">{{ $t("shuJuGuanLi.butten.uploadFile") }}</el-button>
                  </el-upload>
                </el-form-item>
                <el-form-item>
@@ -61,7 +61,7 @@
                    type="success"
                    icon="el-icon-plus"
                    size="small"
                    >新增同级</el-button
                    >{{ $t("shuJuGuanLi.butten.NewPeer") }}</el-button
                  >
                </el-form-item>
                <el-form-item>
@@ -72,7 +72,7 @@
                    type="success"
                    icon="el-icon-plus"
                    size="small"
                    >新增子级</el-button
                    >{{ $t("shuJuGuanLi.butten.AddChild") }}</el-button
                  >
                </el-form-item>
                <el-form-item>
@@ -83,7 +83,7 @@
                    type="danger"
                    icon="el-icon-delete"
                    size="small"
                    >删除</el-button
                    >{{ $t("shuJuGuanLi.butten.Delete") }}</el-button
                  >
                </el-form-item>
                <el-form-item>
@@ -94,7 +94,7 @@
                    type="info"
                    icon="el-icon-top"
                    size="small"
                    >向上移动</el-button
                    >{{ $t("shuJuGuanLi.butten.MoveUp") }}</el-button
                  >
                </el-form-item>
                <el-form-item>
@@ -105,31 +105,34 @@
                    type="info"
                    icon="el-icon-bottom"
                    size="small"
                    >向下移动</el-button
                    >{{ $t("shuJuGuanLi.butten.MoveDown") }}</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>

        </div>
        <el-divider />
        <el-form :model="itemdetail" ref="itemdetail" :rules="rules">
        <div class="dividing-line"></div>


        <el-form :model="itemdetail" ref="itemdetail" :rules="rules" style="position: relative; padding-top: 18px">
          <el-form-item
            prop="name"
            :label="$t('dataManage.dataUpObj.directoryName')"
            :label-width="formLabelWidth"
          >
            <el-input v-model="itemdetail.name" style="max-width: 400px" />
            :label-width="formLabelWidth">
            <el-input v-model="itemdetail.name"  size="small" style=" max-width: 420px" :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueone')" clearable/>
<!--            style="max-width: 400px"-->
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.dataUpObj.catalogDescription')"
            :label-width="formLabelWidth"
          >
            :label-width="formLabelWidth" >
            <el-input
              v-model="itemdetail.descr"
              type="textarea"
              resize="none"
              style="height: 100%; overflow: auto; max-width: 400px"
              style=" max-width: 420px"
              :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueone')"
              clearable
            />
          </el-form-item>
          <el-form-item
@@ -139,11 +142,14 @@
            <el-input
              v-model="itemdetail.exts"
              type="textarea"
              resize="none"
              style="height: 100%; overflow: auto;max-width: 400px;"
              style=" max-width: 420px"
              :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueone')"
              clearable
            />
<!--            resize="none"-->
<!--            style="height: 100%; overflow: auto; max-width: 400px"-->
          </el-form-item>
          <el-form-item
<!--          <el-form-item
            :label="$t('dataManage.dataUpObj.inspectionItems')"
            :label-width="formLabelWidth"
          >
@@ -151,9 +157,9 @@
              v-model="itemdetail.checks"
              type="textarea"
              resize="none"
              style="height: 100%; overflow: auto;max-width: 400px;"
              style="height: 100%; overflow: auto; max-width: 400px"
            />
          </el-form-item>
          </el-form-item>-->
          <el-form-item
            :label="$t('dataManage.dataUpObj.code')"
            :label-width="formLabelWidth"
@@ -162,11 +168,12 @@
              v-model="itemdetail.code"
              disabled
              type="textarea"
              resize="none"
              style="height: 100%; overflow: auto;max-width: 400px;"
              style=" max-width: 420px"
              :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valueone')"
              autosize
            />
          </el-form-item>
          <el-form-item
<!--          <el-form-item
            :label="$t('dataManage.dataUpObj.catalogRemarks')"
            :label-width="formLabelWidth"
          >
@@ -176,8 +183,8 @@
              resize="none"
              style="max-width: 400px"
            />
          </el-form-item>
          <div class="btnBox">
          </el-form-item>-->
<!--          <div class="btnBox">
            <el-button
              v-if="menuStatus.update"
              class="primary"
@@ -192,8 +199,12 @@
              @click="reset"
              >{{ $t("common.cancel") }}</el-button
            >
          </div>
          </div>-->
        </el-form>
        <div slot="footer" class="dialog-footer" style="padding-left: 45% ;padding-top: 20px">
          <el-button v-if="menuStatus.update" type="primary" size="small" @click="updCata('itemdetail')">{{ $t("common.preservation") }}</el-button>
          <el-button v-if="menuStatus.update" size="small" @click="reset">{{ $t("common.cancel") }}</el-button>
        </div>
      </div>
    </div>
    <!-- <div class="cataSettings_tree"> -->
@@ -237,7 +248,7 @@
            v-model="ruleForm.exts"
            type="textarea"
            resize="none"
            style="height: 100%; overflow: auto; "
            style="height: 100%; overflow: auto"
          />
        </el-form-item>
        <el-form-item
@@ -248,7 +259,7 @@
            v-model="ruleForm.checks"
            type="textarea"
            resize="none"
            style="height: 100%; overflow: auto; "
            style="height: 100%; overflow: auto"
          />
        </el-form-item>
        <el-form-item
@@ -260,7 +271,7 @@
            disabled
            type="textarea"
            resize="none"
            style="height: 100%; overflow: auto; "
            style="height: 100%; overflow: auto"
          />
        </el-form-item>
        <el-form-item
@@ -580,18 +591,20 @@
      }
    },
    setDelNode() {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.remove(this.newNode, this.itemdetail)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
      this.$confirm("此操作将永久删除该目录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.remove(this.newNode, this.itemdetail);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      });
    },
    setNewNode(res) {
      var id, lever, orderNum;
@@ -901,35 +914,73 @@
.subpage_Box {
  height: 96%;
  width: 98%;
 padding: 1%;
  padding: 1%;
  border-radius: 10px;
  .cataLogContent {
    width: 100%;
  // .cataLogContent {
  //   width: 100%;
  //   height: 100%;
  //   display: flex;
  //   // align-items: center;
  //   justify-content: space-between;
  //   .cataLog_leftTree {
  //     width: 30%;
  //     height: 98%;
  //     border-radius: 5px;
  //     padding: 10px;
  //     overflow-y: auto;
  //   }
  //   .cataLog_rightContent {
  //     width: 66%;
  //     height: 98%;
  //     border-radius: 5px;
  //     padding: 10px;
  //     .menuTop {
  //       /deep/ .el-form-item {
  //         margin-bottom: 0px;
  //       }
  //     }
  //   }
  // }
}

.mainBox {
  padding-top: 10px;
  width: 100%;
  height: calc(100% - 75px);
  display: flex;
  justify-content: space-around;
  .leftTree {
    width: calc(32% - 0px);
    height: 100%;
    display: flex;
    // align-items: center;
    justify-content: space-between;
    .cataLog_leftTree {
      width: 30%;
      height: 98%;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
    overflow-y: auto;
  }
  .right {
    width: 65%;
    height: 100%;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    .inquire {
      // margin-bottom: 10px;
      padding: 8px;
      // margin-top: 10px;
      border-radius: 5px;
      padding: 10px;
      overflow-y: auto;
    }
    .cataLog_rightContent {
      width: 66%;
      height: 98%;
      border-radius: 5px;
      padding: 10px;
      .menuTop {
        /deep/ .el-form-item {
          margin-bottom: 0px;
        }
      //border: 1px solid #dcdfe6;
      //margin-bottom: 20px;
      .el-form-item {
        margin: 5px;
      }
    }

  }
}
.btnBox{
  text-align: right;
.btnBox {
  position: absolute;
  bottom:0;
  right: 0;
}
</style>