合同

base-vue/src/views/modules/contract/contract.vue

@@ -8,6 +8,8 @@
         <el-button @click="getDataList()">查询</el-button>
         <el-button v-if="isAuth('tickets:contract:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
         <el-button v-if="isAuth('tickets:contract:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+        <el-button type="primary" @click="addAndPrint">打印</el-button>
+        <el-button type="primary" @click="addTempHandle">模板生成</el-button>
       </el-form-item>
     </el-form>
     <el-table
@@ -105,11 +107,14 @@
     </el-pagination>
     <!-- 弹窗, 新增 / 修改 -->
     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <temp-add-or-update v-if="tempVisible" ref="tempAdd"></temp-add-or-update>
   </div>
 </template>
 
 <script>
   import AddOrUpdate from './contract-add-or-update'
+  import TempAddOrUpdate from './temp-add-or-update'
+  import { getLodop } from '@/utils/lodop/LodopFuncs'
   export default {
     data () {
       return {
@@ -122,11 +127,13 @@
         totalPage: 0,
         dataListLoading: false,
         dataListSelections: [],
-        addOrUpdateVisible: false
+        addOrUpdateVisible: false,
+        tempVisible: false
       }
     },
     components: {
-      AddOrUpdate
+      AddOrUpdate,
+      TempAddOrUpdate
     },
     activated () {
       this.getDataList()
@@ -205,6 +212,25 @@
             }
           })
         })
+      },
+      // 打印
+      addAndPrint () {
+        const LODOP = getLodop()
+        LODOP.SET_SHOW_MODE('HIDE_DISBUTTIN_SETUP', 1)// 隐藏那些无效按钮
+        // 设置纸张大小为 A4
+        LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4")
+        // 获取弹窗内容并转换为 HTML 字符串
+        const popupContent = this.$refs.tempAdd.innerHTML
+        // 添加弹窗内容到打印任务
+        LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", popupContent)
+        LODOP.PREVIEW()// 预览
+      },
+      // 生成模板
+      addTempHandle (id) {
+        this.tempVisible = true
+        this.$nextTick(() => {
+          this.$refs.tempAdd.init(id)
+        })
       }
     }
   }

base-vue/src/views/modules/contract/contract_back.vue

@@ -115,18 +115,18 @@
     </el-pagination>
     <!-- 弹窗, 新增 / 修改 -->
     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
-    <temp-add v-if="tempVisible" ref="tempAdd"></temp-add>
+    <temp-add-or-update v-if="tempVisible" ref="tempAdd"></temp-add-or-update>
   </div>
 </template>
 
 <script>
 import AddOrUpdate from './contract-add-or-update'
