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

liuyg

2022-02-15 a38281e697cde9f45926a6af0c88bec14501fec0

 src/views/securityAnalysis/child/assignment copy.vue

@@ -1,38 +1,39 @@
<template>
  <basic-container>
    <div
      :class="[
        'dispatchChildoperable',
        $store.state.control.windowWidth >= 1024 ? 'oneRowSearch' : '',
      ]"
  <basic-container
    :class="[
      'dispatchChildoperable',
      $store.state.control.screenSize == 1366 ? 'smallSize' : 'normalSize',
      $store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : ''
    ]"
  >
    <avue-crud
      class="tablesss"
      :option="option1"
      :data="data1"
      :page.sync="page1"
      ref="crudrec1"
      v-model="form1"
      :table-loading="loading1"
      :before-open="beforeOpen"
      @row-save="rowSave1"
      @search-change="searchChange1"
      @search-reset="searchReset1"
      @row-update="rowUpdate1"
      @row-del="rowDel1"
      @selection-change="selectionChange1"
      @refresh-change="refreshChange1"
      @on-load="onLoad1"
    >
      <avue-crud
        :option="option1"
        :data="data1"
        :page.sync="page1"
        ref="crudrec1"
        v-model="form1"
        :table-loading="loading1"
        :before-open="beforeOpen"
        @row-save="rowSave1"
        @search-change="searchChange1"
        @search-reset="searchReset1"
        @row-update="rowUpdate1"
        @row-del="rowDel1"
        @selection-change="selectionChange1"
        @refresh-change="refreshChange1"
      >
        <template slot-scope="{ type, row }" slot="menu">
          <el-button
            icon="el-icon-check"
            size="small"
            :type="type"
            @click="openClick(row, page2)"
            >派遣轨迹</el-button
          >
        </template>
      </avue-crud>
    </div>
      <template slot-scope="{ type, row }" slot="menu">
        <el-button
          icon="el-icon-check"
          size="small"
          :type="type"
          @click="openClick(row, page2)"
          >派遣轨迹</el-button
        >
      </template>
    </avue-crud>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
@@ -78,7 +79,7 @@
  update1,
  remove1,
  getDispatcherUnitByDeptId,
  overDispatcher,
  overDispatcher
} from "@/api/dispatch/dispatch";
import { update, getListByDeptId } from "@/api/system/user";
import { mapState } from "vuex";
@@ -100,7 +101,7 @@
        pageSize: 10,
        currentPage: 1,
        total: 0,
        ...this.$store.state.control.changePageSize,
        ...this.$store.state.control.changePageSize
      },
      form1: {},
      query1: {},
@@ -135,7 +136,7 @@
            // searchSpan: 4,
            minWidth: 210,
            addDisplay: false,
            editDisplay: false,
            editDisplay: false
          },
          {
            label: "保安公司",
@@ -147,7 +148,7 @@
            cascaderItem: ["userIds"],
            props: {
              label: "title",
              value: "id",
              value: "id"
            },
            width: 180,
            dicUrl: `/api/blade-system/dept/security_lazy-tree?parentId=1413470343230877697`,
@@ -155,9 +156,9 @@
              {
                required: true,
                message: "请输入保安公司",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "派遣单位",
@@ -167,7 +168,7 @@
            // dicUrl: "/api/dispatcherUnit/page-tree?deptId={{key}}",
            props: {
              label: "name",
              value: "id",
              value: "id"
            },
            hide: true,
            searchSpan: 4,
@@ -178,9 +179,9 @@
              {
                required: true,
                message: "请输入派遣单位",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "保安员",
@@ -193,7 +194,7 @@
            hide: true,
            props: {
              label: "realName",
              value: "id",
              value: "id"
            },
            // dicUrl: `/api/blade-user/page-security-units?dispatch=1&deptId={{key}}`,
            dicUrl: `/api/blade-user/page-security-units?status=1&deptId={{key}}`,
@@ -202,9 +203,9 @@
              {
                required: true,
                message: "请选择保安",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "保安员",
@@ -225,9 +226,9 @@
              {
                required: true,
                message: "请选择保安",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },

          {
@@ -241,9 +242,9 @@
              {
                required: true,
                message: "请输入身份证",
                trigger: "click",
              },
            ],
                trigger: "click"
              }
            ]
            // search: true,
            // searchSpan: 4,
            // overHidden: true
@@ -263,9 +264,9 @@
              {
                required: true,
                message: "请输入派遣地址",
                trigger: "click",
              },
            ],
                trigger: "click"
              }
            ]
            // search: true,
            // searchSpan: 4,
            // overHidden: true
