soc_app/src/views/menu/protection/components/item.vue

<template>
  <div class="flex flex-col justify-center k-app-protection-list__item van-clearfix">
    <van-cell-group clickable @click="itemClick">
      <van-cell :title="data.name">
        <template #right-icon>
          <van-button
          size="mini"
          color="#008cd6"
          type="info"
          @click="updateStatus(data, '1')"
          v-if="data.status != '1' && data.orgId == orgId"
          >布防时间登记</van-button
        >
        <van-button
          size="mini"
          color="#008cd6"
          type="info"
          @click="updateStatus(data, '0')"
          v-if="data.status != '0' && data.orgId == orgId"
          >撤防时间登记</van-button
        >
        </template>
      </van-cell>
      <van-cell title="防区状态" :value="getLabel(statusOptions, data.status, '未知')" />
      <van-cell
        v-if="data.status == '0' || data.status == '1'"
        :title="data.status == '0' ? '撤防时间' : '布防时间'"
        :value="data.statusUpdateTime"
      />
    </van-cell-group>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getLabel } from '@/utils/optionEx.js'
import * as api from '@/api/protection.js'
import { Dialog } from 'vant'
import dayjs from 'dayjs'
export default {
  components: {},
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['orgName', 'orgId'])
  },
  watch: {},
  props: {
    data: {},
    statusOptions: {}
  },
  methods: {
    getLabel,
    formatDate(dateStr) {
      return toFormatStr(dateStr)
    },
    updateStatus(data, status) {
      Dialog.confirm({
        message: `是否更新${this.getLabel(this.statusOptions, status)}时间？`
      })
        .then(() => {
          api.updateStatus(data.id, status).then(r => {
            if (r.data) {
              data.status = status
              data.statusUpdateTime = dayjs(r.data).format('YYYY-MM-DD HH:MM:ss')
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    itemClick() {
      this.$router.push('/protection/detail?id=' + this.data.id)
    }
  },
  async created() {},
  async mounted() {}
}
</script>
<style lang="scss" scoped>
.k-app-protection-list__item {
  //   height: 11.85rem;
  background: #ffffff;
  margin: 0.3rem 0.325rem 0;
  font-size: 3.733333vw;
  .top {
    // min-height: 3rem;
    padding: 0.05rem 0.05rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #f3f4f5;
    > label {
      //   height: 1.38rem;
      // font-size: 1rem;
      //   line-height: 1.25rem;
      color: #323233;
      opacity: 1;
    }
  }
  .bottom {
    min-height: 7.75rem;
    padding: 0 1rem;
    span {
      height: 1.25rem;
      font-size: 0.88rem;
      line-height: 1.25rem;
      color: #000000;
      opacity: 0.61;
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>