jiliangxiaochengxu/pages/verification/institution.vue

<!-- @format -->

<template>
  <view class="container">
    <view style="margin-top: 15rpx">
      <view class="content-header">
        <view class="content">
          <view style="font-size: 28rpx" class="title">检定类型</view>
          <view style="font-size: 28rpx">{{
            checkMethod == "1" ? "外检" : "送检"
          }}</view>
        </view>
        <view class="content">
          <view style="font-size: 28rpx" class="title">申请检定器具</view>
          <view style="font-size: 28rpx">{{ danwei }}</view>
        </view>
        <view class="content">
          <view class="title">申请人</view>
          <view>{{ applyPeople }}</view>
        </view>
        <view class="content">
          <view style="font-size: 28rpx" class="title">提交时间</view>
          <view style="font-size: 28rpx">{{ createTime }}</view>
        </view>
        <view class="content">
          <view style="font-size: 28rpx" class="title">申请人手机号</view>
          <view style="font-size: 28rpx">{{ userMobile }}</view>
        </view>
      </view>
      <u-divider
        style="padding: 0 30rpx"
        :dashed="true"
        textSize="28rpx"
        text="检定机构任务单"
        textColor="#2979ff"
        lineColor="#2979ff"
      ></u-divider>

      <view v-if="dataList.length">
        <view
          @click="cchandleDetails(item)"
          v-for="item in dataList"
          :key="item"
          class="content-header"
          style="height: 200rpx"
        >
          <view v-if="item.rollbacked == '1'"
            class="rightTipc"
            :style="{
              background: '#fa3534',
            }"
            >已撤回</view
          >

          <view
                class="swTipc"
                v-if="item.type == '1'"
          ><image
                  style="height: 100rpx"
                  :src="baseUrl + '/ruoyi/sw.png'"
                  mode=""
          >
          </image
                  style="height: 100rpx"></view
          >

          <view @click="detailsList(item)" style="height: 140rpx" class="">
            <view style="display: flex; line-height: 80rpx">
              <view
                style="color: black; font-size: 32rpx; font-weight: 700"
                class="message"
              >
                {{ item.organizationName }}
              </view>
            </view>
            <view style="display: flex; line-height: 40rpx">
              <view style="font-size: 28rpx; color: #929292" class="title"
                >任务单编号：</view
              >
              <view style="color: red; font-size: 28rpx" class="message">
                {{ item.number }}
              </view>
            </view>
            <view style="display: flex; line-height: 40rpx">
              <view style="font-size: 28rpx; color: #929292" class="title"
                >单位联系电话：</view
              >
              <view
                style="color: red; font-size: 28rpx; padding-bottom: 15rpx"
                class="message"
              >
                {{ item.checkOrgPhone }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <view v-else style="height: 200rpx">
        <u-empty mode="data" text="当前没有机构任务单"> </u-empty>
      </view>
    </view>

    <view style="height: 100rpx"></view>
  </view>
</template>

<script>
import { orderApplyList } from "@/api/verification";
import { useDict, paraseDict } from "@/utils/index";
export default {
  data() {
    return {
      baseUrl: this.$baseUrl,
      checkMethod: null,
      recordColor: {
        已撤回: "#fa3534",
        已接收: "#2979ff",
        待提交: "#2979ff",
        备案中: "#2979ff",
        已拒绝: "#fa3534",
        勿备案: "#fa3534",
        未备案: "#909399",
        免备案: "#909399",
        已退回: "#fa3534",
      },
      record: [], //备案字典
      dataList: [],
      applyPeople: "",
      danwei: "",
      userMobile: "",
      createTime: "",
      activeContent: "新建检定申请",
      applyId: null,
      tabsList: [
        {
          name: "新建检定申请",
        },
        {
          name: "我的检定申请",
        },
      ],
    };
  },
  onShow() {
    orderApplyList(this.applyId).then((res) => {
      this.dataList = res.data;
    });
  },
  onLoad(options) {
    useDict("ejian_instrFillingStatus").then((res) => {
      this.record = res;
    });
    this.applyId = options.id;
    this.applyPeople = options.applypeople;
    this.danwei = options.danwei;
    this.userMobile = options.userMobile;
    this.createTime = options.createTime;
    this.checkMethod = options.checkMethod;
    orderApplyList(options.id).then((res) => {
      this.dataList = res.data;
    });
  },
  computed: {
    recordStatus() {
      return (row) => {
        return paraseDict(this.record, row);
      };
    },
  },
  methods: {
    detailsList(item) {
      uni.navigateTo({
        url:
          "/pages/verification/utensilList?id=" +
          item.id +
          "&rollbackDisabled=" +
          item.rollbackDisabled +
          "&rollbacked=" +
          item.rollbacked,
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    equipmentDetails() {
      uni.navigateTo({
        url: "/pages/assay/equipmentDetails",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    handleChange(row) {
      this.activeContent = row.name;
    },
    handleCurrentForm() {},
    handleVerDetails() {
      uni.navigateTo({
        url: "/pages/verification/details",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.rightTipc {
  position: absolute;
  top: 17rpx;
  right: -37rpx;
  text-align: center;
  font-size: 26rpx;
  height: 50rpx;
  line-height: 50rpx;
  width: 160rpx;
  transform: rotateZ(45deg);
  color: #fff;
  background: #2979ff;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.swTipc {
  position: absolute;
  top: 50rpx;
  right: 80rpx;
  text-align: center;
  font-size: 26rpx;
  height: 50rpx;
  line-height: 50rpx;
  width: 160rpx;
}
.submitBtn {
  width: 100%;
  background: #fff;
  padding: 15rpx 0;
  position: fixed;
  bottom: 0;
}

::v-deep .u-text__value--content {
  margin-bottom: 10rpx;
}

::v-deep .u-steps-item__line--column {
  height: 50rpx !important;
  top: 70rpx;
}

::v-deep .u-steps-item__content--column {
  margin-left: 40rpx !important;
}

::v-deep .u-steps-item__wrapper__circle {
  width: 60rpx;
  height: 60rpx;
}

::v-deep .u-steps-item--column {
  padding-bottom: 46rpx;
}

.process {
  width: 95%;
  border-radius: 6px;
  background: #fff;
  margin: 0rpx auto 30rpx;
  padding: 20rpx 30rpx 20rpx;
  height: 650rpx;
}

.content-header {
  width: 95%;
  border-radius: 6px;
  background: #fff;
  margin: 0rpx auto 20rpx;
  padding: 20rpx 30rpx 20rpx;
  position: relative;
  overflow: hidden;
  .rightTipc {
    position: absolute;
    top: 17rpx;
    right: -37rpx;
    text-align: center;
    font-size: 26rpx;
    height: 50rpx;
    line-height: 50rpx;
    width: 160rpx;
    transform: rotateZ(45deg);
    color: #fff;
    background: #2979ff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  .content {
    border-bottom: 1px solid rgb(242, 242, 242);
    padding: 24rpx 0;
    display: flex;
    justify-content: space-between;
  }

  .content:last-child {
    border-bottom: none;
  }

  .passIcon {
    position: absolute;
    top: 20rpx;
    right: 40rpx;
  }

  .title {
    font-size: 26rpx;
    color: black;
    letter-spacing: 3rpx;
  }

  .message {
    font-size: 26rpx;
    color: rgb(146, 146, 146);
  }
}

.container {
  height: 100vh;
  background: rgb(243, 244, 249);
  padding: 0rpx 0 110rpx;

  .contentItems {
    width: 95%;
    border-radius: 6px;
    background: #fff;
    margin: 0rpx auto 20rpx;
    padding: 10rpx 30rpx 20rpx;

    .content {
      border-bottom: 1px solid rgb(242, 242, 242);
      padding: 24rpx 0;
      display: flex;
      justify-content: space-between;
    }

    .content:last-child {
      border-bottom: none;
    }

    .title {
      font-size: 26rpx;
      color: black;
      letter-spacing: 3rpx;
    }

    .message {
      font-size: 26rpx;
      color: rgb(146, 146, 146);
    }
  }
}
</style>