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

liuyg

2022-02-15 a38281e697cde9f45926a6af0c88bec14501fec0

 src/views/securityUnitChild/index copy.vue

@@ -142,102 +142,102 @@
        <!-- </span> -->
      </el-tab-pane>
      <!-- <span v-else-if="typeTABS.prop === 'tab2'" class="tab"> -->
      

      <el-tab-pane
        :label="tab2label"
        name="tab2"
        :class="[
          $store.state.control.windowWidth >= 1024 ? 'oneRowSearch' : '',
          $store.state.control.windowWidth >= 1024 ? 'oneRowSearch' : ''
        ]"
      >
        <div class="manager">
        <basic-container>
          <avue-crud
            v-if="true"
            :option="option1"
            :data="data1"
            :page.sync="page1"
            ref="crudrec1"
            :table-loading="loading1"
            @row-save="rowSave1"
            @search-change="searchChange1"
            @search-reset="searchReset1"
            @row-update="rowUpdate1"
            @row-del="rowDel1"
            @selection-change="selectionChange1"
            @refresh-change="refreshChange1"
            @on-load="onLoad1"
          >
            <template slot="menuLeft">
              <el-button
                type="danger"
                size="small"
                plain
                icon="el-icon-delete"
                @click="handleDelete1"
                >删 除
              </el-button>
              <el-button
                type="success"
                size="small"
                plain
                icon="el-icon-upload2"
                @click="handleImport"
                >批量导入
              </el-button>
            </template>
          </avue-crud>
        </basic-container>
         </div>
          <basic-container>
            <avue-crud
              v-if="true"
              :option="option1"
              :data="data1"
              :page.sync="page1"
              ref="crudrec1"
              :table-loading="loading1"
              @row-save="rowSave1"
              @search-change="searchChange1"
              @search-reset="searchReset1"
              @row-update="rowUpdate1"
              @row-del="rowDel1"
              @selection-change="selectionChange1"
              @refresh-change="refreshChange1"
              @on-load="onLoad1"
            >
              <template slot="menuLeft">
                <el-button
                  type="danger"
                  size="small"
                  plain
                  icon="el-icon-delete"
                  @click="handleDelete1"
                  >删 除
                </el-button>
                <el-button
                  type="success"
                  size="small"
                  plain
                  icon="el-icon-upload2"
                  @click="handleImport"
                  >批量导入
                </el-button>
              </template>
            </avue-crud>
          </basic-container>
        </div>
        <!-- </span> -->
      </el-tab-pane>
     

      <!-- <span v-else-if="typeTABS.prop === 'tab3'" class="tab"> -->
      <el-tab-pane
        label="主要管理人员信息"
        name="tab3"
        :class="[
          $store.state.control.windowWidth >= 1024 ? 'oneRowSearch' : '',
          $store.state.control.windowWidth >= 1024 ? 'oneRowSearch' : ''
        ]"
      >
        <div class="manager">
        <basic-container>
          <avue-crud
            v-if="true"
            :option="option2"
            :data="data2"
            :page.sync="page2"
            ref="crudrec2"
            :table-loading="loading2"
            @row-save="rowSave2"
            @search-change="searchChange2"
            @search-reset="searchReset2"
            @row-update="rowUpdate2"
            @row-del="rowDel2"
            @selection-change="selectionChange2"
            @refresh-change="refreshChange2"
            @on-load="onLoad2"
          >
            <template slot="menuLeft">
              <el-button
                type="danger"
                size="small"
                plain
                icon="el-icon-delete"
                @click="handleDelete2"
                >删 除
              </el-button>
              <el-button
                type="success"
                size="small"
                plain
                icon="el-icon-upload2"
                @click="handleImport1"
                >批量导入
              </el-button>
            </template>
          </avue-crud>
        </basic-container>
          <basic-container>
            <avue-crud
              v-if="true"
              :option="option2"
              :data="data2"
              :page.sync="page2"
              ref="crudrec2"
              :table-loading="loading2"
              @row-save="rowSave2"
              @search-change="searchChange2"
              @search-reset="searchReset2"
              @row-update="rowUpdate2"
              @row-del="rowDel2"
              @selection-change="selectionChange2"
              @refresh-change="refreshChange2"
              @on-load="onLoad2"
            >
              <template slot="menuLeft">
                <el-button
                  type="danger"
                  size="small"
                  plain
                  icon="el-icon-delete"
                  @click="handleDelete2"
                  >删 除
                </el-button>
                <el-button
                  type="success"
                  size="small"
                  plain
                  icon="el-icon-upload2"
                  @click="handleImport1"
                  >批量导入
                </el-button>
              </template>
            </avue-crud>
          </basic-container>
        </div>
        <!-- </span> -->
      </el-tab-pane>
@@ -326,7 +326,7 @@
      </avue-form>
    </el-dialog>
  </div>
</template> 
</template>

