jiliangxiaochengxu/pages/assay/deptList.vue

<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>{{ 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="">
        <u-swipe-action
          ref="swipeAction"
          v-for="(item, index) in assList"
          :key="index"
          style="margin: 20rpx; border-radius: 10rpx; overflow: hidden"
        >
          <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
                        style="display: flex; align-items: center"
                        class="content"
                      >
                        <view class="title">规格型号：</view>
                        <view style="padding-top: 5rpx" class="message">
                          {{ item.modelSpecific }}
                        </view>
                      </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 style="height: 270rpx" class="content-header">
        <u-checkbox-group
          style="margin-top: 20rpx"
          v-model="checkboxValue1"
          placement="column"
          @change="checkboxChange"
        >
          <u-checkbox
            style="color: red"
            v-for="item in checkBoxList"
            :key="item"
            :label="item.name"
            :name="item.label"
          >
          </u-checkbox>
        </u-checkbox-group>
      </view>
    </view>
    <view class="submitBtn" style="display: flex">
      <u-button
        @click="qingkong"
        style="width: 47%; margin: 0 auto"
        type="warning"
        >清空</u-button
      >
      <u-button
        @click="submitBeian"
        style="width: 47%; margin: 0 auto"
        type="success"
        >提交</u-button
      >
    </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: "",
      userMobile: "",
      dataList: [],
      assList: [],
      recordColor: {
        已撤回: "#fa3534",
        已接收: "#2979ff",
        待提交: "#2979ff",
        备案中: "#2979ff",
        已拒绝: "#fa3534",
        勿备案: "#fa3534",
        未备案: "#909399",
        免备案: "#909399",
        已退回: "#fa3534",
      },
      record: [], //备案字典
    };
  },
  onLoad() {
    useDict("ejian_instrFillingStatus").then((res) => {
      this.record = res;
    });
    getInfo().then((res) => {
      console.log("，", res);
      this.danwei = res.data.mechanism.insertName;
      this.applyPeople = res.data.mechanism.userName;
      this.userMobile = res.data.mechanism.userMobile;
    });
    let that = this;
  },
  onShow() {
    uni.$once("query", (query) => {
      if (query.a == "two") {
        console.log("11", getApp().globalData.deptListBeiAn);
        this.assList.push(...getApp().globalData.deptListBeiAn);
      }
    });
  },
  computed: {
    // //检定状态
    // verificationStatus() {
    // 	return (row) => {
    // 		return paraseDict(this.verification, row);
    // 	};
    // },
    // //申请状态
    // applicationStatus() {
    // 	return (row) => {
    // 		return paraseDict(this.application, row);
    // 	};
    // },
    //备案状态
    recordStatus() {
      return (row) => {
        return paraseDict(this.record, row);
      };
    },
  },
  methods: {
    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 = [];
    },
    onNavigationBarButtonTap(event) {
      console.log("event", event);
      let ids = this.assList.map((item) => item.id).join(",");
      uni.navigateTo({
        url: "/pages/assay/assayList?ids=" + ids,
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
  },
};
</script>

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

::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;
}

.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>