调整运维管理部分页面格式

王旭

2023-02-16 c40e3de17653a10a06ead765813783a5614a32ce

调整运维管理部分页面格式

 src/assets/css/global.css

@@ -49,3 +49,26 @@
.clearfix {
  zoom: 1;
}
.flex_box{
  display: flex;
  flex-wrap: wrap;
  
}
.table_box {
  border-radius: 5px;
  border: 1px solid #dcdfe6;
  padding: 8px;
  box-sizing: border-box;

}
.table_box .el-table,
.table_box .el-table .el-table__expanded-cell {
  background-color: transparent !important;
}
.table_box .el-table th,
.table_box .el-table tr {
  background-color: transparent !important;
} 
.pagination_box{
  margin-top: 25px
}

 src/views/maintenance/blackwhiteList.vue

@@ -1,241 +1,233 @@
<template>
  <div class="logLog_box">
    <My-bread :list="[
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.blackwhiteList')}`,
      ]"></My-bread>
      ]"
    ></My-bread>
    <el-divider />
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        :label="$t('operatManage.BWL.blackList')"
        name="first"
      >
        <div>
          <div class="inquire subpage_Div">
            <el-form
              ref="queryInfo"
              :model="queryInfo"
              :inline="true"
            >
              <el-form-item
                :label="$t('operatManage.BWL.blackListIP')"
                prop="blackListIP"
              >
                <el-input
                style="width:200px"
                  v-model="queryInfo.ip"
                  :placeholder="$t('operatManage.BWL.listIPInfo')"
                />
              </el-form-item>
              <el-form-item
                :label="$t('operatManage.BWL.interceptionNumber')"
                prop="visit"
              >
                <el-input
                style="width:200px"
                  v-model="queryInfo.visit"
                  :placeholder="$t('operatManage.BWL.interceptionNumber')"
                />
              </el-form-item>
              <el-form-item style="float:right">
                <el-button
                  type="info"
                  @click="resetInfo('queryInfo')"
                  icon="el-icon-refresh"
                  size="small"
                >{{ $t("operatManage.BWL.reset") }}</el-button>
              </el-form-item>
              <el-form-item style="float:right">
                <el-button
                  type="primary"
                  @click="queryBlackInfo()"
                  size="small"
                  icon="el-icon-search"
                >{{ $t("operatManage.BWL.search") }}
                </el-button>
              </el-form-item>
              <el-form-item style="float:right">
                <el-button
                  icon="el-icon-delete"
                  v-if="menuStatus.delete"
                  type="danger"
                  size="small"
                  @click="delBWList"
                >{{ $t("common.delete") }}</el-button>
              </el-form-item>
              <el-form-item style="float:right">
                <el-button
                  icon="el-icon-edit"
                  v-if="menuStatus.insert"
                  type="success"
                  size="small"
                  @click="showInsertdialog(1)"
                >{{ $t("common.append") }}</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="table_box subpage_Div">
            <el-table
              :data="BTableData"
              @selection-change="blackSelectionChange"
              style="width: 100%"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                align="center"
                type="index"
                :label="$t('operatManage.BWL.index')"
                width="70px"
              />
              <el-table-column
                prop="ip"
                :label="$t('operatManage.BWL.blackListIP')"
              />
              <el-table-column
                prop="visit"
                :label="$t('operatManage.BWL.PageView')"
              />
              <el-table-column
                prop="descr"
                :label="$t('operatManage.BWL.description')"
              />
              <el-table-column
                prop="createName"
                :label="$t('operatManage.BWL.creator')"
              />
              <el-table-column
                :formatter="formatData"
                prop="createTime"
                :label="$t('operatManage.BWL.creationTime')"
              />
              <el-table-column
                prop="updateName"
                :label="$t('operatManage.BWL.update')"
              />
              <el-table-column
                :formatter="formatData"
                prop="updateTime"
                :label="$t('operatManage.BWL.UpdateTime')"
              />
              <el-table-column
                v-if="menuStatus.update"
                :label="$t('operatManage.tokentoolObj.operation')"
                width="320"
                align="center"
              >
                <template slot-scope="scope">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('operatManage.BWL.blackList')" name="first">
        <div class="inquire subpage_Div" ref="container">
          <el-form ref="queryInfo" :model="queryInfo" :inline="true">
            <div class="flex_box">
              <div style="margin-right: auto">
                <el-form-item
                  :label="$t('operatManage.BWL.blackListIP')"
                  prop="blackListIP"
                >
                  <el-input
                    style="width: 200px"
                    v-model="queryInfo.ip"
                    :placeholder="$t('operatManage.BWL.listIPInfo')"
                  />
                </el-form-item>
                <el-form-item
                  :label="$t('operatManage.BWL.interceptionNumber')"
                  prop="visit"
                >
                  <el-input
                    style="width: 200px"
                    v-model="queryInfo.visit"
                    :placeholder="$t('operatManage.BWL.interceptionNumber')"
                  />
                </el-form-item>
              </div>
              <div>
                <el-form-item>
                  <el-button
                    @click="handleEdit(scope.row)"
                    type="warning"
                    plain
                    type="info"
                    @click="resetInfo('queryInfo')"
                    icon="el-icon-refresh"
                    size="small"
                  >{{ $t("common.update") }}</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div
              style="margin-top: 20px"
              class="pagination_box"
            >
              <el-pagination
                @size-change="BhandleSizeChange"
                @current-change="BhandleCurrentChange"
                :current-page="BListData.pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="BListData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="Bcount"
              >
              </el-pagination>
                    >{{ $t("operatManage.BWL.reset") }}</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="queryBlackInfo()"
                    size="small"
                    icon="el-icon-search"
                    >{{ $t("operatManage.BWL.search") }}
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-delete"
                    v-if="menuStatus.delete"
                    type="danger"
                    size="small"
                    @click="delBWList"
                    >{{ $t("common.delete") }}</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-edit"
                    v-if="menuStatus.insert"
                    type="success"
                    size="small"
                    @click="showInsertdialog(1)"
                    >{{ $t("common.append") }}</el-button
                  >
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
        <div class="table_box subpage_Div" :style="styleVar">
          <el-table
            :data="BTableData"
            @selection-change="blackSelectionChange"
            style="width: 100%"
            height="calc(100% - 57px)"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column
              align="center"
              type="index"
              :label="$t('operatManage.BWL.index')"
              width="70px"
            />
            <el-table-column
              prop="ip"
              :label="$t('operatManage.BWL.blackListIP')"
            />
            <el-table-column
              prop="visit"
              :label="$t('operatManage.BWL.PageView')"
            />
            <el-table-column
              prop="descr"
              :label="$t('operatManage.BWL.description')"
            />
            <el-table-column
              prop="createName"
              :label="$t('operatManage.BWL.creator')"
            />
            <el-table-column
              :formatter="formatData"
              prop="createTime"
              :label="$t('operatManage.BWL.creationTime')"
            />
            <el-table-column
              prop="updateName"
              :label="$t('operatManage.BWL.update')"
            />
            <el-table-column
              :formatter="formatData"
              prop="updateTime"
              :label="$t('operatManage.BWL.UpdateTime')"
            />
            <el-table-column
              v-if="menuStatus.update"
              :label="$t('operatManage.tokentoolObj.operation')"
              width="320"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  @click="handleEdit(scope.row)"
                  type="warning"
                  plain
                  size="small"
                  >{{ $t("common.update") }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination_box">
            <el-pagination
              @size-change="BhandleSizeChange"
              @current-change="BhandleCurrentChange"
              :current-page="BListData.pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="BListData.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="Bcount"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane
        :label="$t('operatManage.BWL.whiteList')"
        name="second"
      >
      <el-tab-pane :label="$t('operatManage.BWL.whiteList')" name="second">
        <div class="inquire subpage_Div">
          <el-form
            ref="queryInfo"
            :model="queryInfo"
            :inline="true"
          >
            <el-form-item
              :label="$t('operatManage.BWL.whiteListIP')"
              prop="ip"
            >
              <el-input
              style="width:200px"
                v-model="queryInfo.ip"
                :placeholder="$t('operatManage.BWL.listIPInfo')"
              />
            </el-form-item>
            <el-form-item
              :label="$t('operatManage.BWL.interceptionNumber')"
              prop="visit"
            >
              <el-input
              style="width:200px"
                v-model="queryInfo.visit"
                :placeholder="$t('operatManage.BWL.interceptionNumber')"
              />
            </el-form-item>
            <el-form-item style="float: right;">
              <el-button
                @click="resetForm('queryInfo')"
                type="info"   size="small"
              ><i class="el-icon-delete"></i> &nbsp;{{
                  $t('operatManage.BWL.reset')
                }}</el-button>
            </el-form-item>
            <el-form-item style="float: right;">
              <el-button
                size="small"
                type="primary"
                @click="queryWhiteInfo"
              ><i class="el-icon-search"></i> &nbsp;{{
                  $t('operatManage.BWL.search')
                }}</el-button>
            </el-form-item>
            <el-form-item style="float: right;">
              <el-button
                type="danger" size="small"
                icon="el-icon-delete"
                v-if="menuStatus.delete"
                @click="delBWList"
              >{{
                $t('common.delete')
              }}</el-button>
            </el-form-item>
            <el-form-item style="float: right;">
              <el-button
                type="success"   size="small"
                icon="el-icon-edit"
                v-if="menuStatus.insert"
                @click="showInsertdialog(2)"
              >{{
                $t('common.append')
              }}</el-button>
            </el-form-item>
          <el-form ref="queryInfo" :model="queryInfo" :inline="true">
            <div class="flex_box">
              <div style="margin-right: auto">
                <el-form-item
                  :label="$t('operatManage.BWL.whiteListIP')"
                  prop="ip"
                >
                  <el-input
                    style="width: 200px"
                    v-model="queryInfo.ip"
                    :placeholder="$t('operatManage.BWL.listIPInfo')"
                  />
                </el-form-item>
                <el-form-item
                  :label="$t('operatManage.BWL.interceptionNumber')"
                  prop="visit"
                >
                  <el-input
                    style="width: 200px"
                    v-model="queryInfo.visit"
                    :placeholder="$t('operatManage.BWL.interceptionNumber')"
                  />
                </el-form-item>
              </div>
              <div>
                <el-form-item>
                  <el-button
                    @click="resetForm('queryInfo')"
                    type="info"
                    size="small"
                    ><i class="el-icon-delete"></i> &nbsp;{{
                      $t("operatManage.BWL.reset")
                    }}</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button size="small" type="primary" @click="queryWhiteInfo"
                    ><i class="el-icon-search"></i> &nbsp;{{
                      $t("operatManage.BWL.search")
                    }}</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="danger"
                    size="small"
                    icon="el-icon-delete"
                    v-if="menuStatus.delete"
                    @click="delBWList"
                    >{{ $t("common.delete") }}</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="success"
                    size="small"
                    icon="el-icon-edit"
                    v-if="menuStatus.insert"
                    @click="showInsertdialog(2)"
                    >{{ $t("common.append") }}</el-button
                  >
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
        <div class="table_box1 subpage_Div">
        <div class="table_box subpage_Div" :style="styleVar">
          <el-table
            :data="WTableData"
            @selection-change="blackSelectionChange"
            style="width: 100%"
            height="calc(100% - 57px)"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column type="selection" width="55" />
            <el-table-column
              align="center"
              type="index"
@@ -284,15 +276,13 @@
                  type="warning"
                  plain
                  size="small"
                >{{ $t('common.update') }}</el-button>
                  >{{ $t("common.update") }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          </el-table>
          <div
            style="margin-top: 20px"
            class="pagination_box"
          >

          <div class="pagination_box">
            <el-pagination
              @size-change="WhandleSizeChange"
              @current-change="WhandleCurrentChange"
@@ -313,10 +303,7 @@
      :visible.sync="InsertFormdialog"
      width="30%"
    >
      <el-form
        ref="insertform"
        :model="insertform"
      >
      <el-form ref="insertform" :model="insertform">
        <el-form-item
          :label-width="formLabelWidth"
          :label="$t('operatManage.tokentoolObj.ip')"
@@ -345,17 +332,11 @@
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="insertFromDataClose">{{
          $t("common.close")
        }}</el-button>
        <el-button
          @click="insertFromData"
          type="primary" size="small" 
        >{{
        <el-button @click="insertFromData" type="primary" size="small">{{
          $t("common.confirm")
        }}</el-button>
      </div>
@@ -366,49 +347,31 @@
      :visible.sync="updateFormdialog"
      width="30%"
    >
      <el-form
        ref="editfrom"
        :model="editfrom"
      >
        <el-form-item
          :label-width="formLabelWidth"
          label="IP地址"
        >
      <el-form ref="editfrom" :model="editfrom">
        <el-form-item :label-width="formLabelWidth" label="IP地址">
          <el-input
            v-model="editfrom.ip"
            :placeholder="$t('common.pleaseInput')"
          />
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="访问次数"
        >
        <el-form-item :label-width="formLabelWidth" label="访问次数">
          <el-input
            v-model="editfrom.visit"
            :placeholder="$t('common.pleaseInput')"
          />
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="描述"
        >
        <el-form-item :label-width="formLabelWidth" label="描述">
          <el-input
            v-model="editfrom.descr"
            :placeholder="$t('common.pleaseInput')"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="editFromDataClose">{{
          $t("common.close")
        }}</el-button>
        <el-button
          @click="editFromData"
          type="primary" size="small" 
        >{{
        <el-button @click="editFromData" type="primary" size="small">{{
          $t("common.confirm")
        }}</el-button>
      </div>
@@ -467,9 +430,31 @@
      },
      Wcount: 0,
      Bcount: 0,
      tableHeight: 0,
      timer: 0,
      styleVar: {
        height: "calc(100% - 109px)",
      },
    };
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 40}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 40}px)`;
      });
    },
    editFromDataClose() {
      this.updateFormdialog = false;
      this.$nextTick(() => {
@@ -551,32 +536,34 @@
        std.push(this.multipleSelection[i].id);
      }
      //deletes
      this.$confirm('此操作将永久删除该名单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await deletelacklist({ ids: std.toString() });
        if (data.code == 200) {
          this.InsertFormdialog = false;
      this.$confirm("此操作将永久删除该名单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await deletelacklist({ ids: std.toString() });
          if (data.code == 200) {
            this.InsertFormdialog = false;
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.BGetList();
            this.WGetList();
          } else {
            this.$message({
              message: "删除失败！",
              type: "warning",
            });
          }
        })
        .catch(() => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            type: "info",
            message: "已取消删除",
          });
          this.BGetList();
          this.WGetList();
        } else {
          this.$message({
            message: '删除失败！',
            type: 'warning',
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      // const data = await deletelacklist({ ids: std.toString() });
      // if (data.code == 200) {
      //   this.$message({
@@ -714,6 +701,10 @@
      }
    },
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight();
  },
  created() {
    var val = this.$store.state.currentPerms;
    var permsEntity = this.$store.state.permsEntity;
@@ -732,35 +723,32 @@
.logLog_box {
  height: 98%;
  width: 98%;
  padding: 1%; 
  overflow: auto;
  padding: 1%;
  .el-input {
    width: 300px;
  }
  .inquire {
    padding: 10px;
    padding: 8px;
    margin-top: 20px;

    border-radius: 5px;
  

    margin-bottom: 20px;
    .el-form-item {
      margin: 5px;
    }
  }
  .table_box {
    padding: 10px;
    border-radius: 5px;
 
   
 
  .el-tabs {
    height: calc(100% - 70px);
  }
  .table_box1 {
    padding: 10px;
    border-radius: 5px;
   
 
 
  /deep/ .el-tabs__content {
    height: calc(100% - 49px);
  }
  /deep/ .el-tab-pane {
    height: 100%;
  }
  .text-center {
    text-align: center;
  }
  
}
</style>

 src/views/maintenance/downlog.vue

@@ -1,104 +1,97 @@
<template>
  <div class="logLog_box">
    <My-bread :list="[
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.DownloadLog')}`,
      ]"></My-bread>
      ]"
    ></My-bread>
    <el-divider />
    <div class="inquire subpage_Div">
      <el-form
        :inline="true"
        ref="sizeForm"
        :model="sizeForm"
      >
        <el-form-item
          prop="uname"
          :label="$t('operatManage.operationLogObj.username')"
        >
          <el-input
          style="width:200px"
            v-model="sizeForm.uname"
            :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
          />
        </el-form-item>
        <el-form-item
          prop="type"
          :label="$t('operatManage.operationLogObj.operationType')"
        >
          <el-select
          style="width:200px"
            :popper-append-to-body="false"
            v-model="sizeForm.type"
            :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
          >
            <el-option
              :label="$t('downlog.type1')"
              value="1"
            />
            <el-option
              :label="$t('downlog.type2')"
              value="2"
            />
            <el-option
              :label="$t('downlog.type3')"
              value="3"
            />
            <el-option
              :label="$t('downlog.type4')"
              value="4"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="start"
          :label="$t('operatManage.operationLogObj.startTime')"
        >
          <el-date-picker
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="sizeForm.start"
            style="width:200px"
            type="datetime"
            :popper-class="popperclass"
            :placeholder="$t('operatManage.operationLogObj.optionDate')"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          prop="end"
          :label="$t('operatManage.operationLogObj.endTime')"
        >
          <el-date-picker
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="sizeForm.end"
            style="width:200px"
            type="datetime"
            :placeholder="$t('operatManage.operationLogObj.optionDate')"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item style="float:right">
          <el-button
            @click="onSubmit"
            icon="el-icon-search"
            size="small"
            type="primary"
          >{{ $t("operatManage.operationLogObj.inquire") }}</el-button>
          <el-button
            @click="resAllTable"
            icon="el-icon-delete"
            type="info"
            size="small"
          >{{ $t("operatManage.operationLogObj.empty") }}</el-button>
        </el-form-item>
    <div class="inquire subpage_Div" ref="container">
      <el-form :inline="true" ref="sizeForm" :model="sizeForm">
        <div class="flex_box">
          <div style="margin-right: auto">
            <el-form-item
              prop="uname"
              :label="$t('operatManage.operationLogObj.username')"
            >
              <el-input
                style="width: 200px"
                v-model="sizeForm.uname"
                :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
              />
            </el-form-item>
            <el-form-item
              prop="type"
              :label="$t('operatManage.operationLogObj.operationType')"
            >
              <el-select
                style="width: 200px"
                :popper-append-to-body="false"
                v-model="sizeForm.type"
                :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
              >
                <el-option :label="$t('downlog.type1')" value="1" />
                <el-option :label="$t('downlog.type2')" value="2" />
                <el-option :label="$t('downlog.type3')" value="3" />
                <el-option :label="$t('downlog.type4')" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item
              prop="start"
              :label="$t('operatManage.operationLogObj.startTime')"
            >
              <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="sizeForm.start"
                style="width: 200px"
                type="datetime"
                :popper-class="popperclass"
                :placeholder="$t('operatManage.operationLogObj.optionDate')"
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              prop="end"
              :label="$t('operatManage.operationLogObj.endTime')"
            >
              <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="sizeForm.end"
                style="width: 200px"
                type="datetime"
                :placeholder="$t('operatManage.operationLogObj.optionDate')"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <el-button
                @click="onSubmit"
                icon="el-icon-search"
                size="small"
                type="primary"
                >{{ $t("operatManage.operationLogObj.inquire") }}</el-button
              >
              <el-button
                @click="resAllTable"
                icon="el-icon-delete"
                type="info"
                size="small"
                >{{ $t("operatManage.operationLogObj.empty") }}</el-button
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="table_box subpage_Div">
    <div class="table_box subpage_Div" :style="styleVar">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="85%"
        height="calc(100% - 57px)"
      >
        <el-table-column
          align="center"
