68个表格在1366*768下的适配，保安单位情况智能分析中的图表的适配以及其按钮会被遮住不能点击

liuyg

2022-02-15 a38281e697cde9f45926a6af0c88bec14501fec0

 src/views/securityGuard/securityGuard.vue

@@ -1,6 +1,6 @@
<template>
  <el-row :class="{ securityGuard: isSecurity }">
    <el-col :span="0" style="display: none">
    <!-- <el-col :span="0" style="display: none">
      <div class="box">
        <el-scrollbar>
          <basic-container>
@@ -12,16 +12,17 @@
          </basic-container>
        </el-scrollbar>
      </div>
    </el-col>
    </el-col> -->
    <el-col :span="24">
      <basic-container
        :class="[
          screenSize == 1366 ? 'smallSize' : 'normalSize',
          $store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : ''
        ]"
      >
        <!-- :key="option.height" -->
        <avue-crud
          class="tablesss"
          :key="option.height"
          :option="option"
          :search.sync="search"
          :table-loading="loading"
@@ -157,7 +158,82 @@
          </template>

          <template slot-scope="{ type, size, row }" slot="menu">
            <el-button
            <el-tooltip
              placement="bottom"
              effect="light"
              transition="el-collapse-transition"
              popper-class="caozuolanpopper"
            >
              <div slot="content">
                <el-button
                  icon="el-icon-view"
                  :size="size"
                  :type="type"
                  @click.stop="rowClick(row)"
                  >查看
                </el-button>
                <br />
                <el-button
                  icon="el-icon-scissors"
                  :size="size"
                  :type="type"
                  v-if="permission.securityGuard_delete && row.status != 2"
                  @click="$refs.crud.rowEdit(row, index)"
                  >编辑
                </el-button>
                <br v-if="permission.securityGuard_delete && row.status != 2" />
                <el-button
                  icon="el-icon-close"
                  :size="size"
                  :type="type"
                  v-if="permission.securityGuard_delete && row.status != 2"
                  @click="$refs.crud.rowDel(row, index)"
                  >注销
                </el-button>
                <br v-if="permission.securityGuard_delete && row.status != 2" />
                <el-button
                  icon="el-icon-circle-close"
                  :size="size"
                  :type="type"
                  v-if="permission.securityGuard_delete && row.status != 2"
                  @click.stop="rowStatus(row)"
                  >离职
                </el-button>
                <br v-if="permission.securityGuard_delete && row.status != 2" />
                <el-button
                  icon="el-icon-search"
                  :size="size"
                  :type="type"
                  v-if="row.status == 2"
                  @click.stop="rowDellook(row)"
                  >离职查询
                </el-button>
                <br v-if="row.status == 2" />
                <el-button
                  icon="el-icon-user"
                  :size="size"
                  :type="type"
                  v-if="permission.securityGuard_check"
                  @click.stop="rowCheck(row)"
                  >异常
                </el-button>
                <!-- <br />
                <el-button
                  icon="el-icon-edit"
                  style="display: none"
                  :size="size"
                  :type="type"
                  v-if="permission.securityGuard_paper"
                  @click.stop="certificateClick(row)"
                  >纸质证书制作
                </el-button> -->
              </div>
              <el-button icon="el-icon-s-operation" :size="size" :type="type"
                >操作
              </el-button>
            </el-tooltip>

            <!-- <el-button
              icon="el-icon-s-custom"
              :size="size"
              :type="type"
@@ -196,7 +272,7 @@
              v-if="permission.securityGuard_paper"
              @click.stop="certificateClick(row)"
              >纸质证书制作
            </el-button>
            </el-button> -->
          </template>

          <template slot-scope="{ row }" slot="sex">
