herenshan112
/
ShutongInterconnectedChemicalCloudPlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改列表子表显示内容

qin_v19
herenshan112 8 months ago
parent
54ee88eb54
commit
1ea8b75a7e
7 changed files with 630 additions and 1231 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 648
      src/components/DesignForm/tableListPage/formPageCont.vue
  2. 3
      src/components/DesignForm/tableListPage/index.vue
  3. 200
      src/views/process/print/canvas-bg/CanvasBg.vue
  4. 148
      src/views/process/print/canvas-bg/CanvasSlider.vue
  5. 193
      src/views/process/print/canvas-bg/CanvasThumbnail.vue
  6. 41
      src/views/process/print/canvas-bg/data/keyCode.ts
  7. 98
      src/views/process/print/canvas-bg/drawRuler.ts

648
src/components/DesignForm/tableListPage/formPageCont.vue
View File

@ -3,203 +3,196 @@
@ 时间: 2024-04-03 13:39:16
@ 备注: 列表内容展示
-->
<script lang='ts' setup>
import { submitButton, afreshSubmitButton,editFormCont,draftSubmitButton,editLookFormCont } from "@/utils/workflow/const";
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
import { gainTaskFormInfo,generateFlow,gainEditDataLog,draftsInitiateApproval,afreshRunWorkflow } from '@/api/taskapi/management'
import { Close } from '@element-plus/icons-vue'
import { judgeSubmitCancel,startRunFlow,getFieldRecord } from '@/api/DesignForm/requestapi'
import { submitButtonEs } from '@/api/DesignForm/tableButton'
<script lang="ts" setup>
import {
constFormBtnEvent,
constFormProps
} from '@/api/DesignForm/utils'
import RunFlowStep from '@/views/taskplatform/taskmanagement/runFlowStep.vue'
submitButton,
afreshSubmitButton,
editFormCont,
draftSubmitButton,
editLookFormCont,
} from "@/utils/workflow/const";
import {
json2string,
objToStringify,
string2json,
stringToObj,
} from "@/utils/DesignForm/form";
import {
gainTaskFormInfo,
generateFlow,
gainEditDataLog,
draftsInitiateApproval,
afreshRunWorkflow,
} from "@/api/taskapi/management";
import { Close } from "@element-plus/icons-vue";
import {
judgeSubmitCancel,
startRunFlow,
getFieldRecord,
} from "@/api/DesignForm/requestapi";
import { submitButtonEs } from "@/api/DesignForm/tableButton";
import { constFormBtnEvent, constFormProps } from "@/api/DesignForm/utils";
import RunFlowStep from "@/views/taskplatform/taskmanagement/runFlowStep.vue";
import { customerFormVersionCont } from "@/api/taskapi/types";
import { stringify } from "uuid";
const props = defineProps({
isShow:{
type:Boolean,
default:false,
isShow: {
type: Boolean,
default: false,
},
drawerWith:{
type:Number,
default:0
drawerWith: {
type: Number,
default: 0,
},
tablePageClass:{
type:Number,
default:1
tablePageClass: {
type: Number,
default: 1,
},
operState: {
type: Number,
default: 1,
},
pageInfo: {
type: Object,
default() {
return {};
},
operState:{
type:Number,
default:1
},
pageInfo:{
type:Object,
default(){
return {}
}
}
});
const formEl = ref<any>();
const emits = defineEmits(["update:isShow","getPageData","optionsValue4Get4"]);
const emits = defineEmits(["update:isShow", "getPageData", "optionsValue4Get4"]);
const formLoading = ref(false);
const flowAry = ref<any[]>(); //流程列表
const currentProgress = ref<number>(1); //当前步进值
const runstep = ref(null)
const runstep = ref(null);
//表单ID
const openOfClose = computed({
get() {
return props.isShow
return props.isShow;
},
set(val: boolean) {
emits('update:isShow', val)
}
emits("update:isShow", val);
},
});
const formProps = inject(constFormProps, {}) as any
const formProps = inject(constFormProps, {}) as any;
let getFieldRecordPromises: any[] = []
let objMastesform: any
let getFieldRecordPromises: any[] = [];
let objMastesform: any;
/**
@ 作者: 秦东
@ 时间: 2024-04-03 14:09:24
@ 功能: 监听状态变化处理数据
*/
watch(()=>props.isShow,(val:bool)=>{
if(val){
watch(
() => props.isShow,
(val: bool) => {
if (val) {
formLoading.value = true;
getCustomrrFormInfo();
Promise.all(gainTaskFormInfoPromise).then(() => {
//console.log(gainTaskFormInfoData)
if(gainTaskFormInfoData.structure&&gainTaskFormInfoData.tableData){
objMastesform = stringToObj(gainTaskFormInfoData.structure.mastesform)
if (gainTaskFormInfoData.structure && gainTaskFormInfoData.tableData) {
objMastesform = stringToObj(gainTaskFormInfoData.structure.mastesform);
for (const element of objMastesform.list) {
if(element.type == "table"){
if (element.type == "table") {
//console.log(element);
for (const item of element.list){
if(item.options){
if(item.type=="radio"||item.type=="select"||item.type=="checkbox"){
for (const item of element.list) {
if (item.options) {
if (
item.type == "radio" ||
item.type == "select" ||
item.type == "checkbox"
) {
console.log(item.config.optionsType);
if(item.config.optionsType==3){
let paramx:string = ""+item.control.optionsValue3Field
getFieldRecordPromises.push(getFieldRecord(paramx).then(({ data }) => {
if (item.config.optionsType == 3) {
let paramx: string = "" + item.control.optionsValue3Field;
getFieldRecordPromises.push(
getFieldRecord(paramx).then(({ data }) => {
//console.log(data)
item.options = data
}));
item.options = data;
})
);
}
}
}
}
}
}
Promise.all(getFieldRecordPromises).then(()=>{
Promise.all(getFieldRecordPromises)
.then(() => {
//console.log(objMastesform)
formState.formData = objMastesform
formState.formData = objMastesform;
//console.log(formState.formData)
let stringObjMastesform = JSON.stringify(objMastesform);
//console.log(stringObjMastesform)
//console.log(gainTaskFormInfoData.structure.mastesformjson)
formState.dict = string2json(gainTaskFormInfoData.structure.dict)
formState.dict = string2json(gainTaskFormInfoData.structure.dict);
if(props.tablePageClass != 4){
judgeSubmitCancel({"name":stringObjMastesform})
.then((data:any) =>{
if(data.code == 0){
if (data.data == 3 || data.data == 4){
if (props.tablePageClass != 4) {
judgeSubmitCancel({ name: stringObjMastesform }).then((data: any) => {
if (data.code == 0) {
if (data.data == 3 || data.data == 4) {
// formState.formData.list.push(submitButtonEs)
if(props.operState == 2){
formState.formData.list.push(afreshSubmitButton)
}else if(props.operState == 3){
formState.formData.list.push(editFormCont)
}else if(props.operState == 4){
formState.formData.list.push(draftSubmitButton)
}else if(props.operState == 5){
formState.formData.list.push(submitButtonEs)
if (props.operState == 2) {
formState.formData.list.push(afreshSubmitButton);
} else if (props.operState == 3) {
formState.formData.list.push(editFormCont);
} else if (props.operState == 4) {
formState.formData.list.push(draftSubmitButton);
} else if (props.operState == 5) {
formState.formData.list.push(submitButtonEs);
}
}
}
})
});
}
nextTick(()=>{
nextTick(() => {
// console.log("获取自定义表单内容-1111-->",data.tableData)
formEl.value.setValue(gainTaskFormInfoData.tableData)
})
formEl.value.setValue(gainTaskFormInfoData.tableData);
});
})
.finally(()=>{
.finally(() => {
formLoading.value = false;
//alert(props.pageInfo.masters_key)
gainEditDataLog({id:props.pageInfo.masters_key})
.then(({data})=>{
gainEditDataLog({ id: props.pageInfo.masters_key }).then(({ data }) => {
// console.log("获取修改记录-1111-->",data)
pageLog.value = data
pageLog.value = data;
});
});
}
});
}
})
}
);
/**
@ 作者: 秦东
@ 时间: 2024-04-03 14:25:15
@ 功能: 关闭抽屉
*/
const closeDrawer = () => {
emits('update:isShow', false)
}
emits("update:isShow", false);
};
//表单相关内容
const formState = reactive({
formData: {
list: [],
form: {},
config: {}
config: {},
},
dict: {},
formId: props.pageInfo.id,
id: 1,
loading: true
})
const pageLog = ref<any[]>([])
let gainTaskFormInfoData: customerFormVersionCont
let gainTaskFormInfoPromise: any[] = []
loading: true,
});
const pageLog = ref<any[]>([]);
let gainTaskFormInfoData: customerFormVersionCont;
let gainTaskFormInfoPromise: any[] = [];
/**
@ 作者: 秦东
@ -207,9 +200,10 @@ let gainTaskFormInfoPromise: any[] = []
@ 功能: 获取自定义表单内容
*/
const getCustomrrFormInfo = () => {
gainTaskFormInfoPromise.push(gainTaskFormInfo({id:props.pageInfo.masters_key})
.then(({data})=>{
gainTaskFormInfoData = data
gainTaskFormInfoPromise.push(
gainTaskFormInfo({ id: props.pageInfo.masters_key })
.then(({ data }) => {
gainTaskFormInfoData = data;
/* // console.log("获取自定义表单内容",data,data.structure)
formState.formData = stringToObj(data.structure.mastesform)
// console.log("获取自定义表单内容--->",formState)
@ -241,7 +235,7 @@ const getCustomrrFormInfo = () => {
formEl.value.setValue(data.tableData)
}) */
})
.finally(()=>{
.finally(() => {
/* formLoading.value = false;
//alert(props.pageInfo.masters_key)
gainEditDataLog({id:props.pageInfo.masters_key})
@ -249,8 +243,9 @@ const getCustomrrFormInfo = () => {
// console.log("获取修改记录-1111-->",data)
pageLog.value = data
}); */
}));
}
})
);
};
/**
@ 作者: 秦东
@ 时间: 2024-04-07 10:55:34
@ -258,108 +253,101 @@ const getCustomrrFormInfo = () => {
*/
const afterSubmit = (type: string) => {
// console.log("表单提交成功")
if (type === 'success') {
if (type === "success") {
// router.go(-1)
// console.log("表单提交成功")
emits("getPageData");
closeDrawer();
}
}
};
const closeAppSubmit = () => {
closeDrawer()
}
closeDrawer();
};
//流程执行
const drawerBeforeClose = () => {
// console.log("监听打开关闭",false)
// emits("getmytodolist")
// emits("update:isshow", false);
}
};
//提交审批
const sendDraftSubmit = (type: string,val?:any) => {
const sendDraftSubmit = (type: string, val?: any) => {
// console.log("提交审批",type,val)
// emits("getmytodolist")
if (type === 'success') {
if(props.pageInfo.flowIsOpen == 1){
let sendInfo ={
id:val.data.runFlowId,
flowList:flowAry.value,
state:3
}
if (type === "success") {
if (props.pageInfo.flowIsOpen == 1) {
let sendInfo = {
id: val.data.runFlowId,
flowList: flowAry.value,
state: 3,
};
// console.log("草稿提交审批--1-<",sendInfo)
draftsInitiateApproval(sendInfo)
.then((data:any) =>{
draftsInitiateApproval(sendInfo).then((data: any) => {
// console.log("草稿提交审批---<",sendInfo,data)
if(data.code == 0){
ElMessage.success(data.msg || '提交成功！')
if(runstep.value){
runstep.value.gainRunFlowTask()
if (data.code == 0) {
ElMessage.success(data.msg || "提交成功！");
if (runstep.value) {
runstep.value.gainRunFlowTask();
}
emits("getPageData");
closeDrawer()
closeDrawer();
}
})
});
}
}
}
};
//保存草稿箱(带流程)
const saveEditFormInfo = (type: string,val?:any) => {
const saveEditFormInfo = (type: string, val?: any) => {
// console.log("草稿提交审批--1-<",type,val)
if(type == "success"){
runstep.value.gainRunFlowTask()
if (type == "success") {
runstep.value.gainRunFlowTask();
emits("getPageData");
closeDrawer()
closeDrawer();
}
}
};
//重新提交审核
const anewSubmit = (type: string,val?:any) => {
const anewSubmit = (type: string, val?: any) => {
// console.log("重新提交数据-11--<",type,val)
if(type == "success"){
afreshRunWorkflow({id:val.data.runFlowId})
.then((data:any) => {
if (type == "success") {
afreshRunWorkflow({ id: val.data.runFlowId })
.then((data: any) => {
// console.log("重新提交数据---<",data,runstep.value)
runstep.value.gainRunFlowTask()
runstep.value.gainRunFlowTask();
})
.finally(() => {
emits("getPageData");
closeDrawer()
})
closeDrawer();
});
}
}
};
/**
@ 作者: 秦东
@ 时间: 2024-04-11 11:35:24
@ 功能: 申请修改
*/
//修改完毕
const submitEdit = (type: string,val?:any) => {
const submitEdit = (type: string, val?: any) => {
// console("修改完毕----->",type,val)
if(type == "success"){
runstep.value.gainRunFlowTask()
if (type == "success") {
runstep.value.gainRunFlowTask();
emits("getPageData");
closeDrawer()
closeDrawer();
}
}
};
const jsuanKuandu = () => {
if(props.pageInfo.flowIsOpen==1){
return 900 + 350
}else{
return 900
if (props.pageInfo.flowIsOpen == 1) {
return 900 + 350;
} else {
return 900;
}
};
}
function optionsValue3Get3(data:any,fieldName:any){
function optionsValue3Get3(data: any, fieldName: any) {
//console.log("formPageCont","optionsValue3Get3")
emits('optionsValue4Get4',data,fieldName)
emits("optionsValue4Get4", data, fieldName);
}
</script>
<template>
<el-drawer
v-model="openOfClose"
title="查看表单内容"
@ -369,14 +357,13 @@ function optionsValue3Get3(data:any,fieldName:any){
:close-on-press-escape="false"
:destroy-on-close="true"
>
<div v-if="props.pageInfo.flowIsOpen==1" class="common-layout">
<div v-if="props.pageInfo.flowIsOpens == 1" class="common-layout">
<el-container>
<el-main>
<ak-form
ref="formEl"
v-loading="formLoading" element-loading-text="Loading..."
v-loading="formLoading"
element-loading-text="Loading..."
:form-data="formState.formData"
:type="props.tablePageClass"
:dict="formState.dict"
@ -386,33 +373,57 @@ function optionsValue3Get3(data:any,fieldName:any){
:before-submit="beforeSubmit"
:close-app-submit="closeDrawer"
:change-key-val="changeKeyVal"
:anew-submit = "anewSubmit"
:anew-submit="anewSubmit"
:save-edit-form-info="saveEditFormInfo"
:send-draft-submit= "sendDraftSubmit"
:send-draft-submit="sendDraftSubmit"
:after-submit="afterSubmit"
:submit-edit="submitEdit"
/>
<el-divider v-if="pageLog&&pageLog.length > 0" content-position="left">历史记录</el-divider>
<el-divider v-if="pageLog && pageLog.length > 0" content-position="left"
>历史记录</el-divider
>
<el-timeline style="width: 100%">
<el-timeline-item v-for="(item,index) in pageLog" :key="index" :timestamp="item.time+' 操作人：'+item.creater" placement="top">
<el-timeline-item
v-for="(item, index) in pageLog"
:key="index"
:timestamp="item.time + ' 操作人：' + item.creater"
placement="top"
>
<el-card>
<el-descriptions border>
<el-descriptions-item v-for="(mastItem,mastIndex) in item.masterdata" :key="mastItem.label" :label="mastItem.label">
{{mastItem.label}}
<el-descriptions-item
v-for="(mastItem, mastIndex) in item.masterdata"
:key="mastItem.label"
:label="mastItem.label"
>
{{ mastItem.label }}
</el-descriptions-item>
</el-descriptions>
<el-tabs v-if="item.sunList" type="border-card" style="margin-top:20px;">
<el-tab-pane v-for="(sonItem,sonIndex) in item.sunList" :label="sonIndex" :key="sonIndex">
<el-descriptions v-for="(sonVal,sonIndex) in sonItem" :key="sonIndex" border>
<el-descriptions-item v-for="(sonCentor,sonKey) in sonVal" :key="sonKey" :label="sonKey"> {{sonCentor}}
<el-tabs v-if="item.sunList" type="border-card" style="margin-top: 20px">
<el-tab-pane
v-for="(sonItem, sonIndex) in item.sunList"
:label="sonIndex"
:key="sonIndex"
>
<el-descriptions
v-for="(sonVal, sonIndex) in sonItem"
:key="sonIndex"
border
>
<el-descriptions-item
v-for="(sonCentor, sonKey) in sonVal"
:key="sonKey"
:label="sonKey"
>
{{ sonCentor }}
</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
</el-tabs>
<table style="margin-top:20px;">
<table style="margin-top: 20px">
<tr>
<td class="biankuang" width="100">修改说明：</td>
<td class="biankuang">{{item.explicate}}</td>
<td class="biankuang">{{ item.explicate }}</td>
</tr>
</table>
</el-card>
@ -427,11 +438,15 @@ function optionsValue3Get3(data:any,fieldName:any){
</div>
</el-header>
<el-scrollbar class="scorllbarBox">
<RunFlowStep ref="runstep" v-model:flowary="flowAry" :flow-key="props.pageInfo.runFlowId" :current-progress="currentProgress" @updatelist="drawerBeforeClose" />
<RunFlowStep
ref="runstep"
v-model:flowary="flowAry"
:flow-key="props.pageInfo.runFlowId"
:current-progress="currentProgress"
@updatelist="drawerBeforeClose"
/>
</el-scrollbar>
</el-aside>
</el-container>
</div>
<div v-else class="common-layout">
@ -440,7 +455,8 @@ function optionsValue3Get3(data:any,fieldName:any){
</el-header>
<ak-form
ref="formEl"
v-loading="formLoading" element-loading-text="Loading..."
v-loading="formLoading"
element-loading-text="Loading..."
:form-data="formState.formData"
:type="props.tablePageClass"
:dict="formState.dict"
@ -450,45 +466,75 @@ function optionsValue3Get3(data:any,fieldName:any){
:before-submit="beforeSubmit"
:close-app-submit="closeDrawer"
:change-key-val="changeKeyVal"
:anew-submit = "anewSubmit"
:anew-submit="anewSubmit"
:after-submit="afterSubmit"
:save-edit-form-info="saveEditFormInfo"
:send-draft-submit= "sendDraftSubmit"
:send-draft-submit="sendDraftSubmit"
:submit-edit="submitEdit"
@optionsValue3Get3 = "optionsValue3Get3"
@optionsValue3Get3="optionsValue3Get3"
/>
<el-divider v-if="pageLog&&pageLog.length > 0" content-position="left">历史记录</el-divider>
<el-divider v-if="pageLog && pageLog.length > 0" content-position="left"
>历史记录</el-divider
>
<el-timeline style="width: 100%">
<el-timeline-item v-for="(item,index) in pageLog" :key="index" :timestamp="item.time+' 操作人：'+item.creater" placement="top">
<el-card >
<el-timeline-item
v-for="(item, index) in pageLog"
:key="index"
:timestamp="item.time + ' 操作人：' + item.creater"
placement="top"
>
<el-card>
<el-tabs>
<el-tab-pane label="主要信息">
<el-descriptions border :column="1">
<el-descriptions-item v-for="(mastItem,mastIndex) in item.masterdata" :key="mastIndex" label-align="right" width="150px" >
<el-descriptions-item
v-for="(mastItem, mastIndex) in item.masterdata"
:key="mastIndex"
label-align="right"
width="150px"
>
<template #label>
<div style="width: 100px;">
{{mastItem.label}}
<div style="width: 100px">
{{ mastItem.label }}
</div>
</template>
<div v-if="mastItem.types=='lowcodeImage'">
<el-image style="width: 100px; height: 100px" :src="mastItem.value" fit="cover" />
<div v-if="mastItem.types == 'lowcodeImage'">
<el-image
style="width: 100px; height: 100px"
:src="mastItem.value"
fit="cover"
/>
</div>
<div v-if="mastItem.types=='lowcodeCarsusel'">
<div v-if="mastItem.types == 'lowcodeCarsusel'">
<el-carousel :interval="5000" type="card" height="200px">
<el-carousel-item v-for="item in mastItem.value" :key="item.imgId">
<el-image style="width: 100%; height: 100%" :src="item.imgUrl" fit="fill" />
<el-carousel-item
v-for="item in mastItem.value"
:key="item.imgId"
>
<el-image
style="width: 100%; height: 100%"
:src="item.imgUrl"
fit="fill"
/>
</el-carousel-item>
</el-carousel>
</div>
<div v-else-if="mastItem.types=='signaturemap'">
<el-image style="width: 200px; height: 150px" :src="mastItem.value" fit="cover" />
<div v-else-if="mastItem.types == 'signaturemap'">
<el-image
style="width: 200px; height: 150px"
:src="mastItem.value"
fit="cover"
/>
</div>
<div v-else-if="mastItem.types=='colorPicker'">
<div :style="'width: 30px; height: 30px; background-color: '+mastItem.value" ></div>
<div v-else-if="mastItem.types == 'colorPicker'">
<div
:style="
'width: 30px; height: 30px; background-color: ' + mastItem.value
"
></div>
</div>
<div v-else-if="mastItem.types=='switch'">
<div v-else-if="mastItem.types == 'switch'">
<el-switch
v-model="mastItem.value"
class="ml-2"
@ -497,37 +543,41 @@ function optionsValue3Get3(data:any,fieldName:any){
disabled
/>
</div>
<div v-else-if="mastItem.types=='rate'">
<div v-else-if="mastItem.types == 'rate'">
<el-rate v-model="mastItem.value" disabled />
</div>
<div v-else-if="mastItem.types=='slider'" style="max-width: 300px;">
<div v-else-if="mastItem.types == 'slider'" style="max-width: 300px">
<el-slider v-model="mastItem.value" disabled />
</div>
<div v-else-if="mastItem.types=='videoUpAndPlay'">
<div v-else-if="mastItem.types == 'videoUpAndPlay'">
<el-carousel :interval="5000" arrow="always" height="250px">
<el-carousel-item v-for="item in mastItem.value" :key="item.id">
<video
:src="item.url"
style="width: 100%; height: 250px"
controls
>
</video>
></video>
</el-carousel-item>
</el-carousel>
</div>
<div v-else-if="mastItem.types=='upload'">
<div v-if="mastItem.auxiliary=='picture-card'">
<el-image style="width: 100px; height: 100px" :src="mastItem.value" fit="cover" />
<div v-else-if="mastItem.types == 'upload'">
<div v-if="mastItem.auxiliary == 'picture-card'">
<el-image
style="width: 100px; height: 100px"
:src="mastItem.value"
fit="cover"
/>
</div>
<div v-else-if="mastItem.auxiliary=='picture'">
<el-image style="width: 100px; height: 100px" :src="mastItem.value" fit="cover" />
<div v-else-if="mastItem.auxiliary == 'picture'">
<el-image
style="width: 100px; height: 100px"
:src="mastItem.value"
fit="cover"
/>
</div>
<div v-else v-html="mastItem.value"></div>
</div>
<div v-else-if="mastItem.types=='baidumap'">
<div v-else-if="mastItem.types == 'baidumap'">
<BaiduMapLook :address="mastItem.value" />
</div>
<div v-else v-html="mastItem.value"></div>
@ -535,72 +585,102 @@ function optionsValue3Get3(data:any,fieldName:any){
</el-descriptions>
</el-tab-pane>
</el-tabs>
<el-tabs v-if="item.sunData" type="border-card" style="margin-top:20px;">
<el-tab-pane v-for="(sonItem,sonIndex) in item.sunData" :label="sonIndex" :key="sonIndex">
<el-descriptions v-for="(sonVal,sonIndex) in sonItem" :key="sonIndex" border>
<el-descriptions-item v-for="(sonCentor,sonKey) in sonVal" :key="sonKey" width="150px" >
<el-tabs v-if="item.sunData" type="border-card" style="margin-top: 20px">
<el-tab-pane
v-for="(sonItem, sonIndex) in item.sunData"
:label="sonIndex"
:key="sonIndex"
>
<el-descriptions
v-for="(sonVal, sonIndex) in sonItem"
:key="sonIndex"
border
>
<el-descriptions-item
v-for="(sonCentor, sonKey) in sonVal"
:key="sonKey"
width="150px"
>
<template #label>
<div style="width: 100px;">
{{sonCentor.label}}
<div style="width: 100px">
{{ sonCentor.label }}
</div>
</template>
<div v-if="sonCentor.types=='lowcodeImage'">
<el-image style="width: 100px; height: 100px" :src="sonCentor.value" fit="cover" />
<div v-if="sonCentor.types == 'lowcodeImage'">
<el-image
style="width: 100px; height: 100px"
:src="sonCentor.value"
fit="cover"
/>
</div>
<div v-if="sonCentor.types=='lowcodeCarsusel'">
<div v-if="sonCentor.types == 'lowcodeCarsusel'">
<el-carousel :interval="5000" type="card" height="200px">
<el-carousel-item v-for="item in sonCentor.value" :key="item.imgId">
<el-image style="width: 100%; height: 100%" :src="item.imgUrl" fit="fill" />
<el-carousel-item
v-for="item in sonCentor.value"
:key="item.imgId"
>
<el-image
style="width: 100%; height: 100%"
:src="item.imgUrl"
fit="fill"
/>
</el-carousel-item>
</el-carousel>
</div>
<div v-else-if="sonCentor.types=='signaturemap'">
<el-image style="width: 200px; height: 150px" :src="sonCentor.value" fit="cover" />
<div v-else-if="sonCentor.types == 'signaturemap'">
<el-image
style="width: 200px; height: 150px"
:src="sonCentor.value"
fit="cover"
/>
</div>
<div v-else-if="sonCentor.types=='colorPicker'">
<div :style="'width: 30px; height: 30px; background-color: '+sonCentor.value" ></div>
<div v-else-if="sonCentor.types == 'colorPicker'">
<div
:style="
'width: 30px; height: 30px; background-color: ' +
sonCentor.value
"
></div>
</div>
<div v-else-if="sonCentor.types=='rate'">
<div v-else-if="sonCentor.types == 'rate'">
<el-rate v-model="sonCentor.value" disabled />
</div>
<div v-else-if="sonCentor.types=='slider'" style="max-width: 300px;">
<div v-else-if="sonCentor.types == 'slider'" style="max-width: 300px">
<el-slider v-model="sonCentor.value" disabled />
</div>
<div v-else-if="sonCentor.types=='videoUpAndPlay'">
<div v-else-if="sonCentor.types == 'videoUpAndPlay'">
<el-carousel :interval="5000" arrow="always" height="250px">
<el-carousel-item v-for="item in sonCentor.value" :key="item.id">
<video
:src="item.url"
style="width: 100%; height: 250px"
controls
>
</video>
></video>
</el-carousel-item>
</el-carousel>
</div>
<div v-else-if="sonCentor.types=='upload'">
<div v-if="sonCentor.auxiliary=='picture-card'">
<el-image style="width: 100px; height: 100px" :src="sonCentor.value" fit="cover" />
<div v-else-if="sonCentor.types == 'upload'">
<div v-if="sonCentor.auxiliary == 'picture-card'">
<el-image
style="width: 100px; height: 100px"
:src="sonCentor.value"
fit="cover"
/>
</div>
<div v-else-if="sonCentor.auxiliary=='picture'">
<el-image style="width: 100px; height: 100px" :src="sonCentor.value" fit="cover" />
<div v-else-if="sonCentor.auxiliary == 'picture'">
<el-image
style="width: 100px; height: 100px"
:src="sonCentor.value"
fit="cover"
/>
</div>
<div v-else v-html="sonCentor.value"></div>
</div>
<div v-else-if="sonCentor.types=='baidumap'">
<div v-else-if="sonCentor.types == 'baidumap'">
<BaiduMapLook :address="sonCentor.value" />
</div>
<div v-else v-html="sonCentor.value"></div>
</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
@ -611,40 +691,38 @@ function optionsValue3Get3(data:any,fieldName:any){
</div>
</el-drawer>
</template>
<style lang='scss' scoped>
.common-layout{
<style lang="scss" scoped>
.common-layout {
height: 100vh;
padding: 0 15px;
.el-main{
.el-main {
height: 100vh;
padding:0;
padding: 0;
}
.flowBox{
.flowBox {
height: 100vh;
border-left: 1px solid #ccc;
.scorllbarBox{
height: calc(100vh - 35px)
.scorllbarBox {
height: calc(100vh - 35px);
}
.workFlowHead{
.workFlowHead {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.el-header{
padding:0 10px;
line-height:30px;
text-align:right;
font-size:20px;
i{
cursor:pointer;
.el-header {
padding: 0 10px;
line-height: 30px;
text-align: right;
font-size: 20px;
i {
cursor: pointer;
}
}
}
.biankuang{
border: 1px solid #D4D7DE;
padding:10px 10px;
.biankuang {
border: 1px solid #d4d7de;
padding: 10px 10px;
}
</style>

3
src/components/DesignForm/tableListPage/index.vue
View File

@ -1944,7 +1944,8 @@ const readerColumnSun = (column: any) => {
:label="item.label"
:width="readerColumnSun(item.children)"
>
<template #default="scope">
<template #default="scope"
>{{ data.tableProps }}
<el-table
v-if="item.pattern == 'table'"
v-bind="data.tableProps"

200
src/views/process/print/canvas-bg/CanvasBg.vue
View File

@ -1,200 +0,0 @@
<template>
<div class="canvas-bg" :style="bgStyle">
<div :style="canvasStyle" class="canvas-panel-wrap">
{{ canvasStyle }} <slot></slot>
</div>
<canvas ref="topRulerRef" class="canvas-ruler top" :style="topStyle"></canvas>
<canvas ref="leftRulerRef" class="canvas-ruler left" :style="leftStyle"></canvas>
<i class="canvas-ruler-cross"></i>
<div
class="canvas-move"
v-show="isMoveCanvas"
@mousedown="onMoveCanvasDown"
@mouseup="onMoveCanvasUp"
></div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
ref,
onMounted,
computed,
watch,
nextTick,
onBeforeUnmount,
} from "vue";
import { drawRuler } from "./drawRuler.ts";
import { useUserRulerStore } from "@/store/ruler/index";
import { keyCode } from "./data/keyCode";
export default defineComponent({
name: "CanvasBg",
setup() {
const editorStore = useUserRulerStore();
const topRulerRef = ref();
const leftRulerRef = ref();
const isMoveCanvas = computed(() => editorStore.isMoveCanvas);
watch(
() => editorStore.screenWidth,
() => {
refreshRuler();
}
);
watch(
() => editorStore.screenHeight,
() => {
refreshRuler();
}
);
watch(
() => editorStore.scale,
() => {
refreshRuler();
}
);
let isRuler = false;
const refreshRuler = () => {
if (!isRuler) {
isRuler = true;
nextTick(() => {
drawRuler(
"top",
topRulerRef.value,
editorStore.scale,
editorStore.showWidth,
24,
60
);
drawRuler(
"left",
leftRulerRef.value,
editorStore.scale,
editorStore.showWidth,
24,
60
);
isRuler = false;
});
}
};
const scrollLeft = computed(() => {
return editorStore.scrollLeft - 24;
});
const scrollTop = computed(() => {
return editorStore.scrollTop - 24;
});
const onKeyAction = (e: KeyboardEvent) => {
if (e.keyCode == keyCode.space) {
editorStore.setMoveCanvas(!editorStore.isMoveCanvas);
}
};
const onWheelAction = (e: WheelEvent) => {
if (isMoveCanvas.value) {
if (e.wheelDelta > 0) {
editorStore.setScale(editorStore.scale + 1);
} else {
editorStore.setScale(editorStore.scale - 1);
}
}
};
onMounted(() => {
window.addEventListener("keydown", onKeyAction);
window.addEventListener("wheel", onWheelAction);
refreshRuler();
});
onBeforeUnmount(() => {
window.removeEventListener("keydown", onKeyAction);
window.removeEventListener("wheel", onWheelAction);
});
let moveInfo = {
startX: 0,
startY: 0,
};
return {
topRulerRef,
leftRulerRef,
topStyle: computed(() => ({
left: -scrollLeft.value + "px",
})),
leftStyle: computed(() => ({ top: -scrollTop.value + "px" })),
isMoveCanvas,
bgStyle: computed(() => ({
width: editorStore.showWidth + "px",
height: editorStore.showHeight + "px",
})),
canvasStyle: computed(() => ({
left: -scrollLeft.value + "px",
top: -scrollTop.value + "px",
width: editorStore.screenWidth + "px",
height: editorStore.screenHeight + "px",
transform: `scale(${editorStore.scale * 0.01})`,
})),
scrollLeft,
scrollTop,
onMoveCanvasDown: (e: MouseEvent) => {
e.stopPropagation();
moveInfo = {
startX: e.clientX,
startY: e.clientY,
};
},
onMoveCanvasUp: (e: MouseEvent) => {
e.stopPropagation();
let left = scrollLeft.value - (e.clientX - moveInfo.startX);
let top = scrollTop.value - (e.clientY - moveInfo.startY);
// console.log('move', left, top);
editorStore.setScroll({ left, top });
},
};
},
});
</script>
<style lang="scss" scoped>
.canvas-ruler-cross {
display: inline-block;
width: 24px;
height: 24px;
position: absolute;
background-color: var(--ruler-bg);
}
.canvas-panel-wrap {
position: absolute;
box-shadow: var(--canvas-shadow) 0 0 30px 0;
transform-origin: left top;
margin-left: 60px;
margin-top: 60px;
}
.canvas-move {
position: absolute;
height: 100%;
width: 100%;
background-color: var(--move-bg);
cursor: move;
}
.canvas-ruler {
position: absolute;
transform-origin: left top;
// cursor: ew-resize;
background-color: var(--ruler-bg);
&.left {
top: 24px;
left: 0px;
}
&.top {
top: 0px;
left: 24px;
}
}
</style>

148
src/views/process/print/canvas-bg/CanvasSlider.vue
View File

@ -1,148 +0,0 @@
<template>
<div class="canvas-slider">
<el-tooltip placement="top" effect="light">
<template #content>
<div class="operation-tip-item">
<div>按下空格键，可移动画布</div>
<div>按下空格键，滚动鼠标滑轮可放缩画布</div>
</div>
</template>
<i class="el-icon-thumb" />
</el-tooltip>
<el-input-number v-model="scalePercent" :min="20" :max="200" size="small"></el-input-number>
<el-slider
size="small"
v-model="scalePercent"
:min="20"
:max="200"
:step="5"
style="width: 100px; margin: 0 12px"
></el-slider>
<el-tooltip placement="top">
<template #content> 实际大小 </template>
<i class="el-icon-full-screen" @click="onRealCanvas" />
</el-tooltip>
<el-tooltip placement="top">
<template #content> 适应屏幕大小 </template>
<i class="el-icon-aim" @click="onFitCanvas" />
</el-tooltip>
<i
class="el-icon-monitor"
:style="{ color: showThumbnail ? 'dodgerblue' : 'rgba(0,0,0,0.5)' }"
@click="onMagic"
></i>
</div>
</template>
<script lang="ts">
import { useEditorStore } from '@/stores/editor';
import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue';
//下方状态栏
export default defineComponent({
name: 'CanvasSlider',
setup() {
const store = useEditorStore();
const scalePercent = computed({
get: () => store.scale,
set: (value) => {
store.setScale(value);
}
});
const showThumbnail = computed({
get: () => store.$state.isThumbnail,
set: (value) => {
store.setThumbnail(value);
}
});
const onFitCanvas = () => {
store.setScale(
parseInt(
//@ts-ignore
((document.getElementById('dashboard').offsetHeight - 84) / store.screenHeight) * 100
)
);
};
const onRealCanvas = () => {
store.setScale(100);
};
const onMagic = () => {
showThumbnail.value = !showThumbnail.value;
};
return {
showThumbnail,
scalePercent,
//method
onMagic,
onFitCanvas,
onRealCanvas
};
}
});
</script>
<style lang="scss" scoped>
.operation-tip-item > div {
color: var(--el-color-primary);
background: rgba(26, 103, 255, 0.1);
padding: 5px 10px;
}
.operation-tip-item > div:not(:last-child) {
margin-bottom: 8px;
}
i {
font-size: 16px;
color: var(--slider-icon);
cursor: pointer;
&:not(:last-child) {
margin-right: 10px;
}
}
:deep(.el-input-number__decrease) {
border: none;
background: none;
}
:deep(.el-input-number__increase) {
border: none;
background: none;
}
:deep(.el-input__wrapper) {
border: none;
border-radius: 0;
background: none;
box-shadow: none;
}
.el-input-number--small {
width: 84px;
}
$line: solid 1px var(--canvas-slider-border);
.canvas-slider {
display: flex;
position: fixed;
bottom: 10px;
right: 310px;
background-color: var(--slider-bg);
height: 32px;
justify-content: flex-end;
align-items: center;
border: $line;
z-index: 9;
border-radius: 2px;
padding: 0 16px;
}
</style>

193
src/views/process/print/canvas-bg/CanvasThumbnail.vue
View File

@ -1,193 +0,0 @@
<template>
<canvas
class="canvas-thumbnail"
:width="canvasConfig.thumbnailWrapWidth"
:height="canvasConfig.thumbnailWrapHeight"
ref="thumbnailRef"
v-show="showThumbnail"
@mousedown="onMoveStart"
@mousemove="onMove"
@mouseup="onMoveEnd"
@mouseleave="onMoveEnd"
>
</canvas>
</template>
<script lang="ts">
import { useEditorStore } from '@/stores/editor';
import {
defineComponent,
ref,
computed,
reactive,
watch,
onMounted,
nextTick,
onBeforeUnmount
} from 'vue';
export default defineComponent({
name: 'CanvasThumbnail',
setup(props, context) {
const editorStore = useEditorStore();
const thumbnailRef = ref();
const canvasConfig = computed(() => editorStore.canvasConfig);
let isLock = false;
const viewBox = computed({
get: () => ({ viewWidth: editorStore.viewWidth, viewHeight: editorStore.viewHeight }),
set: (v) => {
editorStore.setViewBox(v);
}
});
const unscale = computed(() => {
if (editorStore.scale > 100) {
return 1 / editorStore.thumbnailSize;
} else {
return 10;
}
});
const getViewBox = () => {
nextTick(() => {
let dashboardDom = document.getElementById('dashboard');
if (!dashboardDom) {
return;
}
viewBox.value.viewWidth = dashboardDom.offsetWidth;
viewBox.value.viewHeight = dashboardDom.offsetHeight;
drawThumbnail();
});
};
const drawThumbnail = () => {
if (!isLock) {
isLock = true;
nextTick(() => {
let startLen = 6;
const ctx = thumbnailRef.value.getContext('2d');
ctx.clearRect(
0,
0,
canvasConfig.value.thumbnailWrapWidth,
canvasConfig.value.thumbnailWrapHeight
);
ctx.beginPath();
ctx.fillStyle = 'rgba(26, 103, 255, 0.5)';
ctx.rect(
startLen,
startLen,
canvasConfig.value.thumbnailWidth,
canvasConfig.value.thumbnailHeight
);
ctx.fill();
ctx.beginPath();
ctx.strokeStyle = '#1a67ff';
ctx.rect(
Math.round(editorStore.scrollLeft * editorStore.thumbnailSize),
Math.round(editorStore.scrollTop * editorStore.thumbnailSize),
viewBox.value.viewWidth * editorStore.thumbnailSize,
viewBox.value.viewHeight * editorStore.thumbnailSize
);
ctx.stroke();
isLock = false;
});
}
};
watch(
() => editorStore.scale,
() => {
drawThumbnail();
}
);
watch(
() => editorStore.screenWidth,
() => {
drawThumbnail();
}
);
watch(
() => editorStore.screenHeight,
() => {
drawThumbnail();
}
);
watch(
() => editorStore.scrollLeft,
() => {
drawThumbnail();
}
);
watch(
() => editorStore.scrollTop,
() => {
drawThumbnail();
}
);
watch(
() => editorStore.screenHeight,
() => {
drawThumbnail();
}
);
watch(
() => editorStore.viewHeight,
() => {
drawThumbnail();
}
);
watch(
() => editorStore.viewWidth,
() => {
drawThumbnail();
}
);
onMounted(() => {
window.addEventListener('resize', getViewBox);
getViewBox();
});
onBeforeUnmount(() => {
window.removeEventListener('resize', getViewBox);
});
let moveInfo = {
startX: 0,
startY: 0,
isMove: false
};
return {
canvasConfig,
thumbnailRef,
showThumbnail: computed(() => editorStore.isThumbnail),
onMoveStart: (e: MouseEvent) => {
moveInfo.isMove = true;
moveInfo.startX = e.clientX;
moveInfo.startY = e.clientY;
},
onMove: (e: MouseEvent) => {
if (moveInfo.isMove) {
let left = editorStore.scrollLeft + (e.clientX - moveInfo.startX) * unscale.value;
let top = editorStore.scrollTop + (e.clientY - moveInfo.startY) * unscale.value;
// console.log('thumbnail', left, top);
editorStore.setScroll({ left, top });
moveInfo.startX = e.clientX;
moveInfo.startY = e.clientY;
}
},
onMoveEnd: () => {
moveInfo.isMove = false;
}
};
}
});
</script>
<style lang="scss" scoped>
.canvas-thumbnail {
background-color: var(--thumbnail-wrap-bg);
position: fixed;
right: 310px;
bottom: 48px;
z-index: 9;
cursor: move;
}
</style>

41
src/views/process/print/canvas-bg/data/keyCode.ts
View File

@ -1,41 +0,0 @@
export const keyCode = {
space: 32,
backspace: 8,
shift: 16,
ctr: 17,
option: 18,
command: 91,
alt: 18,
ctrl: 17,
equal: 187,
minus: 189,
q: 81,
w: 87,
c: 67,
d: 68,
z: 90,
y: 89,
g: 71,
l: 76,
h: 72,
u: 85,
o: 79,
r: 82,
t: 84,
b: 66,
s: 83,
p: 80,
left: 37,
top: 38,
right: 39,
bottom: 40
};
// export function getCodeKey(code) {
// for (let k in keyCode) {
// if (keyCode[k] == code) {
// return k;
// }
// }
// return '';
// }

98
src/views/process/print/canvas-bg/drawRuler.ts
View File

@ -1,98 +0,0 @@
/**
* 画标尺刻度Canvas
* @param direction 方向
* @param canvas canvas DOM
* @param scale 缩放比例[20-200]
* @param width 长度
* @param height 高度
* @param startLen 开始距离
*/
export function drawRuler(
direction: string,
canvas: HTMLCanvasElement,
scale: number = 100,
width: number,
height: number = 24,
startLen: number = 60
) {
const padding = 2;
const ctx: CanvasRenderingContext2D = canvas.getContext('2d');
const percent = scale * 0.01;
let unit = Math.ceil(10 / percent);
if (unit < 8) {
unit = 8;
}
//计算出要绘制多少个刻度
const scaleCount = Math.ceil(width + startLen / unit);
if (direction == 'top') {
canvas.width = width + startLen;
canvas.height = height;
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
//绘制起点
ctx.strokeStyle = 'rgb(161, 174, 179)';
ctx.font = '10px Arial';
ctx.lineWidth = 0.5;
ctx.moveTo(startLen, 0);
ctx.lineTo(startLen, height);
ctx.fillText('0', startLen + padding, 13);
for (let i = 1; i <= scaleCount; i++) {
//计算每个刻度的位置
const step = startLen + Math.round(i * unit * percent);
//10的倍数刻度大长度
if (i % 10 === 0) {
ctx.moveTo(step, 0);
ctx.lineTo(step, height);
//标注刻度值
const scaleText = i * unit + '';
ctx.fillText(scaleText, step + padding, 13);
} else if (i % 5 === 0) {//5的倍数刻度中长度
ctx.moveTo(step, 15);
ctx.lineTo(step, height);
//标注刻度值
const scaleText = i * unit + '';
ctx.fillText(scaleText, step + padding, 13);
} else {//其他刻度小长度
ctx.moveTo(step, height - 2);
ctx.lineTo(step, height);
}
}
ctx.stroke();
} else {
canvas.width = height;
canvas.height = width + startLen;
ctx.clearRect(0, 0, height, width + startLen);
ctx.beginPath();
//绘制起点
ctx.strokeStyle = 'rgb(161, 174, 179)';
ctx.font = '10px Arial';
ctx.lineWidth = 0.5;
ctx.moveTo(0, startLen);
ctx.lineTo(height, startLen);
ctx.fillText('0', padding, startLen - padding);
//计算出要绘制多少个刻度
for (let i = 1; i <= scaleCount; i++) {
const step = startLen + Math.round(i * unit * percent);
if (i % 10 === 0) {
ctx.moveTo(0, step);
ctx.lineTo(height, step);
//标注刻度值
const scaleText = unit * i + '';
ctx.fillText(scaleText, padding, step - padding);
} else if (i % 5 === 0) {
ctx.moveTo(15, step);
ctx.lineTo(height, step);
//标注刻度值
const scaleText = unit * i + '';
ctx.fillText(scaleText, padding, step - padding);
} else {
ctx.moveTo(height - 2, step);
ctx.lineTo(height, step);
}
}
ctx.stroke();
}
}
Write Preview
Loading…
Cancel
Save