emergencyManagement/packageA/pages/danger/index.vue

<template>
  <view class="page-wrap">
    <view class="head">
      <uni-card padding="0" margin="5px 0">
        <uni-search-bar @confirm="search" v-model="keywords" @clear="search"></uni-search-bar>
      </uni-card>
      <view class="addbt" @click="handle({type:'add'})">
        <view class="word"><uni-icons type="plusempty" size="30" color="#fff"></uni-icons></view>
      </view>
    </view>
    <view class="pageMain">
      <uni-swipe-action class="item-action-box">
        <uni-card padding="10px 0" margin="5px 0" v-for="(item,idx) in items" :key="idx">
          <uni-swipe-action-item class="item-action" :auto-close="true">
            <template v-slot:right>
              <view class="slot-button">
                <view class="bt edit" @click="handle({type:'edit',item})"><text class="slot-button-text">编辑</text>
                </view>
                <view class="bt del" @click="handle({type:'del',item})"><text class="slot-button-text">删除</text></view>
              </view>
            </template>
            <view class="item" @click="handle({type:'detail',item})">
              <view class="title">
                <view class="name">{{item.dangerTitle}}</view>
              </view>
              <view class="item-row space-between">
                <uni-tag :text="item.dangerCatTitle"
                  custom-style="background-color: #ecf5ff; border-color: #d9ecff; color: #409eff;"></uni-tag>
                <uni-tag :inverted="true" :text="formatDangerLevel(item.dangerLevel)" type="success"></uni-tag>
              </view>
              <view class="item-row space-between" v-if="item.dangerTags">
                <uni-tag :text="item.dangerTags"
                  custom-style="background-color: #ecf5ff; border-color: #d9ecff; color: #409eff;"></uni-tag>
              </view>
              <view class="item-row space-between">
                <view class="icon-item">
                  <uni-icons type="location-filled" size="16" color="#999"></uni-icons>
                  <text class="word">{{item.dangerLocation||'--'}}</text>
                </view>
                <uni-tag :text="formatDangerStatus(item.status)" :type="item.status>0?'primary':'warning'"></uni-tag>
              </view>
              <view class="bottom">
                <view class="icon-item">
                  <image class="icon" src="/static/images/qiye.png" mode="widthFix"></image>
                  <text class="word">{{item.entName}}</text>
                </view>
                <view class="icon-item">
                  <image class="icon" src="/static/images/time.png" mode="widthFix"></image>
                  <text class="word">{{item.submitTime}}</text>
                </view>
                <view class="icon-item">
                  <image class="icon" src="/static/images/admin_icon.png" mode="widthFix"></image>
                  <text class="word">{{item.groupName}}</text>
                </view>
                <view class="icon-item" @click.stop="showSuperVisor(item)">
                  <image class="icon" src="/static/images/admin_icon.png" mode="widthFix"></image>
                  <text>(责任单位)</text>
                  <template>
                    <view class="supervisor" v-if="item.supervisorGroupList">
                      <view class="supervisor-item"
                        v-for="(supervisor,supervisoridx) in formatsupervisorGroupList(item.supervisorGroupList)"
                        :key="supervisoridx">
                        <uni-tag :text="supervisor"
                          custom-style="background-color: #ecf5ff; border-color: #d9ecff; color: #409eff;"></uni-tag>
                      </view>
                    </view>
                    <view class="supervisor" v-else>
                      <uni-icons type="plusempty" size="20" color="#ccc"></uni-icons>
                    </view>
                  </template>
                </view>
              </view>
            </view>
          </uni-swipe-action-item>
        </uni-card>
      </uni-swipe-action>
    </view>
    <Create ref="danger" @success="search" :ent="ents" :danger="dangerCats"></Create>
    <Detail ref="detail"></Detail>
    <SupervisorList ref="SupervisorList" @success="search"></SupervisorList>
  </view>
</template>

