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

图片

liwenxuan_v4
liwenxuan 2 years ago
parent
36fd3ac0ae
commit
ff593de357
5 changed files with 307 additions and 10 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. 37
      src/components/DesignForm/assembly/index.ts
  2. 271
      src/components/DesignForm/formControlAttr.vue
  3. 1
      src/components/DesignForm/public/form/formGroup.vue
  4. 2
      src/widget/index.ts
  5. 6
      src/widget/lowcodetransfer/lowcodeTransfer.vue

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

@ -291,7 +291,7 @@ const selectOption: any = [
type: 'upload',
label: '图片/文件',
icon: 'image',
iconFont: 'fa-photo',
iconFont: 'fa-file-image-o',
control: {
modelValue: '' // 也可以是[{name:'',url:''}]形式
},
@ -385,7 +385,40 @@ const selectOption: any = [
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: {}
},
]
},
{

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

@ -592,6 +592,70 @@ const attrList = computed(() => {
path: 'config.componentName',
vShow: ['component']
},
{
label: '上传图片',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_url',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '尺寸',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_showMode',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '契合度',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_fit',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '圆角',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_radius',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '边框和阴影',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_boderAndShadow',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '图片链接',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_link',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '浮动',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_float',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '内外四边距',
value: config.lowcodeImage,
path: 'config.lowcodeImage',
type: 'lowcodeImage_marginAndPadding',
vIf: state.isSearch,
vShow: ['lowcodeImage']
},
{
label: '轮播图设置',
value: config.carousel,
@ -1446,14 +1510,25 @@ const changeCurrentUploadImgid = (clickedRow:any) => {
//liwenxuan 20240217 transfer start
const transferDataSourceOptions = [
const showModeSelectOptions = [
{
value: '数据源',
label: '数据源',
value: '自定义像素值',
label: '自定义像素值',
},
{
value: '固定选项',
label: '固定选项',
value: '自定义占父容器比例',
label: '自定义占父容器比例',
},
]
const floatSelectOptions = [
{
value: 'left',
label: '左',
},
{
value: 'right',
label: '右',
},
]
@ -1535,6 +1610,32 @@ const setNodeEnable = (node:Node,data:Tree) =>{
//liwenxuan 20240217 transfer end
//liwenxuan20240313 lowcodeImage start
//图片上传成功钩子
function lowcodeImageUploadSuccess(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles){
const element = controlData.value.control
element.imgUrl=response.data.url
element.uploadFlag=true
}
//
const transferDataSourceOptions = [
{
value: '数据源',
label: '数据源',
},
{
value: '固定选项',
label: '固定选项',
},
]
//const radio = ref(controlData.value.control.fit)
//liwenxuan20240313 lowcodeImage end
</script>
<template>
<div class="sidebar-tools">
@ -1667,6 +1768,166 @@ const setNodeEnable = (node:Node,data:Tree) =>{
</el-input>
</div>
</el-row>
<!-- 图片 liwenxuan 20240312 -->
<el-row v-else-if="item.type === 'lowcodeImage_radius'">
<el-switch v-model="controlData.control.radius" style="margin-right: 15px;"/>
<el-popover
placement="top-start"
:width="200"
trigger="hover"
content="数值越大圆角程度越高"
>
<template #reference>
<el-input-number v-if="controlData.control.radius" v-model="controlData.control.radiusNum" :step="1"/>
</template>
</el-popover>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_url'">
<el-upload
:action="uploadUrl" :before-remove="beforeRemove"
:on-success="lowcodeImageUploadSuccess"
:on-error="videoUploadErr"
:limit="1"
accept=".jpg,.jpeg,.png,.tif,.tga,.bmp,.dds,.svg,.eps,.pdf,.hdr,.raw,.exr,.psd,.afphoto,.afdesign">
<el-button v-if="!controlData.control.uploadFlag" type="primary">点此上传</el-button>
<el-button v-if="controlData.control.uploadFlag" type="primary">已上传,点击修改</el-button>
</el-upload>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_showMode'">
<el-select
v-model="controlData.control.showMode"
placeholder="选项数据源"
style="width: 150px; height:20px">
<el-option
v-for="showModeSelected in showModeSelectOptions"
:key="showModeSelected.value"
:label="showModeSelected.label"
:value="showModeSelected.value"
/>
</el-select>
<div v-if="controlData.control.showMode==='自定义像素值'" style="width: auto;margin-top:33px;margin-left:-187px;padding-bottom: 6px;">
<span style="margin-right: 10px;">宽度(像素) </span><el-input-number v-model="controlData.control.pxWidth" style="margin-bottom: 10px;" /><br/>
<span style="margin-right: 10px;">高度(像素) </span><el-input-number v-model="controlData.control.pxHeight" />
</div>
<div v-if="controlData.control.showMode==='自定义占父容器比例'" style="width: auto;margin-top:33px;margin-left:-187px;padding-bottom: 6px;">
<span style="margin-right: 10px;">百分比宽 </span><el-input-number v-model="controlData.control.widthPercent" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;">百分比高 </span><el-input-number v-model="controlData.control.heightPercent" />
</div>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_fit'">
<el-radio-group v-model="controlData.control.fit">
<el-popover
placement="top-start"
title="fill"
:width="200"
trigger="hover"
content="默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。"
>
<template #reference>
<el-radio :label="1" :value="1">fill</el-radio>
</template>
</el-popover>
<el-popover
placement="top-start"
title="contain"
:width="200"
trigger="hover"
content="缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。"
>
<template #reference>
<el-radio :label="2" :value="2">contain</el-radio>
</template>
</el-popover>
<el-popover
placement="top-start"
title="cover"
:width="200"
trigger="hover"
content="调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。"
>
<template #reference>
<el-radio :label="3" :value="3">cover</el-radio>
</template>
</el-popover>
<el-popover
placement="top-start"
title="none"
:width="200"
trigger="hover"
content="不对替换的内容调整大小。"
>
<template #reference>
<el-radio :label="4" :value="4">none</el-radio>
</template>
</el-popover>
<el-popover
placement="top-start"
title="scale-down"
:width="200"
trigger="hover"
content="调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）"
>
<template #reference>
<el-radio :label="5" :value="5">scale-down</el-radio>
</template>
</el-popover>
</el-radio-group>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_boderAndShadow'">
<el-switch v-model="controlData.control.boderAndShadow" style="margin-right: 15px;"/>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_link'">
<el-input
v-model="controlData.control.link"
placeholder="请录入图片链接地址"
style="width:221px"
/>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_marginAndPadding'">
<div style="width: auto;margin-top:33px;margin-left:-47px;padding-bottom: 6px;">
<span style="margin-right: 10px;"> 外边距(上)</span><el-input-number v-model="controlData.control.mt" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 外边距(下)</span><el-input-number v-model="controlData.control.mb" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 外边距(左)</span><el-input-number v-model="controlData.control.ml" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 外边距(右)</span><el-input-number v-model="controlData.control.mr" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 内边距(上)</span><el-input-number v-model="controlData.control.pt" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 内边距(下)</span><el-input-number v-model="controlData.control.pb" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 内边距(左)</span><el-input-number v-model="controlData.control.pl" style="margin-bottom: 10px;"/><br/>
<span style="margin-right: 10px;"> 内边距(右)</span><el-input-number v-model="controlData.control.pr" style="margin-bottom: 10px;"/><br/>
</div>
</el-row>
<el-row v-else-if="item.type === 'lowcodeImage_float'">
<el-switch v-model="controlData.control.floatFlag" style="margin-right: 15px;"/>
<el-select
v-if="controlData.control.floatFlag"
v-model="controlData.control.floatValue"
style="width: 150px; height:20px">
<el-option
v-for="showModeSelected1 in floatSelectOptions"
:key="showModeSelected1.value"
:label="showModeSelected1.label"
:value="showModeSelected1.value"
/>
</el-select>
</el-row>
<el-input

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

@ -426,6 +426,7 @@ onMounted(()=>{
</div>
</template>
<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" />

2
src/widget/index.ts
View File

@ -10,6 +10,7 @@ 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) => {
app.component('SerialNumber', serialNumber)
@ -21,4 +22,5 @@ export default (app: any) => {
app.component('VideoUpAndPlay',videoUpAndPlay)
app.component('LowcodeCarsusel',lowcodeCarsusel)
app.component('LowcodeTransfer',lowcodeTransfer)
app.component('LowcodeImage',lowcodeImage)
}

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

@ -72,7 +72,7 @@ checkedIdList = [];
const url = transferConfig.apiUrl;/* '/javasys/lowCode/transfer/getOrgAndManTree' */
function getDetail() {
console.log(11111)
//console.log(11111)
if(transferConfig.transferDataSource==="数据源"){
return request({
url: url,
@ -82,7 +82,7 @@ function getDetail() {
}
if(transferConfig.transferDataSource==="数据源"){
getDetail().then(({ data }) => {
console.log(`获取穿梭框接口数据`);
//console.log(`获取穿梭框接口数据`);
let resData = ref(data.children)
// 全选方法2:插入 全选node
userList.value = [{
@ -302,7 +302,7 @@ if(transferConfig.transferDataSource==="固定选项"){
label: '全选',
children: fixedOptions
}]
console.log(treeRef)
//console.log(treeRef)
treeRef.value.setCheckedKeys(checkedIdList,true)
setTimeout(() => {

Write Preview
Loading…
Cancel
Save