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

Merge branch 'v7_master' 

# Conflicts:
#	src/types/components.d.ts
yjf_v3
超级管理员 2 years ago
parent
f2891ccb04 11c1271be3
commit
5237c58ac5
13 changed files with 1323 additions and 232 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. 67
      src/components/DesignForm/assembly/index.ts
  2. 66
      src/components/DesignForm/formControlAttr.vue
  3. 5
      src/components/DesignForm/public/form/formGroup.vue
  4. 394
      src/components/workflow/drwer/approverDrawer.vue
  5. 71
      src/components/workflow/drwer/promoterDrawer.vue
  6. 15
      src/types/components.d.ts
  7. 15
      src/views/sysworkflow/lowcodepage/lowCodeFormPage.vue
  8. 14
      src/views/sysworkflow/lowcodepage/pageList.vue
  9. 5
      src/widget/index.ts
  10. 181
      src/widget/lowcodeimage/index.vue
  11. 147
      src/widget/lowcodeimage/lowcodeImage.vue
  12. 181
      src/widget/lowcodetransfer/index.vue
  13. 394
      src/widget/lowcodetransfer/lowcodeTransfer.vue

67
src/components/DesignForm/assembly/index.ts
View File

@ -438,10 +438,11 @@ const selectOption: any = [
component: '' // 根据template注入的组件*/
},
{
type: 'upload',
label: '图片/文件',
icon: 'image',
iconFont: 'fa-photo',
iconFont: 'fa-file-image-o',
control: {
modelValue: '' // 也可以是[{name:'',url:''}]形式
},
@ -451,6 +452,7 @@ const selectOption: any = [
labelStyle:{},
inputStyle:{}
}
},
{
type: 'tinymce',
@ -522,13 +524,74 @@ const selectOption: any = [
interval:2000,
}
},
config: {},
styles:{
divStyle:{},
labelStyle:{},
inputStyle:{}
}
}
},
{
type: 'lowcodeTransfer',
label: '穿梭框',
icon: '',
iconFont: 'fa-arrows-h',
control: {
modelValue: '',
fixedOptions: [{
id: 'thefirstrootnode',
label: '根节点1',
disabled: false,
children: []
},
{
id: 'thesecondrootnode',
label: '根节点2',
disabled: false,
children: []
}]
},
config: {
transferName:'穿梭框',
transferDataSource:'固定选项',
apiUrl:'/javasys/lowCode/transfer/getOrgAndManTree',
method:'post',
}
},
{
type: 'lowcodeImage',
label: '图片',
icon: '',
iconFont: 'fa-photo',
control: {
modelValue: '',
uploadFlag:false,
imgId:'',
imgUrl: '',
link: '',
fit:1,
radius:false,
radiusNum:5,
boderAndShadow:false,
showMode:'自定义像素值',
pxWidth:448,
pxHeight:252,
widthPercent:90,
heightPercent:90,
mt:0,
mb:0,
ml:0,
mr:0,
pt:0,
pb:0,
pl:0,
pr:0,
floatFlag:false,
floatValue:'left',
},
config: {}
},
]
},
{

66
src/components/DesignForm/formControlAttr.vue
View File

@ -21,9 +21,11 @@
import { uploadUrl } from '@/api/DesignForm'
import { UploadFilled } from '@element-plus/icons-vue'
import { UploadFile, UploadFiles } from 'element-plus/es/components/upload/src/upload';
import type Node from 'element-plus/es/components/tree/src/model/node'
//样式布局
import LayoutPage from '@/components/DesignForm/layoutPage/index.vue'
import { Plus } from '@element-plus/icons-vue'
const props = withDefaults( //接收父级参数
@ -970,6 +972,7 @@
const newVal = obj.isNum ? formatNumber(val) : val // 类型为数字时转整数
obj.path && getPropByPath(controlData.value, obj.path, newVal)
}
}
/**
* 获取非负整数随机数
@ -1522,6 +1525,7 @@
{ label: '每行三列', value: 'form-row-3' },
{ label: '每行四列', value: 'form-row-4' }
]
const layouytStyle = reactive<any>(controlData.value.styles)
watch(()=>layouytStyle,(val : any)=>{
@ -1547,6 +1551,35 @@
}
return false;
}
/**
@ 作者: 秦东
@ 时间: 2024-03-18 11:42:52
@ 功能: 上传图标相关
*/
const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/api/upordown" //上传地址
const handleAvatarSuccess: UploadProps['onSuccess'] = (
response,
uploadFile
) => {
// imageUrl.value = URL.createObjectURL(uploadFile.raw!)
formConfig.value.imageUrl = response.data.url
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
console.log("beforeAvatarUpload",rawFile.type)
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif' && rawFile.type !== 'image/icon') {
ElMessage.error('请上传以下格式的图片(jpg、jpeg、png、gif、icon)!'+rawFile.type)
return false
} else if (rawFile.size / 1024 / 1024 > 2) {
ElMessage.error('图片大小不要大于 2MB!')
return false
}
return true
}
</script>
<template>
<div class="sidebar-tools">
@ -2084,7 +2117,21 @@
/>
</el-form-item>
<el-form-item class="form_cont">
<template #label>
表单图标
</template>
<el-upload
class="avatar-uploader"
:action="imgUploadApiUrl"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="formConfig.imageUrl" :src="formConfig.imageUrl" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
<template v-if="!state.isSearch">
<el-divider content-position="left">接口数据事件</el-divider>
@ -2323,7 +2370,18 @@
.form_cont{
padding: 0 10px;
}
.avatar-uploader{
width: 100px;
height: 100px;
.avatar{
width: 100px;
height: 100px;
}
.avatar-uploader-icon{
width: 100px;
height: 100px;
}
}
</style>
<style >
@ -2340,4 +2398,4 @@
background-color: rgb(229, 229, 229);
}
</style>

5
src/components/DesignForm/public/form/formGroup.vue
View File