@@ -141,10 +134,7 @@
          :formatter="formatData"
        />
      </el-table>
      <div
        style="margin-top: 10px"
        class="pagination_box"
      >
      <div style="margin-top: 25px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -162,9 +152,7 @@

<script>
import MyBread from "../../components/MyBread.vue";
import {
  downlog_selectByPageAndCount
} from "../../api/api";
import { downlog_selectByPageAndCount } from "../../api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -173,7 +161,7 @@

  data() {
    return {
      popperclass: '',
      popperclass: "",
      sizeForm: {
        start: null,
        end: null,
@@ -187,12 +175,30 @@
        start: null,
        end: null,
        uname: null,
        type: null
        type: null,
      },
      count: 0,
      tableHeight: 0,
      timer: 0,
      styleVar: {
        height: "calc(100% - 109px)",
      },
    };
  },
  methods: {
    onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
      });
    },
    formatSize(row, column) {
      let data = row[column.property];
      if (data == null) {
@@ -201,9 +207,9 @@

      if (data > 1024) {
        var val = data / 1024;
        return val + "GB"
        return val + "GB";
      } else {
        return data + "MB"
        return data + "MB";
      }
    },
    formatType(row, column) {
@@ -213,19 +219,19 @@
      }
      switch (data) {
        case 1:
          return 'Shp文件';
          return "Shp文件";
          break;
        case 2:
          return '专题图';
          return "专题图";
          break;
        case 3:
          return '元数据';
          return "元数据";
          break;
        case 4:
          return '业务数据';
          return "业务数据";
          break;
        default:
          return '未知数据';
          return "未知数据";
          break;
      }
    },
@@ -243,7 +249,11 @@
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y + "-" + this.add0(m) + "-" + this.add0(d) +
        y +
        "-" +
        this.add0(m) +
        "-" +
        this.add0(d) +
        " " +
        this.add0(h) +
        ":" +
@@ -267,21 +277,21 @@
        start: null,
        end: null,
        uname: null,
        type: null
      }
        type: null,
      };
      this.sizeForm = {
        start: null,
        end: null,
        uname: null,
        type: null,
      }
      };
      this.getAllData();
    },
    onSubmit() {
      this.listData.end = this.sizeForm.end;
      this.listData.start = this.sizeForm.start;
      this.listData.type = this.sizeForm.type;
      this.listData.uname = this.sizeForm.uname
      this.listData.uname = this.sizeForm.uname;
      this.getAllData();
    },

@@ -301,7 +311,15 @@
      }
      this.tableData = data.result;
      this.count = data.count;
    }
    },
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight();
  },
  created() {
    this.getAllData();
@@ -319,22 +337,17 @@
    width: 300px;
  }
  .inquire {
    padding: 10px;
    padding: 8px;
    margin-top: 20px;

    border-radius: 5px;

    margin-bottom: 20px;
    .el-form-item {
      margin: 7px;
      margin: 5px;
    }
  }
  .table_box {
    overflow: auto;
    height: 57%;
    padding: 10px;
    border-radius: 5px;
  }

  .text-center {
    text-align: center;
  }

 src/views/maintenance/eventlogManage.vue

@@ -5,13 +5,15 @@
        `${$t('operatManage.ResourceLog')}`,
      ]"></My-bread>
    <el-divider />
    <div class="inquire subpage_Div">
    <div class="inquire subpage_Div" ref="container">
      <el-form
        :inline="true"
        ref="sizeForm"
        :model="sizeForm"
      >
        <el-form-item
      <div class="flex_box">
        <div style="margin-right: auto">
            <el-form-item
          prop="uname"
          :label="$t('operatManage.operationLogObj.username')"
        >
@@ -85,8 +87,9 @@
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item style="float: right">
        </div>
        <div>
 <el-form-item>
          <el-button
            @click="onSubmit"
            icon="el-icon-search"
@@ -100,19 +103,24 @@
            size="small"
          >{{ $t("operatManage.operationLogObj.empty") }}</el-button>
        </el-form-item>
        </div>
      </div>
      

       
      </el-form>
    </div>
    <div class="table_box subpage_Div">
    <div class="table_box subpage_Div" :style="styleVar">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="84%"
        height="calc(100% - 57px)"
      >
        <el-table-column
          align="center"
          type="index"
          :label="$t('operatManage.ELM.index')"
          width="70px"
           height="calc(100% - 57px)"
        />
        <el-table-column
          align="center"
@@ -144,7 +152,7 @@
        />
      </el-table>
      <div
        style="margin-top: 10px"
     
        class="pagination_box"
      >
        <el-pagination
@@ -186,9 +194,27 @@
        pageSize: 10,
      },
      count: 0,
      tableHeight: 0,
      timer: 0,
      styleVar: {
        "height": "calc(100% - 109px)",
      },
    };
  },
  methods: {
        onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
      });
    },
    //格式化时间
    add0(m) {
      return m < 10 ? "0" + m : m;
@@ -276,6 +302,14 @@
      this.count = data.count;
    },
  },
    beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
    mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight()
  },
  created() {
    this.getList();
  },
@@ -293,27 +327,18 @@
  }
  .inquire {
    
    padding: 10px;
    padding: 8px;
    margin-top: 20px;

    border-radius: 5px;
 

    margin-bottom: 20px;
    .el-form-item {
      margin: 7px;
      margin: 5px;
    }
    
  }
  .table_box {
    overflow: auto;
    padding: 10px;
    border-radius: 5px;
    
    height: 57%;
    /*修改table 表体的背景颜色和文字颜色*/
 
 
  }

  .text-center {
    text-align: center;
  }

 src/views/maintenance/logLog.vue

@@ -1,124 +1,106 @@
<template>
  <div class="logLog_box">
    <My-bread :list="[
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.logLog')}`,
      ]"></My-bread>
      ]"
    ></My-bread>
    <el-divider />
    <div class="inquire subpage_Div">

      <el-form
        :inline="true"
        ref="sizeForm"
        :model="sizeForm"
      >
        <el-form-item
          prop="uname"
          :label="$t('operatManage.operationLogObj.username')"
        >
          <el-input
          style="width:200px"
            v-model="sizeForm.uname"
            :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
          />
        </el-form-item>
        <el-form-item
          prop="type"
          :label="$t('operatManage.operationLogObj.operationType')"
        >
          <el-select
          style="width:200px"
           :popper-append-to-body="false"
            v-model="sizeForm.type"
            :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
          >
            <el-option
              :label="$t('loglog.login')"
              value="1"
            />
            <el-option
              :label="$t('loglog.checkout')"
              value="2"
            />
            <el-option
              :label="$t('loglog.logout')"
              value="3"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="start"
          :label="$t('operatManage.operationLogObj.startTime')"
        >
          <el-date-picker
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="sizeForm.start"
            style="width:200px"
            type="datetime"
            :placeholder="$t('operatManage.operationLogObj.optionDate')"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          prop="end"
          :label="$t('operatManage.operationLogObj.endTime')"
        >
          <el-date-picker
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="sizeForm.end"
            style="width:200px"
            type="datetime"
            :placeholder="$t('operatManage.operationLogObj.optionDate')"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item style="float:right">
          <el-button
            @click="onSubmit"
            icon="el-icon-search"
            size="small"
            type="primary"
          >{{ $t("operatManage.operationLogObj.inquire") }}</el-button>
          <el-button
            @click="onEmpty('sizeForm')"
            icon="el-icon-delete"
            type="info"
            size="small"
          >{{ $t("operatManage.operationLogObj.empty") }}</el-button>
        </el-form-item>
    <div class="inquire subpage_Div" ref="container">
      <el-form :inline="true" ref="sizeForm" :model="sizeForm">
        <div class="flex_box">
          <div style="margin-right: auto">
            <el-form-item
              prop="uname"
              :label="$t('operatManage.operationLogObj.username')"
            >
              <el-input
                style="width: 200px"
                v-model="sizeForm.uname"
                :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
              />
            </el-form-item>
            <el-form-item
              prop="type"
              :label="$t('operatManage.operationLogObj.operationType')"
            >
              <el-select
                style="width: 200px"
                :popper-append-to-body="false"
                v-model="sizeForm.type"
                :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
              >
                <el-option :label="$t('loglog.login')" value="1" />
                <el-option :label="$t('loglog.checkout')" value="2" />
                <el-option :label="$t('loglog.logout')" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item
              prop="start"
              :label="$t('operatManage.operationLogObj.startTime')"
            >
              <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="sizeForm.start"
                style="width: 200px"
                type="datetime"
                :placeholder="$t('operatManage.operationLogObj.optionDate')"
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              prop="end"
              :label="$t('operatManage.operationLogObj.endTime')"
            >
              <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="sizeForm.end"
                style="width: 200px"
                type="datetime"
                :placeholder="$t('operatManage.operationLogObj.optionDate')"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <el-button
                @click="onSubmit"
                icon="el-icon-search"
                size="small"
                type="primary"
                >{{ $t("operatManage.operationLogObj.inquire") }}</el-button
              >
              <el-button
                @click="onEmpty('sizeForm')"
                icon="el-icon-delete"
                type="info"
                size="small"
                >{{ $t("operatManage.operationLogObj.empty") }}</el-button
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 表格显示 -->
    <div class="table_box subpage_Div">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="80%"
      >
    <div class="table_box subpage_Div" :style="styleVar">
      <el-table :data="tableData" style="width: 100%" height="calc(100% - 57px)">
        <el-table-column
          width="150"
          type="index"
          :label="$t('loglog.serialnumber')"
        />
        <el-table-column
          prop="uname"
          :label="$t('loglog.username')"
        />
        <el-table-column prop="uname" :label="$t('loglog.username')" />
        <el-table-column
          prop="appid"
          :label="$t('loglog.applicationProgram')"
          :formatter="formatAppid"
        />
        <el-table-column
          prop="ip"
          :label="$t('loglog.ipadress')"
        />
        <el-table-column
          prop="descr"
          :label="$t('loglog.describe')"
        />
        <el-table-column prop="ip" :label="$t('loglog.ipadress')" />
        <el-table-column prop="descr" :label="$t('loglog.describe')" />
        <el-table-column
          prop="optime"
          :formatter="formatData"
@@ -136,10 +118,7 @@
        />
      </el-table>
      <!-- 分页 -->
      <div
        style="margin-top: 40px"
        class="pagination_box"
      >
      <div style="margin-top: 25px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -179,9 +158,31 @@
        pageSize: 10,
      },
      count: 0,
      tableHeight: 0,
      timer: 0,
      styleVar: {
        height: "calc(100% - 109px)",
      },
    };
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
      });
    },
    //格式化列表
    formatType(row, column) {
      let data;
@@ -282,6 +283,10 @@
      this.count = data.count;
    },
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight();
  },
  created() {
    var val = this.$store.state.currentPerms;
    var permsEntity = this.$store.state.permsEntity;
@@ -303,22 +308,18 @@
  padding: 1%;

  .inquire {
    padding: 10px;
    margin-top: 10px;
   
    padding: 8px;
    margin-top: 20px;

    border-radius: 5px;

    margin-bottom: 10px;
    /deep/.el-form-item {
      margin-bottom: 10px;
    margin-bottom: 20px;
    .el-form-item {
      margin-bottom: 5px;
    }
  }
  .table_box {
    padding: 10px;
    border-radius: 5px;
    overflow: auto;
    height: 60%;
  }

  .text-center {
    text-align: center;
  }

 src/views/maintenance/operationLog.vue

@@ -1,117 +1,121 @@
<template>
  <div class="operationLog_box">
    <My-bread :list="[
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.operationLog')}`,
      ]"></My-bread>
      ]"
    ></My-bread>
    <el-divider />
    <div class="inquire subpage_Div">

      <el-form
        :inline="true"
        ref="sizeForm"
        :model="sizeForm"
      >
        <el-form-item
          prop="uname"
          :label="$t('operatManage.operationLogObj.username')"
        >
          <el-input
          style="width:200px"
            v-model="sizeForm.uname"
            :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
          />
        </el-form-item>
        <el-form-item
          prop="type"
          :label="$t('operatManage.operationLogObj.operationType')"
        >
          <el-select
          style="width:200px"
           :popper-append-to-body="false"
            clearable
            v-model="sizeForm.type"
            :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
          >
            <el-option
              :label="$t('operatManage.operationLogObj.check')"
              value="1"
            />
            <el-option
              :label="$t('operatManage.operationLogObj.added')"
              value="2"
            />
            <el-option
              :label="$t('operatManage.operationLogObj.modification')"
              value="3"
            />
            <el-option
              :label="$t('operatManage.operationLogObj.delete')"
              value="4"
            />
            <el-option
              :label="$t('operatManage.operationLogObj.uploading')"
              value="5"
            />
            <el-option
              :label="$t('operatManage.operationLogObj.download')"
              value="6"
            />
            <el-option
              :label="$t('operatManage.operationLogObj.otherOne')"
              value="0"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="start"
          :label="$t('operatManage.operationLogObj.startTime')"
        >
          <el-date-picker
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="sizeForm.start"
            style="width:200px"
            type="datetime"
            :placeholder="$t('operatManage.operationLogObj.optionDate')"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          prop="end"
          :label="$t('operatManage.operationLogObj.endTime')"
        >
          <el-date-picker
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="sizeForm.end"
            style="width:200px"
            type="datetime"
            :placeholder="$t('operatManage.operationLogObj.optionDate')"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item style="float:right">
          <el-button
            @click="onSubmit"
            icon="el-icon-search"
            size="small"
            type="primary"
          >{{ $t("operatManage.operationLogObj.inquire") }}</el-button>
          <el-button
            @click="onEmpty('sizeForm')"
            icon="el-icon-delete"
            type="info"
            size="small"
          >{{ $t("operatManage.operationLogObj.empty") }}</el-button>
        </el-form-item>
    <div class="inquire subpage_Div" ref="container">
      <el-form :inline="true" ref="sizeForm" :model="sizeForm">
        <div class="flex_box">
          <div style="margin-right: auto">
            <el-form-item
              prop="uname"
              :label="$t('operatManage.operationLogObj.username')"
            >
              <el-input
                style="width: 200px"
                v-model="sizeForm.uname"
                :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
              />
            </el-form-item>
            <el-form-item
              prop="type"
              :label="$t('operatManage.operationLogObj.operationType')"
            >
              <el-select
                style="width: 200px"
                :popper-append-to-body="false"
                clearable
                v-model="sizeForm.type"
                :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
              >
                <el-option
                  :label="$t('operatManage.operationLogObj.check')"
                  value="1"
                />
                <el-option
                  :label="$t('operatManage.operationLogObj.added')"
                  value="2"
                />
                <el-option
                  :label="$t('operatManage.operationLogObj.modification')"
                  value="3"
                />
                <el-option
                  :label="$t('operatManage.operationLogObj.delete')"
                  value="4"
                />
                <el-option
                  :label="$t('operatManage.operationLogObj.uploading')"
                  value="5"
                />
                <el-option
                  :label="$t('operatManage.operationLogObj.download')"
                  value="6"
                />
                <el-option
                  :label="$t('operatManage.operationLogObj.otherOne')"
                  value="0"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              prop="start"
              :label="$t('operatManage.operationLogObj.startTime')"
            >
              <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="sizeForm.start"
                style="width: 200px"
                type="datetime"
                :placeholder="$t('operatManage.operationLogObj.optionDate')"
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              prop="end"
              :label="$t('operatManage.operationLogObj.endTime')"
            >
              <el-date-picker
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="sizeForm.end"
                style="width: 200px"
                type="datetime"
                :placeholder="$t('operatManage.operationLogObj.optionDate')"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <el-button
                @click="onSubmit"
                icon="el-icon-search"
                size="small"
                type="primary"
                >{{ $t("operatManage.operationLogObj.inquire") }}</el-button
              >
              <el-button
                @click="onEmpty('sizeForm')"
                icon="el-icon-delete"
                type="info"
                size="small"
                >{{ $t("operatManage.operationLogObj.empty") }}</el-button
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="table_box subpage_Div">
    <div class="table_box subpage_Div" :style="styleVar">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="79%"
        height="calc(100% - 57px)"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column
