feat: 预览 打印 初步完成

package.json

@@ -20,8 +20,6 @@
     "lint:lint-staged": "lint-staged"
   },
   "dependencies": {
-		"print-js": "^1.6.0",
-    "qrcode": "1",
     "@chenfengyuan/vue-qrcode": "2",
     "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.2",
@@ -62,6 +60,8 @@
     "path-to-regexp": "^6.2.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.1.0",
+    "print-js": "^1.6.0",
+    "qrcode": "1",
     "signature_pad": "^4.1.4",
     "sortablejs": "^1.15.0",
     "vant": "^4.0.8",

src/views/approve/components/approvedContent.vue

@@ -223,7 +223,7 @@
 		<ViewProcessDialog v-if="processInfo.visible" v-model="processInfo.visible" :process-info="processInfo" />
 
 		<!-- 打印审批流 -->
-		<printer-dialog v-if="printerVisible" v-model="printerVisible" :currentTaskRow="currentTaskRow" :innerTable="innerTable"></printer-dialog>
+		<printer-dialog v-if="printerVisible" v-model="printerVisible" :currentTaskRow="currentTaskRow" :opts="printOpts"></printer-dialog>
 	</div>
 </template>
 
@@ -297,11 +297,7 @@ const deliverToReviewVisible = ref(false)
 const loseSignVisible = ref(false)
 const rollbackVisible = ref(false)
 const printerVisible = ref(false)
-const innerTable = ref('')
-const openPrintModal = () => {
-	innerTable.value = document.querySelector('.self-Everright-formEditor').innerHTML
-	printerVisible.value = true
-}
+const printOpts = ref({})
 
 const allowReject = ref(false)
 const allowRevocation = ref(false)
@@ -312,6 +308,16 @@ const currentType = ref(null)
 const currentFormData = ref({})
 // 当前form 表单数据字符串
 let cur_processForm_str = ''
+let cur_formStructure = {}
+let cur_formData = {}
+const openPrintModal = () => {
+	// innerTable.value = document.querySelector('.self-Everright-formEditor').innerHTML
+	printOpts.value = {
+		formStructure: cur_formStructure,
+		formData: cur_formData
+	}
+	printerVisible.value = true
+}
 const EReditorRef = ref()
 // window.EReditorRef = EReditorRef
 const taskId = computed(() => {
@@ -487,9 +493,9 @@ const getTaskDetail = () => {
 				cur_processForm_str = formContent
 				const { formStructure, formData } = JSON.parse(cur_processForm_str)
 				const formConfig = data.formConfig || []
-				let newFormStructure = formStructure // 存储一份
-				let newFields = newFormStructure.fields
-				let newFieldsList = newFormStructure.list
+				cur_formStructure = formStructure // 存储一份
+				let newFields = cur_formStructure.fields
+				let newFieldsList = cur_formStructure.list
 				// pendingApproval, 除了[待审批]这个状态, 其余只能读取
 				if (props.currentTaskType !== 'pendingApproval') {
 					newFields.map(item1 => (item1.options.disabled = true))
@@ -516,14 +522,15 @@ const getTaskDetail = () => {
 						}
 					})
 				}
-				newFormStructure = {
-					...newFormStructure,
+				cur_formStructure = {
+					...cur_formStructure,
 					fields: newFields,
 					list: newFieldsList
 				}
-				console.log(newFormStructure, '=/////====newFormStructure');
+				cur_formData = formData
+				console.log(cur_formStructure, '=/////====newFormStructure');
 				console.log(formData, '=/////====newFormStructure');
-				EReditorRef.value.setData(newFormStructure, formData)
+				EReditorRef.value.setData(cur_formStructure, formData)
 				validateForm.value.rule = newFields
 				/* 这里主要是表单设计的逻辑 end */
 			} catch (e) {

src/views/approve/components/printer.vue

@@ -1,8 +1,10 @@
-<script setup lang="ts">
-import { computed } from 'vue'
+<script setup>
+// lang="ts"
+import { computed, watch, ref, nextTick } from 'vue'
 import printJS from 'print-js'
 import VueQrcode from '@chenfengyuan/vue-qrcode'
-import type { PropType } from 'vue'
+import { erFormPreview } from '@ER/formEditor'
+// import type { PropType } from 'vue'
 // 若有需要自行编辑 QR Code ...
 const props = defineProps({
 	modelValue: {
@@ -17,9 +19,19 @@ const props = defineProps({
 		type: String,
 		default: ''
 	},
+	opts: {
+		type: Object, //  as PropType<{ formStructure: { fields: any[]; list: any[] }; formData: any }>,
+		default: () => ({
+			formStructure: {
+				fields: [],
+				list: []
+			},
+			formData: {}
+		})
+	},
 	currentTaskRow: {
-		// type: Object,
-		type: Object as PropType<{ instanceId: string; createTime: string }>,
+		type: Object,
+		// type: Object as PropType<{ instanceId: string; createTime: string }>,
 		default: () => ({
 			// instanceId: undefined,
 			// createTime: undefined,
@@ -37,7 +49,19 @@ const visibleDialog = computed({
 		$myEmit('update:modelValue', val)
 	}
 })
-
+const PreviewRef = ref()
+watch(
+	() => props.modelValue,
+	bool => {
+		if (bool) {
+			nextTick(() => {
+				const { formStructure, formData } = props.opts
+				PreviewRef.value.setData(formStructure, formData)
+			})
+		}
+	},
+	{ immediate: true }
+)
 const submitForm = () => {
 	printJS({
 		printable: 'printJS-form',
@@ -49,18 +73,13 @@ const submitForm = () => {
          .print-table { margin-top: 50px; },
          @media print { .page-break { page-break-before: always; } }   // 强制打印分页
         `
+		// css: './print.scss'
 	})
 }
 
 const closeDialog = () => {
 	$myEmit('update:modelValue', false)
 }
-
-const tableData = [
-	{ name: '提交人', date: '123' },
-	{ name: '姓名', date: '1234' },
-	{ name: '手机号', date: '111111-2' }
-]
 </script>
 
 <template>
@@ -88,45 +107,9 @@ const tableData = [
 					></VueQrcode>
 				</div>
 			</div>
-			<div class="local_print-table my-[12px]" v-html="innerTable" />
-<!--				<div class="table">
-					<div class="tr">
-						<div class="item1 th">{{ $t('outboundOrder.orderDialog.location') }}</div>
-						<div class="item5 th">UOM</div>
-					</div>
-
-			<div class="my-[12px]">
-				<table class="print-table">
-					<tr>
-						<th>提交人</th>
-						<td class="submitter">admin</td>
-					</tr>
-					<tr>
-						<th>签名</th>
-						<td>吉苗</td>
-					</tr>
-					<tr>
-						<th>禁用</th>
-						<td>禁用</td>
-					</tr>
-					<tr>
-						<th>隐藏</th>
-						<td>隐藏</td>
-					</tr>
-					<tr>
-						<th>手机号</th>
-						<td>18888888888</td>
-					</tr>
-					<tr>
-						<th>姓名</th>
-						<td>张三</td>
-					</tr>
-					<tr>
-						<th>审批结果</th>
-						<td>审批结果</td>
-					</tr>
-				</table>
-			</div>-->
+			<div class="local_print-table my-[12px]">
+				<erFormPreview v-show="opts.formStructure?.fields.length" ref="PreviewRef" :is-show-complete-button="false" />
+			</div>
 
 			<div class="flex justify-between">
 				<div class="leading-7">打印人: <span class="pl-[6px]"> admin </span></div>
@@ -199,8 +182,17 @@ td:first-child {
 				// 角色
 				.Everright-formEditor-FormTypesSelectRole_pc,
 				.Everright-formEditor-FormTypesSelectUser_pc {
-					.avatar .name {
-						max-width: unset;
+					.avatar {
+						background: transparent;
+						.icon {
+							display: none;
+						}
+						.name {
+							//width: fit-content;
+							////max-width: unset;
+							//max-width: max-content;
+							overflow: visible;
+						}
 					}
 				}
 				// 部门（el-cascader）
@@ -233,6 +225,10 @@ td:first-child {
 						background-color: transparent;
 						box-shadow: unset;
 					}
+					&__inner {
+						color: var(--el-text-color-regular);
+						-webkit-text-fill-color: var(--el-text-color-regular);
+					}
 					&__suffix {
 						display: none;
 					}