@@ -284,9 +285,9 @@
              {
                required: true,
                message: "请输入派遣时间",
                trigger: "click",
              },
            ],
                trigger: "click"
              }
            ]
            // overHidden: true
          },
          {
@@ -301,9 +302,9 @@
              {
                required: true,
                message: "请输入结束时间",
                trigger: "click",
              },
            ],
                trigger: "click"
              }
            ]
            // search: true,
            // searchSpan: 4,
            // overHidden: true
@@ -326,11 +327,11 @@
              {
                required: true,
                message: "请输入时间",
                trigger: "blur",
              },
            ],
          },
        ],
                trigger: "blur"
              }
            ]
          }
        ]
      },
      loading2: true, //单个人派遣记录
      vals: [],
@@ -339,7 +340,7 @@
        pageSize: 10,
        currentPage: 1,
        total: 0,
        ...this.$store.state.control.changePageSize,
        ...this.$store.state.control.changePageSize
      },
      form2: {},
      query2: {},
@@ -373,7 +374,7 @@
            // searchSpan: 4,
            minWidth: 210,
            addDisplay: false,
            editDisplay: false,
            editDisplay: false
          },
          {
            label: "保安公司",
@@ -385,7 +386,7 @@
            cascaderItem: ["userIds"],
            props: {
              label: "title",
              value: "id",
              value: "id"
            },
            width: 180,
            dicUrl: `/api/blade-system/dept/security_lazy-tree?parentId=1413470343230877697`,
@@ -393,9 +394,9 @@
              {
                required: true,
                message: "请输入保安公司",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "派遣单位",
@@ -405,7 +406,7 @@
            // dicUrl: "/api/dispatcherUnit/page-tree?deptId={{key}}",
            props: {
              label: "name",
              value: "id",
              value: "id"
            },
            hide: true,
            searchSpan: 4,
@@ -416,9 +417,9 @@
              {
                required: true,
                message: "请输入派遣单位",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "保安员",
@@ -431,7 +432,7 @@
            hide: true,
            props: {
              label: "realName",
              value: "id",
              value: "id"
            },
            // dicUrl: `/api/blade-user/page-security-units?dispatch=1&deptId={{key}}`,
            dicUrl: `/api/blade-user/page-security-units?status=1&deptId={{key}}`,
@@ -440,9 +441,9 @@
              {
                required: true,
                message: "请选择保安",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "保安员",
@@ -463,9 +464,9 @@
              {
                required: true,
                message: "请选择保安",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },

          {
@@ -479,9 +480,9 @@
              {
                required: true,
                message: "请输入身份证",
                trigger: "click",
              },
            ],
                trigger: "click"
              }
            ]
            // search: true,
            // searchSpan: 4,
            // overHidden: true
@@ -501,9 +502,9 @@
              {
                required: true,
                message: "请输入派遣地址",
                trigger: "click",
              },
            ],
                trigger: "click"
              }
            ]
            // search: true,
            // searchSpan: 4,
            // overHidden: true
@@ -522,9 +523,9 @@
              {
                required: true,
                message: "请输入派遣时间",
                trigger: "click",
              },
            ],
                trigger: "click"
              }
            ]
            // overHidden: true
          },
          {
@@ -539,9 +540,9 @@
              {
                required: true,
                message: "请输入结束时间",
                trigger: "click",
              },
            ],
                trigger: "click"
              }
            ]
            // search: true,
            // searchSpan: 4,
            // overHidden: true
@@ -564,12 +565,12 @@
              {
                required: true,
                message: "请输入时间",
                trigger: "blur",
              },
            ],
          },
        ],
      },
                trigger: "blur"
              }
            ]
          }
        ]
      }
    };
  },
  created() {
@@ -589,17 +590,17 @@
    // },
    ids1() {
      let ids1 = [];
      this.selectionList1.forEach((ele) => {
      this.selectionList1.forEach(ele => {
        ids1.push(ele.id);
      });
      return ids1.join(",");
    },
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      userInfo: state => state.user.userInfo
    }),
    deps() {
      return this.form.deptId;
    },
    }
  },

  methods: {
@@ -616,13 +617,13 @@
          ...params,
          beginTime: releaseTimeRange[0],
          overTime: releaseTimeRange[1],
          ...this.query,
          ...this.query
        };
        values.releaseTimeRange = null;
      } else {
        values = {
          ...params,
          ...this.query,
          ...this.query
        };
      }

