hitch-sb-antd/src/views/idle-assets/modules/TicketForm.vue

<template>
  <div class="main" v-show="visible">
    <div>
      <a-button type="primary" v-print="'#print-container2'" :disabled="disabled">打印</a-button>
      <a-button style="margin-left: 8px" @click="handleCancel()">返回</a-button>
    </div>
    <div id="print-container2">
      <div class="title">
        <div style="font-size:26px;"><span style="font-size:30px;font-weight:700;vertical-align: middle;letter-spacing:.2em;">设备变动申请单</span></div>
      </div>
      <div style="display:flex;justify-content:space-between; margin: 10px auto;width: 1130px;">
        <div>申请人：{{ modal.applyName }}</div>
        <!-- <div>日期：{{ BaseTool.Date.formatter(new Date, BaseTool.Date.PICKER_NORM_DATE_PATTERN) }}</div> -->
        <div>单号：{{ modal.no }}</div>
      </div>
      <div class="tables" >
        <table>
          <tr>
            <td colspan="3" style="text-align:center;">
              <div style="font-size:18px;"><span style="font-weight:700;vertical-align: middle;letter-spacing:.2em;">申请信息</span></div>
            </td>
          </tr>
          <tr>
            <td style="text-align:left;">
              备注:{{ modal.name }}
            </td>
            <td colspan="2" style="text-align:left;">
              申请原因：{{ modal.applyReason }}
            </td>
          </tr>
          <tr>
            <td colspan="3" style="text-align:left;">
              <table style="width:100%;border:none">
                <tr>
                  <td colspan="9">设备集合</td>
                </tr>
                <tr>
                  <td>设备名称</td>
                  <td>原设备位号</td>
                  <td>新设备位号</td>
                  <td>原设备位置</td>
                  <td>新设备位置</td>
                  <td>是否清洗</td>
                  <td>设备完好性</td>
                  <td>设备编号</td>
                  <td>所属车间</td>
                </tr>
                <tr v-for="item in modal.sbUnusedDetailVOS" :key="item.id">
                  <td>{{ item.sbName }}</td>
                  <td>{{ item.oldPositionNo }}</td>
                  <td>{{ item.newPositionNo }}</td>
                  <td>{{ item.oldPositionName }}</td>
                  <td>{{ item.newPositionName }}</td>
                  <td>{{ BaseTool.Object.getField(yesNoMap, item.clean) }}</td>
                  <td>{{ item.sbIntact }}</td>
                  <td>{{ item.sbNo }}</td>
                  <td>{{ item.positionName }}</td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td colspan="3" style="text-align:left;">
              处理人意见区： <br />
              <br />
              <div style="padding-left:30px;">
                <a-steps size="small" :current="modal.sbUnusedVerifyRecordVOS.length-1" direction="vertical">
                  <a-step v-for="item in modal.sbUnusedVerifyRecordVOS" :key="item.id" :title="item.realName" :sub-title="item.createdTime" :description="item.advice" />
                </a-steps>
              </div>
            </td>
          </tr><tr>
            <td style="text-align:left;">
              申请人签字：
            </td>
            <td style="text-align:left;">
              审核主管签字：
            </td>
            <td style="text-align:left;">
              部门负责人签字：
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      disabled: false,
      columns: [
        {
          title: '设备名称',
          dataIndex: 'sbName',
          key: 'sbName'
        },
        {
          title: '设备位号',
          dataIndex: 'positionNo',
          key: 'positionNo'
        },
        {
          title: '设备编号',
          dataIndex: 'sbNo',
          key: 'sbNo'
        },
        {
          title: '所属车间',
          dataIndex: 'positionName',
          key: 'positionName'
        }
      ],
      modal: {
        sbUnusedVerifyRecordVOS: [],
        sbUnusedDetailVOS: []
      },
      yesNoMap: {}
    }
  },
  created () {
    // 下拉框map
    // this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.OUT_STORE_FORM_TYPE)
    this.yesNoMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.YES_NO)
  },
  methods: {
    base (record) {
      this.visible = true
      this.modal = record
    },
    handleCancel (values) {
      this.visible = false
      this.$emit('ok')
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  background: #fff;
  font-size: 16px;
}
.title{
  text-align: center;
  font-size:18px;
}
.tables{
  margin: 10px auto;
   width: 1130px;
  font-size: 16px;
  overflow-x:auto;
  table {
        margin: 0 auto;
        border: 1px solid #D6D6D6;
        border-radius: 6px;
   width: 1130px;
        border-collapse: collapse;
        font-weight: 400;
    }
    th{
      color: #FFFFFF;
      background: #3762FC;
    }
    tr {
      min-height:26px;
    }
    th,
    td {
        border: 1px solid #D6D6D6;
        text-align: center;
        padding: 2px 10px;
        word-wrap:break-word;
        word-break:break-all;
    }
}
.check{
  position:absolute;
  left:0px;
  font-size:20px;
}
.checks{
  position:absolute;
  left:-27px;
  font-size:20px;
}
/deep/.ant-radio-inner::after ,/deep/.ant-checkbox-checked .ant-checkbox-inner{
  background-color:#fff;
  border-radius: 0;
}
</style>