卡片样式

liuyg

2021-08-26 aa2e71d1bbbd05a6eff9f2b1be724291ad4f3bf6

 src/views/home/index.vue

@@ -24,14 +24,15 @@
          v-for="(item, index) in dataCard"
          :key="index"
          :data="item"
          :ind="index"
          :ind="item.type"
          @open="openMain"
          v-show="showCard"
        ></examineCard>
        <!-- :background="" -->
      </div>
    </div>
    <!-- 审批进度查询 -->
    <Approval class="Approval">
    <Approval class="Approval" :data="dataCard">
      <span slot="close">
        <i
          class="el-icon-close ApprovalClose breakApprovalClose"
@@ -39,49 +40,21 @@
        ></i>
      </span>
    </Approval>
    <!-- 保安服务公司许可申请 -->
    <securityPermit class="securityPermit" :type="dataCard[0].type">
    <cardPopup class="crossRegion" :data="dataCard">
      <span slot="close">
        <i class="el-icon-close ApprovalClose" @click="openClose"> </i>
      </span>
    </securityPermit>
    <!-- 跨区域经营备案 -->
    <crossRegion class="crossRegion" :type="dataCard[1].type">
      <span slot="close">
        <i class="el-icon-close ApprovalClose" @click="openClose"> </i>
      </span>
    </crossRegion>
    <!-- 自招保安单位备案 -->
    <securityGuard class="securityGuard" :type="dataCard[2].type">
      <span slot="close">
        <i class="el-icon-close ApprovalClose" @click="openClose"> </i>
      </span>
    </securityGuard>
    <!-- 保安培训公司备案 -->
    <securityTraining class="securityTraining" :type="dataCard[3].type">
      <span slot="close">
        <i class="el-icon-close ApprovalClose" @click="openClose"> </i>
      </span>
    </securityTraining>
    <!-- 自招保安单位备案撤销 -->
    <cancellationOfFiling class="cancellationOfFiling" :type="dataCard[4].type">
      <span slot="close">
        <i class="el-icon-close ApprovalClose" @click="openClose"> </i>
      </span>
    </cancellationOfFiling>
    </cardPopup>
  </div>
</template>

