2023-4-19

src/HDrpManagement/serveWorkBill/modules/checkBill/index.vue

@@ -22,6 +22,9 @@
         </template>
         <template v-slot:opreation="scope">
           <slot name="download" :data="scope.data"></slot>
+          <printTable :data="scope.data">
+
+          </printTable>
         </template>
       </tableLayout>
     </div>
@@ -41,8 +44,10 @@
 </template>
 
 <script>
+import printTable from './printTable'
 export default {
   props:["data"],
+  components:{printTable},
   data () {
     return {
       tableHieght:"calc(100vh - 380px)",

src/HDrpManagement/serveWorkBill/modules/checkBill/printTable.vue

@@ -0,0 +1,101 @@
+
+<template>
+  <div>
+    <el-button type="text" size="mini" @click="compile">生成图片</el-button>
+    <el-dialog :visible.sync="visible" append-to-body width="1000px">
+      <table id="table" border="1" style="border-collapse: collapse;border:1px solid black;">
+        <tr>
+          <td style="background: #cccccc">服务分类</td>
+          <td>安装培训</td>
+          <td style="background: #cccccc">应用系统</td>
+          <td>燃气系统</td>
+          <td style="background: #cccccc">工单负责人</td>
+          <td>陈海洋</td>
+        </tr>
+        <tr>
+          <td style="background: #cccccc">项目名称</td>
+          <td>安装培训</td>
+          <td style="background: #cccccc">业务员负责人</td>
+          <td>燃气系统</td>
+          <td style="background: #cccccc">服务经销商</td>
+          <td>陈海洋</td>
+        </tr>
+        <tr>
+          <td style="background: #cccccc">联系人</td>
+          <td>安装培训</td>
+          <td style="background: #cccccc">联系方式</td>
+          <td>燃气系统</td>
+          <td style="background: #cccccc">地址</td>
+          <td>陈海洋</td>
+        </tr>
+        <tr>
+          <td>培训人员姓名</td>
+          <td>职务</td>
+          <td>电话</td>
+          <td>所属经销商</td>
+        </tr>
+
+        <tr>
+          <td>培训产品名</td>
+          <td>编码</td>
+          <td>数量</td>
+          <td>型号</td>
+          <td>型规格</td>
+        </tr>
+
+        <tr>
+          <td>现场培训内容</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>现场互动及测试培训效果</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>客户意见及签字确认:</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>反应速度</td>
+          <td></td>
+          <td>配合态度</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td></td>
+          <td>尊敬的用户，感谢您一直以来对我们公司的信任和支持，为更好的为您提供优质服务和产品，请允许我们的客户人员带回您最宝贵的意见! wwwibpchina.com</td>
+        </tr>
+      </table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['data'],
+  data () {
+    return {
+      visible: false,
+      tableData: ''
+    }
+  },
+  methods: {
+    async compile () {
+      this.visible = true
+      let res = await this.$api.requested({
+        "id": "20230211105803",
+        "version": 1,
+        "content": {
+          "sa_workorder_confirmationid": this.data.sa_workorder_confirmationid
+        }
+      })
+      console.log(res.data)
+    }
+  },
+  created () {
+  }
+}
+
+</script>
+<style scoped>
+</style>

src/views/printmodel/design/index.vue

@@ -825,8 +825,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
-// 拖拽
+<style scoped>
 .drag_item_box {
   height: 100%;
   padding: 6px;
@@ -860,14 +859,12 @@ export default {
   font-weight: bold;
 }
 
-// 默认图片
-/deep/ .hiprint-printElement-image-content {
+/* /deep/ .hiprint-printElement-image-content {
   img {
     // content: url("~@/assets/logo.png");
   }
-}
+} */
 
-// 辅助线样式
 /deep/ .toplineOfPosition {
   border: 0;
   border-top: 1px dashed purple;
@@ -888,7 +885,6 @@ export default {
   border-left: 1px dashed purple;
 }
 
-// 设计容器
 .card-design {
   overflow: hidden;
   overflow-x: auto;