@@ -170,10 +174,7 @@
          </template>
        </el-table-column> -->
      </el-table>
      <div
        style="margin-top: 40px"
        class="pagination_box"
      >
      <div class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -213,9 +214,27 @@
        pageSize: 10,
      },
      count: 0,
      tableHeight: 0,
      timer: 0,
      styleVar: {
        height: "calc(100% - 109px)",
      },
    };
  },
  methods: {
    onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
      });
    },
    //格式化时间
    add0(m) {
      return m < 10 ? "0" + m : m;
@@ -303,6 +322,14 @@
      this.count = data.count;
    },
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight();
  },
  created() {
    this.getList();
  },
@@ -316,18 +343,17 @@
  padding: 1%;

  .inquire {
    padding: 10px;
    padding: 8px;
    margin-top: 20px;

    border-radius: 5px;
   

    margin-bottom: 20px;
    .el-form-item {
      margin: 5px;
    }
  }
  .table_box {
    padding: 10px;
    border-radius: 5px;
    overflow: auto;
    height: 60%;
  }

  .text-center {
    text-align: center;
  }

 src/views/maintenance/parameterConfiguration.vue

@@ -1,16 +1,19 @@
<template>
  <div class="parameterConfiguration_box">
    <My-bread :list="[
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.systemLayout')}`,
      ]"></My-bread>
      ]"
    ></My-bread>
    <el-divider />
    <div style="height: 73%">
          <el-table
            ref="filterTable"
            :data="tableData"
            style="width: 100%"
            height="99%">
    <div class="table_box" :style="styleVar">
      <el-table
        ref="filterTable"
        :data="tableData"
        style="width: 100%"
        height="calc(100% - 57px)"
      >
        <el-table-column
          align="center"
          type="index"
@@ -59,7 +62,8 @@
              type="warning"
              plain
              size="small"
            >{{ $t('common.edit') }}</el-button>
              >{{ $t("common.edit") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
@@ -94,10 +98,7 @@
          :label="$t('operatManage.sysLayOutObj.cvalue')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="upform.cvalue"
            autocomplete="off"
          ></el-input>
          <el-input v-model="upform.cvalue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('operatManage.sysLayOutObj.dvalue')"
@@ -124,29 +125,21 @@
          <label class="boxlabel">{{ upform.descr }}</label>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="EditFromDataClose"
        >{{
          $t('common.close')
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="EditFromDataClose">{{
          $t("common.close")
        }}</el-button>
        <el-button
          @click="EditFromData"
          size="small"
          type="primary"
        >{{ $t('common.confirm') }}</el-button>
        <el-button @click="EditFromData" size="small" type="primary">{{
          $t("common.confirm")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MyBread from '../../components/MyBread.vue';
import { select_Args_ByPageAndCount, update_args } from '../../api/api.js';
import MyBread from "../../components/MyBread.vue";
import { select_Args_ByPageAndCount, update_args } from "../../api/api.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -160,15 +153,20 @@
        insert: false,
        update: false,
      },
      formLabelWidth: '120px',
      formLabelWidth: "120px",
      upform: {},
      EditFormdialog: false,
      tableData: [],
      count: 0,
      listData: {
        name: '',
        name: "",
        pageIndex: 1,
        pageSize: 10,
      },
      tableHeight: 0,
      timer: 0,
      styleVar: {
        height: "calc(100% - 75px)",
      },
    };
  },
@@ -195,8 +193,8 @@
        parseInt(this.upform.cvalue) > parseInt(this.upform.maxValue)
      ) {
        this.$message({
          message: '当前值不能小于最小值或大于最大值!',
          type: 'warning',
          message: "当前值不能小于最小值或大于最大值!",
          type: "warning",
        });
        return;
      }
@@ -206,26 +204,26 @@
        this.uploadFile = val_data.result;

        this.$message({
          message: '修改成功！',
          type: 'success',
          message: "修改成功！",
          type: "success",
        });
        this.getRoleTabelData();
        this.EditFormdialog = false;
        this.upform = {};
      } else {
        this.$message({
          message: '修改失败！',
          type: 'warning',
          message: "修改失败！",
          type: "warning",
        });
      }
    },
    async getRoleTabelData() {
      if (this.listData.tab == '') {
      if (this.listData.tab == "") {
        delete this.listData.tab;
      }
      const data = await select_Args_ByPageAndCount(this.listData);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败");
      }
      console.log(data);
      this.tableData = data.result;
@@ -233,13 +231,13 @@
    },
    showPermsMenu(res) {
      switch (res.tag) {
        case '/delete':
        case "/delete":
          this.menuStatus.delete = true;
          break;
        case '/insert':
        case "/insert":
          this.menuStatus.insert = true;
          break;
        case '/update':
        case "/update":
          this.menuStatus.update = true;
          break;
      }
@@ -263,14 +261,14 @@
  height: 98%;
  width: 98%;
  padding: 1%;
 

  .parameterConfiguration {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 88%;
    overflow: auto;
    border-radius: 5px;
 

    box-sizing: border-box;
    .el-select {
      width: 100%;
@@ -279,12 +277,6 @@
      display: flex;
      justify-content: center;
    }
 
  }
  .pagination_box {
    margin-top: 10px;
  }

 
}
</style>

 src/views/maintenance/systemMonitoring.vue

@@ -1,47 +1,47 @@
<template>
  <div class="systemMonitoring_box">
    <My-bread :list="[
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.systemMonitoring')}`,
      ]"></My-bread>
      ]"
    ></My-bread>
    <el-divider />
    <div class="content_Box">
      <div class="cloumn_Box1">
        <div class="flex_Box1 subpage_Div">
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
          >
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              :label="$t('operatManage.systemMonitoringObj.abnormalResources')"
              name="first"
            >
              <el-table
                :data="resInfo"
                style="width: 100%; height: 100%"
              >
                <el-table-column
                  prop="id"
                  :label="$t('operatManage.systemMonitoringObj.resourceID')"
                >
                </el-table-column>
                <el-table-column
                  prop="name"
                  :label="$t('operatManage.systemMonitoringObj.resourceName')"
                >
                </el-table-column>
                <el-table-column
                  prop="bak"
                  :label="$t('operatManage.systemMonitoringObj.resourceState')"
                >
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  :label="$t('operatManage.systemMonitoringObj.abnormaltime')"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
              <div class="table_b">
                <el-table :data="resInfo" style="width: 100%; height: 100%">
                  <el-table-column
                    prop="id"
                    :label="$t('operatManage.systemMonitoringObj.resourceID')"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    :label="$t('operatManage.systemMonitoringObj.resourceName')"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="bak"
                    :label="
                      $t('operatManage.systemMonitoringObj.resourceState')
                    "
                  >
                  </el-table-column>
                  <el-table-column
                    prop="createTime"
                    :label="$t('operatManage.systemMonitoringObj.abnormaltime')"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane
              :label="
@@ -49,21 +49,13 @@
              "
              name="second"
            >

              <div
                id="resUseChart"
                style="width:101vh; height: 30vh; "
              ></div>

              <div id="resUseChart" style="width: 101vh; height: 30vh"></div>
            </el-tab-pane>
            <el-tab-pane
              :label="$t('operatManage.systemMonitoringObj.userloginStatus')"
              name="third"
            >
              <div
                id="userLoginChart"
                style="width:101vh; height: 30vh; "
              ></div>
              <div id="userLoginChart" style="width: 101vh; height: 30vh"></div>
            </el-tab-pane>
            <el-tab-pane
              :label="
@@ -73,48 +65,43 @@
            >
              <div
                id="operateCountChart"
                style="width:101vh; height: 30vh; "
                style="width: 101vh; height: 30vh"
              ></div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="flex_Box subpage_Div">
        <div class="flex_Box subpage_Div" style="overflow: auto;padding-bottom:20px">
          <div>
            <div
              style="line-height: 32px"
              class="imageTitle"
            >
              {{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
            <div style="line-height: 32px" class="imageTitle">
              {{ $t("operatManage.systemMonitoringObj.onlinePersonnel") }}
            </div>
          </div>
          <el-table
            :data="tableData"
            style="width: 100%"
            height="90%"
          >
            <el-table-column
              align="center"
              type="index"
              :label="$t('operatManage.ELM.index')"
              width="100px"
            />
            <el-table-column
              prop="uid"
              :label="$t('operatManage.systemMonitoringObj.userID')"
            >
            </el-table-column>
            <el-table-column
              prop="uname"
              :label="$t('operatManage.systemMonitoringObj.username')"
            >
            </el-table-column>
            <el-table-column
              prop="loginTime"
              :label="$t('operatManage.systemMonitoringObj.onlineTime')"
              fixed="right"
            >
            </el-table-column>
          </el-table>
          <div class="table_b">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column
                align="center"
                type="index"
                :label="$t('operatManage.ELM.index')"
                width="100px"
              />
              <el-table-column
                prop="uid"
                :label="$t('operatManage.systemMonitoringObj.userID')"
              >
              </el-table-column>
              <el-table-column
                prop="uname"
                :label="$t('operatManage.systemMonitoringObj.username')"
              >
              </el-table-column>
              <el-table-column
                prop="loginTime"
                :label="$t('operatManage.systemMonitoringObj.onlineTime')"
                fixed="right"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="cloumn_Box">
@@ -122,7 +109,7 @@
          <div style="width: 100%; height: 20px">
            <div class="image1"></div>
            <div class="imageTitle">
              {{ $t('operatManage.systemMonitoringObj.memoryMonitoring') }}
              {{ $t("operatManage.systemMonitoringObj.memoryMonitoring") }}
            </div>
          </div>
          <div class="top_Box1">
@@ -131,15 +118,17 @@
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.haveBeenUsed')
                    }}</label>
                      $t("operatManage.systemMonitoringObj.haveBeenUsed")
                    }}</label
                  >
                  <p>{{ memInfo.use }}</p>
                </div>
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.usageRate')
                    }}</label>
                      $t("operatManage.systemMonitoringObj.usageRate")
                    }}</label
                  >
                  <p>{{ memInfo.usage }}</p>
                </div>
              </div>
@@ -147,23 +136,22 @@
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.totalMemory')
                    }}</label>
                      $t("operatManage.systemMonitoringObj.totalMemory")
                    }}</label
                  >
                  <p>{{ memInfo.totalMem }}</p>
                </div>
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.remainingMemory')
                    }}</label>
                      $t("operatManage.systemMonitoringObj.remainingMemory")
                    }}</label
                  >
                  <p>{{ memInfo.remainMem }}</p>
                </div>
              </div>
            </div>
            <div
              id="fathershuiWen"
              class="top_box_right"
            >
            <div id="fathershuiWen" class="top_box_right">
              <div id="shuiwen"></div>
            </div>
          </div>
@@ -171,11 +159,8 @@
        <div class="flex_Box subpage_Div">
          <div>
            <div class="image2"></div>
            <div
              style="line-height: 32px"
              class="imageTitle"
            >
              {{ $t('operatManage.systemMonitoringObj.cpuMonitoring') }}
            <div style="line-height: 32px" class="imageTitle">
              {{ $t("operatManage.systemMonitoringObj.cpuMonitoring") }}
            </div>
          </div>
          <div
@@ -186,28 +171,24 @@
        <div class="flex_Box subpage_Div">
          <div style="width: 100%; height: 34px">
            <div class="image3"></div>
            <div
              style="line-height: 32px"
              class="imageTitle"
            >
              {{ $t('operatManage.systemMonitoringObj.heteroconstant') }}
            <div style="line-height: 32px" class="imageTitle">
              {{ $t("operatManage.systemMonitoringObj.heteroconstant") }}
            </div>
          </div>
          <div class="ycContent">
            <div class="ycsBox">
              <div style="width:100%;height:100%">
              <div style="width: 100%; height: 100%">
                <div class="ycTltle">{{ resInfoCount }}</div>
                <div class="heteroTitle">
                  {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
                  {{
                    $t("operatManage.systemMonitoringObj.numberOfExceptions")
                  }}
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>

    </div>
    <!-- <div class="inform_box">
      <div class="content_box">
@@ -394,8 +375,8 @@
</template>

<script>
import MyBread from '../../components/MyBread.vue';
import 'echarts-liquidfill';
import MyBread from "../../components/MyBread.vue";
import "echarts-liquidfill";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -404,7 +385,7 @@
  data() {
    //这里存放数据
    return {
      activeName: 'first',
      activeName: "first",
      ws: null,
      tableData: [],
      memInfo: { totalMem: 0, use: 0, usage: 0, remainMem: 0 },
@@ -427,7 +408,7 @@
        this.echartData.splice(0, 1);
      }
      this.lineChart2(this.memInfo.usage);
      this.echartData.push([' ', parseFloat(res.cpuInfo.cpuSysUsage)]);
      this.echartData.push([" ", parseFloat(res.cpuInfo.cpuSysUsage)]);
      this.lineChart1();
    },
    SetTableData2(res) {
@@ -444,15 +425,15 @@
    },
    handleClick(tab, event) {
      switch (tab) {
        case 'first':
        case "first":
          break;
        case 'second':
        case "second":
          this.lineChart3();
          break;
        case 'third':
        case "third":
          this.lineChart4();
          break;
        case 'fourth':
        case "fourth":
          this.lineChart5();
          break;
      }
@@ -467,26 +448,24 @@
        visualMap: [
          {
            show: false,
            type: 'continuous',
            type: "continuous",
            seriesIndex: 0,
          },
        ],
        toolbox: {
          show: true,
          feature: {

            saveAsImage: { show: true }
          }
            saveAsImage: { show: true },
          },
        },
        title: [],
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
        },
        xAxis: {
          type: 'category',
          type: "category",
          boundaryGap: false,
          data: ['', '', '', '', '', '', ''],

          data: ["", "", "", "", "", "", ""],
        },
        yAxis: [
          {
@@ -497,15 +476,15 @@
        ],
        grid: [
          {
            top: '10%',
            bottom: '10%',
            left: '10%',
            right: '10%',
            top: "10%",
            bottom: "10%",
            left: "10%",
            right: "10%",
          },
        ],
        series: [
          {
            type: 'line',
            type: "line",
            showSymbol: false,
            data: valueList,
            // itemStyle: {
@@ -516,29 +495,25 @@
            //     },
            //   },
            // }


          },
        ],
      };

      let myChart = this.$echarts.init(
        document.getElementById('Sys_cpu_chart')
        document.getElementById("Sys_cpu_chart")
      );
      myChart.setOption(option);
      window.addEventListener('resize', function () {
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    lineChart2(res) {


      var a = 0;
      if (res != 0) {
        a = res.split('%').join('');
        a = res.split("%").join("");
      }

      var data = { name: '1111', value: parseFloat(a) / 100 };
      var data = { name: "1111", value: parseFloat(a) / 100 };
      var list = [];
      let value = data.value;
      list.push({ name: data.name, value: data.value });
@@ -553,45 +528,45 @@
        // 提示框组件
        tooltip: {
          show: false,
          trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            show: false,
          },
          formatter: function (value) {
            return value.seriesName + ': ' + parseInt(value.value * 100) + '% ';
            return value.seriesName + ": " + parseInt(value.value * 100) + "% ";
          },
        },
        series: [
          {
            type: 'liquidFill',
            name: ' ',
            radius: '40%',
            center: ['30%', '30%'],
            shape: 'circle',
            type: "liquidFill",
            name: " ",
            radius: "40%",
            center: ["30%", "30%"],
            shape: "circle",
            phase: 0,
            direction: 'right',
            direction: "right",
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1,
                borderWidth: 0,
                borderColor: '#2bf9ed',
                borderColor: "#2bf9ed",
              },
            },
            // 图形样式
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#c5e87e' }, //柱图渐变色
                { offset: 0.5, color: '#2bf9ed' }, //柱图渐变色                 //柱图渐变色
                { offset: 0, color: "#c5e87e" }, //柱图渐变色
                { offset: 0.5, color: "#2bf9ed" }, //柱图渐变色                 //柱图渐变色
              ]),
              opacity: 0.5,
              shadowBlur: 10,
            },
            backgroundStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2bf9ed' }, //柱图渐变色
                { offset: 0.4, color: '#44C0C1' }, //柱图渐变色                 //柱图渐变色
                { offset: 0, color: "#2bf9ed" }, //柱图渐变色
                { offset: 0.4, color: "#44C0C1" }, //柱图渐变色                 //柱图渐变色
              ]),
              opacity: 0.5,
            },