<script>
import { ourDatas } from "./ourDatas";
import examineCard from "@/components/examineCard/examineCard.vue"; //卡片
import Approval from "@/components/Approval/Approval.vue"; //审批进度查询
import securityPermit from "@/components/securityPermit/securityPermit.vue"; // 保安服务公司许可申请
import crossRegion from "@/components/crossRegion/crossRegion.vue"; // 跨区域经营备案
import securityGuard from "@/components/securityGuard/securityGuard.vue"; // 自招保安单位备案
import securityTraining from "@/components/securityTraining/securityTraining.vue"; // 保安培训公司备案
import cancellationOfFiling from "@/components/cancellationOfFiling/cancellationOfFiling.vue"; // 自招保安单位备案撤销
import cardPopup from "@/components/cardPopup/cardPopup.vue"; // 卡片弹窗
import {
  getDetail,
  // getDetail,
  getList,
  getListre,
  getListrek,
@@ -94,14 +67,7 @@
  components: {
    examineCard: examineCard,
    Approval: Approval,
    securityPermit: securityPermit,
    crossRegion: crossRegion,
    securityGuard: securityGuard,
    securityTraining: securityTraining,
    cancellationOfFiling: cancellationOfFiling,
  },
  computed: {
    ...mapGetters(["userInfo"]),
    cardPopup: cardPopup,
  },
  data() {
    return {
@@ -109,53 +75,36 @@
      showCard: false,
      zhezao: false,
      data: [],
      dataCard: [
        {
          menuName: "保安服务公司许可申请",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
          // topUrl: "/img/permit/服务许可背景图.jpg",
          targetUrl: "per",
          type: 0,
        },
        {
          menuName: "跨区域经营备案",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
          type: 3,
        },
        {
          menuName: "自招保安单位备案",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
          type: 1,
        },
        {
          menuName: "保安培训公司备案",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
          type: 2,
        },
        {
          menuName: "自招保安单位备案撤销",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
          type: 6,
        },
      ],
      dataCard: [],
      out: true,
      d: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo", "ApprovalShow", "useWhere"]),
    ...mapGetters(["userInfo", "ApprovalShow", "useWhere", "canDoIt"]),
  },
  created() {
    this.cc();
    var page = {
      pageSize: 10,
      currentPage: 1,
      total: 0,
    };
    this.onLoad(page);
    this.onLoad(this.page);
    this.dataCard = ourDatas;
    var cando = [];
    for (var k in ourDatas) {
      cando.push({
        opens: true,
        type: ourDatas[k].type,
      });
    }
    this.$store.commit("setcanDoIt", cando);
  },
  watch: {
    useWhere() {
      this.onLoad(this.page);
    },
  },
  methods: {
    onLoad(page, params = {}) {
@@ -169,17 +118,29 @@
            this.data = this.data.concat(resk.data.data.records);
            getListrev(page.currentPage, page.pageSize, params).then((resv) => {
              this.data = this.data.concat(resv.data.data.records);
              console.log(this.data.length);
              if (this.data.length >= 1) {
                // this.$store.commit("changehandle", false);
              } else {
                // this.$store.commit("changehandle", true);
              }
              console.log("已有申请数量：", this.data.length);
              this.showCard = true;
              this.data.forEach((item) => {
                for (const key in this.dataCard) {
                  if (this.dataCard[key].type == item.ptype) {
                    console.log(this.dataCard[key].menuName);
                    // console.log("已申请名称：", item.enterprisename);
                    // console.log("已申请序号：", item.ptype);
                    // console.log("申请状态：", item.type);
                    for (var k in this.canDoIt) {
                      if (this.canDoIt[k].type == item.ptype) {
                        if (item.type == 0 || item.type == 2) {
                          this.$store.commit("changecanDoIt", {
                            o: false,
                            ptype: item.ptype,
                          });
                        } else {
                          this.$store.commit("changecanDoIt", {
                            o: false,
                            ptype: item.ptype,
                          });
                        }
                      }
                    }
                  }
                }
              });
@@ -218,27 +179,7 @@
        this.$store.commit("doitApprovalShow", true);
        return;
      }
      if (val == 0) {
        //保安服务公司许可
        console.log(this.dataCard[val].menuName);
        this.$store.commit("changeuseWhere", val);
      } else if (val == 1) {
        //跨区域经营备案
        this.$store.commit("changeuseWhere", val);
        console.log(this.dataCard[val].menuName);
      } else if (val == 2) {
        //自招保安单位备案
        this.$store.commit("changeuseWhere", val);
        console.log(this.dataCard[val].menuName);
      } else if (val == 3) {
        //保安培训公司备案
        this.$store.commit("changeuseWhere", val);
        console.log(this.dataCard[val].menuName);
      } else if (val == 4) {
        //自招保安单位备案撤销
        this.$store.commit("changeuseWhere", val);
        console.log(this.dataCard[val].menuName);
      }
      this.$store.commit("changeuseWhere", val);
    },
  },
};
@@ -308,10 +249,10 @@
      }
    }
    .b_main {
      width: 100%;
      width: 1311px;
      height: calc(100% - 220px);
      // border: 1px solid red;
      padding: 0 10%;
      margin: 0 auto;
      box-sizing: border-box;
    }
  }
@@ -364,12 +305,14 @@
}
.first-box-outer {
  width: 100%;
  max-height: 682px;
  overflow: scroll;
  max-height: 685px;
  overflow-y: hidden;
  overflow-x: hidden;
  .f-b-o-in {
    width: 100%;
    height: 620px;
    overflow: scroll;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
.handling-guideline {