@@ -647,7 +648,7 @@
        page.pageSize,
        // Object.assign(params, this.query2)
        values
      ).then((res) => {
      ).then(res => {
        const data = res.data.data;
        this.page2.total = data.total;
        this.data2 = data.records;
@@ -674,16 +675,16 @@
      // }

      adddata1(form).then(
        (res) => {
        res => {
          this.refreshChange2();
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          done();
        },
        (error) => {
        error => {
          window.console.log(error);
          loading();
        }
@@ -705,11 +706,11 @@
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          done();
        },
        (error) => {
        error => {
          window.console.log(error);
          loading();
        }
@@ -719,7 +720,7 @@
      this.$confirm("确定结束当前派遣?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      })
        .then(() => {
          console.log(row);
@@ -730,7 +731,7 @@
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
        });
    },
@@ -767,15 +768,15 @@
      // }

      adddata1(form).then(
        (res) => {
        res => {
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          done();
        },
        (error) => {
        error => {
          window.console.log(error);
          loading();
        }
@@ -802,11 +803,11 @@
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          done();
        },
        (error) => {
        error => {
          window.console.log(error);
          loading();
        }
@@ -816,7 +817,7 @@
      this.$confirm("确定结束当前派遣?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      })
        .then(() => {
          return overDispatcher(row);
@@ -825,7 +826,7 @@
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
        });
    },
@@ -842,7 +843,7 @@
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      })
        .then(() => {
          return remove1(this.ids1);
@@ -851,7 +852,7 @@
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          this.$refs.crudrec1.toggleSelection();
        });
@@ -911,14 +912,14 @@
          beginTime: releaseTimeRange[0],
          overTime: releaseTimeRange[1],
          ...this.query,
          ...this.card,
          ...this.card
        };
        values.releaseTimeRange = null;
      } else {
        values = {
          ...params,
          ...this.query,
          ...this.card,
          ...this.card
        };
      }

@@ -937,10 +938,11 @@
        page.pageSize,
        // Object.assign(params, this.query)
        values
      ).then((res) => {
      ).then(res => {
        const data = res.data.data;
        this.page1.total = data.total;
        this.data1 = data.records;
        this.$store.commit("setWindowSizeHeightAdd");
        this.loading1 = false;
        // this.$nextTick(() => this.$refs.crudrec1.dicInit("cascader"));
        // console.log(this.form, 111111);
@@ -949,7 +951,7 @@
    initData(type, d = 1) {
      var that = this;
      if (type == 1) {
        getDispatcherUnitByDeptId(null).then((res) => {
        getDispatcherUnitByDeptId(null).then(res => {
          const dispatcherUnitIdColumn = that.findObject(
            this["option" + d].column,
            "dispatcherUnitId"
@@ -959,14 +961,14 @@
        });
      }
      if (type == 2) {
        getDispatcherUnitByDeptId(that.userInfo.dept_id).then((res) => {
        getDispatcherUnitByDeptId(that.userInfo.dept_id).then(res => {
          const dispatcherUnitIdColumn = that.findObject(
            this["option" + d].column,
            "dispatcherUnitId"
          );
          dispatcherUnitIdColumn.dicData = res.data.data;
        });
        getListByDeptId(that.userInfo.dept_id, 1).then((res) => {
        getListByDeptId(that.userInfo.dept_id, 1).then(res => {
          const userIdsColumn = that.findObject(
            this["option" + d].column,
            "userIds"
@@ -974,7 +976,7 @@
          userIdsColumn.dicData = res.data.data;
        });
      }
    },
    }
  },
  //  watch: {
  //   // "form.deptId"() {
@@ -985,8 +987,9 @@
  //   }
  // },
  mounted() {
    this.onLoad1(this.page1, this.query1);
  },
    this.$store.commit("setWindowSizeHeightAdd");
    // this.onLoad1(this.page1, this.query1);
  }
};
</script>