serviceDirectoryPage.vue

<template>
  <div class="serviceDirectoryPage H100">
    <div class="head_box">
      <h6>内容管理 / 网点服务地图</h6>
      <h4>网点服务地图</h4>
    </div>
    <div class="content_box">
      <div class="form_box h778px">
        <el-form :inline="true" :model="form" class="search-form" onsubmit="return false;">
          <el-form-item label="网点名称:">
            <el-input size="mini" placeholder="请输入网点名称" v-model="form.name" @keyup.enter.native="Search"
                      clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" class="btn_form_search" @click="Search">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="scrool">
          <div class="directory_box">
            <el-row :gutter="36">
              <p style="text-align: center;color: #909399" v-show="page.total == 0 || !noCard">暂无数据</p>
              <el-col :md="8" :lg="6" :xl="6" v-show="noCard" v-for="(item,index) in mapGroup" :key="index"
                      :body-style="{ padding: '0px' }">
                <div class="el-card">
                  <img :src="item.headImage" class="image">
                  <div class="warper W100">
                    <p class="W100"><span class="l-float">{{item.name}}</span>
                      <span class="r-float">
                      <div class="statusBox">
                        <span class="active"
                              :style="{'backgroundColor':(item.isShow == 0 ? 'rgba(24,144,255,1)':(item.isShow == 2 ||item.isShow == 3 ? 'rgba(250,173,20,1)':(item.isShow == 1 || item.isShow == 6 ? 'rgba(245,34,45,1)':(item.isShow == 4 ? 'rgba(82,196,26,1)':'rgba(0,0,0,0.25)'))))}"></span>
                        <span class="openKey">{{item.isShow == 0 ? '编辑中':(item.isShow == 1 ? '上线被驳回':(item.isShow == 2 ? '上线审核中':(item.isShow == 3 ? '下线审核中':(item.isShow == 4 ?'上线中':(item.isShow == 5 ?'下线中': '下线被驳回')))))}}</span>
                      </div>
                    </span>
                    </p>
                    <p class="W100"><span class="l-float">{{updaTime(item.updateTime)}}</span><span class="r-float">{{item.creatorName}}</span>
                    </p>
                  </div>
                  <div class="button_line W100">
                    <el-button type="text" size="mini"
                               v-show="roleId != 3 || (roleId == 3 && (item.isShow == '2' ||item.isShow == '3' || item.isShow == '4' || item.isShow == '6'))"
                               @click="openDetails(item)">查看详情
                    </el-button>
                    <el-button type="text" size="mini" v-show="(item.isShow == '4' ||item.isShow == '6') && roleId == 3"
                               @click="handleLine(item)">申请下线
                    </el-button>
                    <el-button type="text"
                               v-show="(item.isShow == '0' ||item.isShow == '1' ||item.isShow == '5') && roleId == 3"
                               size="mini" @click="editHotSpot(item)">编辑热点
                    </el-button>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-pagination
          small background
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-size="page.pageSize"
          layout="prev, pager, next"
          :total="page.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        page: {
          currentPage: 1, //当前页
          pageSize: 8, //每页条数
          total: null, //总条数
        },
        value: '',
        form: {
          name: '',
        },
        mapGroup: [
          {headImage: "", name: "",},
        ],
        roleId: '',
        bankBranchId: '',
        noCard: true

      }
    },
    computed: {},
    mounted() {
      this.initData();
    },
    created() {
    },
    components: {},
    methods: {
      initData() {
        this.roleId = localStorage.getItem('roleId');
        this.bankBranchId = localStorage.getItem('bankBranchId');
        this.onSearch();
      },
      // 获得数据接口
      getTableData(param) {
        let vm = this;
        vm.$https({
          url: "bankBranchInfo/getList?query=map",
          method: 'get',
          authType: this.backToken
        }, param).then((res) => {
          if (res.status == 200) {
            let data = res.data;
            vm.page.pageSize = data.size;
            vm.page.total = data.total;
            vm.mapGroup = data.records;
            vm.mapGroup.forEach((e, i) => {
              let Time = e.updateTime;
              vm.updaTime(Time);
              if (e.headImage == "") {
                e.headImage = "./static/images/pic/mapbg.png";
              }
            })
          } else {
            console.log(res);
            vm.noCard = false;
          }

        }).catch(function (err) {
          console.log(err);
        })
      },
      updaTime(Time) {
        let date1 = Time;
        if (date1 == '') {
          date1 = '-';
        } else {
          date1 = this.computingTime(date1);
        }
        return date1;
      },
      // 计算时间
      computingTime(date1) {
        var time = '';
        var date2 = new Date();    //当前系统时间
        var date3 = date2.getTime() - new Date(date1).getTime();   //时间差的毫秒数

        var hours = Math.floor(date3 / (3600 * 1000)); //相差小时
        if (hours > 0) {
          time = hours + '小时前更新'
          if (hours > 24) {//如果小时大于24，计算出天和小时
            var day = parseInt(hours / 24);
            hours %= 24;//算出有多分钟
            time = day + '天' + hours + '小时前更新'
          }
        } else {
          //计算相差分钟数
          var leave2 = date3 % (3600 * 1000);      //计算小时数后剩余的毫秒数
          var minutes = Math.floor(leave2 / (60 * 1000));
          if (minutes > 0) {
            time = minutes + '分钟前更新';
          } else {
            time = '刚刚更新';
          }
        }
        return time;
      },

      // 分页
      handleCurrentChange(val) {
        let _this = this;
        this.page.currentPage = val;
        _this.onSearch();
      },
      onSearch() {
        let _this = this;
        let param = _this.getSearchQuery();
        _this.getTableData(param)
      },
      Search() {
        let _this = this;
        _this.page.currentPage = 1;
        let searchObj = {
          "_index": 1,
          "_size": _this.page.pageSize,
          "name": _this.form.name,
          "roleId": _this.roleId,
          "currentBankId": _this.bankBranchId
        };
        this.getTableData(searchObj);
      },
      // // 获取当前查询参数
      getSearchQuery() {
        let _this = this;
        let searchObj = {
          "_index":  _this.page.currentPage,
          "_size": _this.page.pageSize,
          "roleId": _this.roleId,
          "currentBankId": _this.bankBranchId
        };
        for (let key in _this.form) {
          if (_this.form[key]) {
            searchObj[key] = _this.form[key];
          }
        }
        return searchObj;
      },
      openDetails(item) {
        this.$router.push({path: '/auditMap', query: {id: item.id, isTitle: 0}});
      },
      handleLine(item) {
        let _this = this;
        if (item.isShow == 4 || item.isShow == 6) {
          this.$confirm('是否申请下线当前业务?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            _this.$https({
              method: 'put',
              url: 'bankBranchInfo/applyOffline?id=' + item.id,
              authType: this.backToken
            }).then((res) => {
                _this.onSearch();
                if (res.data.status == 201) {
                  this.$message({
                    type: 'success',
                    message: res.data.message
                  });
                }
              }, (error) => {
                this.$message({
                  type: 'fail',
                  message: res.data.message
                });
              }
            )
          })
        } else {
          this.$confirm('是否上线当前业务?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            _this.$https({
              method: 'put',
              url: 'bankBranchInfo/applyOnline?id=' + item.id,
              authType: this.backToken
            }).then((res) => {
                _this.onSearch();
                if (res.data.status == 201) {
                  this.$message({
                    type: 'success',
                    message: res.data.message
                  });
                }
              }, (error) => {
                this.$message({
                  type: 'fail',
                  message: res.data.message
                });
              }
            )
          })
        }

      },

      //编辑地图中的热点区域
      editHotSpot(item) {
        this.$router.push({path: 'hotSpotManage', query: {pId: item.id}});
      }
    }
  }