@ -459,8 +459,13 @@ const getFormItemLableStyle = (ele: any) => {
</template>
<DigitPage v-else-if="element.type === 'digitpage'" :data="element" />
<LowcodeImage v-else-if="element.type === 'lowcodeImage'" :data="element" />
<LowcodeTransfer v-else-if="element.type === 'lowcodeTransfer'" :data="element" />
<VideoUpAndPlay v-else-if="element.type === 'videoUpAndPlay'" :data="element" />
<LowcodeCarsusel v-else-if="element.type === 'lowcodeCarsusel'" :data="element" />
<SignatureMap v-else-if="element.type === 'signaturemap'" :data="element" />

394
src/components/workflow/drwer/approverDrawer.vue
View File

@ -101,13 +101,23 @@ const matrixIsShow = ref(false)
watch(approverConfig1, (val:any)=>{
val.value.attribute = val.value.attribute*1
// console.log("directormaxlevel",val.value)
console.log("directormaxlevel",val.value)
matrixIsShow.value = false
approverConfig.value = val.value
if(val.type == 3){
nodeTitle.value = "执行人设置"
if(val.value.nodeName != ""){
nodeTitle.value = val.value.nodeName+"设置"
}else{
nodeTitle.value = "执行人设置"
}
}else{
nodeTitle.value = "审批人设置"
if(val.value.nodeName != ""){
nodeTitle.value = val.value.nodeName+"设置"
}else{
nodeTitle.value = "审批人设置"
}
}
isExecutor.value = false
// approverConfig.attribute = approverConfig.attribute*1
@ -217,12 +227,12 @@ const saveApprover = ()=> {
}
});
}
console.log("正确",formData.value)
// console.log("正确",formData.value)
if(formData.value.purview){
console.log("正确")
// console.log("正确")
let isNew = true
formData.value.purview.forEach((item:any)=>{
console.log("正确---->",item.nodeKey)
// console.log("正确---->",item.nodeKey)
if(item.nodeKey == approverConfig1.value.value.nodeNumber){
item.powerAry=powerAry
isNew = false
@ -299,6 +309,7 @@ watch(()=>visible.value,(val:boolean)=>{
jieForm();
}
})
const nodeSetUp = ref("first")
</script>
<template>
@ -307,183 +318,180 @@ watch(()=>visible.value,(val:boolean)=>{
<div class="demo-drawer__content">
<!--审批人设置主体-->
<div class="drawer_content">
<div class="approver_content">
<el-radio-group v-model="approverConfig.settype" class="clear" @change="changeType">
<template v-for="({value, label}) in setTypes" :key="value">
<el-radio v-if="isShowRatify(value)" :label="value" style="width:auto">{{label}}</el-radio>
<el-tabs v-model="nodeSetUp" class="demo-tabs">
<el-tab-pane name="first">
<template #label>
<span class="wordKeyCss">属性设置</span>
</template>
</el-radio-group>
</div>
<!--指定成员-->
<el-divider v-if="approverConfig.settype==1" content-position="left">指定成员</el-divider>
<div v-if="approverConfig.settype==1" class="approver_manager">
<el-button type="primary" @click="addApprover">添加/修改成员</el-button>
<p class="selected_list">
<el-tag v-for="(item,index) in approverConfig.nodeUserList" :key="index" closable type="info" effect="plain" class="tag_us" @close="$func.removeEle(approverConfig.nodeUserList,item,'targetId')">{{item.name}}</el-tag>
<el-tag v-if="approverConfig.nodeUserList.length!=0" type="danger" effect="dark" @click="approverConfig.nodeUserList=[]">清除</el-tag>
</p>
</div>
<!--主管-->
<el-divider v-if="approverConfig.settype==2" content-position="left">主管</el-divider>
<div v-if="approverConfig.settype==2" class="approver_manager">
<p>
<el-row :gutter="10">
<el-col v-if="isExecutor" :span="6">
<select v-model="approverConfig.attribute" style="width:100%">
<option value="1">发起人</option>
<option value="2">执行人</option>
</select>
</el-col>
<el-col :span="18">
<select v-model="approverConfig.directorLevel">
<option v-for="item in props.directormaxlevel" :key="item" :value="item">{{item==1?'直接':'第'+item+'级'}}主管</option>
</select>
</el-col>
</el-row>
</p>
<p class="tip">找不到主管时，由上级主管代审批</p>
</div>
<!--行政岗位-->
<el-divider v-if="approverConfig.settype==3" content-position="left">指定行政岗位</el-divider>
<div v-if="approverConfig.settype==3" class="approver_manager">
<el-row>
<el-col :span="18">
<el-button type="primary" @click="addApproverPost">添加/修改行政岗位</el-button>
</el-col>
<el-col :span="6">
<select v-if="isExecutor" v-model="approverConfig.attribute" style="width:100%">
<option value="1">发起人</option>
<option value="2">执行人</option>
</select>
</el-col>
</el-row>
<p class="selected_list">
<el-tag v-for="(item,index) in approverConfig.nodeUserList" :key="index" closable type="info" effect="plain" class="tag_us" @close="$func.removeEle(approverConfig.nodeUserList,item,'targetId')">{{item.name}}</el-tag>
<el-tag v-if="approverConfig.nodeUserList.length!=0" type="danger" effect="dark" @click="approverConfig.nodeUserList=[]">清除</el-tag>
</p>
</div>
<!--发起人自选-->
<el-divider v-if="approverConfig.settype==4" content-position="left">发起人自选</el-divider>
<div v-show="approverConfig.settype==4" class="approver_self_select">
<el-radio-group v-model="approverConfig.selectMode" style="width: 100%;">
<el-radio v-for="({value, label}) in selectModes" :key="value" :label="value">{{label}}</el-radio>
</el-radio-group>
<h3>选择范围</h3>
<el-radio-group v-model="approverConfig.selectRange" style="width: 100%;" @change="changeRange">
<el-radio v-for="({value, label}) in selectRanges" :key="value" :label="value" >{{label}}</el-radio>
</el-radio-group>
<template v-if="approverConfig.selectRange==2||approverConfig.selectRange==3">
<el-button v-if="approverConfig.selectRange==2" type="primary" @click="addApprover">添加/修改成员</el-button>
<el-button v-else type="primary" @click="addRoleApprover">添加/修改角色</el-button>
<p class="selected_list">
<el-tag v-for="(item,index) in approverConfig.nodeUserList" :key="index" closable type="info" effect="plain" class="tag_us" @close="$func.removeEle(approverConfig.nodeUserList,item,'targetId')">{{item.name}}</el-tag>
<el-tag v-if="approverConfig.nodeUserList.length!=0&&approverConfig.selectRange!=1" type="danger" effect="dark" @click="approverConfig.nodeUserList=[]">清除</el-tag>
</p>
</template>
</div>
<!--发起人自己-->
<el-divider v-if="approverConfig.settype==5" content-position="left">发起人自选</el-divider>
<div v-if="approverConfig.settype==5" class="approver_self">
<p>该审批节点设置“发起人自己”后，审批人默认为发起人</p>
</div>
<!--连续多级主管-->
<el-divider v-if="approverConfig.settype==6" content-position="left">连续多级主管</el-divider>
<div v-if="approverConfig.settype==6" class="approver_manager">
<p style="padding-bottom:20px">
<el-row :gutter="10">
<el-col v-if="isExecutor" :span="6">
<select v-model="approverConfig.attribute" style="width:100%">
<option value="1">发起人</option>
<option value="2">执行人</option>
</select>
</el-col>
<el-col :span="10">
<select v-model="approverConfig.examineEndDirectorLevel">
<option v-for="item in props.directormaxlevel" :key="item" :value="item">{{item==1?'直接':'第'+item+'级'}}主管</option>
</select>
</el-col>
</el-row>
</p>
</div>
<!--指定审批节点为本节点设置审批人-->
<el-divider v-if="approverConfig.settype==7" content-position="left">可选节点列表</el-divider>
<div v-if="approverConfig.settype==7" class="approver_manager">
<p>可选节点列表</p>
<el-radio-group v-model="approverConfig.customNode" class="clear">
<el-radio label="beginnode" >发起人</el-radio>
<el-radio v-for="item in nodeOptional" :key="item.nodeNumber" :label="item.nodeNumber" class="nodeGroupRadio">{{ item.nodeName }}（编号：{{ item.nodeNumber }}）</el-radio>
</el-radio-group>
</div>
<!--根据关联表单设置指定审批字段-->
<el-divider v-if="approverConfig.settype==8" content-position="left">指定审批字段</el-divider>
<div v-if="approverConfig.settype==8" class="approver_manager">
<el-button type="primary" @click="formTableField">添加/修改审批字段</el-button>
<p class="selected_list">
<el-tag v-for="(item,index) in approverConfig.nodeUserList" :key="index" closable type="info" effect="plain" class="tag_us" @close="$func.removeEle(approverConfig.nodeUserList,item,'targetId')">{{item.name}}</el-tag>
<el-tag v-if="approverConfig.nodeUserList.length!=0" type="danger" effect="dark" @click="approverConfig.nodeUserList=[]">清除</el-tag>
</p>
</div>
<!--权限矩阵-->
<div v-if="approverConfig.settype==9" class="approver_manager">
<select v-if="isExecutor" v-model="approverConfig.attribute" style="width:100%">
<option value="1">发起人</option>
<option value="2">执行人</option>
</select>
</div>
<MatrixPage
v-if="approverConfig.settype==9"
v-model:isshow="matrixIsShow"
:data="matrixFieldList"
@change="updateMatrix"
/>
<!--补充审批信息-->
<el-divider v-if="(approverConfig.settype==1&&approverConfig.nodeUserList.length>1)||approverConfig.settype==2||approverConfig.settype==6||(approverConfig.settype==4&&approverConfig.selectMode==2)||approverConfig.settype==8||approverConfig.settype==9" content-position="left">多人审批时采用的审批方式</el-divider>
<div v-if="(approverConfig.settype==1&&approverConfig.nodeUserList.length>1)||approverConfig.settype==2||approverConfig.settype==6||(approverConfig.settype==4&&approverConfig.selectMode==2)||approverConfig.settype==8||approverConfig.settype==9" class="approver_some">
<el-radio-group v-model="approverConfig.examineMode" class="clear">
<el-radio :label="1">依次审批</el-radio>
<el-radio v-if="approverConfig.settype!=2" :label="2">会签(须所有审批人同意)</el-radio>
<el-radio v-if="approverConfig.settype!=2" :label="3">或签(有一位审批人同意即可)</el-radio>
</el-radio-group>
</div>
<el-divider v-if="approverConfig.settype==2||approverConfig.settype==6||approverConfig.settype==9" content-position="left">审批人为空时</el-divider>
<div v-if="approverConfig.settype==2||approverConfig.settype==6||approverConfig.settype==9" class="approver_some">
<el-radio-group v-model="approverConfig.noHanderAction" class="clear">
<el-radio :label="1">自动审批通过/不允许发起</el-radio>
<br/>
<el-radio :label="2">转交给审核管理员</el-radio>
</el-radio-group>
</div>
<el-divider content-position="left">退回设置</el-divider>
<div class="approver_some">
<el-radio-group v-model="approverConfig.sendBackNode" class="clear">
<el-radio label="beginnode" >发起人</el-radio>
<el-radio v-for="item in nodeOptional" :key="item.nodeNumber" :label="item.nodeNumber" >{{ item.nodeName }}（编号：{{ item.nodeNumber }}）</el-radio>
</el-radio-group>
</div>
<el-divider content-position="left">操作权限</el-divider>
<div class="info_box">
<div class="table_name"><el-text class="mx-1" type="primary">主表</el-text></div>
<el-table v-if="powerUnitAry.recUnitAry.masterUnitList" :data="powerUnitAry.recUnitAry.masterUnitList" size="small" style="width: 100%; --el-table-border-color: none;" :header-cell-style="{background:'#eef1f6',color:'#606266'}" class="customer-no-border-table" >
<el-table-column prop="name" label="字段" />
<el-table-column label="可见" align="center" width="80">
<template #default="scope">
<el-checkbox v-model="scope.row.isLook" label="" />
</template>
</el-table-column>
<el-table-column label="可编辑" align="center" width="80">
<template #default="scope">
<el-checkbox v-model="scope.row.isEdit" label="" />
<!-- <el-divider content-position="left">节点属性</el-divider> -->
<div class="approver_content">
<el-radio-group v-model="approverConfig.settype" class="clear" @change="changeType">
<template v-for="({value, label}) in setTypes" :key="value">
<el-radio v-if="isShowRatify(value)" :label="value" style="width:auto">{{label}}</el-radio>
</template>
</el-radio-group>
</div>
<!--指定成员-->
<el-divider v-if="approverConfig.settype==1" content-position="left">指定成员</el-divider>
<div v-if="approverConfig.settype==1" class="approver_manager">
<el-button type="primary" @click="addApprover">添加/修改成员</el-button>
<p class="selected_list">
<el-tag v-for="(item,index) in approverConfig.nodeUserList" :key="index" closable type="info" effect="plain" class="tag_us" @close="$func.removeEle(approverConfig.nodeUserList,item,'targetId')">{{item.name}}</el-tag>
<el-tag v-if="approverConfig.nodeUserList.length!=0" type="danger" effect="dark" @click="approverConfig.nodeUserList=[]">清除</el-tag>
</p>
</div>
<!--主管-->
<el-divider v-if="approverConfig.settype==2" content-position="left">主管</el-divider>
<div v-if="approverConfig.settype==2" class="approver_manager">
<p>
<el-row :gutter="10">
<el-col v-if="isExecutor" :span="6">
<select v-model="approverConfig.attribute" style="width:100%">
<option value="1">发起人</option>
<option value="2">执行人</option>
</select>
</el-col>
<el-col :span="18">
<select v-model="approverConfig.directorLevel">
<option v-for="item in props.directormaxlevel" :key="item" :value="item">{{item==1?'直接':'第'+item+'级'}}主管</option>
</select>
</el-col>
</el-row>
</p>
<p class="tip">找不到主管时，由上级主管代审批</p>
</div>
<!--行政岗位-->
<el-divider v-if="approverConfig.settype==3" content-position="left">指定行政岗位</el-divider>
<div v-if="approverConfig.settype==3" class="approver_manager">
<el-row>
<el-col :span="18">
<el-button type="primary" @click="addApproverPost">添加/修改行政岗位</el-button>
</el-col>
<el-col :span="6">
<select v-if="isExecutor" v-model="approverConfig.attribute" style="width:100%">
<option value="1">发起人</option>
<option value="2">执行人</option>
</select>
</el-col>
</el-row>
<p class="selected_list">
<el-tag v-for="(item,index) in approverConfig.nodeUserList" :key="index" closable type="info" effect="plain" class="tag_us" @close="$func.removeEle(approverConfig.nodeUserList,item,'targetId')">{{item.name}}</el-tag>
<el-tag v-if="approverConfig.nodeUserList.length!=0" type="danger" effect="dark" @click="approverConfig.nodeUserList=[]">清除</el-tag>
</p>
</div>
<!--发起人自选-->
<el-divider v-if="approverConfig.settype==4" content-position="left">发起人自选</el-divider>
<div v-show="approverConfig.settype==4" class="approver_self_select">
<el-radio-group v-model="approverConfig.selectMode" style="width: 100%;">
<el-radio v-for="({value, label}) in selectModes" :key="value" :label="value">{{label}}</el-radio>
</el-radio-group>
<h3>选择范围</h3>
<el-radio-group v-model="approverConfig.selectRange" style="width: 100%;" @change="changeRange">
<el-radio v-for="({value, label}) in selectRanges" :key="value" :label="value" >{{label}}</el-radio>
</el-radio-group>
<template v-if="approverConfig.selectRange==2||approverConfig.selectRange==3">
<el-button v-if="approverConfig.selectRange==2" type="primary" @click="addApprover">添加/修改成员</el-button>
<el-button v-else type="primary" @click="addRoleApprover">添加/修改角色</el-button>
<p class="selected_list">
<el-tag v-for="(item,index) in approverConfig.nodeUserList" :key="index" closable type="info" effect="plain" class="tag_us" @close="$func.removeEle(approverConfig.nodeUserList,item,'targetId')">{{item.name}}</el-tag>
<el-tag v-if="approverConfig.nodeUserList.length!=0&&approverConfig.selectRange!=1" type="danger" effect="dark" @click="approverConfig.nodeUserList=[]">清除</el-tag>
</p>
</template>
</el-table-column>
</el-table>
<el-row v-if="powerUnitAry.recUnitAry.sunUnitList" v-for="(item,index) in powerUnitAry.recUnitAry.sunUnitList" :key="index">
<el-col :span="24" class="table_name"><el-text class="mx-1" type="primary">{{item.name}}</el-text>子表</el-col>
<el-col :span="24">
<el-table v-if="item.masterUnitList" :data="item.masterUnitList" size="small" style="width: 100%; --el-table-border-color: none;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
</div>
<!--发起人自己-->
<el-divider v-if="approverConfig.settype==5" content-position="left">发起人自选</el-divider>
<div v-if="approverConfig.settype==5" class="approver_self">
<p>该审批节点设置“发起人自己”后，审批人默认为发起人</p>
</div>
<!--连续多级主管-->
<el-divider v-if="approverConfig.settype==6" content-position="left">连续多级主管</el-divider>
<div v-if="approverConfig.settype==6" class="approver_manager">
<p style="padding-bottom:20px">
<el-row :gutter="10">
<el-col v-if="isExecutor" :span="6">
<select v-model="approverConfig.attribute" style="width:100%">
<option value="1">发起人</option>
<option value="2">执行人</option>
</select>
</el-col>
<el-col :span="10">
<select v-model="approverConfig.examineEndDirectorLevel">
<option v-for="item in props.directormaxlevel" :key="item" :value="item">{{item==1?'直接':'第'+item+'级'}}主管</option>
</select>
</el-col>
</el-row>
</p>
</div>
<!--指定审批节点为本节点设置审批人-->
<el-divider v-if="approverConfig.settype==7" content-position="left">可选节点列表</el-divider>
<div v-if="approverConfig.settype==7" class="approver_manager">
<p>可选节点列表</p>
<el-radio-group v-model="approverConfig.customNode" class="clear">
<el-radio label="beginnode" >发起人</el-radio>
<el-radio v-for="item in nodeOptional" :key="item.nodeNumber" :label="item.nodeNumber" class="nodeGroupRadio">{{ item.nodeName }}（编号：{{ item.nodeNumber }}）</el-radio>
</el-radio-group>
</div>
<!--根据关联表单设置指定审批字段-->
<el-divider v-if="approverConfig.settype==8" content-position="left">指定审批字段</el-divider>
<div v-if="approverConfig.settype==8" class="approver_manager">
<el-button type="primary" @click="formTableField">添加/修改审批字段</el-button>
<p class="selected_list">
<el-tag v-for="(item,index) in approverConfig.nodeUserList" :key="index" closable type="info" effect="plain" class="tag_us" @close="$func.removeEle(approverConfig.nodeUserList,item,'targetId')">{{item.name}}</el-tag>
<el-tag v-if="approverConfig.nodeUserList.length!=0" type="danger" effect="dark" @click="approverConfig.nodeUserList=[]">清除</el-tag>
</p>
</div>
<!--权限矩阵-->
<div v-if="approverConfig.settype==9" class="approver_manager">
<select v-if="isExecutor" v-model="approverConfig.attribute" style="width:100%">
<option value="1">发起人</option>
<option value="2">执行人</option>
</select>
</div>
<MatrixPage
v-if="approverConfig.settype==9"
v-model:isshow="matrixIsShow"
:data="matrixFieldList"
@change="updateMatrix"
/>
<!--补充审批信息-->
<el-divider v-if="(approverConfig.settype==1&&approverConfig.nodeUserList.length>1)||approverConfig.settype==2||approverConfig.settype==6||(approverConfig.settype==4&&approverConfig.selectMode==2)||approverConfig.settype==8||approverConfig.settype==9" content-position="left">多人审批时采用的审批方式</el-divider>
<div v-if="(approverConfig.settype==1&&approverConfig.nodeUserList.length>1)||approverConfig.settype==2||approverConfig.settype==6||(approverConfig.settype==4&&approverConfig.selectMode==2)||approverConfig.settype==8||approverConfig.settype==9" class="approver_some">
<el-radio-group v-model="approverConfig.examineMode" class="clear">
<el-radio :label="1">依次审批</el-radio>
<el-radio v-if="approverConfig.settype!=2" :label="2">会签(须所有审批人同意)</el-radio>
<el-radio v-if="approverConfig.settype!=2" :label="3">或签(有一位审批人同意即可)</el-radio>
</el-radio-group>
</div>
<el-divider v-if="approverConfig.settype==2||approverConfig.settype==6||approverConfig.settype==9" content-position="left">审批人为空时</el-divider>
<div v-if="approverConfig.settype==2||approverConfig.settype==6||approverConfig.settype==9" class="approver_some">
<el-radio-group v-model="approverConfig.noHanderAction" class="clear">
<el-radio :label="1">自动审批通过/不允许发起</el-radio>
<br/>
<el-radio :label="2">转交给审核管理员</el-radio>
</el-radio-group>
</div>
<el-divider content-position="left">退回设置</el-divider>
<div class="approver_some">
<el-radio-group v-model="approverConfig.sendBackNode" class="clear">
<el-radio label="beginnode" >发起人</el-radio>
<el-radio v-for="item in nodeOptional" :key="item.nodeNumber" :label="item.nodeNumber" >{{ item.nodeName }}（编号：{{ item.nodeNumber }}）</el-radio>
</el-radio-group>
</div>
</el-tab-pane>
<el-tab-pane name="second">
<template #label>
<span class="wordKeyCss">操作权限</span>
</template>
<!-- <el-divider content-position="left">操作权限</el-divider> -->
<div class="info_box">
<div class="table_name"><el-text class="mx-1" type="primary">主表</el-text></div>
<el-table v-if="powerUnitAry.recUnitAry.masterUnitList" :data="powerUnitAry.recUnitAry.masterUnitList" size="small" style="width: 100%; --el-table-border-color: none;" :header-cell-style="{background:'#eef1f6',color:'#606266'}" class="customer-no-border-table" >
<el-table-column prop="name" label="字段" />
<el-table-column label="可见" align="center" width="80">
<template #default="scope">
@ -496,10 +504,27 @@ watch(()=>visible.value,(val:boolean)=>{
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</div>
<el-row v-if="powerUnitAry.recUnitAry.sunUnitList" v-for="(item,index) in powerUnitAry.recUnitAry.sunUnitList" :key="index">
<el-col :span="24" class="table_name"><el-text class="mx-1" type="primary">{{item.name}}</el-text>子表</el-col>
<el-col :span="24">
<el-table v-if="item.masterUnitList" :data="item.masterUnitList" size="small" style="width: 100%; --el-table-border-color: none;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
<el-table-column prop="name" label="字段" />
<el-table-column label="可见" align="center" width="80">
<template #default="scope">
<el-checkbox v-model="scope.row.isLook" label="" />
</template>
</el-table-column>
<el-table-column label="可编辑" align="center" width="80">
<template #default="scope">
<el-checkbox v-model="scope.row.isEdit" label="" />
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div class="demo-drawer__footer clear">
@ -631,4 +656,7 @@ watch(()=>visible.value,(val:boolean)=>{
.info_box{
padding: 0 20px;
}
.wordKeyCss{
padding: 0 20px;
}
</style>

71
src/components/workflow/drwer/promoterDrawer.vue
View File

@ -169,38 +169,33 @@ watch(()=>visible.value,(val:boolean)=>{
jieForm();
}
})
const nodeSetUp = ref("first")
</script>
<template>
<el-drawer v-model="visible" :append-to-body="true" title="发起人" class="set_promoter" :show-close="false" :size="550" :before-close="closeDrawer">
<div class="demo-drawer__content">
<div class="promoter_content drawer_content">
<el-divider content-position="left">节点属性</el-divider>
<div class="info_box">
<p>{{ $func.arrToStr(flowPermission) || '所有人' }}</p>
<el-button type="primary" @click="addPromoter">添加/修改发起人</el-button>
</div>
<el-divider content-position="left">操作权限</el-divider>
<div class="info_box">
<div class="table_name"><el-text class="mx-1" type="primary">主表</el-text></div>
<el-table v-if="powerUnitAry.recUnitAry.masterUnitList" :data="powerUnitAry.recUnitAry.masterUnitList" size="small" style="width: 100%; --el-table-border-color: none;" :header-cell-style="{background:'#eef1f6',color:'#606266'}" class="customer-no-border-table" >
<el-table-column prop="name" label="字段" />
<el-table-column label="可见" align="center" width="80">
<template #default="scope">
<el-checkbox v-model="scope.row.isLook" label="" />
</template>
</el-table-column>
<el-table-column label="可编辑" align="center" width="80">
<template #default="scope">
<el-checkbox v-model="scope.row.isEdit" label="" />
</template>
</el-table-column>
</el-table>
<el-row v-if="powerUnitAry.recUnitAry.sunUnitList" v-for="(item,index) in powerUnitAry.recUnitAry.sunUnitList" :key="index">
<el-col :span="24" class="table_name"><el-text class="mx-1" type="primary">{{item.name}}</el-text>子表</el-col>
<el-col :span="24">
<el-table v-if="item.masterUnitList" :data="item.masterUnitList" size="small" style="width: 100%; --el-table-border-color: none;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
<el-tabs v-model="nodeSetUp" class="demo-tabs">
<el-tab-pane name="first">
<template #label>
<span class="wordKeyCss">属性设置</span>
</template>
<!-- <el-divider content-position="left">节点属性</el-divider> -->
<div class="info_box">
<p>{{ $func.arrToStr(flowPermission) || '所有人' }}</p>
<el-button type="primary" @click="addPromoter">添加/修改发起人</el-button>
</div>
</el-tab-pane>
<el-tab-pane name="second">
<template #label>
<span class="wordKeyCss">操作权限</span>
</template>
<!-- <el-divider content-position="left">操作权限</el-divider> -->
<div class="info_box">
<div class="table_name"><el-text class="mx-1" type="primary">主表</el-text></div>
<el-table v-if="powerUnitAry.recUnitAry.masterUnitList" :data="powerUnitAry.recUnitAry.masterUnitList" size="small" style="width: 100%; --el-table-border-color: none;" :header-cell-style="{background:'#eef1f6',color:'#606266'}" class="customer-no-border-table" >
<el-table-column prop="name" label="字段" />
<el-table-column label="可见" align="center" width="80">
<template #default="scope">
@ -213,9 +208,27 @@ watch(()=>visible.value,(val:boolean)=>{
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</div>
<el-row v-if="powerUnitAry.recUnitAry.sunUnitList" v-for="(item,index) in powerUnitAry.recUnitAry.sunUnitList" :key="index">
<el-col :span="24" class="table_name"><el-text class="mx-1" type="primary">{{item.name}}</el-text>子表</el-col>
<el-col :span="24">
<el-table v-if="item.masterUnitList" :data="item.masterUnitList" size="small" style="width: 100%; --el-table-border-color: none;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
<el-table-column prop="name" label="字段" />
<el-table-column label="可见" align="center" width="80">
<template #default="scope">
<el-checkbox v-model="scope.row.isLook" label="" />
</template>
</el-table-column>
<el-table-column label="可编辑" align="center" width="80">
<template #default="scope">
<el-checkbox v-model="scope.row.isEdit" label="" />
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
<!-- {{formData}} -->
</div>

15
src/types/components.d.ts
View File

@ -22,24 +22,24 @@ declare module '@vue/runtime-core' {
DiyIconfont: typeof import('./../components/DesignForm/public/expand/diy-iconfont.vue')['default']
DragControl: typeof import('./../components/DesignForm/dragControl.vue')['default']
ElAffix: typeof import('element-plus/es')['ElAffix']
<<<<<<< HEAD
ElAlert: typeof import('element-plus/es')['ElAlert']
ElAside: typeof import('element-plus/es')['ElAside']
=======
>>>>>>> v7_master
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
ElCard: typeof import('element-plus/es')['ElCard']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
ElCol: typeof import('element-plus/es')['ElCol']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
@ -56,14 +56,11 @@ declare module '@vue/runtime-core' {
ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElLink: typeof import('element-plus/es')['ElLink']
ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
@ -71,7 +68,6 @@ declare module '@vue/runtime-core' {
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
ElSlider: typeof import('element-plus/es')['ElSlider']
ElSpace: typeof import('element-plus/es')['ElSpace']
ElStep: typeof import('element-plus/es')['ElStep']
@ -112,8 +108,8 @@ declare module '@vue/runtime-core' {
HeadToolsNew: typeof import('./../components/DesignForm/public/headToolsNew.vue')['default']
IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
IEpClose: typeof import('~icons/ep/close')['default']
<<<<<<< HEAD
IEpCollection: typeof import('~icons/ep/collection')['default']
IEpDelete: typeof import('~icons/ep/delete')['default']
IEpDownload: typeof import('~icons/ep/download')['default']
@ -132,6 +128,9 @@ declare module '@vue/runtime-core' {
IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
IEpUser: typeof import('~icons/ep/user')['default']
IEpView: typeof import('~icons/ep/view')['default']
=======
IEpSetting: typeof import('~icons/ep/setting')['default']
>>>>>>> v7_master
LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
LayoutPage: typeof import('./../components/DesignForm/layoutPage/index.vue')['default']
List: typeof import('./../components/DesignForm/public/form/components/list.vue')['default']

15
src/views/sysworkflow/lowcodepage/lowCodeFormPage.vue
View File

@ -11,6 +11,7 @@ import { getProductionMarkForm } from '@/api/DesignForm/requestapi'
// import PageDesign from "@/views/sysworkflow/lowcodepage/pageDesign.vue"
import PageDesignEs from "@/views/sysworkflow/lowcodepage/pageDesignes.vue"
import WorkFlow from "@/views/sysworkflow/lowcodepage/workFlow.vue"
import PageList from "@/views/sysworkflow/lowcodepage/pageList.vue"
@ -190,7 +191,7 @@ const runNextWindows = (val:number) => {
tabsActive.value = val
}
onMounted(()=>{
// formKeyStr.value = "16"
formKeyStr.value = "16"
})
</script>
<template>
@ -199,15 +200,19 @@ onMounted(()=>{
<el-drawer v-model="drawerOpenOrClose" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">
<el-tabs v-model="tabsActive" @tab-click="handleClick" stretch class="tabsMain">
<el-tab-pane label="页面设计" :name="1">
{{creetTabsActive}} ==》 {{tabsActive}}
<PageDesignEs v-model:state="state" v-model:form-key="formKeyStr" v-model:form-version="formVersion" :formconfigcont="formConfigCont" @judgeFormIsEdit="judgeFormIsEdit" @runNextWindows="runNextWindows" @closeFormPage="closeFormPage" />
</el-tab-pane>
<el-tab-pane label="流程设计" :name="2">
{{creetTabsActive}} ==》 {{tabsActive}}
<WorkFlow v-model:state="state" v-model:form-key="formKeyStr" v-model:form-version="formVersion" @judgeFlowIsEdit="judgeFlowIsEdit" @runNextWindows="runNextWindows" @closeFormPage="closeFormPage" />
</el-tab-pane>
<el-tab-pane label="列表设计" :name="3">{{creetTabsActive}} ==》 {{tabsActive}}</el-tab-pane>
<el-tab-pane label="页面设置" :name="4"></el-tab-pane>
<el-tab-pane label="列表设计" :name="3">
<PageList v-model:state="state" v-model:form-key="formKeyStr" v-model:form-version="formVersion" />
</el-tab-pane>
<el-tab-pane label="页面设置" :name="4">
{{creetTabsActive}} ==》 {{tabsActive}}
</el-tab-pane>
</el-tabs>
</el-drawer>
</div>

14
src/views/sysworkflow/lowcodepage/pageList.vue
View File

@ -0,0 +1,14 @@
<!--
@ 作者: 秦东
@ 时间: 2024-03-18 11:32:14
@ 备注: 自定义表单列表
-->
<script lang='ts' setup>
</script>
<template>
<div></div>
</template>
<style lang='scss' scoped>
</style>

5
src/widget/index.ts
View File

@ -12,6 +12,8 @@ import digitPage from './digitpage/index.vue'
import signatureMap from './writingboard/index.vue'
import videoUpAndPlay from './videoupload/index.vue'
import lowcodeCarsusel from './carousel/index.vue'
import lowcodeTransfer from './lowcodetransfer/index.vue'
import lowcodeImage from './lowcodeimage/index.vue'
export default (app: any) => {
@ -26,5 +28,6 @@ export default (app: any) => {
app.component('SignatureMap', signatureMap)
app.component('VideoUpAndPlay',videoUpAndPlay)
app.component('LowcodeCarsusel',lowcodeCarsusel)
app.component('LowcodeTransfer',lowcodeTransfer)
app.component('LowcodeImage',lowcodeImage)
}

181
src/widget/lowcodeimage/index.vue
View File

@ -0,0 +1,181 @@
<!--
@ 作者: 李文轩
@ 时间: 2024-03-14 13:49:57
@ 备注:
-->
<template>
<el-form-item
v-bind="data.item"
:prop="tProp || data.name"
:class="config.className"
:rules="itemRules as any"
:label="getLabel(data.item as FormItem)"
>
<input v-model="value" type="hidden" >
</el-form-item>
<LowcodeImage :data="props.data"></LowcodeImage>
</template>
<script lang='ts' setup>
import LowcodeImage from './lowcodeImage.vue';
import {
constControlChange,
constFormProps,
} from '@/api/DesignForm/utils'
import validate from '@/api/DesignForm/validate'
import { FormItem, FormList } from '@/api/DesignForm/types'
const props = withDefaults(
defineProps<{
data: FormList
tablekey: any
numrun?: number
modelValue?: any // 子表和弹性布局时时有传
tProp?: string // 子表时的form-item的prop值，用于子表校验用
}>(),
{}
)
const emits = defineEmits<{
(e: 'update:modelValue', numVal: any): void
}>()
const formProps = inject(constFormProps, {}) as any
const type = computed(() => {
return formProps.value.type
})
const config = computed(() => {
return props.data.config || {}
})
const changeEvent = inject(constControlChange, '') as any
const value = computed({
get() {
if (props.tProp) {
// 表格和弹性布局
return props.modelValue
} else {
return formProps.value.model[props.data.name]
}
},
set(newVal: any) {
if (props.tProp) {
emits('update:modelValue', newVal)
}
updateModel(newVal)
}
})
const updateModel = (val: any) => {
let controlAttribute = ""
if(props.data.control){
if(props.data.control.type){
controlAttribute = props.data.control.type
}
}
changeEvent &&
changeEvent({
key: props.data.name,
value: val,
data: props.data,
tProp: props.tProp,
type: props.data.type,
attribute: controlAttribute
})
}
const getLabel = (ele: FormItem) => {
const showColon = formProps.value.showColon ? '：' : ''
if (ele) {
return ele.showLabel ? '' : ele.label + showColon
} else {
return ''
}
}
// 返回当前item项的校验规则
const itemRules = computed(() => {
let temp
const itemR: any = props.data.item?.rules || []
const customR = formatCustomRules()
// 如果三个都没有设置，则返回undefined
if (itemR?.length || customR?.length) {
temp = [...customR, ...itemR]
}
return temp
})
// 处理自定义校验规则，将customRules转换后追加到rules里
const formatCustomRules = () => {
const rulesReg: any = {}
validate &&
validate.forEach(item => {
rulesReg[item.type] = item.regExp
})
// 获取校验方法 父级使用provide方法注入
const temp: any = []
props.data.customRules?.forEach((item: any) => {
if (!item.message && item.type !== 'methods') {
return // 方法时允许提示信息为空
}
let obj = {}
if (item.type === 'required') {
obj = { required: true }
} else if (item.type === 'rules') {
// 自定义表达式
obj = { pattern: item.rules }
} else if (item.type === 'methods') {
// 方法时
const methods: any = item.methods
if (methods) {
obj = { validator: inject(methods, {}) }
}
} else if (item.type) {
obj = { pattern: rulesReg[item.type as string] }
}
// 这里判断下防某些条件下重复push的可能或存重复校验类型
let message: any = { message: item.message }
if (!item.message) {
// 当使用validator校验时，如果存在message字段则不能使用 callback(new Error('x'));的提示
message = {}
}
temp.push(
Object.assign(
{
trigger: item.trigger || 'blur'
},
obj,
message
)
)
})
return temp
}
</script>
<style lang='scss' scoped>
.imgbox{
padding: 0 5px;
max-width: 300px;
max-height: 200px;
width: 100%;
height: 200px;
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: var(--el-fill-color-light);
color: var(--el-text-color-secondary);
font-size: 30px;
}
}
</style>

147
src/widget/lowcodeimage/lowcodeImage.vue
View File

@ -0,0 +1,147 @@
<template>
<img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" @click="handleLink(props.data?.control)" />
</template>
<script setup >
import errimg from '@/assets/404_images/imgNotFound.png'
const props = defineProps({
// eslint-disable-next-line vue/require-default-prop
data: {
type: Object,
}
})
/*
*/
let styleObject = {
}
let url = props.data?.control.imgUrl
if(props.data?.control.imgUrl===''){
url = errimg
}else{
url = props.data?.control.imgUrl
}
const fitNum = props.data?.control.fit
let fit= ''
switch (fitNum) {
case 1:
fit = "fill";
break;
case 2:
fit = "contain";
break;
case 3:
fit = "cover";
break;
case 4:
fit = "none";
break;
case 5:
fit = "scale-down";
break;
}
const showMode = props.data?.control.showMode
if (showMode==='自定义像素值') {
const pxWidth = props.data?.control.pxWidth
const pxHeight = props.data?.control.pxHeight
styleObject.width = pxWidth+'px';
styleObject.height = pxHeight+'px';
}else{
const widthPercent = props.data?.control.widthPercent
const heightPercent = props.data?.control.heightPercent
styleObject.width = widthPercent+'%';
styleObject.height = heightPercent+'%';
}
const radius = props.data?.control.radius
const radiusClass = ref('');
let radiusClassIsActive = false
let radiusNum = props.data?.control.radiusNum+'px'
if(radius === true ){
radiusClass.value = 'radius'
radiusClassIsActive = true
}
const mt = props.data?.control.mt+'px'
const mb = props.data?.control.mb+'px'
const ml = props.data?.control.ml+'px'
const mr = props.data?.control.mr+'px'
const pt = props.data?.control.pt+'px'
const pb = props.data?.control.pb+'px'
const pl = props.data?.control.pl+'px'
const pr = props.data?.control.pr+'px'
const mp = ref('mp')
const floatStyle = ref('floatStyle')
const floatFlag = props.data?.control.floatFlag
const floatValue = props.data?.control.floatValue
const boderAndShadowClass = ref('');
const boderAndShadow = props.data?.control.boderAndShadow
let boderAndShadowClassIsActive = false
if(boderAndShadow === true ){
boderAndShadowClass.value = 'boderAndShadow'
boderAndShadowClassIsActive = true
}
function handleLink(item){
console.log("handleLink")
let url = "";
let urlStart = 'http://'
// http:// 7
//https:// 8
if (item.link.length < 7) {
if (item.link == '') {
alert("未配置跳转地址")
return
}
url = urlStart + "" + item.link
} else {
const linkStartComplete1 = item.link.startsWith("http://")
const linkStartComplete2 = item.link.startsWith("https://")
if (linkStartComplete1 || linkStartComplete2) {
url = item.link
} else {
url = urlStart + "" + item.link
}
}
window.open(url, '_blank')
}
</script>
<style>
.boderAndShadow {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.radius {
border-radius: v-bind(radiusNum);
}
.mp {
margin-top: v-bind(mt);
margin-bottom: v-bind(mb);
margin-left:v-bind(ml);
margin-right:v-bind(mr);
padding-top: v-bind(pt);
padding-bottom: v-bind(pb);
padding-left: v-bind(pl);
padding-right: v-bind(pr);
}
.floatStyle {
float: v-bind(floatValue);
}
</style>

181
src/widget/lowcodetransfer/index.vue
View File

@ -0,0 +1,181 @@
<!--
@ 作者: 李文轩
@ 时间: 2024-02-07 13:49:57
@ 备注:
-->
<template>
<el-form-item
v-bind="data.item"
:prop="tProp || data.name"
:class="config.className"
:rules="itemRules as any"
:label="getLabel(data.item as FormItem)"
>
<input v-model="value" type="hidden" >
</el-form-item>
<LowcodeTransfer :data="props.data"></LowcodeTransfer>
</template>
<script lang='ts' setup>
import LowcodeTransfer from './lowcodeTransfer.vue';
import {
constControlChange,
constFormProps,
} from '@/api/DesignForm/utils'
import validate from '@/api/DesignForm/validate'
import { FormItem, FormList } from '@/api/DesignForm/types'
const props = withDefaults(
defineProps<{
data: FormList
tablekey: any
numrun?: number
modelValue?: any // 子表和弹性布局时时有传
tProp?: string // 子表时的form-item的prop值，用于子表校验用
}>(),
{}
)
const emits = defineEmits<{
(e: 'update:modelValue', numVal: any): void
}>()
const formProps = inject(constFormProps, {}) as any
const type = computed(() => {
return formProps.value.type
})
const config = computed(() => {
return props.data.config || {}
})
const changeEvent = inject(constControlChange, '') as any
const value = computed({
get() {
if (props.tProp) {
// 表格和弹性布局
return props.modelValue
} else {
return formProps.value.model[props.data.name]
}
},
set(newVal: any) {
if (props.tProp) {
emits('update:modelValue', newVal)
}
updateModel(newVal)
}
})
const updateModel = (val: any) => {
let controlAttribute = ""
if(props.data.control){
if(props.data.control.type){
controlAttribute = props.data.control.type
}
}
changeEvent &&
changeEvent({
key: props.data.name,
value: val,
data: props.data,
tProp: props.tProp,
type: props.data.type,
attribute: controlAttribute
})
}
const getLabel = (ele: FormItem) => {
const showColon = formProps.value.showColon ? '：' : ''
if (ele) {
return ele.showLabel ? '' : ele.label + showColon
} else {
return ''
}
}
// 返回当前item项的校验规则
const itemRules = computed(() => {
let temp
const itemR: any = props.data.item?.rules || []
const customR = formatCustomRules()
// 如果三个都没有设置，则返回undefined
if (itemR?.length || customR?.length) {
temp = [...customR, ...itemR]
}
return temp
})
// 处理自定义校验规则，将customRules转换后追加到rules里
const formatCustomRules = () => {
const rulesReg: any = {}
validate &&
validate.forEach(item => {
rulesReg[item.type] = item.regExp
})
// 获取校验方法 父级使用provide方法注入
const temp: any = []
props.data.customRules?.forEach((item: any) => {
if (!item.message && item.type !== 'methods') {
return // 方法时允许提示信息为空
}
let obj = {}
if (item.type === 'required') {
obj = { required: true }
} else if (item.type === 'rules') {
// 自定义表达式
obj = { pattern: item.rules }
} else if (item.type === 'methods') {
// 方法时
const methods: any = item.methods
if (methods) {
obj = { validator: inject(methods, {}) }
}
} else if (item.type) {
obj = { pattern: rulesReg[item.type as string] }
}
// 这里判断下防某些条件下重复push的可能或存重复校验类型
let message: any = { message: item.message }
if (!item.message) {
// 当使用validator校验时，如果存在message字段则不能使用 callback(new Error('x'));的提示
message = {}
}
temp.push(
Object.assign(
{
trigger: item.trigger || 'blur'
},
obj,
message
)
)
})
return temp
}
</script>
<style lang='scss' scoped>
.imgbox{
padding: 0 5px;
max-width: 300px;
max-height: 200px;
width: 100%;
height: 200px;
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: var(--el-fill-color-light);
color: var(--el-text-color-secondary);
font-size: 30px;
}
}
</style>

394
src/widget/lowcodetransfer/lowcodeTransfer.vue
View File

@ -0,0 +1,394 @@
<template>
<div v-if="dataFinished" class="transfer">
<div class="leftArea">
<div class="transferName">{{ transferConfig.transferName }}</div>
<div style="padding-left: 15px; padding-right: 25px;margin-top: 10px;margin-bottom: 8px;">
<ElInput v-model="keyword" placeholder="搜索">
<template #prefix>
<ElIcon class="el-input__icon">
<Search />
</ElIcon>
</template>
</ElInput>
</div>
<div class="leftScroll">
<ElScrollbar height="100%">
<ElTree
ref="treeRef" node-key="id" empty-text="暂无数据" :data="userList" :props="treeProps" show-checkbox
highlight-current :default-expand-all="isExpandAll" :filter-node-method="filterNode"
@check="handleCheckList" @check-change="getCheckedList" />
</ElScrollbar>
</div>
</div>
<div class="rigthArea">
<div style="margin-bottom: 8px;">
<div class="transferName"><span>已选: {{ checkList.length }}</span><ElButton link style="float: right;margin-right: 5px;" @click="clearCheckList" >清空</ElButton></div>
</div>
<ElScrollbar height="calc(100% - 50px)">
<ElTag v-for="user in checkList" :key="user.id" style="display: block; font-size: 13px; letter-spacing: 1.5px;text-align: center;margin-top: 8px;height: 30px;width: 75%;margin-left:40px;padding-top: 6px;" closable @close="handleCloseTag(user)">
{{
user.label
}}[{{
user.parent.data.label
}}]
</ElTag>
</ElScrollbar>
</div>
</div>
</template>
<script setup name="MultiTreeSelector">
import { ref, watch, onMounted } from 'vue'
import request from '@/utils/request';
const props = defineProps({
// eslint-disable-next-line vue/require-default-prop
data: {
type: Object,
}
})
const fixedOptions = props.data?.control.fixedOptions
const transferConfig = props.data?.config
const treeProps = {
value: 'id',
label: 'label',
disabled: 'disabled',
children: 'children'
}
let dataFinished = false
const treeRef = ref()
const isExpandAll = ref(true) // 是否全展开
const keyword = ref('') // 搜索关键字
const checkList = ref([]) // 选中的list
const userList = ref([])
let checkedIdList = ["302697","ceshi","301625"];
checkedIdList = [];
const url = transferConfig.apiUrl;/* '/javasys/lowCode/transfer/getOrgAndManTree' */
function getDetail() {
//console.log(11111)
if(transferConfig.transferDataSource==="数据源"){
return request({
url: url,
method: transferConfig.method,
});
}
}
if(transferConfig.transferDataSource==="数据源"){
getDetail().then(({ data }) => {
//console.log(`获取穿梭框接口数据`);
let resData = ref(data.children)
// 全选方法2:插入 全选node
userList.value = [{
id: '全选',
label: '全选',
children: [...resData.value]
}]
treeRef.value.setCheckedKeys(checkedIdList,true)
setTimeout(() => {
checkedIdList.forEach(element => {
const _node = treeRef?.value?.getNode(element)
if (!_node) return
const _checkList = checkList.value
if (_node.checked) { // 勾选时
if (_node.checked && _node.childNodes.length === 0) {
_checkList.push(_node)
}
// 通过new Set() 实现数据去重
checkList.value = Array.from(new Set(_checkList))
// 遍历子级,递归,直到获取最后一级的人员
if (_node.childNodes.length > 0) {
_node.childNodes.map(item => handleCheckList(item.data))
}
} else if (!_node.checked) { // 取消勾选
checkList.value = checkList.value.filter(item => item.checked)
}
});
}, 50);
});
}
const getCheckedList = () => {
checkedIdList = treeRef.value.getCheckedKeys(true)
}
let resData1 = ref([
{
id: '3',
label: '营销部',
children: [
{
id: '3-1',
label: '威震天'
},
{
id: '3-2',
label: '嫦娥'
}
]
},
{
id: '2',
label: '业务部',
children: [
{
id: '2-1-1',
label: '业务部子部1',
children: [
{
id: '2-1-0001',
label: '李白'
},
{
id: '2-1-0002',
label: '萧峰'
}
]
},
{
id: '2-2-1',
label: '业务部子部2',
children: [
{
id: '2-2-00006',
label: '武则天'
},
{
id: '2-2-00005',
label: '拿破仑'
}
]
}
]
},
{
id: '4',
label: '软件开发部',
children: [
{
id: '5-3',
label: '张辽'
},
{
id: '5-9',
label: '吕布'
},
{
id: '5-0',
label: '许褚'
},
]
}
])
// 勾选或者取消勾选
const handleCheckList = (val) => {
const valId = val.id;
const _node = treeRef?.value?.getNode(valId)
if (!_node) return
const _checkList = checkList.value
if (_node.checked) { // 勾选时
if (_node.checked && _node.childNodes.length === 0) {
_checkList.push(_node)
}
// 通过new Set() 实现数据去重
checkList.value = Array.from(new Set(_checkList))
// 遍历子级,递归,直到获取最后一级的人员
if (_node.childNodes.length > 0) {
_node.childNodes.map(item => handleCheckList(item.data))
}
} else if (!_node.checked) { // 取消勾选
checkList.value = checkList.value.filter(item => item.checked)
}
}
/* 人员树 父级过滤的递归
* @node 当前节点
* @result 存结果的数组
* @key
* */
const getParentNode = (node, result, key) => {
let isPass = node?.data?.label?.indexOf(key) !== -1
isPass ? result.push(isPass) : ''
if (!isPass && node.level !== 1 && node.parent) {
return getParentNode(node.parent, result, key)
}
}
/*人员树过滤
* @value 过滤的关键字
* @data 被过滤的tree
* @node
* */
const filterNode = (value, data, node) => {
if (!value) {
data.disabled = false
return true
} else {
//带过滤条件时,所有父级都禁止勾选
// array.map(k => (!k.disabled) && (_childArr.push(k)))
(data.children) && (data.disabled = true)
}
let _arr = []
getParentNode(node, _arr, value)
let result = false
_arr.forEach(item => {
result = result || item
})
return result
}
// 通过tag 取消勾选
const handleCloseTag = (tag) => {
if (!treeRef?.value) return
checkList.value = checkList.value.filter(item => {
treeRef.value.setChecked(tag, false)
if (!item?.data) return
return item.data.id !== tag.data.id
})
}
// 清空CheckList
const clearCheckList = () => {
if (!treeRef?.value) return
treeRef.value.setCheckedKeys([])
while (checkList.value.length > 0) {
checkList.value.pop()
}
}
// 全选 /全不选
const handleCheckAll = (array) => {
treeRef.value.setCheckedNodes(array)
array.map(item => {
handleCheckList(item)
})
}
// 折叠/展开
const expandAll = () => {
const nodesMap = treeRef.value.store.nodesMap
for (let key in nodesMap) {
nodesMap[key].expanded = isExpandAll.value
}
}
// 执行tree数据过滤
watch(keyword, (newVal) => {
treeRef.value.filter(newVal)
})
//获取配置接口相应或获取固定选项值
if(transferConfig.transferDataSource==="固定选项"){
setTimeout(() => {
// 全选方法2:插入 全选node
userList.value = [{
id: '全选',
label: '全选',
children: fixedOptions
}]
//console.log(treeRef)
treeRef.value.setCheckedKeys(checkedIdList,true)
setTimeout(() => {
checkedIdList.forEach(element => {
const _node = treeRef?.value?.getNode(element)
if (!_node) return
const _checkList = checkList.value
if (_node.checked) { // 勾选时
if (_node.checked && _node.childNodes.length === 0) {
_checkList.push(_node)
}
// 通过new Set() 实现数据去重
checkList.value = Array.from(new Set(_checkList))
// 遍历子级,递归,直到获取最后一级的人员
if (_node.childNodes.length > 0) {
_node.childNodes.map(item => handleCheckList(item.data))
}
} else if (!_node.checked) { // 取消勾选
checkList.value = checkList.value.filter(item => item.checked)
}
});
}, 50);
}, 50);
dataFinished = true
}else{
getDetail
dataFinished = true
}
onMounted(() => {
})
</script>
<style scoped>
.transfer {
display: flex;
}
.transferName {
height: 30px;
padding-top: 8px;
background-color: #F5F7FA;
padding-left: 10px;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid gainsboro;
}
.buttonArea {
display: flex;
flex-direction: row;
align-items: center;
}
.buttonArea2 {
height: 33px;
}
.leftScroll {
height: 367px;
}
.leftArea {
border: 1px solid gainsboro;
width: 300px;
border-radius: 5px;
height: 456px;
position: relative;
background-color: white;
}
.rigthArea {
border: 1px solid gainsboro;
width: 300px;
border-radius: 5px;
height: 456px;
background-color: white;
}</style>
Write Preview
Loading…
Cancel
Save