soc_app/src/views/menu/iot/subsystem/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.stop="
              openUpdateStateDialog(data, '1')
              return false
            "
            v-if="data.status != '1' && data.orgId == orgId"
            >布防登记</van-button
          >
          <van-button
            size="mini"
            color="#008cd6"
            type="info"
            @click.stop="
              openUpdateStateDialog(data, '0')
              return false
            "
            v-if="data.status != '0' && data.orgId == orgId"
            >撤防登记</van-button
          >
        </template>
      </van-cell>
      <van-cell title="布撤防状态">
        <template #right-icon>
          <!-- <span v-if="data.status==1" style="color:rgb(0,164,46)">布防</span>
            <span v-else-if="data.status==0" style="color:rgb(215,0,15)">撤防</span> -->
          <span>{{ getDictLabel(data.status, 'protection_status', '未上报') }}</span>
        </template>
      </van-cell>
      <van-cell
        v-if="data.status == '0' || data.status == '1'"
        :title="data.status == '0' ? '撤防时间' : '布防时间'"
    value-class="time-cell-default"
      >
      <template #default>
        <van-tag type="primary" color="rgb(184,159,113)" v-if="data.statusUpdatorName!=null">人工登记</van-tag>
        <van-tag type="primary" v-else>自动获取</van-tag>
        <span style="margin-left:10px">{{data.statusChangeTime}}</span>
      </template>
      </van-cell>

    </van-cell-group>
    <state-change-diaolog ref="stateChangeDiaolog" @success="updateStatus"/>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import * as api from '@/api/protection.js'
import { Dialog } from 'vant'
import StateChangeDiaolog from './dialog.stateChange.vue'
import dayjs from 'dayjs'
export default {
  components: { StateChangeDiaolog },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['orgName', 'orgId', 'dictionary'])
  },
  watch: {},
  props: {
    data: {},
    statusOptions: {}
  },
  methods: {
    formatDate(dateStr) {
      return toFormatStr(dateStr)
    },
    openUpdateStateDialog(data, status) {
      this.$refs.stateChangeDiaolog.open(data,status, this.getDictLabel(status, 'protection_status', '未知'))

      // Dialog.confirm({
      //   message: `是否更新${this.getDictLabel(status, 'protection_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')
      //       }
      //     })
      //   })
      //   .catch(() => {
      //     // on cancel
      //   })
    },
    updateStatus(data, status,changeTime) {      
      api.updateStatus(data.id, status,dayjs(changeTime).format('YYYY-MM-DD HH:mm:00')).then(r => {
        if (r.data) {
          data.status = status
          data.statusChangeTime = dayjs(changeTime).format('YYYY-MM-DD HH:mm')
          data.statusUpdatorName=this.$store.getters.userName
        }
      })
    },
    itemClick() {
      this.$router.push('/iot/subsystem/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%;
}

.time-cell-default{
  min-width: 60vw;
}
</style>