-import TempAdd from './temp-add'
+import TempAddOrUpdate from './temp-add-or-update'
 import { getLodop } from '@/utils/lodop/LodopFuncs'
 export default {
   components: {
     AddOrUpdate,
-    TempAdd
+    TempAddOrUpdate
   },
   data () {
     return {

base-vue/src/views/modules/contract/temp-add-or-update.vue

@@ -0,0 +1,179 @@
+<template>
+  <el-dialog
+  title="产品供应合同"
+  :close-on-click-modal="false"
+  :visible.sync="visible">
+  <div class="dialog_content" id="popupContent">
+    <div class="zd-row">
+      <div class="zd-col-12 item_p">需方：kooriookami</div>
+      <div class="zd-col-12 item_p">合同编号：18100000000</div>
+    </div>
+    <div class="zd-row">
+      <div class="zd-col-12 item_p">供方：上海诺力智能科技有限公司</div>
+      <div class="zd-col-12 item_p">签订时间：2025年1月14日</div>
+    </div>
+    <p class="tip_p">一、产品明细单</p>
+    <table class="det_table">
+      <tr>
+        <th width="50px">物料编号</th>
+        <th width="50px">物料名称</th>
+        <th width="50px">型号</th>
+        <th width="50px">数量</th>
+        <th width="50px">单位</th>
+        <th width="50px">单价（元）</th>
+        <th width="50px">总价（元）</th>
+        <th width="50px">备注</th>
+      </tr>
+      <tr v-for="(e, i) in dataList" :key="i">
+        <td>{{ e.materialCode }}</td>
+        <td>直角减速机</td>
+        <td>SVX85-20</td>
+        <td>1</td>
+        <td>个</td>
+        <td>1000</td>
+        <td>1000</td>
+        <td></td>
+      </tr>
+    </table>
+    <div class="zd-row">
+      <div class="zd-col-12 num_p">共计人民币金额：（大写） XXXXXXX</div>
+      <div class="zd-col-12 num_p">含13%增值税</div>
+    </div>
+    <p class="tip_p">二、质量要求、技术标准、供方对质量负责的条件和期限:技术标准符合行业标准。</p>
+    <p class="tip_p">三、售后服务:保修期6个月，人为造成的损坏不在质保范围内。</p>
+    <p class="tip_p">四、交货时间、地点:货期:待定;交货地:待客户通知。</p>
+    <p class="tip_p">五、运输方式及到达站和费用负担:由供方负担。</p>
+    <p class="tip_p">六、包装标准:按国内标准包装。</p>
+    <p class="tip_p">八、结算方式:款到发货，付款方式:电汇。</p>
+    <p class="tip_p">八、违约责任:按《中华人民共和国民法典》执行。</p>
+    <p class="tip_p">九、解决合同纠纷的方式:买卖双方首先友好协商解决，协商不成，任何一方均可向有管辖权法院起诉。</p>
+    <p class="tip_p">十、其它约定事项:合同扫描件有效，签字盖章之日起生效。</p>
+    <table class="det_table">
+      <tr>
+        <th width="50%">需方：</th>
+        <th width="50%">供方：</th>
+      </tr>
+      <tr>
+        <td>
+          <div>单位名称:</div>
+          <div>地址:</div>
+          <div>委托代理电话:</div>
+          <div>传真:</div>
+          <div>开户银行:</div>
+          <div>帐号:</div>
+        </td>
+        <td>
+          <div>单位名称:上海诺力智能科技有限公司(盖章)</div>
+          <div>地址:上海青浦区徐泾镇高光路215弄99号4号楼302室</div>
+          <div>委托代理电话:</div>
+          <div>传真:</div>
+          <div>开户银行:招商银行虹桥支行</div>
+          <div>帐号:12191702501091</div>
+        </td>
+      </tr>
+    </table>
+  </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      <el-button type="primary" @click="addAndPrint">打印</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getLodop } from '@/utils/lodop/LodopFuncs'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataList: [{materialCode: 'S9410002000002'}]
+    }
+  },
+  methods: {
+    init (id) {
+      this.visible = true
+    },
+    // 表单提交
+    dataFormSubmit () {},
+    // 打印
+    addAndPrint () {
+      const LODOP = getLodop()
+      // LODOP.SET_SHOW_MODE('HIDE_DISBUTTIN_SETUP', 1)// 隐藏那些无效按钮
+      // 设置纸张大小为 A4
+      LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4")
+      LODOP.ADD_PRINT_TEXT(0, 0, 700, 50, "产品供应合同")
+      LODOP.SET_PRINT_STYLEA(0, "Alignment", 2); // 2 表示水平居中
+      LODOP.SET_PRINT_STYLEA(0, "FontSize", 12); // 设置字号为 12
+      // 获取弹窗内容并转换为 HTML 字符串
+      const popupContent = document.getElementById('popupContent').innerHTML
+      const printHtml = `
+        <style>
+          .zd-row {width: 100%;display: flex;}
+          .zd-col-12 {width: 50%;}
+          .dialog_content {width: 100%;}
+          .det_table {width: 100%; border-collapse: collapse;border: 1px solid #000;}
+          .det_table th, .det_table td {border: 1px solid #000;font-size: 10px; line-height: 23px;}
+        </style>
+        ${popupContent}
+      `
+      // 添加弹窗内容到打印任务
+      LODOP.ADD_PRINT_HTM(50, 50, "100%", "100%", printHtml)
+      LODOP.PREVIEW()// 预览
+    },
+  }
+}
+</script>
+
+<style scoped>
+.zd-row {
+  width: 100%;
+  display: flex;
+}
+.zd-col-12 {
+  width: 50%;
+}
+.dialog_content {
+  width: 100%;
+}
+.item_p {
+  font-size: 14px;
+  color: #606266;
+  line-height: 1.5;
+  padding-bottom: 12px;
+}
+.tip_p {
+  font-size: 16px;
+  font-weight: 700;
+  color: #606266;
+  line-height: 1.8;
+  margin: 0;
+}
+.num_p {
+  font-size: 14px;
+  color: #606266;
+  line-height: 1.5;
+  margin: 10px 0;
+}
+.det_table {
+  border-collapse: collapse;
+  border: 1px solid #EBEEF5;
+  margin-top: 10px;
+}
+.det_table th {
+  font-size: 14px;
+  line-height: 23px;
+  color: #909399;
+  font-weight: 700;
+  border: 1px solid #EBEEF5;
+  text-align: center;
+}
+.det_table td {
+  font-size: 14px;
+  line-height: 23px;
+  color: #606266;
+  padding: 12px 0;
+  border: 1px solid #EBEEF5;
+  text-align: center;
+}
+</style>