<script>
import { column11, column, column1, column2 } from "./data";
@@ -340,7 +340,7 @@
  getdataOnce2,
  adddata2,
  update2,
  remove2,
  remove2
} from "@/api/securityUnit/securityUnit";
import equipments from "../securityEquipment/equipments.vue";
import car from "../securityEquipment/car.vue";
@@ -358,11 +358,11 @@
    gun: gun,
    licence: licence,
    businessLicense: businessLicense,
    social: social,
    social: social
  },
  data() {
    return {
      tab2label:"",
      tab2label: "",
      visible: false,
      overzb: false, //结决id传入、信息获取的优先级
      overcar: false, //结决id传入、信息获取的优先级
@@ -384,18 +384,18 @@
            loadText: "文件上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
              res: "data"
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/shareholder/import-share",
            action: "/api/shareholder/import-share"
          },
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24,
          },
        ],
            span: 24
          }
        ]
      },

      excelBox1: false, //管理人
@@ -413,18 +413,18 @@
            loadText: "文件上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
              res: "data"
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/member/import-member",
            action: "/api/member/import-member"
          },
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24,
          },
        ],
            span: 24
          }
        ]
      },

      typeTABS: {}, //标签页
@@ -433,32 +433,32 @@
          {
            // icon: "el-icon-info",
            label: "保安单位基本信息",
            prop: "tab1",
            prop: "tab1"
          },
          {
            // icon: "el-icon-info",
            label: "工商信息",
            prop: "tab11",
            prop: "tab11"
          },
          {
            // icon: "el-icon-info",
            label: "保安单位出资人员",
            prop: "tab2",
            prop: "tab2"
          },
          {
            // icon: "el-icon-info",
            label: "主要管理人员信息",
            prop: "tab3",
            prop: "tab3"
          },
          {
            // icon: "el-icon-info",
            label: "装备管理 ",
            prop: "tab4",
            prop: "tab4"
          },
          {
            // icon: "el-icon-info",
            label: "车辆管理 ",
            prop: "tab5",
            prop: "tab5"
          },
          // {
          //   // icon: "el-icon-info",
@@ -468,19 +468,19 @@
          {
            // icon: "el-icon-info",
            label: "社保记录 ",
            prop: "tab9",
            prop: "tab9"
          },
          {
            // icon: "el-icon-info",
            label: "营业执照 ",
            prop: "tab7",
            prop: "tab7"
          },
          {
            // icon: "el-icon-info",
            label: "许可证 ",
            prop: "tab8",
          },
        ],
            prop: "tab8"
          }
        ]
      },

      //全局单位统一社会信用代码
@@ -494,7 +494,7 @@
        submitBtn: false,
        submitText: "保存",
        gutter: 30,
        column: column,
        column: column
      },

      option01: {
@@ -502,7 +502,7 @@
        submitBtn: false,
        submitText: "保存",
        gutter: 30,
        column: column11,
        column: column11
      },

      loading1: true, //派遣记录
@@ -511,7 +511,7 @@
        pageSize: 10,
        currentPage: 1,
        total: 0,
        ...this.$store.state.control.changePageSize,
        ...this.$store.state.control.changePageSize
      },
      query1: {},
      data1: [],
@@ -525,7 +525,7 @@
        align: "center",
        selection: true,
        ...this.$store.state.control.clearOtherBut,
        column: column1,
        column: column1
      },

      loading2: true, //派遣记录
@@ -534,7 +534,7 @@
        pageSize: 10,
        currentPage: 1,
        total: 0,
        ...this.$store.state.control.changePageSize,
        ...this.$store.state.control.changePageSize
      },
      query2: {},
      data2: [],
