功能变化: 一对多组件优化

pull/102/head
李强 2023-07-04 08:56:48 +08:00
parent 231b4add34
commit c229dbe1aa
2 changed files with 58 additions and 2 deletions

View File

@ -12,7 +12,7 @@
</el-col>
</el-row>
<el-form :model="currentForm" ref="currentFormRef" label-width="0px" size="mini" type="flex">
<el-row style="margin-bottom: 0px" :gutter="5" v-for="(field, index) in currentForm.data" :key="index">
<el-row style="margin-bottom: 0" :gutter="5" v-for="(field, index) in currentForm.data" :key="index">
<el-col :span="elProps.index.span" v-if="elProps.index">
<div style="text-align: center">
{{index+1}}
@ -34,6 +34,13 @@
</el-option>
</el-select>
<el-input-number style="width: 100%" v-else-if="elProps.fields[key].type === 'number'" controls-position="right" v-model="field[key]"></el-input-number>
<div v-else-if="elProps.fields[key].type === 'image'" style="height: 50px;width: 50px;">
<d2p-file-uploader v-model="field[key]" :elProps="elProps.fields[key].elProps || { listType: 'picture-card', accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif', limit: 1 }"></d2p-file-uploader>
</div>
<!-- 富文本 -->
<span v-else-if="elProps.fields[key].type === 'ueditor'">
<values-popover v-model="field[key]" :elProps="{ type: 'ueditor' }" @previewClick="previewClick(index,key)"></values-popover>
</span>
<el-input v-model="field[key]" v-else placeholder="请输入"></el-input>
</el-form-item>
</el-col>
@ -51,9 +58,20 @@
</el-col>
</el-form-item>
</el-form>
<el-dialog
title="富文本内容编辑"
:visible.sync="previewVisible"
append-to-body
width="900">
<d2p-ueditor v-model="currentForm.data[ueditorIndex][ueditorKey]" :config="ueditorConfig"></d2p-ueditor>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="previewVisible = false">完成</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import util from '@/libs/util.js'
export default {
name: 'foreignKeyCrudForm',
model: {
@ -118,6 +136,31 @@ export default {
},
data () {
return {
ueditorConfig: {
serverUrl: util.baseURL() + 'api/system/file/ueditor/',
headers: { Authorization: 'JWT ' + util.cookies.get('token') },
imageUrlPrefix: util.baseURL(),
//
scrawlUrlPrefix: util.baseURL(),
//
snapscreenUrlPrefix: util.baseURL(),
//
catcherUrlPrefix: util.baseURL(),
// 访
videoUrlPrefix: util.baseURL(),
// 访
fileUrlPrefix: util.baseURL(),
//
imageManagerUrlPrefix: util.baseURL(),
//
fileManagerUrlPrefix: util.baseURL()
// ueditor
// http://fex.baidu.com/ueditor/#start-config
},
//
previewVisible: false,
ueditorIndex: 0,
ueditorKey: null
}
},
computed: {
@ -200,7 +243,20 @@ export default {
this.currentForm.data.push(fields)
this.$emit('change', this.currentForm.data)
this.$emit('input', this.currentForm.data)
},
//
previewClick (index, key) {
this.ueditorIndex = index
this.ueditorKey = key
this.previewVisible = true
console.log('previewClick', index, key)
}
}
}
</script>
<style scoped>
::v-deep .d2p-file-uploader .el-upload--picture-card{
width: 50px;
height: 50px;
}
</style>

View File

@ -41,7 +41,7 @@
placement="right"
width="400"
trigger="hover"
v-if="value.length > 0"
v-if="value && value.length > 0"
popper-class="userprjtreepop"
@show="showEvents"
@hide="show=false">