Browse Source

增加图片控件

old
wangqing 4 years ago
parent
commit
d0b299e314
  1. 1
      src/assets/icons/image.svg
  2. 31
      src/components/generator/config.js
  3. 1
      src/components/parser/Parser.vue
  4. 1
      src/components/render/render.js
  5. 8
      src/components/render/slots/el-image.js
  6. 9
      src/utils/convert.js
  7. 2
      src/utils/sign.js
  8. 54
      src/views/form/RightPanel.vue

1
src/assets/icons/image.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616919955098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2050" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M934.4 981.312H89.6a46.08 46.08 0 0 1-46.912-46.848V89.6A46.08 46.08 0 0 1 89.6 42.688h844.8a46.08 46.08 0 0 1 46.912 46.848V934.4c0 24.96-20.352 46.848-46.912 46.848zM136.512 887.68h750.976V136.384H136.512v751.232z" fill="#2c2c2c" p-id="2051"></path><path d="M89.6 981.312a45.056 45.056 0 0 1-32.832-14.08c-18.816-18.688-18.816-48.384 0-65.536l560-560.704a45.312 45.312 0 0 1 56.32-7.808l242.56 137.408a47.36 47.36 0 0 1 17.152 64 47.552 47.552 0 0 1-64.128 17.28l-211.2-120.32-535.04 535.68a45.056 45.056 0 0 1-32.832 14.08zM330.496 494.08c-89.152 0-162.688-73.472-162.688-164.032a162.432 162.432 0 0 1 162.688-162.432c89.216 0 164.288 73.408 164.288 163.968 0 89.024-73.536 162.432-164.288 162.432z m0-232.768c-37.504 0-68.8 31.232-68.8 68.736 0 39.04 31.296 70.272 70.4 70.272 39.104 0 70.4-31.232 70.4-70.272a72.192 72.192 0 0 0-72-68.736z" fill="#2c2c2c" p-id="2052"></path></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

31
src/components/generator/config.js

@ -512,6 +512,37 @@ export const selectComponents = [
} }
] ]
// 布局型组件 【左面板】
export const imageComponents = [
{
typeId: 18,
__config__: {
label: '图片展示',
showLabel: false,
labelWidth: null,
showDefaultValue: false,
showRequired:false,
showClearable:false,
showRegList:false,
tag: 'el-image',
tagIcon: 'image',
layout: 'colFormItem',
span: 24,
required: true,
regList: [],
changeTag: true,
},
__slot__: {
'error':'image'
},
style: {width: '100%'},
src: '',
fit : 'contain',
alt:'',
}
]
// // 布局型组件 【左面板】 // // 布局型组件 【左面板】
// export const layoutComponents = [ // export const layoutComponents = [
// { // {

1
src/components/parser/Parser.vue

