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;">{{ oldOrNew === 1 ? '时代思康':'龙岩思康' }}新材料有限公司</span></div>
        <div style="font-size:26px;font-weight:700">{{ type? BaseTool.Object.getField(typeMap,model.type):'材料退库' }}</div>
      </div>
      <div style="display:flex;justify-content:space-between; margin: 10px auto;width: 1030px;">
        <span>
          {{ BaseTool.Object.getField(deptYYMap,model.applyDept) }}
        </span>
        <div>维修单号：{{ model.repairNo }}</div>
        <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="4" style="text-align:left;">
              项目：{{ model.projectName }}
            </td>
            <td colspan="3" style="text-align:left;">
              成本归属：{{ model.feeFrom }}
            </td>
          </tr>
          <tr>
            <td colspan="8" style="text-align:left;">
              用途：{{ model.remark }}
            </td>
          </tr>
          <tr>
            <td colspan="1" style="min-width:210px;">物料编码</td>
            <td colspan="1" style="min-width:120px;">物料名称</td>
            <td colspan="1" style="max-width:480px;">规格型号</td>
            <td colspan="1" style="min-width:65px;">货架号</td>
            <td colspan="1" style="min-width:50px;">单位</td>
            <td colspan="1" style="min-width:50px;">数量</td>
            <td colspan="1" style="min-width:50px;">仓库名称</td>
            <td colspan="1" style="min-width:50px;">备注</td>
          </tr>
          <tr v-for="item in model.detailList" :key="item.id">
            <td colspan="1">{{ item.no }}</td>
            <td colspan="1">{{ item.spareName }}</td>
            <td colspan="1" style="">{{ item.ggxh }}</td>
            <td colspan="1">{{ item.storePosition }}</td>
            <td colspan="1">{{ item.unit }}</td>
            <td colspan="1">{{ item.num }}</td>
            <td colspan="1">{{ item.storeName }}</td>
            <td colspan="1">{{ item.remark }}</td>
          </tr>
          <tr v-show="model.detailList.length<6" v-for="i in ((6-model.detailList.length)>0?(6-model.detailList.length):0)" :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"></td>
            <td colspan="1">{{ model.detailList.reduce((num,item)=>num+=item.num,0) }}</td>
            <td colspan="1"></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,
      oldOrNew: 1,
      typeMap: {},
      deptYYMap: {},
      model: {
        'yyId': null,
        'oldOrNew': null,
        'userTime': null,
        'type': null,
        'sbNo': null,
        'sbName': null,
        'sbLocation': null,
        'caller': null,
        'dispatcher': null,
        'repairMan': null,
        'content': null,
        'feeFrom': null
      }
    }
  },
  created () {
    // 下拉框map
    // this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.OUT_STORE_FORM_TYPE)
    this.deptYYMap = { ...this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.OUT_STORE_FORM_DEPT_CODE), ...this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SBB) }
  },
  methods: {
    base (record, type) {
      this.visible = true
      console.log(record)
      this.type = type
      this.oldOrNew = record.oldOrNew
      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 {
        margin: 0 auto;
        border: 1px solid #D6D6D6;
        border-radius: 6px;
   width: 1030px;
        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>