@@ -605,15 +580,15 @@
            label: {
              fontSize: 40,
              fontWeight: 600,
              color: '#fff',
              color: "#fff",
            },
            data: list,
          },
          {
            name: 'Access From',
            type: 'pie',
            radius: ['43%', '50%'],
            center: ['30%', '30%'],
            name: "Access From",
            type: "pie",
            radius: ["43%", "50%"],
            center: ["30%", "30%"],
            startAngle: 340,
            avoidLabelOverlap: false,
            itemStyle: {
@@ -621,13 +596,13 @@
            },
            label: {
              show: false,
              position: 'center',
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
@@ -636,16 +611,16 @@
            data: [
              {
                value: 0.4,
                name: 'Direct',
                name: "Direct",
                itemStyle: {
                  color: '#2bf9ed',
                  color: "#2bf9ed",
                },
              },
              {
                value: 0.6,
                name: 'Direct',
                name: "Direct",
                itemStyle: {
                  color: 'rgba(240, 248, 255, 0)',
                  color: "rgba(240, 248, 255, 0)",
                },
              },
            ],
@@ -659,55 +634,54 @@
        ],
      };

      let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
      let myChart1 = this.$echarts.init(document.getElementById("shuiwen"));
      myChart1.setOption(options);
      window.addEventListener('resize', function () {
      window.addEventListener("resize", function () {
        myChart1.resize();
      });
    },
    lineChart3() {
      var data = [
        { name: '可用资源', value: this.resUseCount.resAbleCount },
        { name: '不可用资源', value: this.resUseCount.resUnableCount },
        { name: "可用资源", value: this.resUseCount.resAbleCount },
        { name: "不可用资源", value: this.resUseCount.resUnableCount },
      ];
      var option = {
        tooltip: {
          trigger: 'item',
          trigger: "item",
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          }
            saveAsImage: { show: true },
          },
        },
        legend: {
          top: '5%',
          left: 'center',
          top: "5%",
          left: "center",
          textStyle: {
            fontSize: 18, //字体大小

          },
        },
        series: [
          {
            name: ' ',
            type: 'pie',
            radius: ['40%', '70%'],
            name: " ",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
@@ -717,9 +691,9 @@
          },
        ],
      };
      let myChart2 = this.$echarts.init(document.getElementById('resUseChart'));
      let myChart2 = this.$echarts.init(document.getElementById("resUseChart"));
      myChart2.setOption(option);
      window.addEventListener('resize', function () {
      window.addEventListener("resize", function () {
        myChart2.resize();
      });
    },
@@ -736,15 +710,15 @@
          show: false,
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
@@ -753,24 +727,24 @@
          },
        },
        xAxis: {
          type: 'category',
          type: "category",
          boundaryGap: false,
          data: data1,
        },
        yAxis: {
          type: 'value',
          type: "value",
        },
        series: [
          {
            name: '',
            type: 'line',
            stack: 'Total',
            name: "",
            type: "line",
            stack: "Total",
            data: data2,
          },
        ],
      };
      let myChart3 = this.$echarts.init(
        document.getElementById('userLoginChart')
        document.getElementById("userLoginChart")
      );
      myChart3.setOption(option);
    },
@@ -784,27 +758,26 @@

      var option = {
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'shadow',
            type: "shadow",
          },
        },
        toolbox: {
          show: true,
          feature: {

            saveAsImage: { show: true }
          }
            saveAsImage: { show: true },
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            type: "category",
            data: data1,
            axisTick: {
              alignWithLabel: true,
@@ -813,20 +786,20 @@
        ],
        yAxis: [
          {
            type: 'value',
            type: "value",
          },
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: data2,
          },
        ],
      };
      let myChart4 = this.$echarts.init(
        document.getElementById('operateCountChart')
        document.getElementById("operateCountChart")
      );
      myChart4.setOption(option);
    },
@@ -835,13 +808,13 @@
    if (Window.ws != null) {
      Window.ws.close();
      Window.ws.onclose = () => {
        console.log('服务器关闭');
        console.log("服务器关闭");
      };
      Window.ws = null;
    }

    Window.ws = new WebSocket(socketUrl);
    Window.ws.option = () => { };
    Window.ws.option = () => {};
    var that = this;
    Window.ws.onmessage = (msg) => {
      // console.log('来自服务器端的数据：' + msg.data); //监听接受来自服务端的信息
@@ -860,14 +833,10 @@
  mounted() {
    var mywidth = $("#fathershuiWen").width();
    var mysright = $("#fathershuiWen").height();
    var width = (mywidth * 1.5) + "px"
    var height = (mysright * 1.5) + "px"
    var width = mywidth * 1.5 + "px";
    var height = mysright * 1.5 + "px";
    $("#shuiwen").width(width);
    $("#shuiwen").height(height);





    this.lineChart2(0);
  },
@@ -880,6 +849,14 @@
  width: 98%;
  padding: 1%;

  .table_b .el-table,
  .table_b .el-table /deep/ .el-table__expanded-cell {
    background-color: transparent !important;
  }
  .table_b .el-table /deep/ th,
  .table_b .el-table /deep/ tr {
    background-color: transparent !important;
  }
  .content_Box {
    width: 100%;
    height: 90%;

 src/views/maintenance/tokentool.vue

@@ -1,86 +1,91 @@
<template>
  <div class="tokentool_box">
    <My-bread :list="[
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.tokentool')}`,
      ]"></My-bread>
      ]"
    ></My-bread>
    <el-divider />
    <div class="inquire subpage_Div">
      <el-form
        ref="formData"
        :model="ruleForm"
        :inline="true"
      >
        <el-form-item
          :label="$t('operatManage.tokentoolObj.tokenQuery')"
          prop="region"
        >
          <el-input
            style="width: 200px"
            v-model="ruleForm.name"
            :placeholder="$t('common.pleaseInput')"
          />
        </el-form-item>
    <div class="inquire subpage_Div" ref="container">
      <el-form ref="formData" :model="ruleForm" :inline="true">
        <div class="flex_box">
          <div style="margin-right: auto">
            <el-form-item
              :label="$t('operatManage.tokentoolObj.tokenQuery')"
              prop="region"
            >
              <el-input
                style="width: 200px"
                v-model="ruleForm.name"
                :placeholder="$t('common.pleaseInput')"
              />
            </el-form-item>

        <el-form-item :label="$t('operatManage.tokentoolObj.tokenStatus')">
          <el-select
          style="width:200px"
           :popper-append-to-body="false"
            v-model="ruleForm.value"
            :placeholder="$t('common.choose')"
          >
            <el-option
              value="0"
              :label="$t('operatManage.tokentoolObj.temporary')"
            ></el-option>
            <el-option
              value="1"
              :label="$t('operatManage.tokentoolObj.fixed')"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 查询 清空 -->
        <el-form-item style="float:right">
          <el-button
            v-if="menuStatus.insert"
            @click="InsertFormdialog = true"
            icon="el-icon-edit"
            type="success"
            size="small"
          >{{ $t('common.append') }}</el-button>
          <el-button
            v-if="menuStatus.delete"
            @click="delTokenData"
            icon="el-icon-delete"
            type="danger"
            size="small"
          >{{ $t('common.delete') }}</el-button>
          <el-button
            icon="el-icon-search"
            size="small"
            type="primary"
            @click="onSubmit"
          >{{ $t('common.iquery') }}</el-button>
          <el-button
            icon="el-icon-delete"
            type="info"
            size="small"
            @click="onEmpty('formData1')"
          >{{ $t('common.empty') }}</el-button>
        </el-form-item>
            <el-form-item :label="$t('operatManage.tokentoolObj.tokenStatus')">
              <el-select
                style="width: 200px"
                :popper-append-to-body="false"
                v-model="ruleForm.value"
                :placeholder="$t('common.choose')"
              >
                <el-option
                  value="0"
                  :label="$t('operatManage.tokentoolObj.temporary')"
                ></el-option>
                <el-option
                  value="1"
                  :label="$t('operatManage.tokentoolObj.fixed')"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <!-- 查询 清空 -->
            <el-form-item>
              <el-button
                v-if="menuStatus.insert"
                @click="InsertFormdialog = true"
                icon="el-icon-edit"
                type="success"
                size="small"
                >{{ $t("common.append") }}</el-button
              >
              <el-button
                v-if="menuStatus.delete"
                @click="delTokenData"
                icon="el-icon-delete"
                type="danger"
                size="small"
                >{{ $t("common.delete") }}</el-button
              >
              <el-button
                icon="el-icon-search"
                size="small"
                type="primary"
                @click="onSubmit"
                >{{ $t("common.iquery") }}</el-button
              >
              <el-button
                icon="el-icon-delete"
                type="info"
                size="small"
                @click="onEmpty('formData1')"
                >{{ $t("common.empty") }}</el-button
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div style="height: 73%">
          <el-table
            ref="filterTable"
            :data="tableData"
            style="width: 100%"
            height="94%">
        <el-table-column
          type="selection"
          width="55"
        />
    <div class="table_box" :style="styleVar">
      <el-table
        ref="filterTable"
        :data="tableData"
        style="width: 100%"
        height="calc(100% - 57px)"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          width="70"
          align="center"
@@ -147,17 +152,11 @@
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
            >{{
              $t('operatManage.tokentoolObj.invalid')
            <el-button type="danger" size="small">{{
              $t("operatManage.tokentoolObj.invalid")
            }}</el-button>
            <el-button
              type="warning"
              size="small"
            >{{
              $t('operatManage.tokentoolObj.renewal')
            <el-button type="warning" size="small">{{
              $t("operatManage.tokentoolObj.renewal")
            }}</el-button>
            <el-button
              v-if="menuStatus.update"
@@ -165,11 +164,12 @@
              type="warning"
              plain
              size="small"
            >{{ $t('common.update') }}</el-button>
              >{{ $t("common.update") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:10px">
      <div style="margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -189,10 +189,7 @@
      style="overflow: hidden"
      :visible.sync="InsertFormdialog"
    >
      <el-form
        ref="formData1"
        :model="insertform"
      >
      <el-form ref="formData1" :model="insertform">
        <el-form-item
          :label="$t('operatManage.tokentoolObj.token')"
          :label-width="formLabelWidth"
@@ -216,11 +213,10 @@
          :label-width="formLabelWidth"
        >
          <el-select
           :popper-append-to-body="false"
            style="width:94.2%"
            :popper-append-to-body="false"
            style="width: 94.2%"
            v-model="insertform.type"
            :placeholder="$t('common.choose')"
           
          >
            <el-option
              value="0"
@@ -243,21 +239,13 @@
        </el-form-item>
      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="insertFromDataClose"
        >{{
          $t('common.close')
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="insertFromDataClose">{{
          $t("common.close")
        }}</el-button>
        <el-button
          size="small"
          type="primary"
          @click="insertFromData"
        >{{ $t('common.confirm') }}</el-button>
        <el-button size="small" type="primary" @click="insertFromData">{{
          $t("common.confirm")
        }}</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹窗 -->
@@ -266,10 +254,7 @@
      style="overflow: hidden"
      :visible.sync="EditFormdialog"
    >
      <el-form
        ref="formData1"
        :model="insertform"
      >
      <el-form ref="formData1" :model="insertform">
        <el-form-item
          :label="$t('operatManage.tokentoolObj.token')"
          :label-width="formLabelWidth"
@@ -294,7 +279,7 @@
        >
          <el-select
            :popper-append-to-body="false"
            style="width:94.2%"
            style="width: 94.2%"
            v-model="upform.edit"
            @change="changeGame"
            :placeholder="$t('common.choose')"
@@ -320,35 +305,27 @@
        </el-form-item>
      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="editFromDataClose"
        >{{
          $t('common.close')
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="editFromDataClose">{{
          $t("common.close")
        }}</el-button>
        <el-button
          type="primary"
          size="small"
          @click="editFromData"
        >{{ $t('common.confirm') }}</el-button>
        <el-button type="primary" size="small" @click="editFromData">{{
          $t("common.confirm")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
import MyBread from '../../components/MyBread.vue';
import moment from "moment";
import MyBread from "../../components/MyBread.vue";
import {
  select_Token_ByPageAndCount,
  insertToken,
  updateToken,
  deleteTokens,
} from '../../api/api.js';
} from "../../api/api.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -357,7 +334,7 @@

  data() {
    return {
      formLabelWidth: '130px',
      formLabelWidth: "130px",
      InsertFormdialog: false,
      EditFormdialog: false,
      upform: {},
@@ -377,6 +354,11 @@
        insert: false,
        update: false,
      },
      tableHeight: 0,
      timer: 0,
      styleVar: {
        height: "calc(100% - 109px)",
      },
    };
  },
  created() {
@@ -389,16 +371,37 @@
    }
    this.getRoleTabelData();
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight();
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
      });
    },
    showPermsMenu(res) {
      switch (res.tag) {
        case '/delete':
        case "/delete":
          this.menuStatus.delete = true;
          break;
        case '/insert':
        case "/insert":
          this.menuStatus.insert = true;
          break;
        case '/update':
        case "/update":
          this.menuStatus.update = true;
          break;
      }
@@ -408,31 +411,33 @@
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].id);
      }
      this.$confirm('此操作将永久删除该令牌, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await deleteTokens({ ids: std.toString() });
        if (data.code == 200) {
          this.InsertFormdialog = false;
      this.$confirm("此操作将永久删除该令牌, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await deleteTokens({ ids: std.toString() });
          if (data.code == 200) {
            this.InsertFormdialog = false;
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.getRoleTabelData();
          } else {
            this.$message({
              message: "删除失败！",
              type: "warning",
            });
          }
        })
        .catch(() => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            type: "info",
            message: "已取消删除",
          });
          this.getRoleTabelData();
        } else {
          this.$message({
            message: '删除失败！',
            type: 'warning',
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      // const data = await deleteTokens({ ids: std.toString() });
      // if (data.code == 200) {
      //   this.$message({
@@ -462,14 +467,14 @@
        this.EditFormdialog = false;
        this.upform = {};
        this.$message({
          message: '修改成功！',
          type: 'success',
          message: "修改成功！",
          type: "success",
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: '修改失败！',
          type: 'warning',
          message: "修改失败！",
          type: "warning",
        });
      }
    },
@@ -500,14 +505,14 @@
        this.InsertFormdialog = false;
        this.insertform = {};
        this.$message({
          message: '添加成功！',
          type: 'success',
          message: "添加成功！",
          type: "success",
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: '添加失败！',
          type: 'warning',
          message: "添加失败！",
          type: "warning",
        });
      }
    },
@@ -518,23 +523,23 @@
      var month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : '0' + (date.getMonth() + 1);
      var day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
          : "0" + (date.getMonth() + 1);
      var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      // var todayDate = year + '-' + month + '-' + day
      var hour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours();
      var hour = date.getHours() > 9 ? date.getHours() : "0" + date.getHours();
      var min =
        date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes();
        date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
      var sec =
        date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds();
        date.getSeconds() > 9 ? date.getSeconds() : "0" + date.getSeconds();
      var todayDate =
        year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;
        year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec;
      return todayDate;
    },
    getNowDate(res) {
      var date = new Date();
      var min = date.getMinutes(); //2. 获取当前分钟
      date.setMinutes(min + parseInt(res));
      var sign2 = ':';
      var sign2 = ":";
      var year = date.getFullYear(); // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
@@ -543,38 +548,38 @@

      var seconds = date.getSeconds(); //秒
      var weekArr = [
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
        '星期天',
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期天",
      ];
      var week = weekArr[date.getDay()];
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = '0' + month;
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = '0' + day;
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = '0' + hour;
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = '0' + minutes;
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = '0' + seconds;
        seconds = "0" + seconds;
      }
      return (
        year +
        '-' +
        "-" +
        month +
        '-' +
        "-" +
        day +
        ' ' +
        " " +
        hour +
        sign2 +
        minutes +
@@ -583,7 +588,7 @@
      );
    },
    async getRoleTabelData() {
      if (this.listData.tab == '') {
      if (this.listData.tab == "") {
        delete this.listData.tab;
      }
      this.listData.name = this.ruleForm.name;
@@ -592,9 +597,9 @@
        this.listData.type = parseInt(this.ruleForm.value);
      }
      const data = await select_Token_ByPageAndCount(this.listData);
      console.log('Token获取', data);
      console.log("Token获取", data);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败");
      }
      this.tableData = data.result;
      this.count = data.count;
@@ -626,7 +631,7 @@
      if (date === undefined || date === null) {
        return;
      }
      return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
      return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
@@ -639,28 +644,24 @@
  height: 98%;
  width: 98%;
  padding: 1%;
overflow: auto;

  .el-input {
    width: 745px;
    width: 300px;
  }

  .inquire {
    padding: 10px;
    padding: 8px;
    margin-top: 20px;

    border-radius: 5px;

    margin-bottom: 10px;

    margin-bottom: 20px;
    .el-form-item {
      margin: 5px;
    }
    .el-select {
      width: 200px;
    }
  }
  .table_box {
    padding: 10px;
    
    border-radius: 5px;
    margin-bottom: 10px;
  }
}
</style>

 src/views/maintenance/userManagement.vue

