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

web/src/components/foreign-key-crud-form/foreign-key-crud-form.vue

@@ -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>

web/src/components/values-popover/values-popover.vue

@@ -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">