@@ -649,6 +725,7 @@
    // // that.option.height = +h - (+heard[0].clientHeight + 332);
    // let optionHeight = +this.windowHeight - (+heard[0].clientHeight + +usNum);
    return {
      startTimecc: null,
      sort: "",
      type: 2,
      sortName: "",
@@ -824,8 +901,8 @@
        delBtn: true,
        align: "center",
        index: true,
        delBtnText: "注销",
        menuWidth: 280,
        // delBtnText: "注销",
        menuWidth: 90,
        selection: true,
        viewBtn: true,
        defaultExpandAll: true,
@@ -1319,58 +1396,10 @@
        ]
      },
      tablevisible: true,
      isNotChangeSize: true //取消表格loging
      onceTableChange: 1
    };
  },
  watch: {
    windowHeight() {
      let that = this;
      that.isNotChangeSize = false; //取消表格loging
      let d = {
        fn: function(h) {
          let table = document.getElementsByClassName("tablesss");
          let heard = table[0].getElementsByClassName("avue-crud__search");
          let usNum =
            that.windowWidth <= 1376 || that.windowHeight <= 778 ? 170 : 302;
          // // that.option.height = +h - (+heard[0].clientHeight + 332);
          // alert(h);
          let doit = height => {
            let hs = height || h;
            // alert(hs);
            // alert(heard[0].clientHeight);
            // alert(usNum);
            that.option.height = +hs - (+heard[0].clientHeight + +usNum);
            that.$nextTick(() => {
              that.refreshChange();
              setTimeout(() => {
                let d = {
                  that: this,
                  otherclass: ["downSFZ"],
                  haveOpen: true
                };
                //刷新表格后再次调整按钮
                that.$store.dispatch("TABLE_CHANGEBUTPOSITION", d);
                that.isNotChangeSize = true; //恢复表格loging
              }, 10);
            });
          };
          if (that.option.height == "auto") {
            //解决第一次未渲染成功会报错的问题
            setTimeout(() => {
              // console.log(
              //   document
              //     .getElementsByClassName("tablesss")[0]
              //     .getElementsByClassName("avue-crud__search")
              // );
              doit(window.innerHeight);
            }, 150);
          } else {
            doit();
          }
        }
      };
      this.$store.dispatch("WHchangeHight", d);
    },
    radio() {
      if (this.radio) {
        this.SFZloding = true;
@@ -1500,7 +1529,14 @@
    }
  },
  computed: {
    ...mapGetters(["userInfo", "permission", "windowHeight", "windowWidth"]),
    ...mapGetters([
      "userInfo",
      "permission",
      "windowHeight",
      "windowWidth",
      "screenSize",
      "screenHeight"
    ]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.securityGuard_add, false),
@@ -1588,15 +1624,11 @@
    }
  },
  mounted() {
    // let d = {
    //   that: this,
    //   otherclass: ["downSFZ"],
    //   haveOpen: true,
    //   flowHeight: 332,
    // };
    // this.$store.dispatch("TABLE_CHANGEBUTPOSITION", d);
    // console.log((this.$refs.crud._props.option.height = 200));
    this.changeButsPosition("TABLE_CHANGEBUTPOSITION");
    // console.log(this.screenSize, "screenSize");
    this.option.height = this.screenHeight;
    this.$store.commit("setWindowSizeHeightAdd");
    // this.$store.dispatch("MOUNTED_TABLE_SIZE");

    // this.option.column[0].hide = true
    // 非保安单位模式默认加载管理组数据
    if (!website.tenantMode) {
@@ -1639,17 +1671,6 @@
      }
      //  首次执行
      checkDom();
    },
    changeButsPosition(val) {
      let d = {
        that: this,
        otherclass: ["downSFZ"],
        haveOpen: true,
        from: "mounted"
      };
      // 开始就适应高度
      this.$store.commit("setWindowSizeHeightAdd");
      this.$store.dispatch("TABLE_CHANGEBUTPOSITION", d);
    },
    openccc() {
      console.log(this.zhiwenImg);
@@ -1840,10 +1861,18 @@
        this.userInfo.account == "南昌市保安服务总公司" ||
        this.userInfo.account == "押运分公司"
      ) {
        window.open(`/api/blade-user/export-template-securityYy?${this.website.tokenHeader}=${getToken()}`);
        window.open(
          `/api/blade-user/export-template-securityYy?${
            this.website.tokenHeader
          }=${getToken()}`
        );
        return;
      }
      window.open(`/api/blade-user/export-template-security?${this.website.tokenHeader}=${getToken()}`);
      window.open(
        `/api/blade-user/export-template-security?${
          this.website.tokenHeader
        }=${getToken()}`
      );
    },
    handleImport2() {
      this.excelBox2 = true;
@@ -2752,6 +2781,7 @@
            that.data = data.records;
            that.loading = false;
            that.selectionClear();
            that.$store.commit("setWindowSizeHeightAdd");
          });
        });
      });
@@ -3099,7 +3129,7 @@
.downSFZqudong {
  position: absolute;
  right: 239px;
  top: 153px;
  top: 93px;
  font-size: 14px;
  a {
    text-decoration: underline;