@@ -1,103 +1,105 @@
<template>
  <div class="userInfo_box">
    <My-bread :list="[
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('userManage.userManage')}`,
      ]"></My-bread>
      ]"
    ></My-bread>
    <el-divider />
    <div class="inquire subpage_Div">
      <el-form
        ref="queryForm"
        :model="queryForm"
        :inline="true"
      >
        <el-form-item
          prop="uname"
          :label="$t('userManage.userInfoObj.uname')"
        >
          <el-input v-model="queryForm.uname" style="width:200px"/>
        </el-form-item>
        <el-form-item
          prop="depid"
          :label="$t('userManage.userInfoObj.depName')"
        >
          <el-select
            :popper-append-to-body="false"
            v-model="queryForm.depName"
            placeholder="请选择"
            style="width:200px"
          >
            <el-option
              :value="queryForm.depid"
              :label="queryForm.depName"
              style=" height:auto"

    <div class="inquire subpage_Div" ref="container">
      <el-form ref="queryForm" :model="queryForm" :inline="true">
        <div class="flex_box">
          <div style="margin-right: auto">
            <el-form-item
              prop="uname"
              :label="$t('userManage.userInfoObj.uname')"
            >
              <el-tree
                ref="tree"
                :data="treeOptions"
                node-key="id"
                :props="props"
                @node-click="handleNodeClickto"
              />
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item style="float:right">
          <el-button
            type="info"
            size="small"
            @click="resetInfo('queryForm')"
            icon="el-icon-refresh"
          >
            {{ $t('operatManage.ELM.reset') }}
          </el-button>
        </el-form-item>
        <el-form-item style="float:right" v-show="setbatchFlag">
          <el-button
            v-if="menuStatus.update"
            size="small"
            @click="editPwd"
            type="warning"
            icon="el-icon-unlock"
          >{{ $t('common.changepassWord') }}
          </el-button>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button
            v-if="menuStatus.delete"
            type="danger"
            size="small"
            @click="deleteUserInfo"
            icon="el-icon-delete"
          >
            {{ $t('common.delete') }}
          </el-button>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button
            v-if="menuStatus.insert"
            type="success"
            size="small"
            @click="showAddDialog"
            icon="el-icon-plus"
          >
            {{ $t('common.append') }}
          </el-button>
        </el-form-item>
              <el-input v-model="queryForm.uname" style="width: 200px" />
            </el-form-item>
            <el-form-item
              prop="depid"
              :label="$t('userManage.userInfoObj.depName')"
            >
              <el-select
                :popper-append-to-body="false"
                v-model="queryForm.depName"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  :value="queryForm.depid"
                  :label="queryForm.depName"
                  style="height: auto"
                >
                  <el-tree
                    ref="tree"
                    :data="treeOptions"
                    node-key="id"
                    :props="props"
                    @node-click="handleNodeClickto"
                  />
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <el-button
                type="info"
                size="small"
                @click="resetInfo('queryForm')"
                icon="el-icon-refresh"
              >
                {{ $t("operatManage.ELM.reset") }}
              </el-button>
            </el-form-item>
            <el-form-item v-show="setbatchFlag">
              <el-button
                v-if="menuStatus.update"
                size="small"
                @click="editPwd"
                type="warning"
                icon="el-icon-unlock"
                >{{ $t("common.changepassWord") }}
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                v-if="menuStatus.delete"
                type="danger"
                size="small"
                @click="deleteUserInfo"
                icon="el-icon-delete"
              >
                {{ $t("common.delete") }}
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                v-if="menuStatus.insert"
                type="success"
                size="small"
                @click="showAddDialog"
                icon="el-icon-plus"
              >
                {{ $t("common.append") }}
              </el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div style="height: 73%">
          <el-table
            ref="filterTable"
            :data="tableData"
            style="width: 100%"
            height="90%"
          >
          <el-table-column
          type="selection"
          width="55"
        />
    <div class="table_box" :style="styleVar">
      <el-table
        ref="filterTable"
        :data="tableData"
        style="width: 100%"
        class="table_height"
        height="calc(100% - 57px)"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          align="center"
          type="index"
@@ -144,37 +146,31 @@
        <el-table-column
          align="center"
          prop="idcard"
          width="200px"
          :label="$t('userManage.userInfoObj.idcard')"
        />
        <el-table-column
          align="center"
          prop="job"
          width="200px"
          :label="$t('userManage.userInfoObj.job')"
        />
        <el-table-column
          align="center"
          prop="edu"
          width="200px"
          :label="$t('userManage.userInfoObj.edu')"
        />
        <el-table-column
          align="center"
          prop="addr"
          width="200px"
          :label="$t('userManage.userInfoObj.addr')"
        />
        <el-table-column
          align="center"
          prop="email"
          width="200px"
          :label="$t('userManage.userInfoObj.email')"
        />
        <el-table-column
          align="center"
          prop="contact"
          width="200px"
          :label="$t('userManage.userInfoObj.contact')"
        />

@@ -184,29 +180,17 @@
          :label="$t('userManage.userInfoObj.status')"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status == 0"
              type="success"
            >正常</el-tag>
            <el-tag
              v-if="scope.row.status == 1"
              type="info"
            >禁用</el-tag>
            <el-tag
              v-if="scope.row.status == 2"
              type="warning"
            >删除</el-tag>
            <el-tag v-if="scope.row.status == 0" type="success">正常</el-tag>
            <el-tag v-if="scope.row.status == 1" type="info">禁用</el-tag>
            <el-tag v-if="scope.row.status == 2" type="warning">删除</el-tag>
            <el-tag v-if="scope.row.status == 3">申请</el-tag>
            <el-tag
              v-if="scope.row.status == 4"
              type="danger"
            >拒批</el-tag>
            <el-tag v-if="scope.row.status == 4" type="danger">拒批</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="bak"
          width="200px"
          
          :label="$t('userManage.userInfoObj.bak')"
        /> -->
        <el-table-column
@@ -215,20 +199,17 @@
          v-if="menuStatus.update"
        >
          <template slot-scope="scope">

            <el-button
              type="warning"
              plain
              @click="editInfo(scope.row)"
              size="small"
            >{{ $t('common.update') }}</el-button>
              >{{ $t("common.update") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div
        style="margin-top: 25px"
        class="pagination_box"
      >
      <div style="margin-top: 25px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -241,6 +222,7 @@
        </el-pagination>
      </div>
    </div>

    <el-dialog
      width="910px"
      top="15vh"
@@ -265,16 +247,10 @@
            v-if="behavior == '新增用户'"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.uid"
              autocomplete="off"
            ></el-input>
            <div
              class="isNewUser"
              v-if="isNewUser"
            >
            <el-input v-model="editForm.uid" autocomplete="off"></el-input>
            <div class="isNewUser" v-if="isNewUser">
              <img src="../../assets/img/success.png" />
              {{ $t('userManage.userInfoObj.uid') }}
              {{ $t("userManage.userInfoObj.uid") }}
            </div>
          </el-form-item>
          <el-form-item
@@ -332,10 +308,7 @@
            :label="$t('userManage.userInfoObj.username')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.uname"
              autocomplete="off"
            ></el-input>
            <el-input v-model="editForm.uname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="sex"
@@ -362,10 +335,7 @@
            :label="$t('userManage.userInfoObj.nativePlace')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.natives"
              autocomplete="off"
            ></el-input>
            <el-input v-model="editForm.natives" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="depid"
@@ -416,10 +386,7 @@
            :label="$t('userManage.userInfoObj.identityCard')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.idcard"
              autocomplete="off"
            ></el-input>
            <el-input v-model="editForm.idcard" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div style="width: 45%">
@@ -428,50 +395,35 @@
            :label="$t('userManage.userInfoObj.job')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.job"
              autocomplete="off"
            ></el-input>
            <el-input v-model="editForm.job" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="edu"
            :label="$t('userManage.userInfoObj.edu')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.edu"
              autocomplete="off"
            ></el-input>
            <el-input v-model="editForm.edu" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="addr"
            :label="$t('userManage.userInfoObj.addr')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.addr"
              autocomplete="off"
            ></el-input>
            <el-input v-model="editForm.addr" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="email"
            :label="$t('userManage.userInfoObj.email')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.email"
              autocomplete="off"
            ></el-input>
            <el-input v-model="editForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="contact"
            :label="$t('userManage.userInfoObj.contact')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.contact"
              autocomplete="off"
            ></el-input>
            <el-input v-model="editForm.contact" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="status"
@@ -498,50 +450,33 @@
            :label="$t('userManage.userInfoObj.remarks')"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="editForm.bak"
              autocomplete="off"
            ></el-input>
            <el-input v-model="editForm.bak" autocomplete="off"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div
        v-if="behavior == '修改信息'"
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          type="info"
          @click="cancelEdit()"
        >{{
          $t('common.reset')
      <div v-if="behavior == '修改信息'" slot="footer" class="dialog-footer">
        <el-button size="small" type="info" @click="cancelEdit()">{{
          $t("common.reset")
        }}</el-button>
        <el-button
          size="small"
          type="primary"
          @click="sendEdit('editForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
        >{{ $t('common.submit') }}</el-button>
          >{{ $t("common.submit") }}</el-button
        >
      </div>
      <div
        v-else
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          type="info"
          @click="cancelAdd('editForm')"
        >{{
          $t('common.reset')
      <div v-else slot="footer" class="dialog-footer">
        <el-button size="small" type="info" @click="cancelAdd('editForm')">{{
          $t("common.reset")
        }}</el-button>
        <el-button
          size="small"
          type="primary"
          @click="sendAdd('editForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
        >{{ $t('common.submit') }}</el-button>
          >{{ $t("common.submit") }}</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
@@ -551,11 +486,7 @@
      :visible.sync="resetPwd"
      :before-close="handleClose"
    >
      <el-form
        :model="pwdForm"
        ref="pwdForm"
        :rules="rules"
      >
      <el-form :model="pwdForm" ref="pwdForm" :rules="rules">
        <el-form-item
          prop="adminPwd"
          :label="$t('common.AdminPassword')"
@@ -593,23 +524,17 @@
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          type="info"
          @click="cancelReset - 'pwdForm'"
        >{{
          $t('common.reset')
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="info" @click="cancelReset - 'pwdForm'">{{
          $t("common.reset")
        }}</el-button>
        <el-button
          size="small"
          type="primary"
          @click="sendReset('pwdForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
        >{{ $t('common.submit') }}</el-button>
          >{{ $t("common.submit") }}</el-button
        >
      </div>
    </el-dialog>
  </div>
@@ -617,8 +542,8 @@

<script>
var encrypt = new JSEncrypt();
import { mapActions } from 'vuex';
import MyBread from '../../components/MyBread.vue';
import { mapActions } from "vuex";
import MyBread from "../../components/MyBread.vue";
import {
  queryDepTree,
  queryPageUser,
@@ -628,7 +553,7 @@
  updatePwd,
  selectByUserid,
  userSelectForIsAdmin,
} from '../../api/api';
} from "../../api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -636,35 +561,35 @@
  },
  data() {
    let validName = (rule, value, callback) => {
      if (value === '' || value === null || value === undefined) {
        return callback(new Error('请输入密码'));
      if (value === "" || value === null || value === undefined) {
        return callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    let validatePass = (rule, value, callback) => {
      if (value === '' || value === undefined) {
        callback(new Error('请再次输入密码'));
      if (value === "" || value === undefined) {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.editForm.pwd) {
        callback(new Error('两次输入密码不一致!'));
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    let resetPass = (rule, value, callback) => {
      if (value === '' || value === undefined) {
        callback(new Error('请再次输入密码'));
      if (value === "" || value === undefined) {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.pwdForm.newPwd) {
        callback(new Error('两次输入密码不一致!'));
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      props: {
        label: 'name',
        value: 'id',
        children: 'children',
        label: "name",
        value: "id",
        children: "children",
        checkStrictly: true,
        emitPath: false,
      },
@@ -679,102 +604,102 @@
      pageSize: 10,
      pageIndex: 1,
      defaultProps: {
        children: 'children',
        label: 'name',
        children: "children",
        label: "name",
      },
      queryForm: {
        uname: '',
        uname: "",
        depid: null,
        depName: '',
        depName: "",
      },
      tableData: [],
      fullscreenLoading: false,
      count: 0,
      formLabelWidth: '100px',
      formLabelWidth: "100px",
      dialogFormVisible: false,
      initialForm: '',
      behavior: '',
      initialForm: "",
      behavior: "",
      multipleSelection: [],
      resetPwd: false,
      editForm: {
        uid: '',
        uname: '',
        oldPwd: '',
        pwd: '',
        checkPass: '',
        uid: "",
        uname: "",
        oldPwd: "",
        pwd: "",
        checkPass: "",
        sex: null,
        natives: '',
        natives: "",
        depid: null,
        idcard: '',
        job: '',
        edu: '',
        addr: '',
        email: '',
        contact: '',
        idcard: "",
        job: "",
        edu: "",
        addr: "",
        email: "",
        contact: "",
        status: null,
        bak: '',
        salt: '',
        bak: "",
        salt: "",
      },
      pwdForm: {
        adminPwd: '',
        newPwd: '',
        checkPwd: '',
        adminPwd: "",
        newPwd: "",
        checkPwd: "",
        ids: [],
      },
      treeOptions: [],
      statusOpt: [
        {
          value: 0,
          label: '正常',
          label: "正常",
        },
        {
          value: 1,
          label: '禁用',
          label: "禁用",
        },
        {
          value: 2,
          label: '删除',
          label: "删除",
        },
        {
          value: 3,
          label: '申请',
          label: "申请",
        },
        {
          value: 4,
          label: '拒批',
          label: "拒批",
        },
      ],
      depList: [],
      sexOpt: [
        {
          value: 0,
          label: '女',
          label: "女",
        },
        {
          value: 1,
          label: '男',
          label: "男",
        },
        {
          value: -1,
          label: '未知',
          label: "未知",
        },
      ],
      rules: {
        uid: [
          { required: true, validator: validName, trigger: 'blur' },
          { required: true, validator: validName, trigger: "blur" },
          {
            trigger: 'blur',
            trigger: "blur",
            validator: (rule, value, callback) => {
              var reg = new RegExp(/^[a-zA-Z0-9_]{0,15}$/); //字符串正则表达式 4到14位（字母，数字，下划线，减号）
              if (!reg.test(value)) {
                callback(
                  new Error('账号必须由字母，数字或下划线,长度不得超过16位')
                  new Error("账号必须由字母，数字或下划线,长度不得超过16位")
                );
              } else {
                selectByUserid({ uid: value }).then((res) => {
                  if (res.result != null) {
                    this.isNewUser = false;
                    callback(new Error('账号已存在'));
                    callback(new Error("账号已存在"));
                  } else {
                    this.isNewUser = true;
                    callback();
@@ -787,16 +712,16 @@
        pwd: [
          {
            required: true,
            message: '请输入密码',
            message: "请输入密码",
            transform: (value) => value,
            trigger: 'blur',
            trigger: "blur",
          },
          {
            type: 'string',
            message: '请输入不包含空格的字符',
            trigger: 'blur',
            type: "string",
            message: "请输入不包含空格的字符",
            trigger: "blur",
            transform(value) {
              if (value && value.indexOf(' ') === -1) {
              if (value && value.indexOf(" ") === -1) {
                return value;
              } else {
                return false;
@@ -804,14 +729,14 @@
            },
          },
          {
            trigger: 'blur',
            trigger: "blur",
            validator: (rule, value, callback) => {
              var regex = new RegExp('');
              var regex = new RegExp("");
              var passwordreg =
                /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{13,20}$/;
              if (!passwordreg.test(value)) {
                callback(
                  new Error('密码必须由数字、字母、特殊字符组合,请输入13-20位')
                  new Error("密码必须由数字、字母、特殊字符组合,请输入13-20位")
                );
              } else {
                callback();
@@ -820,21 +745,21 @@
          },
        ],
        checkPass: [
          { required: true, validator: validatePass, trigger: 'blur' },
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        adminPwd: [{ validator: validName, trigger: 'blur' }],
        adminPwd: [{ validator: validName, trigger: "blur" }],
        newPwd: [
          {
            message: '请输入密码',
            message: "请输入密码",
            transform: (value) => value,
            trigger: 'blur',
            trigger: "blur",
          },
          {
            type: 'string',
            message: '请输入不包含空格的字符',
            trigger: 'blur',
            type: "string",
            message: "请输入不包含空格的字符",
            trigger: "blur",
            transform(value) {
              if (value && value.indexOf(' ') === -1) {
              if (value && value.indexOf(" ") === -1) {
                return value;
              } else {
                return false;
@@ -842,14 +767,14 @@
            },
          },
          {
            trigger: 'blur',
            trigger: "blur",
            validator: (rule, value, callback) => {
              var regex = new RegExp('');
              var regex = new RegExp("");
              var passwordreg =
                /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{8,20}$/;
              if (!passwordreg.test(value)) {
                callback(
                  new Error('密码必须由数字、字母、特殊字符组合,请输入8-20位')
                  new Error("密码必须由数字、字母、特殊字符组合,请输入8-20位")
                );
              } else {
                callback();
@@ -857,19 +782,41 @@
            },
          },
        ],
        checkPwd: [{ validator: resetPass, trigger: 'blur' }],
        checkPwd: [{ validator: resetPass, trigger: "blur" }],
      },
      defaultProps: {
        children: "children",
        label: "name",
      },
      selectOptionWidth: '',
      selectheight: 'auto',
      selectOptionWidth: "",
      selectheight: "auto",
      defaultexpand: false,
      tableHeight: 0,
      timer: 0,
      styleVar: {
        "height": "calc(100% - 109px)",
      },
    };
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    ...mapActions(['login', 'getpublickey']),
    onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
      });
    },
    ...mapActions(["login", "getpublickey"]),
    getUserInfo() {
      this.pageSize = 10;
      this.currentPage = 1;
@@ -885,7 +832,7 @@
            });
          }
        })
        .catch((res) => { });
        .catch((res) => {});

      queryPageUser({
        pageIndex: 1,
@@ -902,20 +849,20 @@
            });
          }
        })
        .catch((res) => { });
        .catch((res) => {});
    },
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ''; // 给父级添加一个children属性，并赋值
        branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
        return father.pid == 0; // 返回一级菜单
      });
    },

    handleNodeClickto(data, node, nodeData) {
      this.queryForm.depid = data.id
      this.queryForm.depid = data.id;
      this.queryForm.depName = data.name;
    },
    //搜索按钮
@@ -931,7 +878,6 @@
          this.tableData = res.result;
          this.count = res.count;
        } else {

          this.$notify.error({
            title: res.code,
            message: res.result,
@@ -945,7 +891,7 @@
    },
    //新增按钮
    showAddDialog() {
      this.behavior = '新增用户';
      this.behavior = "新增用户";
      this.editForm = {};
      this.dialogFormVisible = true;
    },
@@ -971,8 +917,8 @@
                if (res.code == 200) {
                  this.getUserInfo();
                  this.$message({
                    message: '添加成功',
                    type: 'success',
                    message: "添加成功",
                    type: "success",
                  });
                  this.editForm = {};
                  this.dialogFormVisible = false;
@@ -980,11 +926,9 @@
              }, 500);
            })
            .catch((res) => {

              this.fullscreenLoading = false;
            });
        } else {

          return false;
        }
      });
@@ -998,20 +942,19 @@
      var blackTheme;
      if (this.$store.state.themeflag == true) {
        blackTheme = {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: "Black_theme"
        }
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          customClass: "Black_theme",
        };
      } else {
        blackTheme = {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',

        }
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        };
      }
      this.$confirm('此操作将删除已选中的用户, 是否继续?', '提示', blackTheme)
      this.$confirm("此操作将删除已选中的用户, 是否继续?", "提示", blackTheme)
        .then(() => {
          var std = [];
          for (var i in this.multipleSelection) {
@@ -1021,22 +964,22 @@
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                  type: "success",
                  message: "删除成功!",
                });
                this.multipleSelection = [];
                this.getUserInfo();
              } else {
                this.$message.error('删除失败');
                this.$message.error("删除失败");
              }
            })
            .catch(() => {
              this.$message.error('删除失败');
              this.$message.error("删除失败");
              this.multipleSelection = [];
            });
        })
        .catch(() => {
          this.$message('已取消删除');
          this.$message("已取消删除");
        });
    },
    //重置密码
@@ -1046,7 +989,7 @@
        std.push(this.multipleSelection[i].id);
      }
      if (std.length == 0) {
        alert('请先选择用户');
        alert("请先选择用户");
        return;
      }
      this.pwdForm.ids = std;
@@ -1071,15 +1014,14 @@
              setTimeout(() => {
                this.fullscreenLoading = false;
                if (res.code == 200) {

                  this.$message({
                    message: '修改成功',
                    type: 'success',
                    message: "修改成功",
                    type: "success",
                  });
                  this.pwdForm = {
                    adminPwd: '',
                    newPwd: '',
                    checkPwd: '',
                    adminPwd: "",
                    newPwd: "",
                    checkPwd: "",
                    ids: [],
                  };
                  this.multipleSelection = [];
@@ -1090,7 +1032,7 @@
              }, 500);
            })
            .catch((res) => {
              alert('修改失败，请重试！');
              alert("修改失败，请重试！");
              this.fullscreenLoading = false;
            });
        } else {
@@ -1104,60 +1046,60 @@
      delete row.updateUser;

      this.initialForm = JSON.stringify(row);
      this.behavior = '修改信息';
      this.behavior = "修改信息";
      this.editForm = JSON.parse(JSON.stringify(row));
      this.dialogFormVisible = true;
    },
    //编辑选择单位
    editChange(value) {
      this.editForm.depid = value;
      this.$refs.editcaderHandle.dropDownVisible = false
      this.$refs.editcaderHandle.dropDownVisible = false;
    },
    handeditChange(data, node, nodeData) {
      this.$set(this.editForm, 'depid', data.id)
      this.$set(this.editForm, 'depName', data.name)
      this.$refs.editcaderHandle.dropDownVisible = false
      this.$set(this.editForm, "depid", data.id);
      this.$set(this.editForm, "depName", data.name);
      this.$refs.editcaderHandle.dropDownVisible = false;
    },
    //关闭弹出框
    handleClose(done) {
      var blackTheme;
      if (this.$store.state.themeflag == true) {
        blackTheme = {
          customClass: "Black_theme"
        }
          customClass: "Black_theme",
        };
      }

      this.$confirm('确认关闭？', blackTheme)
      this.$confirm("确认关闭？", blackTheme)
        .then((_) => {
          this.editForm = {
            uid: '',
            uname: '',
            oldPwd: '',
            pwd: '',
            checkPass: '',
            uid: "",
            uname: "",
            oldPwd: "",
            pwd: "",
            checkPass: "",
            sex: null,
            natives: '',
            natives: "",
            depid: null,
            idcard: '',
            job: '',
            edu: '',
            addr: '',
            email: '',
            contact: '',
            idcard: "",
            job: "",
            edu: "",
            addr: "",
            email: "",
            contact: "",
            status: null,
            bak: '',
            salt: '',
            bak: "",
            salt: "",
          };
          this.pwdForm = {
            adminPwd: '',
            newPwd: '',
            checkPwd: '',
            adminPwd: "",
            newPwd: "",
            checkPwd: "",
            ids: [],
          };

          done();
        })
        .catch((_) => { });
        .catch((_) => {});
    },
    //提交编辑
    sendEdit(formName) {
@@ -1181,8 +1123,8 @@
                if (res.code == 200) {
                  this.getUserInfo();
                  this.$message({
                    message: '修改成功',
                    type: 'success',
                    message: "修改成功",
                    type: "success",
                  });
                  this.editForm = {};
                  this.dialogFormVisible = false;
@@ -1190,11 +1132,11 @@
              }, 500);
            })
            .catch((res) => {
              alert('修改失败，请重试！');
              alert("修改失败，请重试！");
              this.fullscreenLoading = false;
            });
        } else {
          console.log('error submit!!');
          console.log("error submit!!");
          return false;
        }
      });
@@ -1218,13 +1160,13 @@
    },
    showPermsMenu(res) {
      switch (res.tag) {
        case '/delete':
        case "/delete":
          this.menuStatus.delete = true;
          break;
        case '/insert':
        case "/insert":
          this.menuStatus.insert = true;
          break;
        case '/update':
        case "/update":
          this.menuStatus.update = true;
          break;
      }
@@ -1240,15 +1182,17 @@
    setOptionWidth(event) {
      // 下拉框聚焦，设置弹框的宽度
      this.$nextTick(() => {
        this.selectOptionWidth = event.srcElement.offsetWidth + 'px';
        this.selectOptionWidth = event.srcElement.offsetWidth + "px";
      });
    }
    },
  },

  mounted() {
    this.getIsAdmin();
    this.getUserInfo();
    this.getpublickey();
    window.addEventListener("resize", this.onResize);
    this.calHeight()
  },
  created() {
    var val = this.$store.state.currentPerms;
@@ -1286,15 +1230,12 @@
      margin: 5px;
    }
  }
  .table_box {
    // height: 60%;
    padding: 10px;
    border-radius: 5px;
    overflow: auto;
    height: 500px;

    // overflow: auto;
  }
  //  .table_height{
  //   //  max-height: 80%;

  //   min-height:70%;
  //  }
  .el-dialog {
    .el-form-item {
      margin-bottom: 20px;

 src/views/userManage/authorityManage.vue

@@ -5,17 +5,20 @@
        `${$t('userManage.authorityManage')}`,
      ]"></My-bread>
    <el-divider />
    <div class="power_quire subpage_Div">
    <div class="power_quire subpage_Div" ref="container">
      <el-form
        ref="form"
        :model="ruleForm"
        label-width="100px"
        :inline="true"
      >
        <el-form-item  >
       <div class="flex_box">
        <div style="margin-right: auto">
         <el-form-item label="名称">
          <el-input v-model="ruleForm.name" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item style="float: right;">
        </div>
        <div>
          <el-form-item>
          <el-button
            v-if="menuStatus.insert"
            @click="InsertFormdialog = true"
@@ -41,14 +44,19 @@
            type="info" size="small"
          >{{ $t('common.empty') }}</el-button>
        </el-form-item>
        </div>
        </div>
        
       
      
      </el-form>
    </div>
    <div class="table_box subpage_Div">
    <div class="table_box subpage_Div" :style="styleVar">
      <el-table
        :data="tableData"
        style="width: 100%"
        fit
        height="85%"
        height="calc(100% - 57px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
@@ -106,7 +114,7 @@
        >
        </el-table-column>
        <el-table-column
          fixed="right"
        
          :label="$t('common.operate')"
          width="170px"
        >
@@ -321,9 +329,14 @@
</template>

<script>
import moment from 'moment';
import MyBread from '../../components/MyBread.vue';
import { select_Auth_ByPageAndCount, insertAuth, updateAuth, deleteAuths } from '../../api/api.js';
import moment from "moment";
import MyBread from "../../components/MyBread.vue";
import {
  select_Auth_ByPageAndCount,
  insertAuth,
  updateAuth,
  deleteAuths,
} from "../../api/api.js";
export default {
  components: { MyBread },
  data() {
@@ -333,10 +346,10 @@
        insert: false,
        update: false,
      },
      formLabelWidth: '100px',
      formLabelWidth: "100px",
      ruleForm: {},
      isTransfer: false,
      dialogTitle: '',
      dialogTitle: "",
      data: [],
      InsertFormdialog: false,
      showinfoBox: false,
@@ -354,8 +367,13 @@
        pageSize: 10,
      },
      defaultProps: {
        children: 'children',
        label: 'label',
        children: "children",
        label: "label",
      },
      tableHeight: 0,
      timer: 0,
      styleVar: {
        height: "calc(100% - 109px)",
      },
    };
  },
@@ -366,21 +384,41 @@
    for (var i = 0; i < permsEntity.length; i++) {
      if (permsEntity[i].perms == val) {
        this.showPermsMenu(permsEntity[i]);

      }
    }
    this.getRoleTabelData();
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight();
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
      });
    },
    showPermsMenu(res) {
      switch (res.tag) {
        case '/delete':
        case "/delete":
          this.menuStatus.delete = true;
          break;
        case '/insert':
        case "/insert":
          this.menuStatus.insert = true;
          break;
        case '/update':
        case "/update":
          this.menuStatus.update = true;
          break;
      }
@@ -390,32 +428,34 @@
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].id);
      }
      this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await deleteAuths({ ids: std.toString() });
      this.$confirm("此操作将永久删除该权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await deleteAuths({ ids: std.toString() });

        if (data.code == 200) {
          this.InsertFormdialog = false;
          if (data.code == 200) {
            this.InsertFormdialog = false;
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.getRoleTabelData();
          } else {
            this.$message({
              message: "删除失败！",
              type: "warning",
            });
          }
        })
        .catch(() => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            type: "info",
            message: "已取消删除",
          });
          this.getRoleTabelData();
        } else {
          this.$message({
            message: '删除失败！',
            type: 'warning',
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      // const data = await deleteAuths({ ids: std.toString() });
      // if (data.code == 200) {
      //   this.$message({
@@ -434,11 +474,10 @@
      this.multipleSelection = val;
    },
    submitForm(formName) {
      this.getRoleTabelData()

      this.getRoleTabelData();
    },
    resetForm(formName) {
      this.ruleForm = {}
      this.ruleForm = {};
      this.getRoleTabelData();
    },
    EditFromDataClose() {
@@ -451,17 +490,16 @@
        this.EditFormdialog = false;
        this.upform = {};
        this.$message({
          message: '修改成功！',
          type: 'success',
          message: "修改成功！",
          type: "success",
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: '修改失败！',
          type: 'warning',
          message: "修改失败！",
          type: "warning",
        });
      }

    },
    showDetail(index, row) {
      this.showinfoBox = true;
@@ -493,25 +531,25 @@
        this.InsertFormdialog = false;
        this.insertform = {};
        this.$message({
          message: '添加成功！',
          type: 'success',
          message: "添加成功！",
          type: "success",
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: '添加失败！',
          type: 'warning',
          message: "添加失败！",
          type: "warning",
        });
      }
    },
    async getRoleTabelData() {
      if (this.listData.tab == '') {
      if (this.listData.tab == "") {
        delete this.listData.tab;
      }
      this.listData.name = this.ruleForm.name;
      const data = await select_Auth_ByPageAndCount(this.listData);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败");
      }
      console.log(data.result);
      this.tableData = data.result;
@@ -525,7 +563,7 @@
      if (date === undefined || date === null) {
        return;
      }
      return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
      return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss");
    },
    handleClick(row) {
      this.dialogTitle = row.name;
@@ -540,28 +578,21 @@
  height: 98%;
  width: 98%;
  padding: 1%;
 

  .el-input {
    width: 300px;
  }
  .power_quire {
    overflow: auto;
    padding: 8px;
    border-radius: 5px;
 
    margin-bottom: 10px;
  }
  .table_box {
    height: 72%;
    padding: 10px;
    margin-top: 20px;

    border-radius: 5px;
 
 

    margin-bottom: 20px;
    .el-form-item {
      margin: 5px;
    }
  }
 
 
   
}
</style>
 

 src/views/userManage/resourceManage.vue

@@ -5,16 +5,17 @@
        `${$t('userManage.resManage')}`,
      ]"></My-bread>
    <el-divider />
    <div class="power_quire subpage_Div">
    <div class="power_quire subpage_Div" ref="container">
      <el-form
        ref="form"
        :model="ruleForm"
        :inline="true"
      >
        <el-form-item :label="$t('userManage.resManageObj.name')">
        <div class="flex_box">
          <el-form-item :label="$t('userManage.resManageObj.name')" style="margin-right: auto">
          <el-input v-model="ruleForm.name" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item style="float:right">
        <el-form-item>
          <el-button
            v-if="menuStatus.insert"
            @click="setInsertFormdialog"
@@ -43,14 +44,17 @@
            size="small"
          >{{ $t('common.empty') }}</el-button>
        </el-form-item>
          </div>
        
      </el-form>
    </div>
    <div class="table_box ">
    <div class="table_box" :style="styleVar">
      <el-table
        :data="tableData"
        style="width: 100%"
        fit
        @selection-change="handleSelectionChange"
         height="calc(100% - 57px)"
      >
        <el-table-column
          type="selection"
@@ -106,7 +110,7 @@
        >
        </el-table-column>
        <el-table-column
          fixed="right"
         
          :label="$t('common.operate')"
          width="170px"
        >
@@ -127,8 +131,7 @@
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_box">
      <div class="pagination_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
@@ -140,6 +143,8 @@
      >
      </el-pagination>
    </div>
    </div>
    
    <div
      class="infoBox box_div "
      v-show="showinfoBox"
@@ -648,10 +653,10 @@
</template>

<script>
import $ from 'jquery';
import { getToken } from '../../utils/auth.js';
import moment from 'moment';
import MyBread from '../../components/MyBread.vue';
import $ from "jquery";
import { getToken } from "../../utils/auth.js";
import moment from "moment";
import MyBread from "../../components/MyBread.vue";
import {
  select_Res_ByPageAndCount,
  insertRes,
@@ -660,17 +665,17 @@
  upload_res,
  selectdirTab,
  selectdepTab,
} from '../../api/api.js';
import styleDirTree from '../datamanage/styleDirTree.vue';
import styleDepTree from '../datamanage/styleDepTree.vue';
} from "../../api/api.js";
import styleDirTree from "../datamanage/styleDirTree.vue";
import styleDepTree from "../datamanage/styleDepTree.vue";
export default {
  components: { MyBread, styleDirTree, styleDepTree },
  data() {
    return {
      props: {
        label: 'name',
        value: 'id',
        children: 'children',
        label: "name",
        value: "id",
        children: "children",
        checkStrictly: true,
        emitPath: false,
      },
@@ -682,10 +687,10 @@
        update: false,
        upload: false,
      },
      formLabelWidth: '130px',
      formLabelWidth: "130px",
      ruleForm: {},
      isTransfer: false,
      dialogTitle: '',
      dialogTitle: "",
      data: [],
      InsertFormdialog: false,
      showinfoBox: false,
@@ -697,13 +702,13 @@
      ImageFile: null,
      uploadFile: null,
      insertform: {
        img: '',
        depValue: '',
        dirValue: ''
        img: "",
        depValue: "",
        dirValue: "",
      },
      tableData: [],
      itemdetail: {},
      upform: { img: '' },
      upform: { img: "" },
      multipleSelection: [],
      count: 0,
      listData: {
@@ -712,8 +717,13 @@
        pageSize: 10,
      },
      defaultProps: {
        children: 'children',
        label: 'label',
        children: "children",
        label: "label",
      },
      tableHeight: 0,
      timer: 0,
      styleVar: {
        height: "calc(100% - 109px)",
      },
    };
  },
@@ -728,22 +738,42 @@
    }
    this.getRoleTabelData();
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight();
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
      });
    },
    handleEditDepList(data, node, nodeData) {
      this.upform.depid = data.id
      this.upform.depid = data.id;
      this.upform.depValue = data.name;
    },
    handleEditDirList(data, node, nodeData) {
      this.upform.dirid = data.id
      this.upform.dirid = data.id;
      this.upform.dirValue = data.name;
    },
    handleDepList(data, node, nodeData) {

      this.insertform.depid = data.id
      this.insertform.depid = data.id;
      this.insertform.depValue = data.name;
    },
    handleDirList(data, node, nodeData) {
      this.insertform.dirid = data.id
      this.insertform.dirid = data.id;
      this.insertform.dirValue = data.name;
    },
    treeData(source) {
@@ -751,7 +781,7 @@
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ''; // 给父级添加一个children属性，并赋值
        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；
        // 由此循环多次后，就能形成相应的树形数据结构
        return father.pid == 0; // 返回一级菜单
@@ -760,16 +790,16 @@
    async getDepList() {
      const data = await selectdepTab();
      if (data.code != 200) {
        return this.$message.error('单位列表调用失败');
        return this.$message.error("单位列表调用失败");
      }
      this.depList = this.treeData(data.result)
      this.depList = this.treeData(data.result);
    },
    async getDirList() {
      const data = await selectdirTab();
      if (data.code != 200) {
        return this.$message.error('目录列表调用失败');
        return this.$message.error("目录列表调用失败");
      }
      this.dirList = this.treeData(data.result)
      this.dirList = this.treeData(data.result);
    },
    setInsertFormdialog() {
      this.getDepList();
@@ -778,59 +808,59 @@
    },
    showPermsMenu(res) {
      switch (res.tag) {
        case '/delete':
        case "/delete":
          this.menuStatus.delete = true;
          break;
        case '/insert':
        case "/insert":
          this.menuStatus.insert = true;
          break;
        case '/update':
        case "/update":
          this.menuStatus.update = true;
          break;
        case '/upload':
        case "/upload":
          this.menuStatus.upload = true;
          break;
      }
    },
    getIsertFile() {
      $('#imageFile').click();
      $("#imageFile").click();
    },
    getupdateFile() {
      $('#editimageFile').click();
      $("#editimageFile").click();
    },
    async setUploadFile(res) {
      var fs;
      if (res == 0) {
        fs = document.getElementById('imageFile');
        fs = document.getElementById("imageFile");
      } else if (res == 1) {
        fs = document.getElementById('editimageFile');
        fs = document.getElementById("editimageFile");
        if (fs.files.length == 0) {
          return;
        }
      }
      var formData = new FormData();
      formData.append('file', fs.files[0]);
      formData.append("file", fs.files[0]);
      var val_data = await upload_res(formData);
      if (val_data.code == 200) {
        this.uploadFile = val_data.result;
        this.$message({
          message: '上传成功！',
          type: 'success',
          message: "上传成功！",
          type: "success",
        });
      } else {
        this.$message({
          message: '上传失败！',
          type: 'warning',
          message: "上传失败！",
          type: "warning",
        });
      }
    },
    insertFile() {
      var val = document.getElementById('imageFile').files;
      var val = document.getElementById("imageFile").files;
      if (!val || !val.length) return;
      this.insertform.img = val[0].name;
    },
    updateFile() {
      var val = document.getElementById('editimageFile').files;
      var val = document.getElementById("editimageFile").files;
      if (!val || !val.length) return;
      this.upform.img = val[0].name;
    },
@@ -875,30 +905,32 @@
        std.push(this.multipleSelection[i].id);
      }

      this.$confirm('此操作将永久删除所选内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await deleteRess({ ids: std.toString() });
        if (data.code == 200) {
      this.$confirm("此操作将永久删除所选内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await deleteRess({ ids: std.toString() });
          if (data.code == 200) {
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.getRoleTabelData();
          } else {
            this.$message({
              message: "删除失败！",
              type: "warning",
            });
          }
        })
        .catch(() => {
          this.$message({
            message: "删除成功！",
            type: "success",
            type: "info",
            message: "已取消删除",
          });
          this.getRoleTabelData();
        } else {
          this.$message({
            message: "删除失败！",
            type: "warning",
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      // const data = await deleteRess({ ids: std.toString() });
      // if (data.code == 200) {
      //   this.$message({
@@ -937,14 +969,14 @@
        this.upform = {};
        this.uploadFile = null;
        this.$message({
          message: '修改成功！',
          type: 'success',
          message: "修改成功！",
          type: "success",
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: '修改失败！',
          type: 'warning',
          message: "修改失败！",
          type: "warning",
        });
      }
    },
@@ -960,8 +992,9 @@
        this.itemdetail.updateTime
      );

      this.itemdetail.imageFile = BASE_URL + '/res/download?guid=' + row.img + '&token=' + token;
      console.log(this.itemdetail.imageFile)
      this.itemdetail.imageFile =
        BASE_URL + "/res/download?guid=" + row.img + "&token=" + token;
      console.log(this.itemdetail.imageFile);
    },
    handleEdit(index, row) {
      this.getDepList();
@@ -990,8 +1023,8 @@
    async insertFromData() {
      if (this.insertform.dirid == null || this.insertform.depid == null) {
        this.$message({
          message: '请选择资源所属的目录或单位',
          type: 'warning',
          message: "请选择资源所属的目录或单位",
          type: "warning",
        });
        return;
      }
@@ -1002,29 +1035,29 @@
      if (data.code == 200) {
        this.InsertFormdialog = false;
        this.insertform = {
          img: '',
          img: "",
        };
        this.uploadFile = null;
        this.$message({
          message: '添加成功！',
          type: 'success',
          message: "添加成功！",
          type: "success",
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: '添加失败！',
          type: 'warning',
          message: "添加失败！",
          type: "warning",
        });
      }
    },
    async getRoleTabelData() {
      if (this.listData.tab == '') {
      if (this.listData.tab == "") {
        delete this.listData.tab;
      }
      this.listData.name = this.ruleForm.name;
      const data = await select_Res_ByPageAndCount(this.listData);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败");
      }
      this.tableData = data.result;
      this.count = data.count;
@@ -1037,7 +1070,7 @@
      if (date === undefined || date === null) {
        return;
      }
      return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
      return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss");
    },
    handleClick(row) {
      this.dialogTitle = row.name;
@@ -1058,11 +1091,13 @@
  }

  .power_quire {
    padding: 10px;
    padding: 8px;

     margin-top: 20px;

    border-radius: 5px;

    margin-bottom: 10px;
    margin-bottom: 20px;
    .el-form-item {
      margin: 5px;
    }

 src/views/userManage/roleManage.vue

@@ -1,53 +1,93 @@
<template>
  <div class="logLog_box">
    <My-bread :list="[
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('userManage.roleManage')}`,
      ]"></My-bread>
      ]"
    ></My-bread>
    <el-divider />
    <div class="inquire subpage_Div">
      <el-form
        ref="ruleForm"
        :model="roleForm"
        :inline="true"
      >
        <el-form-item
          :label="$t('userManage.RM.roleName')"
          prop="username"
        >
          <el-input v-model="roleForm.username" style="width:200px"/>
        </el-form-item>
        <el-form-item
          :label="$t('userManage.RM.ownedSystem')"
          prop="ownedSystem"
        >
          <el-select
            :popper-append-to-body="false"
            v-model="roleForm.depValue"
            placeholder="请选择"
            style="width:200px"
          >
            <el-option
              :value="roleForm.depid"
              :label="roleForm.depValue"
              style=" height:auto"
    <div class="inquire subpage_Div"  ref="container">
      <el-form ref="ruleForm" :model="roleForm" :inline="true">
        <div class="flex_box">
          <div style="margin-right: auto">
            <el-form-item :label="$t('userManage.RM.roleName')" prop="username">
              <el-input v-model="roleForm.username" style="width: 200px" />
            </el-form-item>
            <el-form-item
              :label="$t('userManage.RM.ownedSystem')"
              prop="ownedSystem"
            >
              <el-tree
                ref="tree"
                :data="depList"
                node-key="id"
                :props="props"
                @node-click="handleRouleDepList"
              />
            </el-option>
          </el-select>
          <!-- <el-input
              <el-select
                :popper-append-to-body="false"
                v-model="roleForm.depValue"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  :value="roleForm.depid"
                  :label="roleForm.depValue"
                  style="height: auto"
                >
                  <el-tree
                    ref="tree"
                    :data="depList"
                    node-key="id"
                    :props="props"
                    @node-click="handleRouleDepList"
                  />
                </el-option>
              </el-select>
              <!-- <el-input
            v-model="roleForm.value"
            :disabled="true"
            :placeholder="$t('common.pleaseInput')"
          /> -->
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <el-button type="info" size="small" @click="resetForm('ruleForm')"
                ><i class="el-icon-delete"></i>&nbsp;{{
                  $t("userManage.RM.reset")
                }}</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                @click="onSubmit('ruleForm')"
                ><i class="el-icon-search"></i> &nbsp;{{
                  $t("userManage.RM.query")
                }}</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                size="small"
                @click="handleDelete()"
                v-if="menuStatus.delete"
                ><i class="el-icon-delete"></i>&nbsp;{{
                  $t("common.delete")
                }}</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                type="success"
                size="small"
                @click="setInsertFormdialog"
                v-if="menuStatus.insert"
                ><i class="el-icon-circle-plus-outline"></i> &nbsp;{{
                  $t("userManage.RM.add")
                }}</el-button
              >
            </el-form-item>
          </div>
        </div>

        </el-form-item>
        <!-- <el-form-item>
          <el-button
            size="small"
