renli-pc/src/pages/eashier/service/detail/printform.vue

<template>
  <el-dialog :close-on-click-modal="false" v-dialogDrag title="打印" append-to-body :visible.sync="printDialogVisible"
    width="60%">
    <div id="printService" class="printDiv">
      <div class="text-center text-grey padding-xs">
        服务
      </div>
      <hr>
      <br>
      <el-form :model="printForm">
        <el-form-item label="门店:"> {{ printForm.storeName }} </el-form-item><br>
        <el-form-item label="时间:"> {{ printForm.cashDate }} </el-form-item><br>
        <el-form-item label="单号:">{{ printForm.cashNum }} </el-form-item><br>
        <el-form-item label="顾客:">
          {{ printForm.memberName ? printForm.memberName : '散客' }}/{{ printForm.mobilePhone ? printForm.mobilePhone : '******'
          }}
        </el-form-item><br>
        <el-form-item label="收银:">
          <div>{{ staffName }} </div>
        </el-form-item>
        <br />
        <hr class="text-grey">
        <div style="height:8px"></div>
        <!-- <el-table :data="printForm.projectList" style="wdith: 180px">
          <el-table-column align="left" prop="projectName" label="项目"></el-table-column>
          <el-table-column align="center" prop="transactionPrice" label="价格"></el-table-column>
        </el-table> -->
        <div class="print-table flex justify-center align-center">
          <div class="text-left" style="width:50%">项目 </div>
          <div class="text-left" style="width:25%">标价 </div>
          <div class="text-left" style="width:25%">折后 </div>
        </div>
        <div style="height:15px"></div>
        <div class="print-table flex justify-center align-center" v-for="(item, index) in printForm.projectList">
          <div class="text-left" style="width:50%"> <span class="text-cyan text-out">{{ item.projectName }}</span></div>
          <div class="text-left" style="width:25%"> <span class="text-red text-price">{{ item.priceMember }}</span></div>
          <div class="text-left" style="width:25%"> <span class="text-red text-price">{{ item.discountmoney }}</span>
          </div>
        </div>
        <div style="height:8px"></div>
        <hr class="text-grey">
        <div style="height:8px"></div>
        <div v-if="recList.length != 0">
          <div class="print-table flex justify-center align-center">
            <div class="text-left" style="width:50%">充值帐户 </div>
            <div class="text-left" style="width:25%;padding-right:5px">支付 </div>
            <div class="text-left" style="width:25%;padding-right:5px">剩余 </div>
          </div>
          <div style="height:15px"></div>
          <div class="print-table flex justify-center align-center" v-for="(item, index) in recList">
            <div class="text-left" style="width:50%"> <span class="text-cyan text-out">{{ item.rechargeTypeName }}</span>
            </div>
            <div class="text-left" style="width:25%"> <span class="text-red text-price">{{ item.spendMoney }}</span></div>
            <div class="text-left" style="width:25%"> <span class="text-red text-price">{{ item.cardRestMoney }}</span>
            </div>
          </div>
        </div>
        <div v-if="printForm.payLists.length != 0">
          <div class="print-table flex justify-center align-center">
            <div class="text-left" style="width:50%">支付方式 </div>
            <div class="text-left" style="width:50%;">支付 </div>
          </div>
          <div style="height:15px"></div>
          <div class="print-table flex justify-center align-center" v-for="(item, index) in printForm.payLists">
            <div class="text-left" style="width:50%"> <span class="text-cyan text-out">{{ item.payName }}</span></div>
            <div class="text-left" style="width:50%"> <span class="text-red text-price">{{ item.payMoney }}</span></div>
          </div>
        </div>
        <!-- <div class="flex justify-start align-center  padding-top-xs padding-bottom-xs">
            <div style="width:33%">卡付: <span class="text-red text-price">{{item.collectionRechargeAmount}}</span></div>
            <div style="width:33%">现付: <span class="text-red text-price">{{item.collectionCashAmount}}</span></div>
            <div style="width:33%">疗程付: <span class="text-red text-price" v-if="item.courseAccountId!=null">{{item.transactionPrice}}</span><span class="text-red text-price" v-else>0</span></div>
          </div> -->
        <!-- <el-form-item label="卡付:">
          <div class="form-width-sm">
            {{ printForm.collectionRechargeAmount }}
          </div>
        </el-form-item>
        <el-form-item label="现付:">
          <div style="width: 40px">
            {{ printForm.collectionCashAmount }}
          </div>
        </el-form-item>
        <br />
        <el-form-item label="卡包:">
          <div class="form-width-sm">
            <span v-if="printForm.courseAccountId != null">{{
                    printForm.projectName
                  }}</span>
          </div>
        </el-form-item>
        <el-form-item label="实付:">
          <div>{{ printForm.numPayMoney }}</div>
        </el-form-item> -->
        <br/>
        <br/>
        <el-form-item label="签名:">
          <div style="height: 30px; width: 80px">
            <img style="width: 100%" :src="printForm.signature" alt="" />
          </div>
        </el-form-item><br />
        <el-form-item label="服务热线:">
          {{ printForm.telephone }} </el-form-item><br />
        <el-form-item>
          {{ printForm.printDate | dateFormat }}
        </el-form-item>
        <br /><br />
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" plain @click="printDialogVisible = false">取 消</el-button>
      <el-button size="mini" type="primary" v-print="'#printService'">打 印</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      printForm: {},
      printDialogVisible: false,
      staffName: sessionStorage.getItem("staffName"),
      recList: [],
    };
  },
  methods: {
    //组件传值
    show(form) {
      console.log(form);
      this.printForm = { ...form };
      let recList = [];
      form.projectList.forEach((item) => {
        recList = recList.concat(item.rechargeConsumeList);
      });
      this.printForm.projectList.forEach((item) => {
        item.discountmoney = ((item.collectionAmount * 1) + (item.collectionRechargeAmount * 1)).toFixed(2) * 1;
      })
      this.recList = recList;
      
      console.log(form.projectList)
      // console.log(this.recList)
      this.printDialogVisible = true;
    },
  },
};
</script>

<style scoped>
.printDiv .el-form-item {
  margin-bottom: 0px;
}

.printDiv .el-form-item__label,
.el-form-item__content {
  font-size: 12px;
  color: black;
  font-family: "宋体";
  padding: 0 5px 0 0;
}

.printDiv {
  width: 200px;
  margin: 0 auto;
}

.printDiv .el-table td,
.printDiv .el-table th {
  padding: 0;
  font-size: 12px;
  color: black;
  font-weight: 300;
}
</style>