jiliangxiaochengxu/pagesB/Ledger/add.vue

<!-- @format -->

<template>
  <view class="container" style="padding-bottom: 20rpx">
    <u-alert
      type="warning"
      :show-icon="true"
      description="（1）小程序目前仅支持出租汽车计价器、出租汽车税控计价器台账制作，其他类型器具请前往电脑端添加。\n（2）此类器具提交后自动通过强检备案，可进行检定申请。"
    ></u-alert>
    <u-form
      :model="form"
      :rules="rules"
      ref="uForm"
      labelWidth="180"
      labelPosition="top"
    >
      <u-divider text="基础信息" :textSize="18" textColor="black"></u-divider>
      <u-form-item :required="true" label="器具类型：" prop="typeName">
        <u-input disabled v-model="form.typeName"></u-input>
      </u-form-item>
      <u-form-item :required="true" label="器具用途：" prop="purposeName">
        <u-input disabled v-model="form.purposeName"></u-input>
      </u-form-item>
      <u-form-item :required="true" label="器具名称：" prop="name">
        <zxz-uni-data-select
          dataKey="name"
          dataValue="name"
          :filterable="false"
          v-model="form.name"
          :localdata="localdata"
          placeholder="请下拉选择"
          emptyTips="没有查找到器具名称"
        ></zxz-uni-data-select>
      </u-form-item>
      <u-form-item :required="true" label="器具项别：" prop="categoryName">
        <u-input
          disabled
          placeholder="请输入器具项别"
          v-model="form.categoryName"
        ></u-input>
      </u-form-item>

      <u-form-item :required="true" label="器具种别：" prop="className">
        <u-input
          disabled
          placeholder="请输入器具种别"
          v-model="form.className"
        ></u-input>
      </u-form-item>
      <u-form-item :required="true" label="专业类别：" prop="majorName">
        <u-input disabled v-model="form.majorName"></u-input>
      </u-form-item>

      <u-form-item
        :required="true"
        label="强检一级目录："
        prop="catalogueOneName"
      >
        <u-input disabled v-model="form.catalogueOneName"></u-input>
      </u-form-item>
      <u-form-item
        :required="true"
        label="强检二级目录："
        prop="catalogueTwoName"
      >
        <u-input disabled v-model="form.catalogueTwoName"></u-input>
      </u-form-item>

      <u-form-item :required="true" label="制造单位：" prop="manufactoryNameId">
        <zxz-uni-data-select
          @inputChange="hadnleSearch"
          dataKey="name"
          dataValue="id"
          :filterable="true"
          v-model="form.manufactoryNameId"
          :localdata="zzdwLocaldata"
          placeholder="请输入制造单位查询并选择"
          emptyTips="未找到"
        ></zxz-uni-data-select>
      </u-form-item>
      <u-form-item :required="true" label="规格型号：" prop="modelSpecific">
        <u-input
          v-model="form.modelSpecific"
          placeholder="请按照器具铭牌进行填写"
        ></u-input>
      </u-form-item>

      <u-form-item :required="true" label="出厂编号：" prop="serialNumber">
        <u-input
          v-model="form.serialNumber"
          placeholder="请按照器具铭牌进行填写"
        ></u-input>
      </u-form-item>
      <u-form-item :required="true" label="内部编号：" prop="internalNumber">
        <u-input
          v-model="form.internalNumber"
          placeholder="请填写当天日期+车牌号"
        ></u-input>
      </u-form-item>

      <u-form-item :required="true" label="使用状态：" prop="useStatus">
        <zxz-uni-data-select
          dataKey="name"
          dataValue="id"
          :filterable="true"
          v-model="form.useStatus"
          :localdata="syztLocaldata"
          placeholder="请选择使用状态"
          emptyTips="未找到"
        ></zxz-uni-data-select>
      </u-form-item>
      <u-form-item :required="true" label="使用单位：" prop="useUnitName">
        <u-input disabled v-model="form.useUnitName"></u-input>
      </u-form-item>
      <u-form-item :required="true" label="使用区域：" prop="useAddrCode">
        <vvSelectArea
          :list="areas"
          v-model="useAddrName"
          placeholder="请选择使用区域"
        ></vvSelectArea>
      </u-form-item>

      <u-divider text="技术参数" :textSize="18" textColor="black"></u-divider>
      <u-form-item :required="true" label="测量范围：" prop="measureRange">
        <u-input v-model="form.measureRange"></u-input>
      </u-form-item>
      <u-form-item :required="true" label="准确度等级：" prop="accuracyLevel">
        <u-input v-model="form.accuracyLevel"></u-input>
      </u-form-item>
      <u-form-item :required="true" label="允许误差：" prop="indicationError">
        <u-input v-model="form.indicationError"></u-input>
      </u-form-item>
      <u-divider text="强检证明" :textSize="18" textColor="black"></u-divider>
      <u-alert
              type="warning"
              :show-icon="true"
              description="请按当地计量行政部门规定要求，本平台只提供功能，不作要求"
      ></u-alert>
      <u-form-item label="贸易结算的相关证明：" prop="">
        <u-upload
                :fileList="fileList1"
                @afterRead="afterRead"
                @delete="deletePic"
                name="1"
                multiple
                :maxCount="1"
        ></u-upload>
      </u-form-item>
      <u-form-item
              label="最近一次检定证书或新购置器具的购销合同或发票："
              prop=""
              labelWidth="400"
      >
        <u-upload
                :fileList="fileList2"
                @afterRead="afterRead"
                @delete="deletePic"
                name="2"
                multiple
                :maxCount="1"
        ></u-upload>
      </u-form-item>
      <u-form-item
              labelWidth="300"
              label="含有出厂编号规格型号的铭牌图片："
              prop=""
      >
        <u-upload
                :fileList="fileList3"
                @afterRead="afterRead"
                @delete="deletePic"
                name="3"
                multiple
                :maxCount="1"
        ></u-upload>
      </u-form-item>
      <u-divider text="其他信息" :textSize="18" textColor="black"></u-divider>

      <u-form-item label="生产日期：" prop="" >
        <view  @click="productionDateShow=true">
          <u-input
                  readonly
                  v-model="form.productionDate"
                  placeholder="请选择生产日期"
          ></u-input>
        </view>

        <u-datetime-picker @confirm="productionDateConfirm" @cancel="productionDateShow = false" :show="productionDateShow" v-model="form.productionDate" mode="date">

        </u-datetime-picker>
      </u-form-item>
      <u-form-item label="购置日期：" prop="">

        <view  @click="purchaseDateShow=true">
          <u-input
                  v-model="form.purchaseDate"
                  placeholder="请选择购置日期"
          ></u-input>
        </view>

        <u-datetime-picker @confirm="purchaseDateConfirm" @cancel="purchaseDateShow = false" :show="purchaseDateShow" v-model="form.purchaseDate" mode="date">

        </u-datetime-picker>
      </u-form-item>
      <u-form-item label="使用位置：" prop="">
        <u-input
          v-model="form.setupPlace"
          placeholder="请填写使用位置"
        ></u-input>
      </u-form-item>

      <u-form-item label="使用部门：" prop="">
        <u-input
          v-model="form.useDeptName"
          placeholder="请填写使用部门"
        ></u-input>
      </u-form-item>
      <u-form-item label="保管人员：" prop="">
        <u-input
          v-model="form.custodianName"
          placeholder="请填写保管人员"
        ></u-input>
      </u-form-item>
      <u-form-item label="保管手机号：" prop="">
        <u-input
          placeholder="请填写保管人员手机号"
          v-model="form.custodianMobile"
        ></u-input>
      </u-form-item>

      <u-form-item label="保管身份证号：" prop="">
        <u-input
          placeholder="请填写保管人员身份证号"
          v-model="form.custodianIdCard"
        ></u-input>
      </u-form-item>

    </u-form>
    <view class="btn">
      <u-button
        class="custom-style"
        @click="cancel"
        :plain="true"
        shape="circle"
        type="primary"
        >取消</u-button
      >
      <u-button
        class="custom-style"
        @click="onSubmit"
        shape="circle"
        type="primary"
        >提交</u-button
      >
    </view>

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

