accout-ui/src/views/purchase/orderRecord/components/InvoiceHead.vue

<template>
  <el-row>
    <el-col :span="24">
      <el-form
        ref="examForm"
        :model="examForm"
        :rules="examsThis"
        label-width="0px"
        :size="'mini'"
        class="demo-examForm-view"
      >
        <el-row :gutter="10">
          <el-col :span="24">
            <el-row :gutter="10">
              <el-col :span="1">
                <div class="tc">购</div>
                <div class="tc">买</div>
                <div class="tc">方</div>
                <div class="tc">信</div>
                <div class="tc">息</div>
              </el-col>
              <el-col :span="11">
                <el-form-item
                  prop="buyer_name"
                  :class="{ errorForm: ratioItem && !ratioItem.buyer_name }"
                >
                  <el-input
                    :readonly="isDetail"
                    v-model="examForm.buyer_name"
                    placeholder="请输入单位名称"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  prop="buyer_id"
                  :class="{ errorForm: ratioItem && !ratioItem.buyer_id }"
                >
                  <el-input
                    :readonly="isDetail"
                    v-model="examForm.buyer_id"
                    placeholder="请输入纳税人识别号"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  prop="buyer_bank"
                  :class="{ errorForm: ratioItem && !ratioItem.buyer_bank }"
                >
                  <el-input
                    :readonly="isDetail"
                    v-model="examForm.buyer_bank"
                    placeholder="请输入开户行及帐号"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  prop="buyer_address"
                  :class="{ errorForm: ratioItem && !ratioItem.buyer_address }"
                >
                  <el-input
                    :readonly="isDetail"
                    v-model="examForm.buyer_address"
                    placeholder="请输入地址、电话"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item
                  prop="seller_name"
                  :class="{ errorForm: ratioItem && !ratioItem.seller_name }"
                >
                  <el-input
                    :readonly="isDetail"
                    v-model="examForm.seller_name"
                    placeholder="请输入单位名称"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  prop="seller_id"
                  :class="{ errorForm: ratioItem && !ratioItem.seller_id }"
                >
                  <el-input
                    :readonly="isDetail"
                    v-model="examForm.seller_id"
                    placeholder="请输入纳税人识别号"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  prop="seller_bank"
                  :class="{ errorForm: ratioItem && !ratioItem.seller_bank }"
                >
                  <el-input
                    :readonly="isDetail"
                    v-model="examForm.seller_bank"
                    placeholder="请输入开户行及帐号"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  prop="seller_address"
                  :class="{ errorForm: ratioItem && !ratioItem.seller_address }"
                >
                  <el-input
                    :readonly="isDetail"
                    v-model="examForm.seller_address"
                    placeholder="请输入地址、电话"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <div class="tc">销</div>
                <div class="tc">售</div>
                <div class="tc">方</div>
                <div class="tc">信</div>
                <div class="tc">息</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24" style="text-align: right" v-if="!isDetail">
            <img
              v-viewer
              style="width: 80px; heigth: 52px"
              class="fl"
              :src="img"
              alt=""
            />
            <!-- <el-button type="primary" @click="abnormal"
              >已发现发票异常，重新修改发票
            </el-button> -->
            <el-button type="primary" @click="submitForm"
              >查看明细数据
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import asyncRequest from "@/apis/service/purchase/orderRecord";
import resToken from "@/mixins/resToken";
export default {
  name: "orderRecord",
  props: ["newTime", "oldItem", "newItem", "isDetail", "img", "ratioItem","id",  "payNo", "companyNo"],
  mixins: [resToken],
  data() {
    return {
      examForm: {
        buyer_address: "",
        buyer_bank: "",
        buyer_id: "",
        buyer_name: "",
        seller_address: "",
        seller_bank: "",
        seller_id: "",
        seller_name: "",
      },
      examsThis: this.exams,
      exams: {
        buyer_address: [
          {
            required: true,
            message: "请输入购买方地址、电话",
            trigger: "blur",
          },
        ],
        buyer_bank: [
          {
            required: true,
            message: "请输入购买方开户行及帐号",
            trigger: "blur",
          },
        ],
        buyer_id: [
          {
            required: true,
            message: "请输入购买方纳税人识别号",
            trigger: "blur",
          },
        ],
        buyer_name: [
          { required: true, message: "请输入购买方单位名称", trigger: "blur" },
        ],
        seller_address: [
          {
            required: true,
            message: "请输入销售方地址、电话",
            trigger: "blur",
          },
        ],
        seller_bank: [
          {
            required: true,
            message: "请输入销售方开户行及帐号",
            trigger: "blur",
          },
        ],
        seller_id: [
          {
            required: true,
            message: "请输入销售方纳税人识别号",
            trigger: "blur",
          },
        ],
        seller_name: [
          { required: true, message: "请输入销售方单位名称", trigger: "blur" },
        ],
      },
    };
  },

  watch: {
    newTime: function (old, val) {
      if (old !== val) {
        this.initForm();
      }
    },
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      // console.log(this.payNo);
      this.loading = true;
      await this.resetForm();

      this.examsThis = this.exams;
      this.loading = false;
    },
    async abnormal() {
      console.log(this.id,this.payNo);
      this.loading = true;
      let model1 = {
        sid: this.id,
        payNo: this.payNo,
        status: "3",
      };
      let res = await asyncRequest.again(model1);
      if (res && res.code === 0) {
        const title = "异常已提交，成功返回上一步！";
        this.$notify.success({
          title,
          message: "",
        });
        this.showModelThis = false;
        // 刷新
        this.$emit("refreshAll");
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
      this.loading = false;
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.examForm) {
          this.$refs.examForm.resetFields();
          this.$refs.examForm.clearValidate();
          if (this.newItem.buyer_address) {
            this.examForm.buyer_address = JSON.parse(
              JSON.stringify(this.newItem.buyer_address)
            );
            this.examForm.buyer_bank = JSON.parse(
              JSON.stringify(this.newItem.buyer_bank)
            );
            this.examForm.buyer_id = JSON.parse(
              JSON.stringify(this.newItem.buyer_id)
            );
            this.examForm.buyer_name = JSON.parse(
              JSON.stringify(this.newItem.buyer_name)
            );

            this.examForm.seller_address = JSON.parse(
              JSON.stringify(this.newItem.seller_address)
            );
            this.examForm.seller_bank = JSON.parse(
              JSON.stringify(this.newItem.seller_bank)
            );
            this.examForm.seller_id = JSON.parse(
              JSON.stringify(this.newItem.seller_id)
            );
            this.examForm.seller_name = JSON.parse(
              JSON.stringify(this.newItem.seller_name)
            );
          }
        }
      });
    },

    async submitForm() {
      await this.$refs.examForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const obj = JSON.parse(JSON.stringify(this.examForm));
          if (obj.buyer_address !== this.oldItem.buyer_address) {
            console.log(obj.buyer_address);
            console.log(this.oldItem.buyer_address);
            this.$message.error("购买方地址、电话不正确！");
            return;
          }
          if (obj.buyer_bank !== this.oldItem.buyer_bank) {
            this.$message.error("购买方开户行及帐号不正确！");
            return;
          }
          if (obj.buyer_id !== this.oldItem.buyer_id) {
            this.$message.error("购买方纳税人识别号不正确！");
            return;
          }
          if (obj.buyer_name !== this.oldItem.buyer_name) {
            this.$message.error("购买方单位名称不正确！");
            return;
          }
          let arr = [];
          for (let i in obj) {
            if (obj[i] !== this.newItem[i]) {
              arr.push(i);
            }
          }
          obj.field = arr;
          this.loading = false;
          this.$emit("nextStep", obj);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

   <style lang="scss" scoped>
.orderRecord {
  .setWidth {
    width: 100% !important;
    // display: flex;
    // display: block !important;
    // .el-input__inner {
    //   display: flex;
    //   width: 1000px !important;
    //   display: block !important;
    // }
  }
  .imgrq {
    max-width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 12px;
    li {
      width: 80px;
      height: 52px;
      border: 2px solid transparent;
      &.active {
        border: 2px solid #63cbe7;
      }
      img {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .buy-title {
    display: flex;
    text-align: center;
    align-items: flex-end;
    padding-bottom: 20px;
    > div {
      width: 100%;
      display: block;
      font-size: 17px;
      font-family: "Microsoft Yahei", sans-serif;
      color: #606266;
      font-weight: 700;
    }
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .scale {
    li {
      height: 40px;
      line-height: 40px;
      &.fuhao {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        i {
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          color: #97a8be;
          font-size: 20px;
        }

        &.dengyu {
          i {
            // font-size: 26px;
            transform: rotate(90deg);
            -ms-transform: rotate(90deg); /* IE 9 */
            -moz-transform: rotate(90deg); /* Firefox */
            -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
            -o-transform: rotate(90deg);
          }
        }
      }
      .Addend {
        i.fuhao-i {
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          color: #97a8be;
          font-size: 20px;
        }
      }
    }
  }
}
</style>