jiliangxiaochengxu/pages/verification/external.vue

<!-- @format -->

<template>
  <view class="container">
    <view v-show="isOptional" style="margin-top: 20rpx">
      <view style="color: #3c9cff" class="informationTitle"
        >免备案或者没有匹配到检定单位的器具，可自主选择检定机构，或直接去省外溯源</view
      >
      <view class="chooseType">
        <u-form
          :model="optional"
          ref="optionRef"
          labelWidth="140"
          labelPosition="top"
        >
          <u-form-item label="器具数量：" labelPosition="left">
            <view
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <span
                style="margin-left: -115rpx; font-size: 30rpx; color: #fa3534"
              >
                {{ optional.count }}
              </span>
              <view style="width: 150rpx">
                <u-button
                  @click="handleDetails(optional)"
                  size="mini"
                  type="primary"
                  >查看器具</u-button
                >
              </view>
            </view>
          </u-form-item>
          <u-form-item label="选择方式：" :required="true" prop="type">
            <u-radio-group v-model="optional.type">
              <u-radio label="提交到检定机构" name="0"></u-radio>
              <view style="margin-left: 40rpx">
                <u-radio label="去省外溯源" name="1"></u-radio>
              </view>
            </u-radio-group>
          </u-form-item>
          <u-form-item
            v-if="optional.type == '0'"
            label="检定机构："
            :required="true"
            prop="organizationId"
          >
            <zxz-uni-data-select
              dataKey="name"
              dataValue="id"
              @inputChange="hadnleSearch"
              :filterable="true"
              v-model="optional.organizationId"
              placeholder="请输入单位名称自动查找"
              :localdata="localdata"
              emptyTips="没有查找到单位"
            ></zxz-uni-data-select>
          </u-form-item>
        </u-form>
      </view>
    </view>
    <view v-show="isInadmissible" style="margin-top: 20rpx">
      <view style="color: #3c9cff" class="informationTitle"
        >上次检定结果为不予受理的器具，可自主选择检定机构。</view
      >
      <view class="chooseType">
        <u-form
          :model="Inadmissible"
          ref="inadFormRef"
          labelWidth="140"
          labelPosition="top"
        >
          <u-form-item label="器具数量：" labelPosition="left">
            <view
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <span
                style="margin-left: -115rpx; font-size: 30rpx; color: #fa3534"
              >
                {{ Inadmissible.count }}
              </span>
              <view style="width: 150rpx">
                <u-button
                  @click="handleDetails(Inadmissible)"
                  size="mini"
                  type="primary"
                  >查看器具</u-button
                >
              </view>
            </view>
          </u-form-item>

          <u-form-item
            label="检定机构："
            :required="true"
            prop="organizationId"
          >
            <zxz-uni-data-select
              dataKey="name"
              dataValue="id"
              @inputChange="hadnleSearch"
              :filterable="true"
              v-model="Inadmissible.organizationId"
              placeholder="请输入单位名称自动查找"
              :localdata="localdata"
              emptyTips="没有查找到单位"
            ></zxz-uni-data-select>
          </u-form-item>
        </u-form>
      </view>
    </view>

    <view v-if="autoAllocation.length" style="margin-top: 20rpx">
      <view style="color: #3c9cff" class="informationTitle"
        >系统自动分配的检定机构</view
      >
      <view
        v-for="item of autoAllocation"
        :key="item.measuringId"
        class="inforItems"
      >
        <view class="content">
          <view class="title">器具数量：</view>
          <view class="message" style="width: 533rpx">
            <view
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex: 1;
              "
            >
              <span style="font-size: 30rpx; color: #fa3534">{{
                item.count
              }}</span>
              <view style="width: 150rpx">
                <u-button
                  @click="handleDetails(item)"
                  size="mini"
                  type="primary"
                  >查看器具</u-button
                >
              </view>
            </view>
          </view>
        </view>
        <view class="content">
          <view class="title">检定机构：</view>
          <view class="message">{{ item.organizationName }}</view>
        </view>
      </view>
    </view>

    <view style="height: 100rpx"></view>
    <view class="btn">
      <view style="width: 90%; margin: 0 auto">
        <u-button @click="onSubmit" :disabled="isLoading" type="primary"
          >提交</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import {
  assignOrganization,
  listMechanismLikeName,
  startSubmitCheckOrder,
} from "@/api/verification";
import { getInfo } from "@/api/login.js";