<script>
import { getToken } from "@/utils/auth";
import { getManufacturingUnits, getArea, submitAddExternal } from "@/api/qj";
import vvSelectArea from "@/pagesB/components/vv-select-area/vv-select-area";

export default {
  components: {
    vvSelectArea,
  },
  data() {
    return {
      productionDateShow: false,
      purchaseDateShow: false,
      userInfo: {},
      fileList1: [],
      fileList2: [],
      fileList3: [],

      useAddrName: null,
      localdata: [
        {
          name: "出租汽车计价器",
        },
        {
          name: "出租汽车税控计价器",
        },
      ],
      syztLocaldata: [
        {
          id: "1",
          name: "在用",
        },
        {
          id: "2",
          name: "停用",
        },
        {
          id: "3",
          name: "禁用",
        },
      ],
      areas: [],
      zzdwLocaldata: [],
      form: {
        dictInstrumentId: "481",
        instrumentNameId: 7682,
        name: "出租汽车税控计价器",
        typeCode: "3",
        typeName: "工作计量器具",
        strong: 1,
        purposeCode: "6",
        purposeName: "贸易结算",
        useStatus: "",
        categoryCode: 474,
        categoryName: "车速里程表及出租车计价器",
        classCode: 468,
        className: "转速",
        majorCode: 253,
        majorName: "力学",
        catalogueOne: 42,
        catalogueOneName: "出租汽车计价器",
        catalogueTwo: 43,
        catalogueTwoName: "出租汽车计价器",
        manufactoryName: "",
        manufactoryNameId: "",
        modelSpecific: "",
        licenceNumber: "",
        serialNumber: "",
        productionDate: "",
        internalNumber: "",
        useAddrCode: "",
        useAddrName: "",
        orgAddrName: "江中省南方市向西县",
        useUnitName: "南方市向西县黄袍怪电子公司",
        useUnitId: "",
        setupPlace: "",
        purchaseDate: "",
        useDeptId: "",
        useDeptName: "",
        custodianId: "",
        custodianName: "",
        custodianMobile: "",
        custodianIdCard: "",
        imgPath: "",
        data: "",
        measureRange: "（0～9999）m",
        indicationError: "-4.0%～+1.0%",
        accuracyLevel: "-4.0%～+1.0%",
        divisionValue: "",
        editMode: "INSTR",
        imgPath: null,
      },
      rules: {
        typeName: [
          {
            required: true,
            message: "器具类型不能为空",
            trigger: "blur",
          },
        ],
        purposeName: [
          {
            required: true,
            message: "器具用途不能为空",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "器具名称不能为空",
            trigger: "blur",
          },
        ],
        categoryName: [
          {
            required: true,
            message: "器具项别不能为空",
            trigger: "blur",
          },
        ],
        className: [
          {
            required: true,
            message: "器具种别不能为空",
            trigger: "blur",
          },
        ],
        majorName: [
          {
            required: true,
            message: "专业类别不能为空",
            trigger: "blur",
          },
        ],
        catalogueOneName: [
          {
            required: true,
            message: "强检一级目录不能为空",
            trigger: "blur",
          },
        ],
        catalogueTwoName: [
          {
            required: true,
            message: "强检二级目录不能为空",
            trigger: "blur",
          },
        ],
        manufactoryNameId: [
          {
            required: true,
            message: "制造单位不能为空",
            trigger: "blur",
          },
        ],
        modelSpecific: [
          {
            required: true,
            message: "规格型号不能为空",
            trigger: "blur",
          },
        ],
        serialNumber: [
          {
            required: true,
            message: "出厂编号不能为空",
            trigger: "blur",
          },
        ],
        internalNumber: [
          {
            required: true,
            message: "内部编号不能为空",
            trigger: "blur",
          },
        ],
        useStatus: [
          {
            required: true,
            message: "使用状态不能为空",
            trigger: "blur",
          },
        ],
        useUnitName: [
          {
            required: true,
            message: "使用单位不能为空",
            trigger: "blur",
          },
        ],
        orgAddrName: [
          {
            required: true,
            message: "单位区域不能为空",
            trigger: "blur",
          },
        ],
        useAddrCode: [
          {
            required: true,
            message: "使用区域不能为空",
            trigger: "blur",
          },
        ],
        measureRange: [
          {
            required: true,
            message: "测量范围不能为空",
            trigger: "blur",
          },
        ],
        accuracyLevel: [
          {
            required: true,
            message: "准确度等级不能为空",
            trigger: "blur",
          },
        ],
        indicationError: [
          {
            required: true,
            message: "允许误差不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },

  async onLoad(option) {},
  computed: {},
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
  watch: {
    useAddrName(newVal) {
      this.form.useAddrCode = this.useAddrName.join(",");
    },
  },

  async created() {
    try {
      let { data } = await getArea();
      this.areas = data;
    } catch (error) {}
    this.userInfo = JSON.parse(uni.getStorageSync("userInfo"));
    this.form.useUnitName = this.userInfo.mechanism.name;
    this.form.useAddrCode = this.userInfo.mechanism.region;
    console.log(this.form.useAddrCode);
  },
  methods: {
     productionDateConfirm: async function(e) {
      this.form.productionDate = await uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
      console.log(this.form.productionDate);
      this.productionDateShow = false
    },
    purchaseDateConfirm: async function(e) {
      this.form.purchaseDate = await uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
      console.log(this.form.purchaseDate);
      this.purchaseDateShow = false
    },
    //上传
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: `${this.$baseUrl}/api/instrument/upload`, // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          header: {
            Authorization: "Bearer " + getToken(),
          },
          success: (res) => {
            setTimeout(() => {
              resolve(res);
            }, 1000);
          },
        });
      });
    },
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: JSON.parse(result.data).fileName,
          })
        );
        fileListLen++;
      }
    },
    //获取制造单位
    async hadnleSearch(row) {
      let { data } = await getManufacturingUnits({
        mechanismName: row,
      });
      this.zzdwLocaldata = data;
    },
    //取消
    cancel() {
      uni.navigateBack();
    },
    //提交
    onSubmit() {
      console.log(this.form);
      if (
        this.fileList1.length ||
        this.fileList2.length ||
        this.fileList3.length
      ) {
        // const imgMapping = {
        //   tradeProved: [
        //     {
        //       name: "贸易结算的相关证明",
        //       url: this.fileList1.length ? this.fileList1[0].url : "",
        //     },
        //   ],
        //   lastTest: [
        //     {
        //       name: "最近一次检定证书或新购置器具的购销合同或发票",
        //       url: this.fileList2.length ? this.fileList2[0].url : "",
        //     },
        //   ],
        //   modelImage: [
        //     {
        //       name: "含有出厂编号规格型号的铭牌图片",
        //       url: this.fileList3.length ? this.fileList3[0].url : "",
        //     },
        //   ],
        // };
        const imgMapping = {};
        if (this.fileList1.length) {
          imgMapping["tradeProved"] = [
            {
              name: "贸易结算的相关证明",
              url: this.fileList1.length ? this.fileList1[0].url : "",
            },
          ];
        }
        if (this.fileList2.length) {
          imgMapping["lastTest"] = [
            {
              name: "最近一次检定证书或新购置器具的购销合同或发票",
              url: this.fileList2.length ? this.fileList2[0].url : "",
            },
          ];
        }
        if (this.fileList3.length) {
          imgMapping["modelImage"] = [
            {
              name: "含有出厂编号规格型号的铭牌图片",
              url: this.fileList3.length ? this.fileList3[0].url : "",
            },
          ];
        }
        this.form.imgPath = JSON.stringify(imgMapping);
      }

      this.$refs.uForm.validate().then(async (res) => {
        try {
          uni.showLoading({
            title: "提交中....",
          });
          await submitAddExternal(this.form);
          uni.showToast({
            title: "提交成功",
            //显示持续时间为 2秒
            duration: 2000,
          });
          uni.redirectTo({
            url: "/pagesB/Ledger/list",
          });
        } finally {
        }
      });
    },
  },
};
</script>

<style lang="scss">
.titleMessage {
  font-size: 34rpx;
  font-weight: bold;
  margin-left: -15rpx;
}
.btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}
.container {
  height: 100%;
  padding: 30rpx;
  background: #fff;
}
</style>