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

<template>
  <div class="flex flex-col justify-center k-app-edu-training-list__item">
    <div class="top flex flex-row items-center justify-between">
      <label style="width: 70%">{{ data.title }}</label>
      <div style="width: 30%; text-align: right">
        <span>{{ data.name }}</span>
        <van-button size="mini" type="primary" @click="updateStatus(data.id, '1')" v-if="data.status != '1'"
          >布防</van-button
        >
        <van-button size="mini" type="primary" @click="updateStatus(data.id, '0')" v-if="data.status != '0'"
          >撤防</van-button
        >
      </div>
    </div>
    <van-cell-group  clickable @click="itemClick">
      <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 { getLabel } from '@/utils/optionEx.js'
import * as api from '@/api/protection.js'
import { Dialog } from 'vant'

export default {
  components: {},
  data() {
    return {
      
    }
  },
  computed: {},
  watch: {},
  props: {
    data: {},
    statusOptions: {}
  },
  methods: {
    getLabel,
    formatDate(dateStr) {
      return toFormatStr(dateStr)
    },
    updateStatus(id, status) {
      Dialog.confirm({
        message: `防区状态将变更为${this.getLabel(this.statusOptions, status)},请确认`
      })
        .then(() => {
          api.updateStatus(id, status)
        })
        .catch(() => {
          // on cancel
        })
    },
    itemClick(){

    }
  },
  async created() {},
  async mounted() {}
}
</script>
<style lang="less" scoped>
.k-app-edu-training-list__item {
  //   height: 11.85rem;
  background: #ffffff;
  margin: 0.625rem 0.625rem 0;

  .top {
    min-height: 3rem;
    padding: 0 1rem;
    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>