kd-aiot-frontend-eam/src/views/maintenance/repair/outsourcingOrder/components/appointDialog.vue

<template>
  <el-dialog
    title="委外单"
    :visible.sync="appointVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="60%"
  >
    <div class="main_container"  id='printBill'>
        <div class="basic-details-title border-none">
          <span class="border-span">委外信息</span>
        </div>
        <el-descriptions title="" :column="2" size="medium" border>
          <el-descriptions-item>
            <template slot="label"> 工单编号 </template>
            {{ workOrderInfo ? workOrderInfo.code : '' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 发布时间 </template>
            {{ workOrderInfo ? workOrderInfo.createTime : '' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 委外单位</template>
            {{ workOrderInfo ? workOrderInfo.outsourcUnit : ''}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 发布人 </template>
            {{ workOrderInfo ? workOrderInfo.createBy : '' }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 计划完成时间 </template>
            {{ workOrderInfo ? workOrderInfo.planCompletionTime : '' }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="basic-details-title border-none">
          <span class="border-span">设备信息</span>
        </div>
        <el-descriptions title="" :column="2" size="medium" border>
          <el-descriptions-item>
            <template slot="label"> 设备编码 </template>
            {{ equipmentInfo ? equipmentInfo.code : '' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 权属部门 </template>
            {{ equipmentInfo ? equipmentInfo.ownershipGroupName : ''}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 设备名称 </template>
            {{ equipmentInfo ? equipmentInfo.name : '' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 权属人 </template>
            {{  equipmentInfo ? equipmentInfo.ownershipUserName : '' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 权属人电话 </template>
            {{ equipmentInfo ? equipmentInfo.ownershipUserMobile : ''  }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 固定资产编码 </template>
            {{ equipmentInfo ? equipmentInfo.fixCode : '' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label" :span="2"> 设备位置 </template>
            {{ equipmentInfo.position}}
          </el-descriptions-item>
        </el-descriptions>
        <div class="basic-details-title border-none">
          <span class="border-span">报修信息</span>
        </div>
        <el-descriptions title="" :column="2" size="medium" border>
          <el-descriptions-item>
            <template slot="label"> 报修记录编号 </template>
            {{ infoData ? infoData.code : '' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 报修时间 </template>
            {{ infoData ? infoData.createTime : '' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 报修人 </template>
            {{ infoData ? infoData.requestUserName : '' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 报修人电话 </template>
            {{ infoData ? infoData.repairsDeptPhone : '' }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label" > 故障描述 </template>
            {{ infoData ? infoData.remark : '' }}
          </el-descriptions-item>
<!--          <el-descriptions-item :span="2">
            <template slot="label" > 图片 </template>
            <el-image
              v-for="(item, index) in infoData.repairsImg"
              :key="index"
              style="width: 100px; height: 100px; margin-right: 5px"
              :src="item.url"
              :preview-src-list="[item.url]"
            />
          </el-descriptions-item> -->
        </el-descriptions>
        <div class="container-write">
            <div class="write-box">
               <span class="box-tips">验收说明：</span>
            </div>
            <div class="write-choose">
              <div class="choose-item"><span class="item-span"></span>通过</div>
              <div class="choose-item"><span class="item-span"></span>不通过</div>
            </div>
            <div class="write-name"><span class="name-tips">验收人：</span></div>
            <div class="write-name"><span class="name-tips">验收日期：</span></div>
        </div>
    </div>
    <div class="btns">
      <el-button type="primary" size="small" @click="billPrintClick">打印</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getOutsourceInfo , getRepairById } from '@/api/maintenance/repair_report';
import { getAssetInfo } from '@/api/ledgerAssets';
import print from 'print-js'
export default {
  props: {

  },
 watch: {

  },
  data () {
    return {
      appointVisible:false,
      workOrderInfo: {},
      equipmentInfo: {},
      infoData: {},
    }
  },
  created () {

  },
  methods: {
    async init(row){
      this.appointVisible = true
	  console.log('row',row)
      const res = await getOutsourceInfo(row.id)
      this.workOrderInfo = res
      this.getSbinfo(row.equiId)
      this.getBxinfo(row.repairRequestId)
    },

    getSbinfo (params) {
      getAssetInfo(params).then(res => {
          this.equipmentInfo = res
		  this.$set(this.equipmentInfo,'position',res.positionList[0].pathName?res.positionList[0].pathName:'')
      })
    },

    getBxinfo(params){
      getRepairById(params).then(res=>{
           this.infoData = res
           // 处理图片
            if (this.infoData && this.infoData.repairsImg) {
              const repairsImg = this.infoData.repairsImg
              this.infoData.repairsImg = []
              repairsImg.split(',').map(item => {
                imageView(item).then(res => {
                  this.infoData.repairsImg.push({
                    name: item.substring('/download/'.length),
                    url: res
                  })
                })
                return
              })
            }
      })
    },



    handleClose () {
      this.appointVisible = false
    },

    billPrintClick(){
      const style = '@page {margin:0 10mm};'//打印时去掉眉页眉尾
      //打印为什么要去掉眉页眉尾？因为眉页title时打印当前页面的title，相当于是获取html中title标签里面的内容，但是比如我打印的内容只是一个弹框里面的内容，是没有title的，这时候就会出现undefined，为了避免出现这种情况，就可以隐藏眉页眉尾
      printJS({
        printable: 'printBill',// 标签元素id
        type: 'html',
        header: '',
        targetStyles: ['*'],
        style
      });
      //各个配置项
      //printable:要打印的id。
      //type:可以是 html 、pdf、 json 等。
      //properties:是打印json时所需要的数据属性。
      //gridHeaderStyle和gridStyle都是打印json时可选的样式。
      //repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。
      //scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用，此时自己设置的原来想要打印的样式就会失效，在打印预览时可以看到效果
      //targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。
      //style:传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子。
      //ignoreElements：传入要打印的div中的子元素id，使其不打印。非常好用
    },





  }
}
</script>

<style lang="scss" scoped>
.dialog_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.btns {
  text-align: right;
  margin: 10px 0;
}
.border-span{
	width: 100%;
	margin: 15px 0;
	display: inline-block;
}
:deep(.main_container){
     page-break-after:always;
	 width: 100%;
   .el-descriptions--medium.is-bordered .el-descriptions-item__cell{
      min-width:120px!important;
    }
    .container-write{
	  width: 97%;
      margin:20px 0;
    }
    .write-box{
      width:100%;
      height:100px;
      border:1px solid #999;
      border-radius:4px;
      padding: 10px;
    }
    .write-choose{
      width:100%;
      margin:15px auto;
      display:flex;
      align-items:center;
      .choose-item{
        margin-right:10px;
        display:flex;
        align-items:center;
        width:80px;
        .item-span{
          display:inline-block;
          width:15px;
          height:15px;
          border:1px solid #999;
          margin-right:4px;
        }
      }
    }
    .write-name{
      margin-bottom:10px;
      display:flex;
      align-items:center;
      justify-content: flex-end;
      .name-tips{
        margin-right:150px;
        width:80px;
      }
    }
}

</style>