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

liuyg

2022-02-15 a38281e697cde9f45926a6af0c88bec14501fec0

 src/views/system/menu.vue

@@ -2,10 +2,12 @@
  <basic-container
    :class="[
      'hasButTwo',
      $store.state.control.windowWidth >= 1024 ? 'oneRowSearch' : '',
      $store.state.control.screenSize == 1366 ? 'smallSize' : 'normalSize',
      $store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : ''
    ]"
  >
    <avue-crud
      class="tablesss"
      :option="option"
      :table-loading="loading"
      :data="data"
@@ -77,7 +79,7 @@
        pageSize: 10,
        currentPage: 1,
        total: 0,
        ...this.$store.state.control.changePageSize,
        ...this.$store.state.control.changePageSize
      },
      option: {
        lazy: true,
@@ -103,9 +105,9 @@
              {
                required: true,
                message: "请输入菜单名称",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "路由地址",
@@ -114,9 +116,9 @@
              {
                required: true,
                message: "请输入路由地址",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "上级菜单",
@@ -126,15 +128,15 @@
            hide: true,
            addDisabled: false,
            props: {
              label: "title",
              label: "title"
            },
            rules: [
              {
                required: false,
                message: "请选择上级菜单",
                trigger: "click",
              },
            ],
                trigger: "click"
              }
            ]
          },
          {
            label: "菜单图标",
@@ -146,9 +148,9 @@
              {
                required: true,
                message: "请输入菜单图标",
                trigger: "click",
              },
            ],
                trigger: "click"
              }
            ]
          },
          {
            label: "菜单编号",
@@ -158,9 +160,9 @@
              {
                required: true,
                message: "请输入菜单编号",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "菜单类型",
@@ -169,21 +171,21 @@
            dicData: [
              {
                label: "菜单",
                value: 1,
                value: 1
              },
              {
                label: "按钮",
                value: 2,
              },
                value: 2
              }
            ],
            hide: true,
            rules: [
              {
                required: true,
                message: "请选择菜单类型",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "菜单别名",
@@ -193,9 +195,9 @@
              {
                required: true,
                message: "请输入菜单别名",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "新窗口",
@@ -205,21 +207,21 @@
            dicData: [
              {
                label: "否",
                value: 1,
                value: 1
              },
              {
                label: "是",
                value: 2,
              },
                value: 2
              }
            ],
            value: 1,
            rules: [
              {
                required: true,
                message: "请选择新窗口打开",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "菜单排序",
@@ -231,9 +233,9 @@
              {
                required: true,
                message: "请输入菜单排序",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "菜单备注",
@@ -241,17 +243,17 @@
            type: "textarea",
            span: 24,
            minRows: 2,
            hide: true,
          },
        ],
            hide: true
          }
        ]
      },
      data: [],
      data: []
    };
  },
  watch: {
    "form.category"() {
      const category = func.toInt(this.form.category);
      this.$refs.crud.option.column.filter((item) => {
      this.$refs.crud.option.column.filter(item => {
        if (item.prop === "path") {
          item.rules[0].required = category === 1;
        }
@@ -259,7 +261,7 @@
          item.disabled = category === 2;
        }
      });
    },
    }
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
@@ -268,20 +270,23 @@
        addBtn: this.vaildData(this.permission.menu_add, false),
        viewBtn: this.vaildData(this.permission.menu_view, false),
        delBtn: this.vaildData(this.permission.menu_delete, false),
        editBtn: this.vaildData(this.permission.menu_edit, false),
        editBtn: this.vaildData(this.permission.menu_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    }
  },
  mounted() {
    this.$store.commit("setWindowSizeHeightAdd");
  },
  methods: {
    initData() {
      getMenuTree().then((res) => {
      getMenuTree().then(res => {
        const column = this.findObject(this.option.column, "parentId");
        column.dicData = res.data.data;
      });
@@ -295,18 +300,18 @@
    },
    rowSave(row, done, loading) {
      add(row).then(
        (res) => {
        res => {
          // 获取新增数据的相关字段
          const data = res.data.data;
          row.id = data.id;
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          // 数据回调进行刷新
          done(row);
        },
        (error) => {
        error => {
          window.console.log(error);
          loading();
        }
@@ -317,12 +322,12 @@
        () => {
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          // 数据回调进行刷新
          done(row);
        },
        (error) => {
        error => {
          window.console.log(error);
          loading();
        }
@@ -332,7 +337,7 @@
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
@@ -340,7 +345,7 @@
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          // 数据回调进行刷新
          done(row);
@@ -354,7 +359,7 @@
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
@@ -369,7 +374,7 @@
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
        });
    },
@@ -397,7 +402,7 @@
        this.initData();
      }
      if (["edit", "view"].includes(type)) {
        getMenu(this.form.id).then((res) => {
        getMenu(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
@@ -422,22 +427,22 @@
    onLoad(page, params = {}) {
      this.loading = true;
      getLazyList(this.parentId, Object.assign(params, this.query)).then(
        (res) => {
        res => {
          this.data = res.data.data;
          this.loading = false;
          this.$store.commit("setWindowSizeHeightAdd");
          this.selectionClear();
        }
      );
    },
    treeLoad(tree, treeNode, resolve) {
      const parentId = tree.id;
      getLazyList(parentId).then((res) => {
      getLazyList(parentId).then(res => {
        resolve(res.data.data);
      });
    },
  },
    }
  }
};
</script>

<style>
</style>
<style></style>