kd-aiot-frontend-qms/src/views/certificateManagement/components/certificate_conformity_jangnan_template.vue

<template>
  <div
    id="print"
    style="
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    "
  >
    <div
      style="
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      "
    >
      <div
        style="
          font-size: 24px;
          font-weight: 800;
          text-align: center;
          width: 100%;
          margin-bottom: 10px;
        "
      >
        半成品验收合格证
      </div>

      <div style="width: 100%; font-size: 14px; margin-bottom: 10px">
        <span
          style="
            min-width: 65px;
            border-bottom: 1px solid #000;
            display: inline-block;
            text-align: center;
          "
          >{{ form.contractor || ' ' }}</span
        >
        厂生产的下述半成品，经我们按产品图及技术条件要求验收合格，准予按序流转。
      </div>

      <div
        style="
          width: 100%;
          font-size: 14px;
          text-align: right;
          margin-bottom: 10px;
        "
      >
        {{ form.createTime ? form.createTime.split(' ')[0] : '' }}
      </div>
    </div>

    <table
      cellspacing="0"
      border
      style="
        width: 100%;
        table-layout: fixed;
        word-break: break-all;
        word-wrap: break-word;
        font-size: 12px;
        border-collapse: collapse;
      "
    >
      <thead>
        <tr align="center">
          <td style="padding: 5px">产品名称（代号）</td>
          <td style="padding: 5px">半成品名称（代号）</td>
          <td style="padding: 5px">批号</td>
          <td style="padding: 5px">交验数</td>
          <td style="padding: 5px">合格数</td>
        </tr>
      </thead>
      <tbody>
        <tr align="center" v-if="form?.productName">
          <td style="padding: 5px">{{ form.luxuryProductName }}</td>
          <td style="padding: 5px">{{ form.productName }}</td>
          <td style="padding: 5px">{{ form.batchNo }}</td>
          <td style="padding: 5px">{{ form.quantity }}</td>
          <td style="padding: 5px">{{ form.qualifiedQuantity }}</td>
        </tr>
        <tr align="center">
          <td style="padding: 5px"></td>
          <td style="padding: 5px"></td>
          <td style="padding: 5px"></td>
          <td style="padding: 5px"></td>
          <td style="padding: 5px">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="5" style="padding: 5px; text-align: left">
            <div style="width: 100%; height: 100px">
              重要记事：

              <span v-if="type == 'print'"> {{ form.remark }}</span>
              <el-input
                v-else
                type="textarea"
                v-model="form.remark"
                autosize
              ></el-input>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <div
      style="
        width: 100%;
        font-size: 14px;
        margin-top: 10px;
        display: flex;
        justify-content: space-around;
      "
    >
      <div>主管：{{ form.createUserName }}</div>
      <div>验收者：{{ form.approvalUserName }}</div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  export default {
    name: 'print',
    computed: {
      ...mapGetters(['user'])
    },
    props: {
      type: String
    },
    data() {
      return {
        form: {}
      };
    },

    methods: {
      async init(row) {
        this.form = row||{};
      },
      getValue() {
        return this.form;
      },
          
    }
  };
</script>

<style lang="scss"></style>