export default {
  data() {
    return {
      isLoading: false,
      autoAllocation: [],
      optional: {
        organizationId: null,
        type: "0",
      },
      isOptional: true,
      isInadmissible: true,
      method: "",
      Inadmissible: {
        organizationId: null,
      },
      ids: [],
      localdata: [],
      userMobile: "",
      optionRules: {
        type: [
          {
            required: true,
            message: "选择方式不能为空",
            trigger: "blur",
          },
        ],
        organizationId: [
          {
            required: true,
            message: "检定机构不能为空",
            trigger: "blur",
          },
        ],
      },
      inadFormRules: {
        organizationId: [
          {
            required: true,
            message: "检定机构不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //查看详情
    handleDetails(item) {
      uni.navigateTo({
        url: "/pages/verification/utensils?ids=" + item.instrumentIds.join(","),
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    async onSubmit() {
      if (this.isOptional) {
        await this.$refs.optionRef.validate();
      }

      if (this.isInadmissible) {
        await this.$refs.inadFormRef.validate();
      }
      uni.showLoading({
        title: "提交中...",
      });
      this.isLoading = true;
      try {
        let res = await startSubmitCheckOrder({
          assignResult: [
            ...this.autoAllocation,
            this.optional,
            this.Inadmissible,
          ].filter(Boolean),
          instrIds: this.ids,
          checkMethod: this.checkMethod,
          userMobile: this.userMobile,
        });

        uni.showToast({
          title: "提交成功",
          duration: 2000,
        });
        setTimeout(() => {
          let dataPramr = res.data.checkOrder;

          uni.reLaunch({
            url:
              "/pages/verification/institution?id=" +
              dataPramr.id +
              "&danwei=" +
              dataPramr.instrumentSummary +
              "&applypeople=" +
              dataPramr.startUserName +
              "&userMobile=" +
              dataPramr.startUserMobile +
              "&createTime=" +
              dataPramr.createTime +
              "&checkMethod=" +
              dataPramr.checkMethod,
            success: (res) => {},
            fail: () => {},
            complete: () => {},
          });
        });
        this.isLoading = false;
      } finally {
        this.isLoading = false;
      }
    },
    async hadnleSearch(row) {
      let { data } = await listMechanismLikeName({
        mechanismName: row,
      });
      this.localdata = data;
    },
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。

    this.$refs.optionRef.setRules(this.optionRules);
    this.$refs.inadFormRef.setRules(this.inadFormRules);
  },
  async onLoad(options) {
    this.checkMethod = options.type;
    this.ids = options.ids.split(",");
    uni.showLoading({
      title: "加载中...",
    });
    try {
      let { data } = await assignOrganization(this.ids);
      this.autoAllocation = data.filter((element) => element.chooseType == 0);
      this.optional = data.filter((element) => element.chooseType == 2)[0];
      this.Inadmissible = data.filter((element) => element.chooseType == 1)[0];

      this.isOptional = data.filter(
        (element) => element.chooseType == 2
      ).length;
      this.isInadmissible = data.filter(
        (elementItem) => elementItem.chooseType == 1
      ).length;

      this.optional.type = "0";
    } finally {
      setTimeout(() => {
        uni.hideLoading();
      }, 2000);
    }

    getInfo().then((res) => {
      this.userMobile = res.data.mechanism.userMobile;
    });
  },
};
</script>

<style lang="scss" scoped>
.btn {
  background: #fff;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 20rpx;
}
.chooseType {
  background: #fff;
  border-radius: 8px;
  margin: 20rpx 0 0;
  padding: 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);
}
.inforItems {
  background: #fff;
  border-radius: 8px;
  margin: 20rpx 0;
  padding: 20rpx;
}
.container {
  height: 100vh;
  background: rgb(243, 244, 249);
  width: 95%;
  margin: 20rpx auto;
}
.informationTitle {
  margin-bottom: 10rpx;
  font-size: 30;
}
</style>