新增合同打印功能
This commit is contained in:
hupeng
parent
63f406d6ac
commit
8b35e40094
@ -62,15 +62,16 @@
|
||||
"url": "^0.11.3",
|
||||
"video.js": "^7.21.5",
|
||||
"vue": "3.4.21",
|
||||
"vue-baidu-map-3x": "^1.0.34",
|
||||
"vue-dompurify-html": "^4.1.4",
|
||||
"vue-i18n": "9.10.2",
|
||||
"vue-router": "^4.3.0",
|
||||
"vue-types": "^5.1.1",
|
||||
"vue-ueditor-wrap": "^3.0.8",
|
||||
"vue3-print-nb": "^0.1.4",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"web-storage-cache": "^1.1.1",
|
||||
"xml-js": "^1.6.11",
|
||||
"vue-ueditor-wrap": "^3.0.8",
|
||||
"vue-baidu-map-3x": "^1.0.34"
|
||||
"xml-js": "^1.6.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^19.0.1",
|
||||
@ -85,8 +86,8 @@
|
||||
"@types/qs": "^6.9.12",
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.0",
|
||||
"@typescript-eslint/parser": "^7.1.0",
|
||||
"@unocss/transformer-variant-group": "^0.58.5",
|
||||
"@unocss/eslint-config": "^0.57.4",
|
||||
"@unocss/transformer-variant-group": "^0.58.5",
|
||||
"@vitejs/plugin-legacy": "^5.3.1",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
|
||||
@ -134,6 +134,9 @@ dependencies:
|
||||
vue-ueditor-wrap:
|
||||
specifier: ^3.0.8
|
||||
version: 3.0.8(vue@3.4.21)
|
||||
vue3-print-nb:
|
||||
specifier: ^0.1.4
|
||||
version: 0.1.4(typescript@5.3.3)
|
||||
vuedraggable:
|
||||
specifier: ^4.1.0
|
||||
version: 4.1.0(vue@3.4.21)
|
||||
@ -9412,6 +9415,14 @@ packages:
|
||||
vue: 3.4.21(typescript@5.3.3)
|
||||
dev: false
|
||||
|
||||
/vue3-print-nb@0.1.4(typescript@5.3.3):
|
||||
resolution: {integrity: sha512-LExI7viEzplR6ZKQ2b+V4U0cwGYbVD4fut/XHvk3UPGlT5CcvIGs6VlwGp107aKgk6P8Pgx4rco3Rehv2lti3A==}
|
||||
dependencies:
|
||||
vue: 3.4.21(typescript@5.3.3)
|
||||
transitivePeerDependencies:
|
||||
- typescript
|
||||
dev: false
|
||||
|
||||
/vue@3.4.21(typescript@5.3.3):
|
||||
resolution: {integrity: sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==}
|
||||
peerDependencies:
|
||||
|
||||
@ -43,10 +43,13 @@ import VueUeditorWrap from 'vue-ueditor-wrap'
|
||||
|
||||
import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
|
||||
|
||||
import print from 'vue3-print-nb'
|
||||
|
||||
// 创建实例
|
||||
const setupAll = async () => {
|
||||
const app = createApp(App)
|
||||
app.use(VueUeditorWrap)
|
||||
app.use(print)
|
||||
|
||||
await setupI18n(app)
|
||||
|
||||
|
||||
415
src/views/crm/crmcontract/ContractPrint.vue
Normal file
415
src/views/crm/crmcontract/ContractPrint.vue
Normal file
@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" width="800">
|
||||
|
||||
<div id="printMe">
|
||||
<table border="0" cellspacing="10" width="700" >
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width="743" valign="center" colspan="8" >
|
||||
<p style="text-align:center;vertical-align:middle;">
|
||||
<b><span style="color:#0070C0;font-size:18pt;">合 同</span></b>
|
||||
<br/>
|
||||
<b><span style="color:#0070C0;font-size:16pt;">{{formData.name}}</span></b>
|
||||
</p>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td valign="center" colspan="5" >
|
||||
<p style="vertical-align:middle;">
|
||||
<b> 合同编号：{{formData.number}} </b>
|
||||
</p>
|
||||
</td>
|
||||
<td >
|
||||
<p style="vertical-align:middle;">
|
||||
<b>下单日期：</b>
|
||||
</p>
|
||||
</td>
|
||||
<td colspan="2" >
|
||||
<p style="vertical-align:middle;">
|
||||
<b>{{formatDate(formData.orderTime)}}</b>
|
||||
</p>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="tdborder">
|
||||
<p class="tdtext" >
|
||||
<b>客户名称</b>
|
||||
</p>
|
||||
</td>
|
||||
<td valign="center" colspan="3" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
{{formData.customerName}}
|
||||
</p>
|
||||
</td>
|
||||
<td valign="center" class="tdborder">
|
||||
<p class="tdtext">
|
||||
<b>联系人</b>
|
||||
|
||||
</p>
|
||||
</td>
|
||||
<td colspan="3" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
|
||||
</p>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="tdborder">
|
||||
<p class="tdtext">
|
||||
<b>项目经理</b>
|
||||
</p>
|
||||
</td>
|
||||
<td colspan="3" class="tdborder" >
|
||||
<p class="tdtext" >
|
||||
|
||||
</p>
|
||||
</td>
|
||||
<td class="tdborder">
|
||||
<p class="tdtext" >
|
||||
<b>签单人</b>
|
||||
</p>
|
||||
</td>
|
||||
<td colspan="3" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
{{formData.orderAdminName}}
|
||||
</p>
|
||||
</td>
|
||||
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td colspan="2" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
<b>开始日期</b></p>
|
||||
</td>
|
||||
<td colspan="2" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
{{formatDate(formData.startTime)}}
|
||||
</p>
|
||||
</td>
|
||||
<td colspan="2" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
<b>结束日期</b></p>
|
||||
</td>
|
||||
<td colspan="2" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
{{formatDate(formData.endTime)}}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td colspan="2" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
<b>合同金额</b></p>
|
||||
</td>
|
||||
<td colspan="2" class="tdborder">
|
||||
<b><span style="color:#0070C0;font-size:16pt;">{{formData.money}}</span></b>
|
||||
|
||||
</td>
|
||||
<td colspan="2" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
<b>已收款</b></p>
|
||||
</td>
|
||||
<td colspan="2" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
{{formData.returnMoney}}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
<b>备注</b>
|
||||
</p>
|
||||
</td>
|
||||
<td colspan="6" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
{{formData.remark}}
|
||||
</p>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td valign="center" :rowspan="rowspan" class="tdborder" >
|
||||
<p >
|
||||
<b>
|
||||
<div style="width: 20px;margin-left: 15px;">购买产品或服务</div>
|
||||
</b>
|
||||
</p>
|
||||
</td>
|
||||
<td class="tdborder title">
|
||||
|
||||
<b>名称</b>
|
||||
</td>
|
||||
<td class="tdborder title" >
|
||||
<b>数量</b>
|
||||
</td>
|
||||
<td class="tdborder title" >
|
||||
<b>商品属性</b>
|
||||
</td>
|
||||
<td class="tdborder title">
|
||||
<b>单价</b>
|
||||
</td>
|
||||
<td class="tdborder title">
|
||||
<b>小计</b>
|
||||
</td>
|
||||
<td class="tdborder title">
|
||||
<b>备注</b>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr v-for="(item,index) in contactsProducts" :key="index">
|
||||
<td class="tdborder" >
|
||||
<p>
|
||||
<b>{{item.name}}</b>
|
||||
</p>
|
||||
</td>
|
||||
<td class="tdborder pcontent">
|
||||
{{item.nums}}
|
||||
</td>
|
||||
<td class="tdborder pcontent">
|
||||
{{item.sku}}
|
||||
</td>
|
||||
<td class="tdborder pcontent">
|
||||
￥{{item.price}}
|
||||
</td>
|
||||
<td class="tdborder pcontent">
|
||||
￥{{item.subtotal}}
|
||||
</td>
|
||||
<td class="tdborder pcontent">
|
||||
{{item.remarks}}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td colspan="2" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
<b>产品金额</b></p>
|
||||
</td>
|
||||
<td colspan="2" class="tdborder">
|
||||
<b><span style="">{{totalPrice}}</span></b>
|
||||
|
||||
</td>
|
||||
<td colspan="2" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
<b>折扣</b></p>
|
||||
</td>
|
||||
<td colspan="2" class="tdborder">
|
||||
<p class="tdtext" >
|
||||
{{discountPrice}}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
<tr>
|
||||
<td colspan="4" >
|
||||
<p style="text-align:left;vertical-align:middle;">
|
||||
|
||||
|
||||
<b><span style="font-size:14pt;">甲方</span></b>
|
||||
<br/>
|
||||
<br/>
|
||||
<b><span >盖章签名：_____________</span></b>
|
||||
<br/>
|
||||
<br/>
|
||||
<b><span >日期：</span></b>
|
||||
</p>
|
||||
</td>
|
||||
|
||||
<td colspan="4" >
|
||||
<p style="text-align:left;vertical-align:middle;">
|
||||
|
||||
|
||||
<b><span style="font-size:14pt;">乙方</span></b>
|
||||
<br/>
|
||||
<br/>
|
||||
<b><span >盖章签名：_____________</span></b>
|
||||
<br/>
|
||||
<br/>
|
||||
<b><span >日期"：</span></b>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<button v-print="'#printMe'">打印合同</button>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ContractApi, ContractVO } from '@/api/crm/crmcontract'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import print from 'vue3-print-nb'
|
||||
const userStore = useUserStore()
|
||||
|
||||
directives: {
|
||||
print
|
||||
}
|
||||
|
||||
/** 合同 表单 */
|
||||
defineOptions({ name: 'ContractPrint' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('打印') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
customerId: undefined,
|
||||
businessId: undefined,
|
||||
contactsId: undefined,
|
||||
sourceId: undefined,
|
||||
name: undefined,
|
||||
number: undefined,
|
||||
orderTime: undefined,
|
||||
money: undefined,
|
||||
totalPrice: undefined,
|
||||
returnMoney: undefined,
|
||||
discountRate: undefined,
|
||||
checkStatus: undefined,
|
||||
flowId: undefined,
|
||||
stepId: undefined,
|
||||
checkAdminId: undefined,
|
||||
flowAdminId: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
orderAdminId: undefined,
|
||||
remark: undefined,
|
||||
ownerUserId: undefined,
|
||||
nextTime: undefined,
|
||||
expireHandle: undefined,
|
||||
invoiceMoney: undefined
|
||||
})
|
||||
|
||||
const formRef = ref() // 表单 Ref
|
||||
const contactsProducts = ref([])
|
||||
const rowspan = ref(2)
|
||||
|
||||
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (data) => {
|
||||
dialogVisible.value = true
|
||||
resetForm()
|
||||
formData.value = data
|
||||
console.log('formData.value :',formData.value )
|
||||
const list = await ContractApi.getContractProductListByContractId(data.id)
|
||||
contactsProducts.value = list
|
||||
rowspan.value = list.length + 1
|
||||
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
|
||||
const totalPrice = computed(() => {
|
||||
let money = 0
|
||||
contactsProducts.value.forEach(element => {
|
||||
money = money + element.subtotal
|
||||
})
|
||||
|
||||
return money
|
||||
|
||||
})
|
||||
|
||||
const discountPrice = computed(() => {
|
||||
let money = 0
|
||||
contactsProducts.value.forEach(element => {
|
||||
money = money + element.discount
|
||||
})
|
||||
|
||||
return money
|
||||
|
||||
})
|
||||
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
customerId: undefined,
|
||||
businessId: undefined,
|
||||
contactsId: undefined,
|
||||
sourceId: undefined,
|
||||
name: undefined,
|
||||
number: undefined,
|
||||
orderTime: undefined,
|
||||
money: undefined,
|
||||
totalPrice: 0,
|
||||
returnMoney: undefined,
|
||||
discountRate: 0,
|
||||
checkStatus: undefined,
|
||||
flowId: undefined,
|
||||
stepId: undefined,
|
||||
checkAdminId: undefined,
|
||||
flowAdminId: undefined,
|
||||
startTime: Date.parse(new Date()),
|
||||
endTime: undefined,
|
||||
orderAdminId: undefined,
|
||||
remark: undefined,
|
||||
ownerUserId: undefined,
|
||||
nextTime: undefined,
|
||||
expireHandle: undefined,
|
||||
invoiceMoney: undefined
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scope>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 0px;
|
||||
}
|
||||
table{
|
||||
border-spacing: 1px;
|
||||
}
|
||||
.tdborder{
|
||||
border:1px solid #000000;
|
||||
align-items:center;line-height:16px;
|
||||
}
|
||||
.tdtext{
|
||||
text-align:center;
|
||||
vertical-align:middle;
|
||||
}
|
||||
.title{
|
||||
padding: 0px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.pcontent{
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -94,13 +94,21 @@
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="openPrint"
|
||||
:disabled = "isDisabled"
|
||||
>
|
||||
<Icon icon="ep:printer" class="mr-5px" /> 打印
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" highlight-current-row @current-change="handleCurrentChange">
|
||||
<el-table-column label="id" align="center" prop="id" />
|
||||
<el-table-column label="合同编号" align="center" prop="number" width="150">
|
||||
<template #default="scope">
|
||||
@ -205,6 +213,7 @@
|
||||
<ContractForm3 ref="formRef3" />
|
||||
<RecordForm ref="recordFormRef" />
|
||||
<ContractReceivablesForm ref="contractReceivablesFormRef" />
|
||||
<ContractPrint ref="contractPrintRef" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -214,6 +223,7 @@ import { ContractApi, ContractVO } from '@/api/crm/crmcontract'
|
||||
import ContractForm from './ContractForm.vue'
|
||||
import ContractForm2 from './ContractForm2.vue'
|
||||
import ContractForm3 from './ContractForm3.vue'
|
||||
import ContractPrint from './ContractPrint.vue'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import RecordForm from '@/views/crm/crmrecord/RecordForm.vue'
|
||||
import ContractReceivablesForm from '@/views/crm/crmcontractreceivables/ContractReceivablesForm.vue'
|
||||
@ -243,9 +253,12 @@ const queryParams = reactive({
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
const activeIndex = ref('my')
|
||||
const selectRow = ref({})
|
||||
const isDisabled = ref(true)
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
isDisabled.value = true
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await ContractApi.getContractPage(queryParams)
|
||||
@ -266,6 +279,16 @@ const getList = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
isDisabled.value = false
|
||||
selectRow.value = val
|
||||
}
|
||||
|
||||
const contractPrintRef = ref()
|
||||
const openPrint = () => {
|
||||
contractPrintRef.value.open(selectRow.value)
|
||||
}
|
||||
|
||||
const handleSelect = (key) => {
|
||||
queryParams.relation = key
|
||||
getList()
|
||||
@ -341,3 +364,4 @@ onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user