client-eam-v5/src/components/customer/CustomPrintAssetInstance.vue

<template>
  <div class="container-fluid">
    <div class="row">
      <Navbar :title="$t('lang.CustomPrintAssetInstance.selectTemplateToPrintAssetCard')" is-go-back="true" />
    </div>
    <div v-for="modelData in modelDatas" :key="modelData.id" class="row box">
      <div class="form-inline">
        <div class="col-md-4 col-sm-6 col-sm-12 div-form">
          <p><strong>{{ $t('lang.CustomPrintAssetInstance.assetName') }}：</strong>{{ modelData.data['ai.name'].displayValue[0] }}</p>
        </div>
        <div class="col-md-4 col-sm-6 col-sm-12 div-form">
          <p><strong>{{ $t('lang.CustomPrintAssetInstance.assetNumber') }}：</strong>{{ modelData.data['ai.assetNo'].displayValue[0] }}</p>
        </div>
        <div class="col-md-4 col-sm-6 col-sm-12 div-form">
          <p><strong>{{ $t('lang.CustomPrintAssetInstance.type') }}：</strong>{{ modelData.data['ai.type'].displayValue[0] }}</p>
        </div>
        <div class="col-md-4 col-sm-6 col-sm-12 div-form">
          <p><strong>{{ $t('lang.CustomPrintAssetInstance.categoryName') }}：</strong>{{ modelData.data['c.name'].displayValue[0] }}</p>
        </div>
        <div class="col-md-12 col-sm-12 col-sm-12 div-form">
          <strong>{{ $t('lang.CustomPrintAssetInstance.printTemplate') }}：</strong>
          <!-- <v-select :onChange="templateChange(this.value, modelData)" v-model="modelData.data['cpt.name'].displayValue[0]" :options="templates"></v-select> -->
          <select v-model="modelData.data['cpt.id'].displayValue[0]" class="form-control" @input="templateChange($event, modelData)">
            <option v-for="item in templates" :key="item.id" :value="item.id">{{ item.name }}</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row">
      <button type="button" class="btn btn-primary btn-block" @click="print()">{{ $t('lang.CustomPrintAssetInstance.printing') }}</button>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../../common/Common.js';
import { Notify } from 'pc-component-v3';

export default {
  
  components: {
    
  },

  data : function(){
    return{
      modelDatas: [],
      infoWindowNo: 12629,
      fieldValue: {},
      displayName: 'name',
      templates: [],
      loading: false,
    };
  },
  mounted: function() {
    this.initData();
    this.loadTemplateData();
  },
  methods: {
    // 打印模板change
    templateChange: function(event, modelData){
      var element = event.currentTarget;
      var templateId = element.value;
      this.setTemplate(modelData.id, templateId);
    },

    // 设置模板
    setTemplate: function(assetInstanceId, templateId){
      var _self = this;
      _self.loading=true;
      $.ajax({
        url : Common.getApiURL('AssetInstanceResource/setPrintTemplate'),
        type : 'get',
        beforeSend:function(request){
          Common.addTokenToRequest(request);
        },
        data: {
          assetInstanceId: assetInstanceId,
          templateId: templateId,
        },
        success : function(data){
          if(data.errorCode == 0) {
            _self.loading=false;
          } else {
            Notify.error('提示', data.errorMessage, false);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown){
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    // 初始化数据
    initData: function(){
      var _self = this;
      var uuid = _self.$route.query.uuid;
      if(uuid != null){
        var modelDatas = localStorage.getItem(uuid);
        if(modelDatas != null){
          modelDatas = JSON.parse(modelDatas);
          console.log(modelDatas);
          if(modelDatas != undefined && modelDatas.length > 0){
            modelDatas.forEach(function(item){
              _self.modelDatas.push(item);
            });
          }
        }
      }
    },

    /**
             * 加载打印模板数据
             */
    loadTemplateData: function(){
      var _self = this;
      $.ajax({
        url : Common.getApiURL('printPageResource/loadCustomerTemplate'),
        type : 'get',
        dataType : 'json',
        beforeSend:function(request){
          Common.addTokenToRequest(request);
        },
        success : function(data){
          if(data.errorCode != 0) {
            Notify.error('提示', data.errorMessage, false);
            return;
          }
          if(data.datas != undefined && data.datas.length > 0){
            data.datas.forEach(function(item){
              item.label = item.name;
              item.value = item.id;
            });
          }
          _self.templates = data.datas;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown){
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    print: function(){
      var recordIds = [];
      if(this.modelDatas != undefined && this.modelDatas.length > 0){
        this.modelDatas.forEach(function(item){
          recordIds.push(item.id);
        });
      }

      if(recordIds.length > 0){
        var path = './#/single/PrintPage?printApi=AssetInstanceResource%2Fprint&recordIds={RecordIds}';
        path = path.replace('{RecordIds}', recordIds);                    
        window.open(path);
      }else{
        Notify.error('错误', '没有可操作的数据', true);
      }
    },

  },
};

</script>

<style scoped>
    .box {
        border: 1px #ccc solid;
        margin-bottom: 15px;
        padding-top: 10px;
        border-radius: 5px;
        background-color: #ffffff;
    }

    .div-form {
        margin-bottom: 10px;
    }
</style>