jiliangxiaochengxu/pages/verification/application.vue

<!-- @format -->
<!-- @format -->

<template>
  <view class="container">
    <view style="margin-top: 15rpx; padding-bottom: 110rpx">
      <view style="font-size: 30rpx" class="content-header">
        <view class="content">
          <view style="font-size: 30rpx" class="title">检定方式</view>
          <view>{{ type == "1" ? "外捡" : "送检" }}</view>
        </view>
        <view class="content">
          <view style="font-size: 30rpx" class="title">申请单位</view>
          <view>{{ danwei }}</view>
        </view>
        <view class="content">
          <view style="font-size: 30rpx" class="title">申请人</view>
          <view>{{ applyPeople }}</view>
        </view>

        <view class="content">
          <view style="font-size: 30rpx" class="title">联系电话</view>
          <view>{{ userMobile }}</view>
        </view>
      </view>
      <view class="">
        <view v-for="(item, index) in assList" :key="index" class="optionItems">
          <u-swipe-action ref="swipeAction">
            <u-swipe-action-item
              ref="item"
              @click="shanchu(item)"
              :options="options2"
            >
              <view
                style="
                  border-radius: 10rpx;
                  background-color: #fff;
                  padding: 10rpx;
                "
              >
                <view class="">
                  <view style="margin-top: 15rpx" class="content-header1">
                    <view style="margin-bottom: 30rpx" class="">
                      <view
                        style="justify-content: space-between"
                        class="content"
                      >
                        <view
                          style="
                            color: black;
                            font-size: 36rpx;
                            font-weight: 700;
                          "
                          class="message"
                        >
                          {{ item.name }}
                        </view>
                        <!-- <view
                        style="padding-top: 5rpx"
                        :style="{
                          color: recordColor[recordStatus(item.fillingStatus)],
                        }"
                        >{{ recordStatus(item.fillingStatus) }}</view
                      > -->
                      </view>

                      <view style="display: flex" class="content">
                        <view class="title"
                          >唯一标识：<span class="message">
                            {{ item.instrNo }}
                          </span>
                        </view>
                      </view>
                      <view style="display: flex" class="content">
                        <view class="title">器具用途：</view>
                        <view class="message">
                          {{ item.purposeName }}
                        </view>
                      </view>

                      <view class="content">
                        <view class="title">制造单位：</view>
                        <view class="message">
                          {{ item.manufactoryName }}
                        </view>
                      </view>
                      <view
                        style="display: flex; justify-content: space-between"
                        class=""
                      >
                        <view style="display: flex" class="content">
                          <view class="title">器具类型：</view>
                          <view class="message">
                            {{ item.typeName }}
                          </view>
                        </view>
                      </view>
                      <view
                        style="display: flex; align-items: center"
                        class="content"
                      >
                        <view class="title">规格型号：</view>
                        <view style="padding-top: 5rpx" class="message">
                          {{ item.modelSpecific }}
                        </view>
                      </view>
                      <view
                        style="display: flex; justify-content: space-between"
                        class=""
                      >
                        <view style="display: flex" class="content">
                          <view class="title">出厂编号：</view>
                          <view style="padding-top: 5rpx" class="message">
                            {{ item.serialNumber }}
                          </view>
                        </view>
                        <view
                          style="display: flex; align-items: center"
                          class="content"
                        >
                          <view class="title">内部编号：</view>
                          <view class="message">
                            {{ item.internalNumber }}
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </u-swipe-action-item>
          </u-swipe-action>
        </view>
      </view>
    </view>
    <view class="submitBtn" style="display: flex">
      <view style="display: flex">
        <view
          @click="qingkong"
          style="
            width: 100rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          "
          class=""
        >
          <u-icon name="trash" color="" size="20"></u-icon
          ><span style="font-size: 30rpx">清空</span>
        </view>
        <view style="width: 250rpx; margin: 0 30rpx">
          <u-button @click="addQiJu" style="" type="primary">新增</u-button>
        </view>
        <view style="width: 250rpx; margin: 0 30rpx">
          <u-button @click="nextPage" type="success">下一步</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { useDict, paraseDict } from "@/utils/index";
import { addMiAuditOrder } from "@/api/assay.js";