<script>
  import industryApi from '@/api/industry.js'
  import dangerApi from '@/api/danger.js'
  import Create from './components/Create.vue'
  import Detail from './components/Detail.vue'
  import SupervisorList from './components/SupervisorList.vue'
  export default {
    components: {
      Create,
      Detail,
      SupervisorList
    },
    data() {
      return {
        items: [],
        page: 1,
        limit: 10,
        total: 0,
        keywords: "",
        ents: [],
        dangerCats: []
      }
    },
    onShow() {
      this.getData();
      this.init()
    },
    methods: {
      init() {
        industryApi.selectByList().then((res) => {
          this.ents = res.data
        })
        dangerApi.getCatByList().then((res) => {
          this.dangerCats = res.data
        })
      },
      search() {
        this.resetFilter();
        this.getData()
      },
      getData() {
        dangerApi.getByPage({
          page: this.page,
          limit: this.limit,
          keywords: this.keywords
        }).then((res) => {
          this.items = this.items.concat(res.data)
          this.total = res.total
        })
      },
      handle({
        type,
        item
      }) {
        const self = this;
        if (type === 'detail') {
          this.$refs.detail.show(item)
        } else if (type === 'del') {
          uni.showModal({
            title: '提示',
            content: '是否确定删除',
            success: function(res) {
              if (res.confirm) {
                dangerApi.deleteById(item.dangerId).then(() => {
                  uni.showToast({
                    title: '删除成功！',
                    icon: 'none'
                  })
                  self.search()
                })
              }
            }
          });
        } else {
          this.$refs.danger.show({
            type,
            item
          })
        }
      },
      showSuperVisor(item) {
        this.$refs.SupervisorList.show(item)
      },
      formatDangerLevel(val) {
        let dangerLevelOptions = ['末知', '重大', '较大', '一般', '较小'];
        return dangerLevelOptions[val]
      },
      formatDangerStatus(val) {
        let status = ['未整改', '已整改'];
        return status[val]
      },
      formatsupervisorGroupList(val) {
        return val.split(',')
      },
      resetFilter() {
        this.page = 1
        this.limit = 10
        this.total = 0
        this.items = []
      }
    },
    onReachBottom() {
      if (this.total > this.limit * this.page) {
        this.page++
        this.getData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-wrap {
    padding: 0 20rpx;

    .pageTabs {
      background-color: #fff;
    }

    .head {
      margin-top: 20rpx;

      .handle {
        display: inline-block;
        // background-color: #007aff;
        color: #777777;
        text-align: center;
        padding: 16rpx 20rpx;
        border-radius: 30rpx;
        // border: 1px solid #007aff;
        font-size: 28rpx;
        line-height: 1;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
      }

      .addbt {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        color: #fff;
        background-color: rgba(64, 158, 255, 0.6);
        box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.6);
        position: fixed;
        right: 10rpx;
        bottom: 20%;
        z-index: 99;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;

        .word {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin: 5rpx auto;
          font-size: 28rpx;
          letter-spacing: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .pageMain {
      margin-top: 20rpx;
      background-color: #f5f5f5;
      padding-bottom: 50rpx;

      .slot-button {
        width: 400rpx;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        color: #fff;
        padding-left: 10px;

        .bt {
          width: 50%;
          height: 100%;
          font-size: 30rpx;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;

          &.edit {
            background-color: #007aff;
          }

          &.del {
            background-color: #F56C6C;
          }

          &.detail {
            background-color: #e6a23c;
          }
        }
      }

      .item {
        color: #666;

        .name {
          font-size: 32rpx;
          color: #222222;
          line-height: 1;
          padding-bottom: 10rpx;
        }

        image {
          &.icon {
            width: 30rpx;
            height: 30rpx;
            display: block;
          }
        }

        .item-row {
          display: flex;
          align-items: center;
          padding-top: 14rpx;

          &.space-between {
            justify-content: space-between;
          }
        }

        .icon-item {
          display: flex;
          align-items: center;

          .word {
            margin-left: 8rpx;
            font-size: 24rpx;
          }

          .supervisor {
            width: 500rpx;
            flex-shrink: 0;
            display: flex;
            flex-wrap: wrap;

            .supervisor-item {
              margin: 4rpx;
            }
          }
        }
      }
    }
  }
</style>