base-vue/src/views/modules/contract/temp-add.vue

@@ -1,122 +0,0 @@
-<template>
-  <el-dialog
-  title="产品供应合同"
-  :close-on-click-modal="false"
-  :visible.sync="visible">
-    <el-descriptions :column="2">
-      <el-descriptions-item label="需方">kooriookami</el-descriptions-item>
-      <el-descriptions-item label="合同编号">18100000000</el-descriptions-item>
-      <el-descriptions-item label="供方">上海诺力智能科技有限公司</el-descriptions-item>
-      <el-descriptions-item label="签订时间">2025年1月14日</el-descriptions-item>
-    </el-descriptions>
-    <h2>一、产品明细单</h2>
-    <el-table
-    :data="dataList"
-    border
-    style="width: 100%;">
-      <el-table-column
-        type="index"
-        width="50"/>
-      <el-table-column
-        prop="materialCode"
-        header-align="center"
-        align="center"
-        label="物料编号"/>
-      <el-table-column
-        prop="materialName"
-        header-align="center"
-        align="center"
-        label="物料名称"/>
-      <el-table-column
-        prop="materialName"
-        header-align="center"
-        align="center"
-        label="型号"/>
-      <el-table-column
-        prop="materialName"
-        header-align="center"
-        align="center"
-        label="数量"/>
-      <el-table-column
-        prop="materialName"
-        header-align="center"
-        align="center"
-        label="单位"/>
-      <el-table-column
-        prop="materialName"
-        header-align="center"
-        align="center"
-        label="单价（元）"/>
-      <el-table-column
-        prop="materialName"
-        header-align="center"
-        align="center"
-        label="总价（元）"/>
-      <el-table-column
-        prop="materialName"
-        header-align="center"
-        align="center"
-        label="备注"/>
-    </el-table>
-    <el-row>
-      <el-col :span="12">共计人民币金额：（大写） XXXXXXX</el-col>
-      <el-col :span="12">含13%增值税</el-col>
-    </el-row>
-    <p class="tip_p">二、质量要求、技术标准、供方对质量负责的条件和期限:技术标准符合行业标准。</p>
-    <p class="tip_p">三、售后服务:保修期6个月，人为造成的损坏不在质保范围内。</p>
-    <p class="tip_p">四、交货时间、地点:货期:待定;交货地:待客户通知。</p>
-    <p class="tip_p">五、运输方式及到达站和费用负担:由供方负担。</p>
-    <p class="tip_p">六、包装标准:按国内标准包装。</p>
-    <p class="tip_p">八、结算方式:款到发货，付款方式:电汇。</p>
-    <p class="tip_p">八、违约责任:按《中华人民共和国民法典》执行。</p>
-    <p class="tip_p">九、解决合同纠纷的方式:买卖双方首先友好协商解决，协商不成，任何一方均可向有管辖权法院起诉。</p>
-    <p class="tip_p">十、其它约定事项:合同扫描件有效，签字盖章之日起生效。</p>
-    <el-descriptions direction="vertical" :column="2" border>
-      <el-descriptions-item label="需方" label-class-name="my-label">
-        <div>单位名称:</div>
-        <div>地址:</div>
-        <div>委托代理电话:</div>
-        <div>传真:</div>
-        <div>开户银行:</div>
-        <div>帐号:</div>
-      </el-descriptions-item>
-      <el-descriptions-item label="供方" label-class-name="my-label">
-        <div>单位名称:上海诺力智能科技有限公司(盖章)</div>
-        <div>地址:上海青浦区徐泾镇高光路215弄99号4号楼302室</div>
-        <div>委托代理电话:</div>
-        <div>传真:</div>
-        <div>开户银行:招商银行虹桥支行</div>
-        <div>帐号:12191702501091</div>
-      </el-descriptions-item>
-    </el-descriptions>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      visible: false,
-      dataList: []
-    }
-  },
-  methods: {
-    init (id) {
-      this.visible = true
-    },
-    // 表单提交
-    dataFormSubmit () {}
-  }
-}
-</script>
-
-<style scoped>
->>>.my-label {
-  width: 50%;
-  background: #fff;
-}
-</style>

base-vue/src/views/modules/tickets/tickets-add-or-update.vue

@@ -100,7 +100,7 @@
     methods: {
       getDictDetail () {
         this.$http({
-          url: this.$http.adornUrl('api/dict/dictDetail?code=DEMAND_TYPE'),
+          url: this.$http.adornUrl('/api/dict/dictDetail?code=DEMAND_TYPE'),
           method: 'get'
         }).then(({data}) => {
           console.log(data)