</script>

<style lang="less">
  .serviceDirectoryPage {
    .dialogeditor {
      .el-form-item {
        margin-bottom: 10px;
        .el-form-item__error {
          padding-top: 0px;
        }
      }
    }
    .el-upload__input {
      display: none !important;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #999;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #20a0ff;
    }
    //列表中的图
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
    //头图
    .avatarpic-uploader-icon {
      font-size: 36px;
      color: #8c939d;
      width: 360px;
      height: 197px;
      line-height: 197px;
      text-align: center;
    }
    .avatarpic {
      width: 360px;
      height: 197px;
      display: block;
    }
    .content_box {
      .input_box {
        width: 100%;
        min-width: 790px;
        margin-bottom: 30px;
        .el-input, .el-select {
          max-width: 272px;
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;
          .el-input__inner {
            height: 32px;
          }
          .el-input__suffix {
            height: 110%;
          }
        }
        .btn_form_search, .btn_form_add {
          height: 32px;
          text-align: center;
          padding: 0 15px;
        }
      }
      .scrool {
        width: 100%;
        height: calc(100% - 100px);
        overflow-x: hidden;
        overflow-y: scroll;
        .directory_box {
          .el-row {
            width: 100%;
            max-width: 1540px;
            margin: 0 auto !important;
            .el-col {
              margin-bottom: 32px;
              .el-card {
                max-height: 310px;
                overflow: hidden;
                border: 1px dotted #333;
              }
              .image {
                width: 100%;
                height: 190px;
              }
              span.l-float {
                display: inline-block;
                overflow: hidden;
                white-space: nowrap;
                max-width: 61%;
                text-overflow: ellipsis;
              }
              .warper {
                height: 30%;
                padding: 8px 0 14px;
                p {
                  height: 30px;
                  padding: 8px 20px 0px;
                }
                p:nth-child(1) {
                  font-size: 16px;
                  font-weight: 500;
                  color: rgba(0, 0, 0, 0.85);

                }
                p:nth-child(2) {
                  font-size: 12px;
                  font-weight: 400;
                  color: rgba(0, 0, 0, 0.25);
                }
              }
              .button_line {
                height: 15%;
                background: #F7F9FA;
                display: flex;
                flex-direction: row;
                justify-content: space-around;

                .line {
                  width: 1px;
                  height: 50%;
                  background: #BFBFC5;
                  margin: auto 0;
                }
              }
            }
          }
        }
      }

    }
    .edit {
      .el-dialog {
        height: 70%;
        .el-dialog__header {
          border-bottom: 1px solid rgba(0, 0, 0, 0.09);
        }
        .el-dialog__body {
          padding: 15px 0px;
          .form_box {
            .el-form .el-form-item .el-form-item__content .el-input {
              width: 60%;
            }
            .dialog-footer {
              width: 100%;
              height: 15%;
              border-top: 1px solid rgba(0, 0, 0, 0.09);
              padding-top: 8px;
              .el-button {
                margin-right: 10px;
              }
            }
          }
        }
      }

    }

    .qr {
      .el-dialog {
        height: 450px;
        width: 30%;
        .el-dialog__body {
          padding: 10px 20px;
          .form_box .el-form {
            height: 91%;
            #qrcode {
              /*div{*/
              /*position: relative;*/
              /*}*/
              /*.logo{*/
              /*width: 10%;*/
              /*height: 10%;*/
              /*position: absolute;*/
              /*top: 33%;*/
              /*left: 42%;*/
              /*}*/
            }
          }
        }

      }
    }
  }


</style>