@ -341,6 +341,7 @@ export default {
submitForm() { submitForm() {
this.$refs[this.formConf.formRef].validate(valid => { this.$refs[this.formConf.formRef].validate(valid => {
if (!valid){ if (!valid){
//
if(document.getElementsByClassName('el-form-item__error').length>0){ if(document.getElementsByClassName('el-form-item__error').length>0){
} }

1
src/components/render/render.js

@ -125,7 +125,6 @@ export default {
const dataObject = makeDataObject() const dataObject = makeDataObject()
const confClone = deepClone(this.conf) const confClone = deepClone(this.conf)
const children = this.$slots.default || [] const children = this.$slots.default || []
// 如果slots文件夹存在与当前tag同名的文件,则执行文件中的代码 // 如果slots文件夹存在与当前tag同名的文件,则执行文件中的代码
mountSlotFlies.call(this, h, confClone, children) mountSlotFlies.call(this, h, confClone, children)

8
src/components/render/slots/el-image.js

@ -0,0 +1,8 @@
export default {
error(h, conf, key) {
return <div slot="error" class="image-slot" style='text-align: center;color:#909399'>
<i style='font-size:40px;'
class="el-icon-picture-outline"></i>
</div>
}
}

9
src/utils/convert.js

@ -1,5 +1,5 @@
import _ from 'lodash' import _ from 'lodash'
import {inputComponents, selectComponents} from '@/components/generator/config' import {imageComponents, inputComponents, selectComponents} from '@/components/generator/config'
import {jsonClone} from '@/utils/index' import {jsonClone} from '@/utils/index'
/** /**
@ -45,7 +45,7 @@ export function dbDataConvertForItemJson(data) {
} }
if (!typeMap.size > 0) { if (!typeMap.size > 0) {
//根据类型获取默认数据 //根据类型获取默认数据
_.concat(inputComponents, selectComponents).forEach(item => { _.concat(inputComponents, selectComponents,imageComponents).forEach(item => {
typeMap.set(item.typeId, item) typeMap.set(item.typeId, item)
}) })
} }
@ -158,6 +158,11 @@ let dataParams = {
'limit': 'limit', 'limit': 'limit',
'multiple': 'multiple' 'multiple': 'multiple'
},
//图片
18: {
'src': 'src',
'alt': 'alt'
} }
} }

2
src/utils/sign.js

@ -49,8 +49,6 @@ export default class sign {
let jsonObj = _.merge(urlParams, requestParams) let jsonObj = _.merge(urlParams, requestParams)
jsonObj = _.merge(jsonObj, dataParams) jsonObj = _.merge(jsonObj, dataParams)
let requestBody = this.sortAsc(jsonObj) let requestBody = this.sortAsc(jsonObj)
console.log(constants.signSecret + JSON.stringify(requestBody))
console.log(CryptoJS.MD5(constants.signSecret + JSON.stringify(requestBody)).toString().toLowerCase())
return CryptoJS.MD5(constants.signSecret + JSON.stringify(requestBody)).toString().toLowerCase() return CryptoJS.MD5(constants.signSecret + JSON.stringify(requestBody)).toString().toLowerCase()
} }

54
src/views/form/RightPanel.vue

@ -35,7 +35,9 @@
<el-form-item v-if="activeData.__config__.componentName!==undefined" label="组件名"> <el-form-item v-if="activeData.__config__.componentName!==undefined" label="组件名">
{{ activeData.__config__.componentName }} {{ activeData.__config__.componentName }}
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.label!==undefined" label="标题"> <el-form-item
v-if="activeData.__config__.label!==undefined&&activeData.__config__.showLabel!==false"
label="标题">
<el-input v-model="activeData.__config__.label" placeholder="请输入标题" @input="changeRenderKey"/> <el-input v-model="activeData.__config__.label" placeholder="请输入标题" @input="changeRenderKey"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.placeholder!==undefined" label="占位提示"> <el-form-item v-if="activeData.placeholder!==undefined" label="占位提示">
@ -79,14 +81,16 @@
<el-radio-button label="bottom"/> <el-radio-button label="bottom"/>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.labelWidth!==undefined" label="标签宽度"> <!-- <el-form-item v-if="activeData.__config__.labelWidth!==undefined" label="标签宽度">-->
<el-input v-model.number="activeData.__config__.labelWidth" type="number" <!-- <el-input v-model.number="activeData.__config__.labelWidth" type="number"-->
placeholder="请输入标签宽度"/> <!-- placeholder="请输入标签宽度"/>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度"> <!-- <el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度">-->
<el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable/> <!-- <el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable/>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item v-if="activeData.__vModel__!==undefined" label="默认值"> <el-form-item
v-if="activeData.__vModel__!==undefined&&activeData.__config__.showDefaultValue!==false"
label="默认值">
<el-input <el-input
:value="setDefaultValue(activeData.__config__.defaultValue)" :value="setDefaultValue(activeData.__config__.defaultValue)"
placeholder="请输入默认值" placeholder="请输入默认值"
@ -522,7 +526,7 @@
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="可否筛选"> <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="可否筛选">
<el-switch v-model="activeData.filterable"/> <el-switch v-model="activeData.filterable"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.clearable !== undefined" label="能否清空"> <el-form-item v-if="activeData.clearable !== undefined&&showClearable" label="能否清空">
<el-switch v-model="activeData.clearable"/> <el-switch v-model="activeData.clearable"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.showTip !== undefined" label="显示提示"> <el-form-item v-if="activeData.__config__.showTip !== undefined" label="显示提示">
@ -549,7 +553,24 @@
<el-form-item v-if="activeData.__config__.tag === 'el-select'" label="是否多选"> <el-form-item v-if="activeData.__config__.tag === 'el-select'" label="是否多选">
<el-switch v-model="activeData.multiple" @change="multipleChange"/> <el-switch v-model="activeData.multiple" @change="multipleChange"/>
</el-form-item> </el-form-item>
<el-form-item v-if="activeData.__config__.required !== undefined" label="是否必填"> <el-form-item v-if="activeData.__config__.tag === 'el-image'" label="图片地址">
<el-input v-model="activeData.src" placeholder="请输入图片url地址"/>
<el-upload
style="text-align: center"
ref="logoUpload"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:headers="getUploadHeader"
:on-success="(response, file, fileList)=>{
activeData.src = response.data
}"
:action="getUploadUrl"
:show-file-list="false">
<el-button slot="trigger" size="small" type="text">点击上传图片 *</el-button>
</el-upload>
</el-form-item>
<el-form-item
v-if="activeData.__config__.required !== undefined&&activeData.__config__.showRequired!==false"
label="是否必填">
<el-switch v-model="activeData.__config__.required"/> <el-switch v-model="activeData.__config__.required"/>
</el-form-item> </el-form-item>
@ -571,7 +592,8 @@
</el-tree> </el-tree>
</template> </template>
<template v-if="Array.isArray(activeData.__config__.regList)"> <template
v-if="Array.isArray(activeData.__config__.regList)&&activeData.__config__.showRegList!==false">
<el-divider>正则校验</el-divider> <el-divider>正则校验</el-divider>
<div <div
v-for="(item, index) in activeData.__config__.regList" v-for="(item, index) in activeData.__config__.regList"
@ -820,6 +842,14 @@ export default {
}, },
isShowStep() { isShowStep() {
return ['el-input-number', 'el-slider'].indexOf(this.activeTag) > -1 return ['el-input-number', 'el-slider'].indexOf(this.activeTag) > -1
},
getUploadHeader() {
return {
'token': this.$store.getters['user/isLogin']
}
},
getUploadUrl() {
return `${process.env.VUE_APP_API_ROOT}/user/file/upload`
} }
}, },
watch: { watch: {

Loading…
Cancel
Save