import { getInfo } from "@/api/login.js";
export default {
  data() {
    return {
      options2: [
        {
          text: "删除",
          style: {
            backgroundColor: "#f56c6c",
          },
        },
      ],
      danwei: "",
      checkboxValue1: [],
      checkBoxList: [
        {
          name: "我单位承诺，本次提交备案的计量器具的相关信息均真实准确，经过自我严格审核，均符合《市场监管总局关于调整实施强制管理的计量器具目录的公告》（国家市场监督管理总局公告2020年第42号)中《实施强制管理的计量器具目录》的规定。",
          label: false,
        },
      ],
      applyPeople: "",
      createTime: "",
      type: null,
      userMobile: "",
      dataList: [],
      assList: [],
      recordColor: {
        已撤回: "#fa3534",
        已接收: "#2979ff",
        待提交: "#2979ff",
        备案中: "#2979ff",
        已拒绝: "#fa3534",
        勿备案: "#fa3534",
        未备案: "#909399",
        免备案: "#909399",
        已退回: "#fa3534",
      },
      record: [], //备案字典
    };
  },
  onLoad(options) {
    this.type = options.type;
    useDict("ejian_instrFillingStatus").then((res) => {
      this.record = res;
    });
    getInfo().then((res) => {
      this.danwei = res.data.mechanism.name;
      this.applyPeople = res.data.user.name;
      this.userMobile = res.data.user.phone;
    });
    let that = this;
  },
  onShow() {
    uni.$once("query", (query) => {
      if (query.a == "two") {
        this.assList = [...getApp().globalData.deptListBeiAn];
      }
    });
  },

  methods: {
    nextPage() {
      if (!this.assList.length) {
        uni.showToast({
          title: "请单击新增按钮，选择检定器具",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      let ids = this.assList.map((item) => item.id).join(",");
      uni.navigateTo({
        url: "/pages/verification/external?ids=" + ids + "&type=" + this.type,
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    submitBeian() {
      if (this.checkboxValue1.length == 0) {
        this.$modal.showToast("提交前，请认真阅读理解自我承诺内容后勾选");
      } else {
        let ids = this.assList.map((item) => item.id).join(",");
        console.log("ids", ids);
        addMiAuditOrder({
          instrumentIds: ids,
        }).then((res) => {
          console.log("res", res);
          uni.showToast({
            title: "新增成功",
            icon: "none",
            duration: 1000,
          });

          setTimeout(() => {
            this.assList = [];
            this.checkboxValue1 = [];
            uni.$emit("query", {
              a: "one",
            });
            uni.navigateBack();
          }, 500);
        });
      }
    },
    checkboxChange(value) {
      console.log("Checkbox changed:", value);
    },
    shanchu(val) {
      console.log("val", val);
      console.log(this.$refs);
      this.$refs.item.forEach((item) => item.closeHandler(true));
      this.assList.splice(val, 1);
    },
    qingkong() {
      this.assList = [];
      getApp().globalData.deptListBeiAn = [];
      this.checkboxValue1 = [];
    },
    addQiJu() {
      let ids = this.assList.map((item) => item.id).join(",");
      uni.navigateTo({
        url: "/pages/verification/externalList?ids=" + ids,
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
  },
};
</script>

<style lang="scss">
.container {
  height: 100rpx;
}

::v-deep .u-icon--right[data-v-2ee87dc9] {
  /* flex-direction: row; */
  align-items: center;
  flex-direction: column;
}

::v-deep .u-checkbox {
  display: flex;
  flex-direction: row;
  /* overflow: hidden; */
  flex-direction: row;
  align-items: flex-start;
}

::v-deep uni-text[data-v-c4a74aee] span {
  font-size: 28rpx;
  color: red;
  line-height: 40rpx;
}

.submitBtn {
  width: 100%;
  background: #fff;
  padding: 15rpx 0;
  position: fixed;
  bottom: 0;
  z-index: 9999;
}
.optionItems {
  width: 95%;
  margin: 20rpx auto;
  border-radius: 8px;
}
.content-header1 {
  width: 95%;
  border-radius: 6px;
  background: #fff;
  margin: 10rpx auto 10rpx;
  padding: 20rpx 20rpx 10rpx;

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

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

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

  .title {
    font-size: 28rpx;
    color: rgb(146, 146, 146);
    letter-spacing: 3rpx;
  }

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

.content-header {
  width: 95%;
  border-radius: 6px;
  background: #fff;
  margin: 0rpx auto 20rpx;
  padding: 20rpx 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;
  }

  .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);
  }
}
</style>