hitch-sb-antd/src/views/store/outstoreform/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 style="font-size:26px;font-weight:700">{{ BaseTool.Object.getField(typeMap,model.type) }}</div>
      </div>
      <div style="display:flex;justify-content:space-between; margin: 10px auto;width: 1030px;">
        <a-radio-group name="radioGroup" v-model="value1">
          <a-radio :value="1">
            <a-icon class="check" v-show="value1 ==1" type="check" />
            能源装备部
          </a-radio>
          <a-radio :value="2">
            <a-icon class="check" v-show="value1 ==2" type="check" />
            生产部
          </a-radio>
          <a-radio :value="3">
            <a-icon class="check" v-show="value1 ==3" type="check" />
            筹建部
          </a-radio>
        </a-radio-group>
        <div>单号：{{ model.yyId }}</div>
        <div>日期：{{ model.userTime }}</div>
      </div>
      <div class="tables" >
        <table>
          <tr>
            <td colspan="1" style="text-align:left;">
              {{ type? '领库':'退库' }}单位或个人：{{ model.createdUserName }}
            </td>
            <td colspan="3" style="text-align:left;">
              用途：{{ model.remark }}
            </td>
            <td colspan="2" style="text-align:left;">
              成本归属：{{ model.remark }}
            </td>
          </tr>
          <tr>
            <td colspan="1">物料编码</td>
            <td colspan="1">物料名称</td>
            <td colspan="1">规格型号</td>
            <td colspan="1">单位</td>
            <td colspan="1">数量</td>
            <td colspan="1">备注</td>
          </tr>
          <tr v-for="item in model.detailList" :key="item.outId">
            <td colspan="1">{{ item.no }}</td>
            <td colspan="1">{{ item.spareName }}</td>
            <td colspan="1">{{ item.ggxh }}</td>
            <td colspan="1">{{ item.unit }}</td>
            <td colspan="1">{{ item.num }}</td>
            <td colspan="1">{{ item.remark }}</td>
          </tr>
          <tr v-if="model.detailList.length<6" v-for="i in (6-model.detailList.length)" :key="i">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td colspan="2">合计</td>
            <td colspan="1"></td>
            <td colspan="1"></td>
            <td colspan="1">{{ model.detailList.reduce((num,item)=>num+=item.num,0) }}</td>
            <td colspan="1"></td>
          </tr>
        </table>
      </div>
      <div style="display:flex;justify-content:space-between ; margin: 10px auto;width: 1030px;">
        <div >{{ type? '领库':'退库' }}人：{{ model.createdUserName }}</div>
        <div>部门主管：{{ model.applyUserName }}</div>
        <div style="width: 150px;">仓管：</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      disabled: false,
      value1: 1,
      type: true,
      typeMap: {},
      model: {
        'yyId': null,
        'userTime': null,
        'type': null,
        'sbNo': null,
        'sbName': null,
        'sbLocation': null,
        'caller': null,
        'dispatcher': null,
        'repairMan': null,
        'content': null
      }
    }
  },
  created () {
    // 下拉框map
    // this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.OUT_STORE_FORM_TYPE)
  },
  methods: {
    base (record, type) {
      this.visible = true
      console.log(record)
      this.type = type
      this.model = record
      if (record.outFlag === 1) {
        this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.OUT_STORE_FORM_TYPE)
      } else {
        this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SPARE_BACK_FORM_TYPE)
      }
    },
    handleCancel (values) {
      this.visible = false
      this.$emit('ok')
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  background: #fff;
}
.title{
  text-align: center;
  font-size:18px;
}
.tables{
  margin: 10px auto;
   width: 1030px;
  font-size: 14px;
  overflow-x:auto;
  table {
        min-width:100%;
        margin: 0 auto;
        border: 1px solid #D6D6D6;
        border-radius: 6px;
        border-collapse: collapse;
        font-weight: 400;
        table-layout:fixed;
    }
    th{
      color: #FFFFFF;
      background: #3762FC;
    }
    tr {
      height:26px;
    }
    th,
    td {
        border: 1px solid #D6D6D6;
        text-align: center;
        padding: 2px 10px;
        white-space: nowrap;
    }
}
.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>