Vent-App/pages/gasreport/components/taskBoard.vue

<template>
  <view class="taskBoard">
    <u-navbar
      :bgStatusImage="backPic0"
      :bgImage="backPic"
      :title="gasTitle"
      :safeAreaInsetTop="true"
      leftIcon="arrow-left"
      leftIconColor="#303133"
      @leftClick="goBack"
    >
    </u-navbar>
    <u-list :height="666" v-if="isShow">
      <u-list-item v-for="(item, index) in indexList" :key="index">
        <u-cell icon="share" @click="getBorad(item)">
          <view slot="title" class="u-slot-title">
            <text class="u-cell-text">
              <text>{{ item.name }}</text>
              <text style="margin-left: 10px">{{
                item.checkPerson ? `(${item.checkPerson})` : ""
              }}</text>
            </text>
          </view>
          <view slot="value" class="u-slot-title">
            <u-tag
              :text="item.classType_dictText"
              plain
              size="mini"
              :type="
                item.classType_dictText == '早班'
                  ? 'success'
                  : item.classType_dictText == '中班'
                  ? 'warning'
                  : 'error'
              "
            >
            </u-tag>
          </view>
        </u-cell>
      </u-list-item>
    </u-list>
    <!-- 填报日期弹窗 -->
    <u-modal
      v-if="isShow"
      showCancelButton
      showConfirmButton
      confirmText="确定"
      cancelText="取消"
      :show="showTime"
      :title="titleTime"
      @confirm="confirmTime"
      @cancel="cancelTime"
    >
      <view class="dialog-item" @click="getChangeTime">
        <text class="dialog-label">任务日期：</text>
        <u--input
          readonly
          v-model="searchTime"
          placeholder="请选择任务日期"
          inputAlign="center"
          suffixIcon="arrow-right"
        ></u--input>
        <u-calendar
          :show="showCalendar"
          :minDate="minDate"
          :maxDate="maxDate"
          :monthNum="calendarMonthNum"
          v-model="searchTime"
          mode="single"
          closeOnClickOverlay
          @confirm="changeTime"
          @close="closeTime"
        ></u-calendar>
      </view>
    </u-modal>
    <component
      v-else
      :is="loadComponent"
      :taskId="taskId"
      @getBackBoard="getBackBoard"
    ></component>
  </view>
</template>

<script>
import api from "@/api/api";
import taskBoardAddress from "./taskBoardAddress.vue";
import moment from "moment";
export default {
  name: "taskBoard",
  components: {
    taskBoardAddress,
  },
  props: {},

  data() {
    return {
      showTime: false, //是否显示填报日期弹窗
      titleTime: "",
      searchTime: "", //检测时间
      showCalendar: false, //控制日期选型下拉开启
      // timeRan: Number(new Date()),
      minDate: moment()
        .subtract(30 * 10, "days")
        .format("YYYY-MM-DD"),
      // minDate: moment().subtract(160, 'days').format('YYYY-MM-DD'),
      maxDate: moment()
        .add(30 * 10, "days")
        .format("YYYY-MM-DD"),
      isShow: true,
      loadComponent: "",
      taskId: "",
      indexList: [],
      gasTitle: "巡检任务", //标题
      backPic0: "url(/static/topnavbar0.png)",
      backPic: "url(../../static/topnavbar.png)",
    };
  },
  computed: {
    calendarMonthNum() {
      const minDate = moment(this.minDate, "YYYY-MM-DD");
      const maxDate = moment(this.maxDate, "YYYY-MM-DD");
      return (
        (maxDate.year() - minDate.year()) * 12 +
        maxDate.month() -
        minDate.month() +
        1
      );
    },
    teamCode: function () {
      return uni.getStorageSync("login_user_info")["districtTeam"];
    },
  },
  mounted() {
    this.getTimeList();
  },
  methods: {
    //左上角返回键：直接返回首页
    goBack() {
      this.$emit("goHome");
    },
    //点击弹出日期下拉选项
    getChangeTime() {
      this.showCalendar = true;
    },
    changeTime(e) {
      let that = this;
      that.searchTime = e[0];
      uni.setStorageSync("searchTime", that.searchTime);
      that.showCalendar = false;
    },
    closeTime() {
      this.searchTime = "";
      this.showCalendar = false;
    },
    //点击返回上一级
    getBackBoard() {
      let that = this;
      that.isShow = true;
      that.loadComponent = "";
    },
    //点击跳转到识别看板
    getBorad(item) {
      let that = this;
      that.taskId = item.id;
      that.showTime = true;
    },
    //选择检测时间-确定
    confirmTime() {
      let that = this;
      if (that.searchTime) {
        that.isShow = false;
        that.showTime = false;
        that.loadComponent = "taskBoardAddress";
      }
    },
    //选择检测时间-取消
    cancelTime() {
      let that = this;
      that.isShow = true;
      that.showTime = false;
    },
    //获取任务管理列表数据
    getTimeList() {
      let that = this;
      new Promise((resolve, reject) => {
        api
          .teamList({ pageNo: 1, pageSize: 100, teamCode: that.teamCode })
          .then((response) => {
            if (response.data.code == 200) {
              that.indexList = response.data.result.records;
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.taskBoard {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.dialog-item {
  display: flex;
  align-items: center;
  justify-content: center;

  .dialog-label {
    width: 86px;
    text-align: center;
  }
}

::v-deep .u-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 3px 9px !important;
  width: 180px;
}

::v-deep .u-popup {
  flex: 0;
}

::v-deep .u-slot-title {
  display: flex;
}
</style>