@@ -549,8 +549,8 @@
        align: "center",
        selection: true,
        ...this.$store.state.control.clearOtherBut,
        column: column2,
      },
        column: column2
      }
    };
  },
  computed: {
@@ -567,18 +567,18 @@
    // },
    ids1() {
      let ids1 = [];
      this.selectionList1.forEach((ele) => {
      this.selectionList1.forEach(ele => {
        ids1.push(ele.id);
      });
      return ids1.join(",");
    },
    ids2() {
      let ids2 = [];
      this.selectionList2.forEach((ele) => {
      this.selectionList2.forEach(ele => {
        ids2.push(ele.id);
      });
      return ids2.join(",");
    },
    }
  },
  methods: {
    submit0(row, done, loading) {
@@ -594,12 +594,12 @@
          // this.onloads();
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          this.onloads();
          done();
        },
        (error) => {
        error => {
          window.console.log(error);
          loading();
        }
@@ -707,11 +707,11 @@
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          done();
        },
        (error) => {
        error => {
          window.console.log(error);
          loading();
        }
@@ -739,11 +739,11 @@
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          done();
        },
        (error) => {
        error => {
          window.console.log(error);
          loading();
        }
@@ -753,7 +753,7 @@
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      })
        .then(() => {
          return remove1(row.id);
@@ -762,7 +762,7 @@
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
        });
    },
@@ -777,7 +777,7 @@
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      })
        .then(() => {
          return remove1(this.ids1);
@@ -786,7 +786,7 @@
          this.onLoad1(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          this.$refs.crudrec1.toggleSelection();
        });
@@ -804,7 +804,7 @@
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
      ).then(res => {
        // console.log(res);
        const data = res.data.data;
        this.page1.total = data.total;
@@ -858,11 +858,11 @@
          this.onLoad2(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          done();
        },
        (error) => {
        error => {
          window.console.log(error);
          loading();
        }
@@ -888,11 +888,11 @@
          this.onLoad2(this.page2);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          done();
        },
        (error) => {
        error => {
          window.console.log(error);
          loading();
        }
@@ -902,7 +902,7 @@
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      })
        .then(() => {
          return remove2(row.id);
@@ -911,7 +911,7 @@
          this.onLoad2(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
        });
    },
@@ -926,7 +926,7 @@
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      })
        .then(() => {
          return remove2(this.ids2);
@@ -935,7 +935,7 @@
          this.onLoad2(this.page2);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          this.$refs.crudrec2.toggleSelection();
        });
@@ -954,7 +954,7 @@
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
      ).then(res => {
        // console.log(res);
        const data = res.data.data;
        this.page2.total = data.total;
@@ -974,7 +974,7 @@
    },
    onloads(tab) {
      var that = this;
      var doit = (a) => {
      var doit = a => {
        that.typeTABS = that.optionTABS.column[0];
        // if (tab) {
        // that.typeTABS.prop = tab;
@@ -1034,14 +1034,14 @@
        this.$store.state.tags.tagList.splice(ind, 1);
      }

      var getdatas = (roleAlias) => {
      var getdatas = roleAlias => {
        var fromSecunityGuardId = that.$route.query.fromSecunityGuardId;
        // var fromSecunityGuardId = that.$route.query;
        if (fromSecunityGuardId != undefined || roleAlias == "保安公司管理员") {
          var value = {
            departmentid: fromSecunityGuardId || that.userInfo.dept_id,
            departmentid: fromSecunityGuardId || that.userInfo.dept_id
          };
          getOncedata(value).then((res) => {
          getOncedata(value).then(res => {
            // console.log(res.data.data, "get");
            window.localStorage.setItem(
              "danweidata",
@@ -1058,8 +1058,8 @@
      // console.log(this.userInfo, "userInfo");
      //获取当前登录人员的角色信息
      var roleIds = this.userInfo.role_id.split(",");
      roleIds.forEach((roleId) => {
        getRoleDetail(roleId).then((res) => {
      roleIds.forEach(roleId => {
        getRoleDetail(roleId).then(res => {
          var roleAlias = res.data.data.roleAlias;
          var d = that.option0.column;
          var e = that.option01.column;
@@ -1092,56 +1092,37 @@
      });
    },
    //数据初始化
    initData(){
    initData() {
      var role_name = this.userInfo.role_name;
      var data = this.$route.query.data;
      var deptId = this.$route.query.data.departmentid;
      console.log(this.$route.query,1111111);
      console.log(this.$route.query, 1111111);
      //1.判断进入的入口，单位信息进入，单位列表查看进入
      if(deptId){
      if (deptId) {
        //2.1 单位信息进入
        //判断人员角色
        if(role_name=="公安管理员" || role_name=="administrator"){
            //3.1 判断按进入的公司类型
            if(data.state=="2"){
              //本市保安公司，对应的tab 条数

            }
        if (role_name == "公安管理员" || role_name == "administrator") {
          //3.1 判断按进入的公司类型
          if (data.state == "2") {
            //本市保安公司，对应的tab 条数
          }
        }
        if(role_name=="保安公司管理员" || role_name=="分公司管理员"){
            //3.2 判断按进入的公司类型
        if (role_name == "保安公司管理员" || role_name == "分公司管理员") {
          //3.2 判断按进入的公司类型
        }
        
      }else{
      } else {
        //单位列表进入
        //判断人员角色

      }
    }
  },
  mounted() {
    this.onloads();
  },
  created(){
  created() {
    //初始化信息
    this.initData();
  },
  watch: {
    // windowWidth() {
    //   console.log(this.windowWidth, "windowWidth");
    // },
    windowHeight() {
      // console.log(this.windowHeight, "windowHeight");
      // this.option1.height = this.windowHeight + 100;
      // this.option2.height = this.windowHeight - 320;
      this.visible = false;
      this.$nextTick(() => {
        this.visible = true;
        this.refreshChange1();
        this.refreshChange2();
      });
    },
  },
  }
};
</script>

@@ -1176,7 +1157,7 @@
  top: -10px;
}

.manager{
.manager {
  height: 755px;
}
</style>
</style>