warewms-PDA/pages/index/me/task/task.vue

<template>
  <view class="content">
    <view class="" v-if="tabListShow == true">
      <view class="" v-for="(obj, index) in tabList" :key="index">
        <view class="title">
          <text>任务编号:</text>
          <text
            :style="
              obj.state == '取消' ? 'color: #ff0000;' : 'color: #00ff08;'
            ">
            {{ obj.taskNo }}
          </text>
        </view>
        <view class="">
          <view class="content_boby">
            <view class="content_boby_view">
              <text>起始库区:</text>
              <text :class="obj.state == '取消' ? 'showFalw' : 'showTres'">
                {{ obj.areaFrom }}
              </text>
            </view>
            <view class="content_boby_view">
              <text>起始库位:</text>
              <text :class="obj.state == '取消' ? 'showFalw' : 'showTres'">
                {{ obj.locationFrom }}
              </text>
            </view>
          </view>
          <view class="content_boby">
            <view class="content_boby_view">
              <text>目标库区:</text>
              <text :class="obj.state == '取消' ? 'showFalw' : 'showTres'">
                {{ obj.areaTo }}
              </text>
            </view>
            <view class="content_boby_view">
              <text>目标库位:</text>
              <text :class="obj.state == '取消' ? 'showFalw' : 'showTres'">
                {{ obj.locationTo }}
              </text>
            </view>
          </view>
          <view class="content_boby">
            <view class="content_boby_view">
              <text>状态:</text>
              <text :class="obj.state == '取消' ? 'showFalw' : 'showTres'">
                {{ obj.state }}
              </text>
            </view>
            <view class="content_boby_view">
              <text>类型:</text>
              <text
                :class="obj.state == '取消' ? 'showFalw' : 'showTres'"
                v-if="obj.taskType == 'FW'">
                转发任务
              </text>
            </view>
          </view>
          <view class="content_boby">
            <view class="content_boby_view">
              <text>时间:</text>
              <text :class="obj.state == '取消' ? 'showFalw' : 'showTres'">
                {{ obj.createDate }}
              </text>
            </view>
            <view class="content_boby_view">
              <text>操作人:</text>
              <text
                :class="obj.state == '取消' ? 'showFalw' : 'showTres'"
                v-if="obj.createUser == '' && obj.createUser == null">
                无
              </text>
              <text
                :class="obj.state == '取消' ? 'showFalw' : 'showTres'"
                v-else>
                {{ obj.createUser }}
              </text>
            </view>
          </view>
          <view class="content_boby">
            <view class="content_boby_view">
              <text>备注:</text>
              <text>{{ obj.remark }}</text>
            </view>
          </view>
          <view class="hr"></view>
        </view>
      </view>
    </view>

    <view class="text" v-else>
      <text>暂无数据</text>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      obj: {},
      tabListShow: true,
      stateType: [
        {
          name: "开始",
          id: 1,
        },
        {
          name: "完成",
          id: 2,
        },
        {
          name: "开始取货",
          id: 3,
        },
        {
          name: "取货完成",
          id: 4,
        },
        {
          name: "开始卸货",
          id: 5,
        },
        {
          name: "卸货完成",
          id: 6,
        },
        {
          name: "取消",
          id: 7,
        },
        {
          name: "异常",
          id: 8,
        },
        {
          name: "待下发",
          id: 9,
        },
        {
          name: "已下发",
          id: 10,
        },
        {
          name: "取消并归于起点",
          id: 11,
        },
        {
          name: "取消并归于终点",
          id: 12,
        },
        {
          name: "生成",
          id: 13,
        },
        {
          name: "卸货待确认",
          id: 14,
        },
      ],
      page: 1,
      tabList: [],
      host: "",
    };
  },
  onLoad(option) {
    let _this = this;
    uni.getStorage({
      key: "hostappst",
      success(res) {
        console.log("获取成功", res.data);
        _this.host = res.data;
      },
    });
    this.getData();
  },
  onShow() {},
  created() {},
  mounted() {},
  onReachBottom() {
    this.page++;
    this.getData("addList");
  },
  methods: {
    getData(type) {
      let that = this;
      let data = {
        pageNum: this.page,
        pageSize: 10,
      };

      uni.getStorage({
        key: "GetPhone_Token",
        success: function (res) {
          uni.request({
            url: `http://${that.host}` + "/ams/wcsTask/selectBucketWcsTaskList",
            header: {
              Authorization: res.data,
              "content-type": "application/x-www-form-urlencoded",
            },
            data: data,
            method: "GET",
            success(respenon) {
              console.log("chaoShiPanDuan", respenon);
              if (respenon.data.code == 200) {
                respenon.data.rows.forEach((item, index) => {
                  that.stateType.forEach((items, indexs) => {
                    if (item.state == items.id) {
                      item.state = items.name;
                    }
                  });
                });
                if (type == "addList") {
                  that.tabList = [...that.tabList, ...respenon.data.rows];
                } else {
                  that.tabList = respenon.data.rows;
                  if (that.tabList.length > 0) {
                    that.tabListShow = true;
                  } else {
                    that.tabListShow = false;
                  }
                }
              } else if (respenon.data.code == 401) {
                uni.reLaunch({
                  url: "/pages/index/login",
                });
              } else {
                uni.showToast({
                  title: respenon.data.msg,
                  icon: "none",
                });
              }
            },
          });
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  color: #787878;

  font-size: 14px;
  font-weight: 400;
  .title {
    height: 44px;
    padding: 12px 15px;
  }
  .content_boby {
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .showFalw {
      color: red;
    }
    .showTres {
      color: #00ff08;
    }
  }
  .hr {
    width: 100%;
    height: 1px;
    background: #cfcfcf;
  }
  .text {
    text-align: center;
    height: 100%;
    margin: 32vw;
    font-size: 20px;
  }
}
</style>