@@ -93,68 +133,23 @@
              $t('common.delete')
            }}</el-button>
        </el-form-item> -->
        <el-form-item style="float:right">
          <el-button
            type="info"
            size="small"
            @click="resetForm('ruleForm')"
          ><i class="el-icon-delete"></i>&nbsp;{{
              $t('userManage.RM.reset')
            }}</el-button>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button
            size="small"
            type="primary"
            @click="onSubmit('ruleForm')"
          ><i class="el-icon-search"></i> &nbsp;{{
              $t('userManage.RM.query')
            }}</el-button>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button
            type="danger"
            size="small"
            @click="handleDelete()"
            v-if="menuStatus.delete"
          ><i class="el-icon-delete"></i>&nbsp;{{
              $t('common.delete')
            }}</el-button>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button
            type="success"
            size="small"
            @click="setInsertFormdialog "
            v-if="menuStatus.insert"
          ><i class="el-icon-circle-plus-outline"></i> &nbsp;{{
              $t('userManage.RM.add')
            }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_box subpage_Div">
    <div class="table_box subpage_Div" :style="styleVar">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="85%"
        height="calc(100% - 57px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column type="selection" width="55" />
        <el-table-column
          align="center"
          type="index"
          :label="$t('userManage.RM.index')"
          width="70px"
        />
        <el-table-column
          align="center"
          prop="id"
          v-if="false"
        />
        <el-table-column align="center" prop="id" v-if="false" />
        <el-table-column
          align="center"
          prop="name"
@@ -221,18 +216,17 @@
              type="warning"
              @click="handleEdit(scope.$index, scope.row)"
              size="small"
            >{{ $t('common.update') }}</el-button>
              >{{ $t("common.update") }}</el-button
            >
            <el-button
              @click="showDetail(scope.$index, scope.row)"
              size="small"
            >{{ $t('common.see') }}</el-button>
              >{{ $t("common.see") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div
        style="margin-top: 25px"
        class="pagination_box"
      >
      <div style="margin-top: 25px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -259,7 +253,7 @@
          :label-width="formLabelWidth"
        >
          <el-input
            style="width:95%"
            style="width: 95%"
            v-model="insertform.name"
            autocomplete="off"
          ></el-input>
@@ -274,12 +268,12 @@
            :popper-append-to-body="false"
            v-model="insertform.depValue"
            placeholder="请选择"
            style="width:95%"
            style="width: 95%"
          >
            <el-option
              :value="insertform.depid"
              :label="insertform.depValue"
              style=" height:auto"
              style="height: auto"
            >
              <el-tree
                ref="tree"
@@ -307,7 +301,7 @@
          :label-width="formLabelWidth"
        >
          <el-input
            style="width:95%"
            style="width: 95%"
            v-model="insertform.descr"
            autocomplete="off"
          ></el-input>
@@ -316,39 +310,27 @@
          :label="$t('userManage.RM.isAdmin')"
          :label-width="formLabelWidth"
        >
          <el-radio
            v-model="insertform.isAdmin"
            label="1"
          >是</el-radio>
          <el-radio
            v-model="insertform.isAdmin"
            label="0"
          >否</el-radio>
          <el-radio v-model="insertform.isAdmin" label="1">是</el-radio>
          <el-radio v-model="insertform.isAdmin" label="0">否</el-radio>
        </el-form-item>
        <el-form-item
          :label="$t('userManage.RM.remarks')"
          :label-width="formLabelWidth"
        >
          <el-input
            style="width:95%"
            style="width: 95%"
            v-model="insertform.bak"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="insertFromClose"
        >{{ $t('common.close') }}</el-button>
        <el-button
          type="primary"
          size="small"
          @click="insertFromData"
        >{{ $t('common.confirm') }}</el-button>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="insertFromClose">{{
          $t("common.close")
        }}</el-button>
        <el-button type="primary" size="small" @click="insertFromData">{{
          $t("common.confirm")
        }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
@@ -363,10 +345,7 @@
          :label="$t('userManage.RM.roleName')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="updateform.name"
            autocomplete="off"
          ></el-input>
          <el-input v-model="updateform.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
@@ -378,12 +357,12 @@
            :popper-append-to-body="false"
            v-model="updateform.depValue"
            placeholder="请选择"
            style="width:95%"
            style="width: 95%"
          >
            <el-option
              :value="updateform.depid"
              :label="updateform.depValue"
              style=" height:auto"
              style="height: auto"
            >
              <el-tree
                ref="tree"
@@ -411,147 +390,111 @@
          :label="$t('userManage.RM.isAdmin')"
          :label-width="formLabelWidth"
        >
          <el-radio
            v-model="updateform.isAdmin"
            label="1"
          >是</el-radio>
          <el-radio
            v-model="updateform.isAdmin"
            label="0"
          >否</el-radio>
          <el-radio v-model="updateform.isAdmin" label="1">是</el-radio>
          <el-radio v-model="updateform.isAdmin" label="0">否</el-radio>
        </el-form-item>
        <el-form-item
          :label="$t('userManage.RM.describe')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="updateform.descr"
            autocomplete="off"
          ></el-input>
          <el-input v-model="updateform.descr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('userManage.RM.remarks')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="updateform.bak"
            autocomplete="off"
          ></el-input>
          <el-input v-model="updateform.bak" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="updateFromClose"
        >{{ $t('common.close') }}</el-button>
        <el-button
          type="primary"
          size="small"
          @click="updateFromData"
        >{{ $t('common.confirm') }}</el-button>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="updateFromClose">{{
          $t("common.close")
        }}</el-button>
        <el-button type="primary" size="small" @click="updateFromData">{{
          $t("common.confirm")
        }}</el-button>
      </div>
    </el-dialog>
    <div
      class="leftTree subpage_Div box_div"
      v-if="showCata"
    >
    <div class="leftTree subpage_Div box_div" v-if="showCata">
      <div class="treeBox">
        <role-dep-tree></role-dep-tree>
      </div>
      <div class="btnBox">
        <el-button
          type="primary"
          size="small"
          @click="selectCataName"
        >确定</el-button>
        <el-button
          type="info"
          size="small"
          @click="showCata = false"
        >取消</el-button>
        <el-button type="primary" size="small" @click="selectCataName"
          >确定</el-button
        >
        <el-button type="info" size="small" @click="showCata = false"
          >取消</el-button
        >
      </div>
    </div>

    <div
      class="infoBox box_div subpage_Div"
      v-show="showinfoBox"
    >

      <div
        slot="header"
        class="clearfix"
      >
        <span>{{ $t('dataManage.styleObj.deInformation') }}</span>
        <div
          style="float: right; cursor: pointer"
          @click="closeDetial"
        >
    <div class="infoBox box_div subpage_Div" v-show="showinfoBox">
      <div slot="header" class="clearfix">
        <span>{{ $t("dataManage.styleObj.deInformation") }}</span>
        <div style="float: right; cursor: pointer" @click="closeDetial">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="contentBox">
        <p>
          <label> {{ $t('userManage.RM.roleName') }}:</label>
          <label> {{ $t("userManage.RM.roleName") }}:</label>
          <label class="boxlabel">{{ itemdetail.name }}</label>
        </p>
        <el-divider></el-divider>

        <p>
          <label> {{ $t('userManage.RM.ownedSystem') }}:</label>
          <label> {{ $t("userManage.RM.ownedSystem") }}:</label>
          <label class="boxlabel">{{ itemdetail.depName }}</label>
        </p>
        <el-divider></el-divider>

        <p>
          <label> {{ $t('userManage.RM.isAdmin') }}:</label>
          <label> {{ $t("userManage.RM.isAdmin") }}:</label>
          <label class="boxlabel">{{ itemdetail.admin }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('userManage.RM.describe') }}:</label>
          <label> {{ $t("userManage.RM.describe") }}:</label>
          <label class="boxlabel">{{ itemdetail.descr }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('userManage.RM.creationuser') }}:</label>
          <label> {{ $t("userManage.RM.creationuser") }}:</label>
          <label class="boxlabel">{{ itemdetail.createUser }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('userManage.RM.creationtime') }}:</label>
          <label> {{ $t("userManage.RM.creationtime") }}:</label>
          <label class="boxlabel">{{ itemdetail.createTime }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('userManage.RM.updateonuser') }}:</label>
          <label> {{ $t("userManage.RM.updateonuser") }}:</label>
          <label class="boxlabel">{{ itemdetail.UpdateUser }}</label>
        </p>
        <el-divider></el-divider>

        <p>
          <label> {{ $t('userManage.RM.updateontime') }}:</label>
          <label> {{ $t("userManage.RM.updateontime") }}:</label>
          <label class="boxlabel">{{ itemdetail.updateTime }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('userManage.RM.remarks') }}:</label>
          <label> {{ $t("userManage.RM.remarks") }}:</label>
          <label class="boxlabel">{{ itemdetail.bak }}</label>
        </p>
        <el-divider></el-divider>
      </div>

    </div>
  </div>
