yos_web/src/template/contractModel/DirectSelling.vue

<template>
  <div class="size-span">
    <div class="normal-panel container-padding">
      <el-button size="small" @click="onShow">预览</el-button>
    </div>
    <div id="directSelling">
      <div style="text-align: center;font-size: 24px">{{information.title}}</div>
      <div class="normal-panel container-padding">
        <span class="title-bold">
          甲方（供方）：
        </span>
        <span>
          {{clauseData.parta.enterprisename}}
        </span>
      </div>
      <div class="normal-panel container-padding">
        <span class="title-bold">
          乙方（需方）：
        </span>
        <span>
          {{clauseData.partb.enterprisename}}
        </span>
      </div>
      <div class="normal-panel container-padding">
        <span class="title-bold">
          合同编号 ：
        </span>
        <span>
          {{information.billno}}
        </span>
      </div>
      <div class="normal-panel container-padding">
        <span class="title-bold">
          签约地点 ：
        </span>
        <span>
          {{clauseData.parta.address}}
        </span>
      </div>
      <div class="normal-panel container-padding">
        <div style="margin-left: 30px;height: 40px">
          甲乙双方在平等，自愿的基础上就班尼戈Conex|Bänninger品牌的阀门购销事宜达成一致意见,现依据《中华人民共和国民法典》的有关规定，特签定本合同，以共同遵守。
        </div>
      </div>
      <div class="normal-panel container-padding">
        <span class="title-bold">
          第一条
        </span>
        <span class="title-left">
          基本要求：
        </span>
      </div>
      <div class="normal-panel container-padding">
        <span >
          1. 工程名称：{{information.projectname}}
        </span>
      </div>
      <div class="normal-panel container-padding">
        <span >
          2. 工程地址：{{information.province + information.city + information.county + information.address}}
        </span>
      </div>
      <div class="normal-panel container-padding">
        <span >
          3. 收货人：{{information.name}}
        </span>
        <span style="padding-left: 40px">
          联系电话：{{information.phonenumber}}
        </span>
      </div>
      <div class="normal-panel container-padding">
        <span>
          4. 付款方式：
        </span>
        <span v-if="payWaySelect">
          <el-select v-model="selectData.payWay" placeholder="请选择" size="mini">
            <el-option
                v-for="item in options.payWay"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </span>
        <span v-if="!payWaySelect">
          {{selectData.payWay}}
        </span>
      </div>
      <div class="normal-panel container-padding">
        <p v-for="(item,index) in clauseList" style="padding-left: 10px;margin-bottom: 10px">
          <span>
            4.{{index + 1}}
          </span>
          <span>
            <el-input size="mini" style="width: 200px" v-model="item.value" placeholder="请输入内容"></el-input>
          </span>
          <span style="padding-left: 10px" >
            <el-button size="mini" icon="el-icon-plus" circle @click="clauseAdd"></el-button>
          </span>
          <span style="padding-left: 10px" v-if="clauseList.length > 1">
            <el-button size="mini" icon="el-icon-minus" circle></el-button>
          </span>
        </p>
      </div>
      <div class="normal-panel container-padding">
        <span >
          3. 收货人：{{information.name}}
        </span>
        <span style="padding-left: 40px">
          联系电话：{{information.phonenumber}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import printJS from "print-js";
export default {
  name: "DirectSelling",
  data(){
    return {
      information:'',
      clauseData:'',
      input:'',
      payWaySelect:true,
      printData: {
        printable: 'directSelling',
        ignore: ['no-print']
      },
      selectData:{
        payWay:''
      },
      options:{
        payWay:[
          {
            value:'订货付款',
            label:'订货付款'
          },
          {
            value:'订单付款',
            label:'订单付款'
          }
        ]
      },
      clauseList:[
        {
          value:''
        }
      ]
    }
  },
  methods:{
    async queryData(){
      const res = await this.$api.requested({
        "id": 20221121195102,
        "content": {
          "sa_contractid": this.$route.query.id
        },
      })
      console.log(res,"合同详情")
      this.information = res.data
    },
    async queryClause(){
      const res = await this.$api.requested({
        "id": 20230117112102,
        "content": {
          "sa_contractid": this.$route.query.id,
        "sys_enterpriseid":this.$route.query.sys_enterpriseid//选择的企业
        }
      })
      this.clauseData = res.data
      console.log(this.clauseData,'合同条款')
    },
    onShow(){
      this.payWaySelect = false
      setTimeout(() => {
        //需要定时执行的代码
        this.handlePrint(this.printData)
      }, 500)
    },
    handlePrint(params) {
     /* printJS({printable:params.printable, type:'html', showModal:true})*/

      printJS({
        printable: params.printable, // 'printFrom', // 标签元素id
        type: params.type || 'html',
        header: params.header, // '表单',
        targetStyles: ['*'],
        style: '', // 可选-打印时去掉眉页眉尾
        ignoreElements: params.ignore || [], // ['no-print']
        properties: params.properties || null
      })
      this.payWaySelect = true
    },
    clauseAdd(){
      this.clauseList.push({
        value: ""
      })
      console.log(this.clauseList)
    }
  },
  mounted() {

  },
  created() {
    this.queryData()
    this.queryClause()
  }
}
</script>

<style scoped>
  .title-bold{
    font-weight: bold;
  }
  .container-padding{
    position: relative;
    padding: 5px 16px 5px 16px;
  }
  .title-left{
    padding-left: 10px;
  }
</style>