</template>

<script>
import moment from 'moment';
import MyBread from '../../components/MyBread.vue';
import roleDepTree from './roleDepTree.vue';
import moment from "moment";
import MyBread from "../../components/MyBread.vue";
import roleDepTree from "./roleDepTree.vue";
import {
  select_Role_ByPageAndCount,
  selectdepTab,
@@ -559,8 +502,7 @@
  deleteRoles,
  selectDep,
  updateRole,

} from '../../api/api';
} from "../../api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -570,30 +512,30 @@
  data() {
    return {
      props: {
        label: 'name',
        value: 'id',
        children: 'children',
        label: "name",
        value: "id",
        children: "children",
        checkStrictly: true,
        emitPath: false,
      },
      depList: [],
      showinfoBox: false,
      showCata: false,
      formLabelWidth: '120px',
      formLabelWidth: "120px",
      InsertFormdialog: false,
      UpdateFormdialog: false,
      roleForm: {
        depid: '',
        depValue: '',
        depid: "",
        depValue: "",
      },
      cataName: '',
      depValue: '',
      cataName: "",
      depValue: "",
      elTreeFlag: 0,
      path_id: '',
      path_id: "",
      tableData: [],
      insertform: {
        depValue: '',
        depid: ''
        depValue: "",
        depid: "",
      },
      updateform: {},
      count: 0,
@@ -612,20 +554,37 @@
        insert: false,
        update: false,
      },
      tableHeight: 0,
      timer: 0,
      styleVar: {
        height: "calc(100% - 109px)",
      },
    };
  },
  methods: {
     onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
      });
    },
    handleRouleDepList(data, node, nodeData) {
      this.roleForm.depid = data.id
      this.roleForm.depid = data.id;
      this.roleForm.depValue = data.name;
    },
    handleDepList(data, node, nodeData) {

      this.insertform.depid = data.id
      this.insertform.depid = data.id;
      this.insertform.depValue = data.name;
    },
    handleUpdataDepList(data, node, nodeData) {
      this.updateform.depid = data.id
      this.updateform.depid = data.id;
      this.updateform.depValue = data.name;
    },
    setInsertFormdialog() {
@@ -636,7 +595,7 @@
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ''; // 给父级添加一个children属性，并赋值
        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；
        // 由此循环多次后，就能形成相应的树形数据结构
        return father.pid == 0; // 返回一级菜单
@@ -645,9 +604,9 @@
    async getDepList() {
      const data = await selectdepTab();
      if (data.code != 200) {
        return this.$message.error('单位列表调用失败');
        return this.$message.error("单位列表调用失败");
      }
      this.depList = this.treeData(data.result)
      this.depList = this.treeData(data.result);
    },
    closeDetial() {
      this.showinfoBox = false;
@@ -663,7 +622,7 @@
        this.itemdetail.updateTime
      );
      this.itemdetail.admin =
        parseInt(this.itemdetail.isAdmin) === 0 ? '否' : '是';
        parseInt(this.itemdetail.isAdmin) === 0 ? "否" : "是";
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
@@ -676,7 +635,7 @@
      if (date === undefined || date === null) {
        return;
      }
      return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
      return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss");
    },
    showDepTree(res) {
      this.showCata = true;
@@ -686,14 +645,14 @@
      this.cataName = this.$store.state.catalogueName;
      this.path_id = this.$store.state.cataNode.id;
      var value;
      if (this.cataName.indexOf('>') != -1) {
        var data = this.$store.state.catalogueName.split('>');
      if (this.cataName.indexOf(">") != -1) {
        var data = this.$store.state.catalogueName.split(">");
        value = data[data.length - 1];
      } else {
        value = this.$store.state.catalogueName;
      }
      this.$store.commit('changeCata', ''); //清空state的面包屑
      this.$store.commit('changeNode', ''); //清空state的节点对象
      this.$store.commit("changeCata", ""); //清空state的面包屑
      this.$store.commit("changeNode", ""); //清空state的节点对象
      this.showCata = false;
      switch (this.elTreeFlag) {
        case 1:
@@ -711,14 +670,14 @@
      }
    },
    async getRoleTabelData() {
      if (this.listData.tab == '') {
      if (this.listData.tab == "") {
        delete this.listData.tab;
      }
      this.listData.name = this.roleForm.username;
      this.listData.depid = this.roleForm.depid;
      const data = await select_Role_ByPageAndCount(this.listData);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败");
      }
      console.log(data);
      this.tableData = data.result;
@@ -728,7 +687,7 @@
      this.selectData = [];
      const data = await selectdepTab();
      if (data.code != 200) {
        this.$message.error('下拉调用失败');
        this.$message.error("下拉调用失败");
      }
      data.result.forEach((e) => {
        if (e) {
@@ -746,8 +705,8 @@
    async insertFromData() {
      if (this.insertform.depValue == null) {
        this.$message({
          message: '请选择角色所属单位',
          type: 'warning',
          message: "请选择角色所属单位",
          type: "warning",
        });
        return;
      }
@@ -756,14 +715,14 @@
        this.InsertFormdialog = false;
        this.insertform = {};
        this.$message({
          message: '添加成功！',
          type: 'success',
          message: "添加成功！",
          type: "success",
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: '添加失败！',
          type: 'warning',
          message: "添加失败！",
          type: "warning",
        });
      }
    },
@@ -774,8 +733,8 @@
    async updateFromData() {
      if (this.updateform.depValue == null) {
        this.$message({
          message: '请选择角色所属单位',
          type: 'warning',
          message: "请选择角色所属单位",
          type: "warning",
        });
        return;
      }
@@ -785,14 +744,14 @@
        this.UpdateFormdialog = false;
        this.updateform = {};
        this.$message({
          message: '修改成功！',
          type: 'success',
          message: "修改成功！",
          type: "success",
        });
        this.getRoleTabelData();
      } else {
        this.$message({
          message: '修改失败！',
          type: 'warning',
          message: "修改失败！",
          type: "warning",
        });
      }
    },
@@ -801,32 +760,34 @@
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].id);
      }
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await deleteRoles({ ids: std.toString() });
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await deleteRoles({ ids: std.toString() });

        if (data.code == 200) {
          this.InsertFormdialog = false;
          if (data.code == 200) {
            this.InsertFormdialog = false;
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.getRoleTabelData();
          } else {
            this.$message({
              message: "删除失败！",
              type: "warning",
            });
          }
        })
        .catch(() => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            type: "info",
            message: "已取消删除",
          });
          this.getRoleTabelData();
        } else {
          this.$message({
            message: '删除失败！',
            type: 'warning',
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val) {
      this.listData.pageSize = val;
@@ -853,17 +814,25 @@
    },
    showPermsMenu(res) {
      switch (res.tag) {
        case '/delete':
        case "/delete":
          this.menuStatus.delete = true;
          break;
        case '/insert':
        case "/insert":
          this.menuStatus.insert = true;
          break;
        case '/update':
        case "/update":
          this.menuStatus.update = true;
          break;
      }
    },
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight();
  },
  created() {
    var val = this.$store.state.currentPerms;
@@ -884,7 +853,7 @@
  height: 98%;
  width: 98%;
  padding: 1%;
  overflow: auto;

  .el-input {
    width: 300px;
  }
@@ -909,24 +878,19 @@
  .inquire {
    height: auto;

    padding: 10px;
    margin-top: 10px;
    margin-top: 10px;
    width: calc(100% - 22px);
    padding: 8px;
    margin-top: 20px;

    border-radius: 5px;

    margin-bottom: 20px;
    // width: calc(100% - 22px);

    .el-form-item {
      margin: 7px;
      margin: 5px;
    }
  }
  .table_box {
    width: calc(100% - 22px);
    height: calc(60% - 6px);
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    border-radius: 5px;
  }

  .text-center {
    text-align: center;
  }

 src/views/userManage/templateManage.vue

@@ -5,20 +5,24 @@
        `${$t('dataManage.templateManage')}`,
      ]"></My-bread>
    <el-divider />
    <div class="searchComp subpage_Div">
    <div class="searchComp subpage_Div"  ref="container">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :inline="true"
      >
        <el-form-item>
         <div class="flex_box">
          <div style="margin-right: auto">
 <el-form-item label="名称">
          <el-input
          style="width:200px"
            v-model="ruleForm.name"
            :placeholder="$t('common.pleaseInput')"
           
          />
        </el-form-item>
        <el-form-item style="float:right">
            </el-form-item>
          </div>
           <div>
               <el-form-item>
          <el-button
            icon="el-icon-refresh"
            @click="restRefreshTable"
@@ -26,7 +30,7 @@
            size="small"
          >{{ $t('common.empty') }}</el-button>
        </el-form-item>
        <el-form-item style="float:right">
        <el-form-item>
          <el-button
            icon="el-icon-search"
            @click="setRefreshTable"
@@ -34,7 +38,7 @@
            size="small"
          >{{ $t('common.iquery') }}</el-button>
        </el-form-item>
        <el-form-item style="float:right">
        <el-form-item>
          <el-button
            v-if="btnStatus.delete"
            icon="el-icon-delete"
@@ -43,7 +47,7 @@
            size="small"
          >{{ $t('common.delete') }}</el-button>
        </el-form-item>
        <el-form-item style="float:right">
        <el-form-item>
          <el-button
            v-if="btnStatus.insert"
            @click="setTableInsert"
@@ -52,13 +56,19 @@
            size="small"
          >{{ $t('common.append') }}</el-button>
        </el-form-item>
           </div>
         </div>
       
      
     
      </el-form>
    </div>
    <div>
    <div class="table_box" :style="styleVar">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        height="calc(100% - 57px)"
      >
        <el-table-column
          type="selection"
@@ -141,7 +151,7 @@
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:10px">
      <div style="margin-top:25px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -426,6 +436,11 @@
        insert: false,
        update: false,
      },
       tableHeight: 0,
      timer: 0,
      styleVar: {
        "height": "calc(100% - 109px)",
      },
    }
  },
  created() {
@@ -433,7 +448,28 @@
    this.showTableData();

  },
   beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
    mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight()
  },
  methods: {
     onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
      });
    },
    //修改取消
    closeEditData() {
      this.closeInsertData();
@@ -726,10 +762,13 @@
  }

  .searchComp {
    margin: 10px auto;
     padding: 8px;
    margin-top: 20px;

    border-radius: 5px;

    margin-bottom: 20px;

    .el-form-item {
      margin: 5px;
    }