From 616d806c2df607c6d8a944b12ff9dbd8b42a981d Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Tue, 12 Jul 2022 15:58:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E6=9E=B6=E6=8A=80=E6=9C=AF=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/api/personalCenter.js               |    8 +
 .../views/capacityOnTheShelf/Application.vue  |   13 +-
 .../capacityOnTheShelf/BusinessComponent.vue  |   11 +
 .../DevelopmentComponents.vue                 |   11 +
 .../views/capacityOnTheShelf/FilesUpload.vue  |   68 +
 .../capacityOnTheShelf/LayerServices.vue      |   11 +
 .../components/PutOnTheShelf.vue              | 1220 +++++++++--------
 7 files changed, 798 insertions(+), 544 deletions(-)
 create mode 100644 front/src/views/capacityOnTheShelf/FilesUpload.vue

diff --git a/front/src/api/personalCenter.js b/front/src/api/personalCenter.js
index 67079961..892ff59d 100644
--- a/front/src/api/personalCenter.js
+++ b/front/src/api/personalCenter.js
@@ -231,3 +231,11 @@ export function queryResourceRelByKeyId(params) {
     params,
   })
 }
+// 文件上传接口
+export function filesUpload(data) {
+  return request({
+    url: window.SITE_CONFIG.apiURL + '/upload',
+    method: 'post',
+    data,
+  })
+}
diff --git a/front/src/views/capacityOnTheShelf/Application.vue b/front/src/views/capacityOnTheShelf/Application.vue
index d2483801..38d71e39 100644
--- a/front/src/views/capacityOnTheShelf/Application.vue
+++ b/front/src/views/capacityOnTheShelf/Application.vue
@@ -99,6 +99,7 @@
   import mybus from '@/myplugins/mybus'
   const showView = ref('基本信息')
   const router = useRouter()
+  let shiyongshouce = ref({})
   const navList = ref([])
   const navList2 = ref([])
   const fileList = ref({})
@@ -285,7 +286,9 @@
   }
   init()
   mybus.on('chageDataFrom', (obj) => {
-    console.log(obj, dataFrom.value.infoList)
+    if (obj.attrType == '使用手册' && obj.attrValue != null) {
+      shiyongshouce.value = obj
+    }
     dataFrom.value.infoList = dataFrom.value.infoList.filter(
       (item) => item.attrType !== obj.attrType
     )
@@ -293,6 +296,14 @@
       obj.attrValue = ''
     }
     dataFrom.value.infoList.push(obj)
+    if (shiyongshouce.value.attrValue) {
+      dataFrom.value.infoList.map((syscitem, syscindex) => {
+        if (syscitem.attrType == '使用手册') {
+          dataFrom.value.infoList[syscindex] = shiyongshouce.value
+        }
+      })
+    }
+    console.log('数据变更=================》', obj, dataFrom.value.infoList)
   })
   mybus.on('chageFileList', (obj) => {
     fileList.value = obj
diff --git a/front/src/views/capacityOnTheShelf/BusinessComponent.vue b/front/src/views/capacityOnTheShelf/BusinessComponent.vue
index 8a515f72..42f6ceba 100644
--- a/front/src/views/capacityOnTheShelf/BusinessComponent.vue
+++ b/front/src/views/capacityOnTheShelf/BusinessComponent.vue
@@ -173,6 +173,7 @@
       ],
     },
   ])
+  let shiyongshouce = ref({})
   const navList = ref([])
   const navList2 = ref([])
   const fileList = ref({})
@@ -297,6 +298,9 @@
   }
   init()
   mybus.on('chageDataFrom', (obj) => {
+    if (obj.attrType == '使用手册' && obj.attrValue != null) {
+      shiyongshouce.value = obj
+    }
     dataFrom.value.infoList = dataFrom.value.infoList.filter(
       (item) => item.attrType !== obj.attrType
     )
@@ -304,6 +308,13 @@
       obj.attrValue = ''
     }
     dataFrom.value.infoList.push(obj)
+    if (shiyongshouce.value.attrValue) {
+      dataFrom.value.infoList.map((syscitem, syscindex) => {
+        if (syscitem.attrType == '使用手册') {
+          dataFrom.value.infoList[syscindex] = shiyongshouce.value
+        }
+      })
+    }
     console.log('数据变更=================》', obj, dataFrom.value.infoList)
   })
   mybus.on('chageFileList', (obj) => {
diff --git a/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue b/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue
index 1f43e8ce..135e5e0f 100644
--- a/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue
+++ b/front/src/views/capacityOnTheShelf/DevelopmentComponents.vue
@@ -173,6 +173,7 @@
       ],
     },
   ])
+  let shiyongshouce = ref({})
   const navList = ref([])
   const navList2 = ref([])
   const fileList = ref({})
@@ -297,6 +298,9 @@
   }
   init()
   mybus.on('chageDataFrom', (obj) => {
+    if (obj.attrType == '使用手册' && obj.attrValue != null) {
+      shiyongshouce.value = obj
+    }
     dataFrom.value.infoList = dataFrom.value.infoList.filter(
       (item) => item.attrType !== obj.attrType
     )
@@ -304,6 +308,13 @@
       obj.attrValue = ''
     }
     dataFrom.value.infoList.push(obj)
+    if (shiyongshouce.value.attrValue) {
+      dataFrom.value.infoList.map((syscitem, syscindex) => {
+        if (syscitem.attrType == '使用手册') {
+          dataFrom.value.infoList[syscindex] = shiyongshouce.value
+        }
+      })
+    }
     console.log('数据变更=================》', obj, dataFrom.value.infoList)
   })
   mybus.on('chageFileList', (obj) => {
diff --git a/front/src/views/capacityOnTheShelf/FilesUpload.vue b/front/src/views/capacityOnTheShelf/FilesUpload.vue
new file mode 100644
index 00000000..ce675fe4
--- /dev/null
+++ b/front/src/views/capacityOnTheShelf/FilesUpload.vue
@@ -0,0 +1,68 @@
+<!--
+ * @Author: hisense.wuhongjian
+ * @Date: 2022-04-19 17:18:48
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-05-06 19:11:32
+ * @Description: markdown编辑器
+-->
+<template>
+  <editor
+    v-model="text"
+    :iconfontJs="iconfontJs"
+    pageFullScreen
+    @save="saveText"
+  ></editor>
+</template>
+
+<script setup>
+  import { defineComponent, ref, defineProps } from 'vue'
+  import { message } from 'ant-design-vue'
+  import Editor from 'md-editor-v3'
+  import { pinyin } from 'pinyin-pro'
+  // import FileSaver from 'file-saver'
+  import 'md-editor-v3/lib/style.css'
+  import * as fontJs from '/public/static/js/font.js'
+  import { filesUpload } from '@/api/personalCenter'
+  import mybus from '@/myplugins/mybus'
+  let text = ''
+  let iconfontJs = fontJs
+  const props = defineProps({
+    data: { type: Array, default: null },
+  })
+  function saveText(file) {
+    const blob = new Blob([file], {
+      type: 'md',
+    })
+    let myfile = new File([blob], '技术文档.md')
+    var formData = new FormData()
+    const type = pinyin('技术文档', {
+      pattern: 'initial',
+    }).replace(/\s*/g, '')
+    formData.append('fileName', '技术文档' + '.md')
+    formData.append('type', type)
+    formData.append('file', myfile) // 'file' 为HTTP Post里的字段名, file 对浏览器里的File对象
+    // formData.append('name', this.route.currentRoute.query.id + '.md')
+    // FileSaver.saveAs(blob, '开发指南.md')
+    filesUpload(formData).then((resData) => {
+      const res = resData
+      mybus.emit('showTextFunctionEmit', false)
+      let infoList = ref({
+        attrType: '使用手册',
+        attrValue: res.data.data,
+        delFlag: 0,
+      })
+      mybus.emit('chageDataFrom', infoList.value)
+      console.log('res', res)
+      if (res.data.code === 0) {
+        message.success('保存成功')
+      } else {
+        message.error('保存失败')
+      }
+    })
+  }
+</script>
+<style scoped>
+  .md-fullscreen {
+    z-index: 10;
+  }
+</style>
diff --git a/front/src/views/capacityOnTheShelf/LayerServices.vue b/front/src/views/capacityOnTheShelf/LayerServices.vue
index c6a7ae55..507eba4a 100644
--- a/front/src/views/capacityOnTheShelf/LayerServices.vue
+++ b/front/src/views/capacityOnTheShelf/LayerServices.vue
@@ -121,6 +121,7 @@
       ],
     },
   ])
+  let shiyongshouce = ref({})
   const navList = ref([])
   const navList2 = ref([])
   const fileList = ref({})
@@ -245,6 +246,9 @@
   }
   init()
   mybus.on('chageDataFrom', (obj) => {
+    if (obj.attrType == '使用手册' && obj.attrValue != null) {
+      shiyongshouce.value = obj
+    }
     dataFrom.value.infoList = dataFrom.value.infoList.filter(
       (item) => item.attrType !== obj.attrType
     )
@@ -252,6 +256,13 @@
       obj.attrValue = ''
     }
     dataFrom.value.infoList.push(obj)
+    if (shiyongshouce.value.attrValue) {
+      dataFrom.value.infoList.map((syscitem, syscindex) => {
+        if (syscitem.attrType == '使用手册') {
+          dataFrom.value.infoList[syscindex] = shiyongshouce.value
+        }
+      })
+    }
     console.log('数据变更=================》', obj, dataFrom.value.infoList)
   })
   mybus.on('chageFileList', (obj) => {
diff --git a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
index 96eae8fe..9cbd5f94 100644
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@@ -16,14 +16,21 @@
       <template v-if="title.isConfigure">
         <div class="bottom">
           <div class="items" v-if="data[title.name].length > 0">
-            <div class="item" v-for="(val, index) in data[title.name]" :key="'key1' + val.name + index">
+            <div
+              class="item"
+              v-for="(val, index) in data[title.name]"
+              :key="'key1' + val.name + index"
+            >
               <p>
                 <span>{{ title.name }}-{{ index + 1 }}</span>
                 <span></span>
               </p>
-              <p v-for="attr in props.configure.filter(
-                (item, index2) => item.name === title.name
-              )[0].list" :key="'key2' + attr.name + index2">
+              <p
+                v-for="attr in props.configure.filter(
+                  (item, index2) => item.name === title.name
+                )[0].list"
+                :key="'key2' + attr.name + index2"
+              >
                 <span>{{ attr.name }}</span>
                 <span v-if="attr.type === 'image'">
                   <a-image :width="85" :height="60" :src="val.img" />
@@ -37,19 +44,51 @@
             </div>
           </div>
           <div class="add">添加更多{{ title.name }}</div>
-          <div class="form" v-for="(val, index) in props.configure.filter(
-            (item) => item.name === title.name
-          )[0].list" :key="'key3' + val.name + index">
+          <div
+            class="form"
+            v-for="(val, index) in props.configure.filter(
+              (item) => item.name === title.name
+            )[0].list"
+            :key="'key3' + val.name + index"
+          >
             <span>{{ val.name }}</span>
-            <a-input v-model:value="val.note1" :maxlength="24" :placeholder="'请填写' + val.name + ',不超过24个字符'"
-              v-if="val.type == 'input'" />
-            <a-textarea v-model:value="val.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + val.name"
-              v-else-if="val.type == 'textArea'" />
-            <a-input-number v-model:value="val.note1" :min="0" :max="9999" :step="0.01" string-mode
-              :placeholder="'请填写' + val.name" v-else-if="val.type == 'number'" />
-            <a-radio-group v-model:value="val.note1" :options="val.options" v-else-if="val.type == 'radio'" />
-            <upload :key="showKey" type="图片" btnName="上传图片" :maxCount="1" :data="val" :list="[]" tip="支持图片类型，大小不超过100M"
-              v-else-if="val.type == 'image'"></upload>
+            <a-input
+              v-model:value="val.note1"
+              :maxlength="24"
+              :placeholder="'请填写' + val.name + ',不超过24个字符'"
+              v-if="val.type == 'input'"
+            />
+            <a-textarea
+              v-model:value="val.note1"
+              :showCount="true"
+              :maxlength="200"
+              :placeholder="'请填写' + val.name"
+              v-else-if="val.type == 'textArea'"
+            />
+            <a-input-number
+              v-model:value="val.note1"
+              :min="0"
+              :max="9999"
+              :step="0.01"
+              string-mode
+              :placeholder="'请填写' + val.name"
+              v-else-if="val.type == 'number'"
+            />
+            <a-radio-group
+              v-model:value="val.note1"
+              :options="val.options"
+              v-else-if="val.type == 'radio'"
+            />
+            <upload
+              :key="showKey"
+              type="图片"
+              btnName="上传图片"
+              :maxCount="1"
+              :data="val"
+              :list="[]"
+              tip="支持图片类型，大小不超过100M"
+              v-else-if="val.type == 'image'"
+            ></upload>
           </div>
           <div class="submit">
             <a-button type="primary" @click="add(title.name)">提交</a-button>
@@ -60,613 +99,708 @@
         <div class="bottom">
           <div class="form" v-for="item in title.children" :key="item.id">
             <span>{{ item.name }}</span>
-            <a-input v-if="item.type == 'input'" v-model:value="item.note1" :placeholder="'请输入' + item.name" />
-            <a-radio-group v-else-if="item.type == 'radio'" v-model:value="item.note1" :options="item.options" />
-            <a-input v-else-if="item.type == 'text'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
-              :disabled="true" />
-            <a-input v-else-if="item.type == 'text2'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
-              :disabled="true" />
-            <a-textarea v-else-if="item.type == 'textArea'" v-model:value="item.note1" :showCount="true"
-              :maxlength="200" :placeholder="'请输入' + item.name" />
-            <upload v-else-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
-              :list="props.imgList" tip="支持图片类型，大小不超过100M"></upload>
-            <upload v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
-              :data="item" :list="props.fileList" tip="支持文件类型，大小不超过100M"></upload>
-            <upload v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :data="item" :busType="2"
-              :list="props.fileList2" tip="支持文件类型，大小不超过100M"></upload>
-            <upload v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :data="item"
-              :list="props.videoList" tip="支持视频类型，大小不超过100M"></upload>
+            <a-input
+              v-if="item.type == 'input'"
+              v-model:value="item.note1"
+              :placeholder="'请输入' + item.name"
+            />
+            <a-radio-group
+              v-else-if="item.type == 'radio'"
+              v-model:value="item.note1"
+              :options="item.options"
+            />
+            <a-input
+              v-else-if="item.type == 'text'"
+              v-model:value="item.note1"
+              :placeholder="'请输入' + item.name"
+              :disabled="true"
+            />
+            <a-input
+              v-else-if="item.type == 'text2'"
+              v-model:value="item.note1"
+              :placeholder="'请输入' + item.name"
+              :disabled="true"
+            />
+            <a-textarea
+              v-else-if="item.type == 'textArea'"
+              v-model:value="item.note1"
+              :showCount="true"
+              :maxlength="200"
+              :placeholder="'请输入' + item.name"
+            />
+            <upload
+              v-else-if="item.type == 'image'"
+              type="图片"
+              btnName="上传图片"
+              :maxCount="1"
+              :data="item"
+              :list="props.imgList"
+              tip="支持图片类型，大小不超过100M"
+            ></upload>
+            <upload
+              v-else-if="item.type == 'file' && item.name !== '使用手册'"
+              type="文件"
+              btnName="上传附件"
+              :maxCount="1"
+              :data="item"
+              :list="props.fileList"
+              tip="支持文件类型，大小不超过100M"
+            ></upload>
+            <div
+              v-else-if="item.name == '使用手册'"
+              @click="showTextFunction()"
+            >
+              上传附件
+            </div>
+            <upload
+              v-else-if="item.type == 'video'"
+              type="视频"
+              btnName="上传视频"
+              :maxCount="1"
+              :data="item"
+              :list="props.videoList"
+              tip="支持视频类型，大小不超过100M"
+            ></upload>
             <a-button v-else-if="item.type == 'dialog'" @click="sourceClick">
               请选择来源应用
             </a-button>
-            <a-button v-else-if="item.type == 'dialog2'" @click="componentsClick">
+            <a-button
+              v-else-if="item.type == 'dialog2'"
+              @click="componentsClick"
+            >
               请选择关联组件
             </a-button>
-            <a-select v-else-if="item.type == 'select'" style="width: 240px" v-model:value="item.note1"
-              :placeholder="'请选择' + item.name">
-              <a-select-option v-for="(itemSelect, indexSelect) in item.options" :key="indexSelect"
-                :value="itemSelect.dictLabel">
+            <a-select
+              v-else-if="item.type == 'select'"
+              style="width: 240px"
+              v-model:value="item.note1"
+              :placeholder="'请选择' + item.name"
+            >
+              <a-select-option
+                v-for="(itemSelect, indexSelect) in item.options"
+                :key="indexSelect"
+                :value="itemSelect.dictLabel"
+              >
                 {{ itemSelect.dictLabel }}
               </a-select-option>
             </a-select>
-            <div v-else-if="item.type == 'checkBox'" class="application-Area" id="application-Area" :key="showKey">
-              <div v-for="(itemson, indexson) in item.options" :key="indexson" class="application-Area-son"
-                @click="ApplicationArea(item, itemson)" :class="
+            <div
+              v-else-if="item.type == 'checkBox'"
+              class="application-Area"
+              id="application-Area"
+              :key="showKey"
+            >
+              <div
+                v-for="(itemson, indexson) in item.options"
+                :key="indexson"
+                class="application-Area-son"
+                @click="ApplicationArea(item, itemson)"
+                :class="
                   item.note2.indexOf(itemson.dictLabel) != -1
                     ? 'application-Area-down'
                     : ''
-                ">
+                "
+              >
                 {{ itemson.dictLabel }}
               </div>
             </div>
           </div>
           <div class="AssociatedApplication">
-            <a-modal v-model:visible="visibleAssociatedApplication" :title="titleName" @ok="handleOk"
-              @cancel="handleCancel" style="width: 960px">
+            <a-modal
+              v-model:visible="visibleAssociatedApplication"
+              :title="titleName"
+              @ok="handleOk"
+              @cancel="handleCancel"
+              style="width: 960px"
+            >
               <div>
-                <a-transfer v-model:target-keys="targetKeys" v-model:selected-keys="selectedKeys"
-                  :data-source="mockData" :titles="titles" :render="(item) => item.title" @change="handleChange"
-                  @selectChange="handleSelectChange" />
+                <a-transfer
+                  v-model:target-keys="targetKeys"
+                  v-model:selected-keys="selectedKeys"
+                  :data-source="mockData"
+                  :titles="titles"
+                  :render="(item) => item.title"
+                  @change="handleChange"
+                  @selectChange="handleSelectChange"
+                />
               </div>
             </a-modal>
           </div>
         </div>
       </template>
     </div>
+    <div
+      v-show="showText"
+      class="fuwenbenbianjiqi"
+      style="width: 100px; height: 100px; z-index: 10000"
+    >
+      <VueTemplateDemo></VueTemplateDemo>
+    </div>
   </div>
 </template>
 <script setup>
-import { ref, defineProps, watch, onMounted } from 'vue'
-import mybus from '@/myplugins/mybus'
-import upload from '@/views/components/upload'
-import { message } from 'ant-design-vue'
-import {
-  getCategoryTreePage,
-  queryApplicationRelByResourceId,
-  queryResourceRelByKeyId,
-} from '@/api/personalCenter'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const abilityToType = router.currentRoute.value.query.abilityToType
-const componentTypeValue = router.currentRoute.value.query.componentTypeValue
-const props = defineProps({
-  // 展示数据
-  refData: { type: Object, default: null },
-  // 表单数据
-  dataFrom: { type: Array, default: null },
-  // 文件回显
-  fileList: { type: Array, default: null },
-  fileList2: { type: Array, default: null },
-  // 图片回显
-  imgList: { type: Array, default: null },
-  // 视频回显
-  videoList: { type: Array, default: null },
-  // 外部字段
-  externalField: { type: Array, default: null },
-  // 多条的配置
-  configure: { type: Array, default: null },
-  // [{
-  //   name:'计费标准信息',
-  //   list:[
-  //     {
-  //       name:'计费方式',
-  //       type:'radio',
-  //       field:'type',
-  //       options:
-  //         {
-  //           name:'一次性买断',
-  //           value:'1'
-  //         },
-  //         {
-  //           name:'按调用次数',
-  //           value:'2'
-  //         },
-  //         {
-  //           name:'按并发路数',
-  //           value:'3'
-  //         },
-  //         {
-  //           name:'按年计费',
-  //           value:'4'
-  //         }
-  //       ],
-  //       note1:''
-  //     },
-  //     {
-  //       name:'计费标准',
-  //       field:'price',
-  //       type:'number',
-  //       company:'元',
-  //       note1: ''
-  //     },
-  //     {
-  //       name:'计费标准描述',
-  //       field:'desc',
-  //       type:'textArea',
-  //       note1:''
-  //     }
-  //   ]
-  // }]
-})
-// console.log('props==========>', props)
-const data = ref({
-  list: [],
-})
-const showKey = ref(0)
-props.refData.children.map((item) => {
-  if (item.name == '基本信息') {
-    item.children.map((val) => {
-      if (val.name == '能力类型') {
-        val.note1 = abilityToType
-      }
-      if (val.name == '组件类型') {
-        val.note1 = componentTypeValue
-      }
-    })
-  }
-  if (
-    props.configure &&
-    props.configure.filter((val) => val.name === item.name).length > 0
-  ) {
-    item.isConfigure = true
-    data.value[item.name] = []
-  } else {
-    item.isConfigure = false
-  }
-})
-let arr = props.refData.children.filter((item) => {
-  if (props.configure) {
-    if (!item.isConfigure) {
-      return item
-    }
-  } else {
-    return item
-  }
-})
-data.value.list = []
-// 获取字典数据
-arr.forEach((val) => {
-  val.children.forEach((item) => {
-    if (item.isLinkToDic === 'true' && item.linkValue) {
-      getCategoryTreePage({
-        page: 1,
-        limit: 20,
-        dictTypeId: item.linkValue,
-        deFlage: 0,
-      }).then((res) => {
-        if (item.type === 'radio') {
-          item.options = res.data.data.list.map((radio) => radio.dictLabel)
-        } else if (item.type === 'select' || item.type === 'checkBox') {
-          if (item.type === 'checkBox') {
-            if (!item.note2) {
-              item.note2 = []
-            }
-          }
-          item.options = res.data.data.list
-        }
-        data.value.list.push(item)
-      })
-    } else {
-      data.value.list.push(item)
-    }
+  import { ref, defineProps, watch, onMounted } from 'vue'
+  import mybus from '@/myplugins/mybus'
+  import upload from '@/views/components/upload'
+  import { message } from 'ant-design-vue'
+  import {
+    getCategoryTreePage,
+    queryApplicationRelByResourceId,
+    queryResourceRelByKeyId,
+    filesUpload,
+  } from '@/api/personalCenter'
+  import VueTemplateDemo from '@/views/capacityOnTheShelf/FilesUpload.vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const abilityToType = router.currentRoute.value.query.abilityToType
+  const componentTypeValue = router.currentRoute.value.query.componentTypeValue
+  const props = defineProps({
+    // 展示数据
+    refData: { type: Object, default: null },
+    // 表单数据
+    dataFrom: { type: Array, default: null },
+    // 文件回显
+    fileList: { type: Array, default: null },
+    fileList2: { type: Array, default: null },
+    // 图片回显
+    imgList: { type: Array, default: null },
+    // 视频回显
+    videoList: { type: Array, default: null },
+    // 外部字段
+    externalField: { type: Array, default: null },
+    // 多条的配置
+    configure: { type: Array, default: null },
+    // [{
+    //   name:'计费标准信息',
+    //   list:[
+    //     {
+    //       name:'计费方式',
+    //       type:'radio',
+    //       field:'type',
+    //       options:
+    //         {
+    //           name:'一次性买断',
+    //           value:'1'
+    //         },
+    //         {
+    //           name:'按调用次数',
+    //           value:'2'
+    //         },
+    //         {
+    //           name:'按并发路数',
+    //           value:'3'
+    //         },
+    //         {
+    //           name:'按年计费',
+    //           value:'4'
+    //         }
+    //       ],
+    //       note1:''
+    //     },
+    //     {
+    //       name:'计费标准',
+    //       field:'price',
+    //       type:'number',
+    //       company:'元',
+    //       note1: ''
+    //     },
+    //     {
+    //       name:'计费标准描述',
+    //       field:'desc',
+    //       type:'textArea',
+    //       note1:''
+    //     }
+    //   ]
+    // }]
   })
-})
-if (props.dataFrom) {
-  // console.log(props.dataFrom, data.value.list)
-  props.dataFrom.infoList.forEach((item) => {
+  // console.log('props==========>', props)
+  const data = ref({
+    list: [],
+  })
+  const showKey = ref(0)
+  props.refData.children.map((item) => {
+    if (item.name == '基本信息') {
+      item.children.map((val) => {
+        if (val.name == '能力类型') {
+          val.note1 = abilityToType
+        }
+        if (val.name == '组件类型') {
+          val.note1 = componentTypeValue
+        }
+      })
+    }
     if (
       props.configure &&
-      props.configure.filter((val) => val.name === item.attrType).length > 0
+      props.configure.filter((val) => val.name === item.name).length > 0
     ) {
-      data.value[item.attrType] = JSON.parse(item.attrValue)
-    } else if (item.attrType === '应用领域') {
-      props.refData.children.forEach((val) => {
-        val.children.forEach((child) => {
-          if (child.name === item.attrType) {
-            // 通过;分割成数组
-            child.note2 = item.attrValue.split(';')
-            showKey.value++
-            // console.log('应用领域', item, item.attrValue.split(';'), child)
+      item.isConfigure = true
+      data.value[item.name] = []
+    } else {
+      item.isConfigure = false
+    }
+  })
+  let arr = props.refData.children.filter((item) => {
+    if (props.configure) {
+      if (!item.isConfigure) {
+        return item
+      }
+    } else {
+      return item
+    }
+  })
+  data.value.list = []
+  // 获取字典数据
+  arr.forEach((val) => {
+    val.children.forEach((item) => {
+      if (item.isLinkToDic === 'true' && item.linkValue) {
+        getCategoryTreePage({
+          page: 1,
+          limit: 20,
+          dictTypeId: item.linkValue,
+          deFlage: 0,
+        }).then((res) => {
+          if (item.type === 'radio') {
+            item.options = res.data.data.list.map((radio) => radio.dictLabel)
+          } else if (item.type === 'select' || item.type === 'checkBox') {
+            if (item.type === 'checkBox') {
+              if (!item.note2) {
+                item.note2 = []
+              }
+            }
+            item.options = res.data.data.list
           }
+          data.value.list.push(item)
         })
-      })
-      //  item.note1 = item.attrValue.split(';')
-    }
-  })
-}
-const add = (title) => {
-  console.log(title, 'title')
-  let list = props.configure.filter((item) => item.name === title)[0].list
-  let flag = true
-  list.forEach((item) => {
-    // console.log(item)
-    if (item.type !== 'number' && !item.note1.length > 0) {
-      flag = false
-    } else if (item.type === 'number' && !item.note1 > 0) {
-      flag = false
-    }
-  })
-  if (flag) {
-    let obj = {}
-    list.forEach((item) => {
-      obj[item.field] = item.note1
+      } else {
+        data.value.list.push(item)
+      }
     })
-    data.value[title].push(obj)
-    // console.log(data.value[title])
+  })
+  if (props.dataFrom) {
+    // console.log(props.dataFrom, data.value.list)
+    props.dataFrom.infoList.forEach((item) => {
+      if (
+        props.configure &&
+        props.configure.filter((val) => val.name === item.attrType).length > 0
+      ) {
+        data.value[item.attrType] = JSON.parse(item.attrValue)
+      } else if (item.attrType === '应用领域') {
+        props.refData.children.forEach((val) => {
+          val.children.forEach((child) => {
+            if (child.name === item.attrType) {
+              // 通过;分割成数组
+              child.note2 = item.attrValue.split(';')
+              showKey.value++
+              // console.log('应用领域', item, item.attrValue.split(';'), child)
+            }
+          })
+        })
+        //  item.note1 = item.attrValue.split(';')
+      }
+    })
+  }
+  //显示富文本
+  let showText = ref(false)
+  const showTextFunction = () => {
+    showText.value = true
+  }
+  mybus.on('showTextFunctionEmit', (show) => {
+    console.log('ssdcsd')
+    showText.value = show
+  })
+  mybus.off('func')
+  const add = (title) => {
+    console.log(title, 'title')
+    let list = props.configure.filter((item) => item.name === title)[0].list
+    let flag = true
+    list.forEach((item) => {
+      // console.log(item)
+      if (item.type !== 'number' && !item.note1.length > 0) {
+        flag = false
+      } else if (item.type === 'number' && !item.note1 > 0) {
+        flag = false
+      }
+    })
+    if (flag) {
+      let obj = {}
+      list.forEach((item) => {
+        obj[item.field] = item.note1
+      })
+      data.value[title].push(obj)
+      // console.log(data.value[title])
+      mybus.emit('chageDataFrom', {
+        attrType: title,
+        attrValue: JSON.stringify(data.value[title]),
+        delFlag: 0,
+      })
+      list.forEach((item) => {
+        item.note1 = ''
+        showKey.value++
+      })
+    } else {
+      message.warning('请填写完整')
+    }
+  }
+  const del = (title, index) => {
+    data.value[title].splice(index, 1)
     mybus.emit('chageDataFrom', {
       attrType: title,
       attrValue: JSON.stringify(data.value[title]),
       delFlag: 0,
     })
-    list.forEach((item) => {
-      item.note1 = ''
-      showKey.value++
-    })
-  } else {
-    message.warning('请填写完整')
   }
-}
-const del = (title, index) => {
-  data.value[title].splice(index, 1)
-  mybus.emit('chageDataFrom', {
-    attrType: title,
-    attrValue: JSON.stringify(data.value[title]),
-    delFlag: 0,
-  })
-}
-const ApplicationArea = (item, itemson) => {
-  // console.log(item, itemson)
-  if (item.note2.indexOf(itemson.dictLabel) === -1) {
-    item.note2.push(itemson.dictLabel)
-  } else {
-    item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
-  }
-  mybus.emit('chageDataFrom', {
-    attrType: item.name,
-    attrValue: item.note2.join(';'),
-    delFlag: 0,
-  })
-}
-// 来源应用
-const visibleAssociatedApplication = ref(false)
-const mockData = ref([])
-const titles = ref(['未关联的应用名称', '已关联的应用名称'])
-const titleName = ref('关联应用')
-
-const sourceClick = () => {
-  visibleAssociatedApplication.value = true
-  queryApplicationRelByResourceId({
-    referenceId: 0,
-  }).then((res) => {
-    // console.log(res.data.data.notLinked)
-    res.data.data.notLinked.forEach((val, index) => {
-      // console.log(val, index)
-      mockData.value.push({
-        key: val.id,
-        title: val.name,
-        description: val.id,
-      })
-    })
-  })
-}
-// 关联组件
-const componentsClick = () => {
-  titles.value = ['未关联的组件名称', '已关联的组件名称']
-  titleName.value = '关联组件'
-
-  visibleAssociatedApplication.value = true
-  queryResourceRelByKeyId({
-    keyId: 0,
-    type: '组件服务',
-    referenceName: '',
-  }).then((res) => {
-    // console.log(res.data.data.notLinked)
-    res.data.data.notLinked.forEach((val, index) => {
-      // console.log(val, index)
-      mockData.value.push({
-        key: val.id,
-        title: val.name,
-        description: val.id,
-      })
-    })
-  })
-}
-const targetKeys = ref([])
-const selectedKeys = ref([])
-
-const handleChange = (nextTargetKeys, direction, moveKeys) => {
-  console.log('targetKeys: ', nextTargetKeys)
-  console.log('direction: ', direction)
-  console.log('moveKeys: ', moveKeys)
-}
-
-const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
-  console.log('targetSelectedKeys: ', targetSelectedKeys)
-}
-
-const handleOk = (e) => {
-  console.log(e)
-  visibleAssociatedApplication.value = false
-  // console.log('2222222222222', props.refData)
-  data.value.list.map((item) => {
-    if (item.name === '来源应用' || item.name === '关联组件信息') {
-      item.note1 = targetKeys.value + ''
-    }
-  })
-}
-const handleCancel = (e) => {
-  console.log(e)
-  visibleAssociatedApplication.value = false
-}
-
-watch(data.value.list, (newProps, oldProps) => {
-  // console.log(newProps, oldProps)
-  newProps.forEach((val) => {
-    // console.log('数据发生改变==========>', val)
-    if (
-      props.configure &&
-      props.configure.filter((item) => item.name === val.name).length > 0
-    ) {
-      mybus.emit('chageDataFrom', {
-        attrType: val.name,
-        attrValue: val.note1,
-        delFlag: 0,
-      })
-    } else if (
-      props.externalField &&
-      props.externalField.indexOf(val.name) > -1
-    ) {
-      mybus.emit('chageDataFromDwon', {
-        attrType: val.name,
-        attrValue: val.note1,
-        delFlag: 0,
-      })
+  const ApplicationArea = (item, itemson) => {
+    // console.log(item, itemson)
+    if (item.note2.indexOf(itemson.dictLabel) === -1) {
+      item.note2.push(itemson.dictLabel)
     } else {
-      if (val.name !== '应用领域') {
+      item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
+    }
+    mybus.emit('chageDataFrom', {
+      attrType: item.name,
+      attrValue: item.note2.join(';'),
+      delFlag: 0,
+    })
+  }
+  // 来源应用
+  const visibleAssociatedApplication = ref(false)
+  const mockData = ref([])
+  const titles = ref(['未关联的应用名称', '已关联的应用名称'])
+  const titleName = ref('关联应用')
+
+  const sourceClick = () => {
+    visibleAssociatedApplication.value = true
+    queryApplicationRelByResourceId({
+      referenceId: 0,
+    }).then((res) => {
+      // console.log(res.data.data.notLinked)
+      res.data.data.notLinked.forEach((val, index) => {
+        // console.log(val, index)
+        mockData.value.push({
+          key: val.id,
+          title: val.name,
+          description: val.id,
+        })
+      })
+    })
+  }
+  // 关联组件
+  const componentsClick = () => {
+    titles.value = ['未关联的组件名称', '已关联的组件名称']
+    titleName.value = '关联组件'
+
+    visibleAssociatedApplication.value = true
+    queryResourceRelByKeyId({
+      keyId: 0,
+      type: '组件服务',
+      referenceName: '',
+    }).then((res) => {
+      // console.log(res.data.data.notLinked)
+      res.data.data.notLinked.forEach((val, index) => {
+        // console.log(val, index)
+        mockData.value.push({
+          key: val.id,
+          title: val.name,
+          description: val.id,
+        })
+      })
+    })
+  }
+  const targetKeys = ref([])
+  const selectedKeys = ref([])
+
+  const handleChange = (nextTargetKeys, direction, moveKeys) => {
+    console.log('targetKeys: ', nextTargetKeys)
+    console.log('direction: ', direction)
+    console.log('moveKeys: ', moveKeys)
+  }
+
+  const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+    console.log('targetSelectedKeys: ', targetSelectedKeys)
+  }
+
+  const handleOk = (e) => {
+    console.log(e)
+    visibleAssociatedApplication.value = false
+    // console.log('2222222222222', props.refData)
+    data.value.list.map((item) => {
+      if (item.name === '来源应用' || item.name === '关联组件信息') {
+        item.note1 = targetKeys.value + ''
+      }
+    })
+  }
+  const handleCancel = (e) => {
+    console.log(e)
+    visibleAssociatedApplication.value = false
+  }
+
+  watch(data.value.list, (newProps, oldProps) => {
+    // console.log(newProps, oldProps)
+    newProps.forEach((val) => {
+      // console.log('数据发生改变==========>', val)
+      if (
+        props.configure &&
+        props.configure.filter((item) => item.name === val.name).length > 0
+      ) {
         mybus.emit('chageDataFrom', {
           attrType: val.name,
           attrValue: val.note1,
           delFlag: 0,
         })
+      } else if (
+        props.externalField &&
+        props.externalField.indexOf(val.name) > -1
+      ) {
+        mybus.emit('chageDataFromDwon', {
+          attrType: val.name,
+          attrValue: val.note1,
+          delFlag: 0,
+        })
+      } else {
+        if (val.name !== '应用领域') {
+          mybus.emit('chageDataFrom', {
+            attrType: val.name,
+            attrValue: val.note1,
+            delFlag: 0,
+          })
+        }
       }
-    }
+    })
   })
-})
 </script>
 <style lang="less" scoped>
-.put-on-the-shelf {
-  height: 680px;
-  overflow: scroll;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 50px 100px 25px;
+  .put-on-the-shelf {
+    height: 680px;
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 50px 100px 25px;
 
-  &>div {
-    width: 100%;
-    margin-top: 60px;
+    & > div {
+      width: 100%;
+      margin-top: 60px;
 
-    .top {
-      color: #333333;
-      font-size: 22px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-bottom: 25px;
+      .top {
+        color: #333333;
+        font-size: 22px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 25px;
 
-      div:first-child,
-      div:last-child {
-        width: 245px;
-        height: 1px;
-        background: #f0f0f0;
+        div:first-child,
+        div:last-child {
+          width: 245px;
+          height: 1px;
+          background: #f0f0f0;
+        }
+
+        div:nth-child(2) {
+          margin: 0 30px;
+        }
       }
 
-      div:nth-child(2) {
-        margin: 0 30px;
-      }
-    }
+      .bottom {
+        margin-top: 25px;
 
-    .bottom {
-      margin-top: 25px;
+        .items {
+          background: #fafafa;
+          padding: 10px;
 
-      .items {
-        background: #fafafa;
-        padding: 10px;
+          p {
+            display: flex;
+            justify-content: space-between;
 
-        p {
+            span:nth-of-type(1) {
+              width: 200px;
+            }
+
+            span:nth-of-type(2) {
+              width: 100%;
+              font-weight: 600;
+            }
+          }
+
+          p:nth-of-type(1) > span:nth-of-type(1) {
+            font-size: 18px;
+            font-weight: 600;
+          }
+
+          .del {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+
+            .delImg {
+              cursor: pointer;
+              display: inline-block;
+              width: 16px;
+              height: 18px;
+              background: url(~@/assets/home/sf_del.png) no-repeat;
+              margin-right: 5px;
+            }
+
+            div {
+              cursor: pointer;
+            }
+          }
+        }
+
+        .add {
+          margin-top: 10px;
+          font-size: 16px;
+          color: #007efb;
+        }
+
+        .form {
+          margin-top: 20px;
           display: flex;
-          justify-content: space-between;
+          justify-content: flex-start;
 
-          span:nth-of-type(1) {
+          span:first-child {
+            width: 120px;
+          }
+
+          :deep(.ant-input-textarea) {
+            width: 570px;
+          }
+
+          :deep(.ant-radio-group) {
+            width: 570px;
+          }
+
+          :deep(.ant-input-number) {
             width: 200px;
           }
 
-          span:nth-of-type(2) {
-            width: 100%;
-            font-weight: 600;
+          :deep(.ant-input) {
+            resize: none;
+            width: 570px;
+          }
+
+          .ant-btn {
+            width: 160px;
+            height: 32px;
+            text-align: center;
+            background: #edf4fc;
+            color: #0087ff;
+            border: 1px solid #bbd3ef;
+            border-radius: 6px;
           }
         }
 
-        p:nth-of-type(1)>span:nth-of-type(1) {
-          font-size: 18px;
-          font-weight: 600;
-        }
-
-        .del {
+        .submit {
+          margin-top: 40px;
           display: flex;
           justify-content: flex-end;
-          align-items: center;
 
-          .delImg {
-            cursor: pointer;
-            display: inline-block;
-            width: 16px;
-            height: 18px;
-            background: url(~@/assets/home/sf_del.png) no-repeat;
-            margin-right: 5px;
+          .ant-btn {
+            width: 80px;
+            height: 28px;
+            text-align: center;
+            background: #d9ebff;
+            color: #0087ff;
+            border: 1px solid #0087ff;
+            border-radius: 6px;
           }
-
-          div {
-            cursor: pointer;
-          }
-        }
-      }
-
-      .add {
-        margin-top: 10px;
-        font-size: 16px;
-        color: #007efb;
-      }
-
-      .form {
-        margin-top: 20px;
-        display: flex;
-        justify-content: flex-start;
-
-        span:first-child {
-          width: 120px;
-        }
-
-        :deep(.ant-input-textarea) {
-          width: 570px;
-        }
-
-        :deep(.ant-radio-group) {
-          width: 570px;
-        }
-
-        :deep(.ant-input-number) {
-          width: 200px;
-        }
-
-        :deep(.ant-input) {
-          resize: none;
-          width: 570px;
-        }
-
-        .ant-btn {
-          width: 160px;
-          height: 32px;
-          text-align: center;
-          background: #edf4fc;
-          color: #0087ff;
-          border: 1px solid #bbd3ef;
-          border-radius: 6px;
-        }
-      }
-
-      .submit {
-        margin-top: 40px;
-        display: flex;
-        justify-content: flex-end;
-
-        .ant-btn {
-          width: 80px;
-          height: 28px;
-          text-align: center;
-          background: #d9ebff;
-          color: #0087ff;
-          border: 1px solid #0087ff;
-          border-radius: 6px;
         }
       }
     }
+
+    & > div:nth-of-type(1) {
+      margin-top: 0;
+    }
   }
 
-  &>div:nth-of-type(1) {
-    margin-top: 0;
+  .application-Area {
+    width: 570px;
+    display: grid;
+    margin-top: -5px;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+
+    .application-Area-son {
+      cursor: pointer;
+      font-size: 14px;
+      width: 90px;
+      height: 26px;
+      border-radius: 13px;
+      color: #333333;
+      background: #f5f5f5;
+      border: 1px #cccccc solid;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 10px;
+      font-weight: 500;
+    }
+
+    .application-Area-down {
+      background: #0087ff;
+      color: #fff;
+    }
   }
-}
 
-.application-Area {
-  width: 570px;
-  display: grid;
-  margin-top: -5px;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  :deep(.ant-image-img) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
 
-  .application-Area-son {
-    cursor: pointer;
-    font-size: 14px;
-    width: 90px;
-    height: 26px;
-    border-radius: 13px;
-    color: #333333;
-    background: #f5f5f5;
-    border: 1px #cccccc solid;
+  :deep(.ant-modal) {
+    width: 960px;
+  }
+
+  :deep(.ant-transfer-list) {
+    width: 39.5%;
+    height: 520px;
+  }
+
+  :deep(.ant-transfer-operation) {
+    flex-direction: row-reverse;
+    margin: 0 30px;
+  }
+
+  :deep(.ant-btn) {
+    width: 56px;
+    height: 40px;
+    border-radius: 4px;
+  }
+
+  :deep(.ant-btn:first-child) {
+    margin-left: 4px;
+  }
+
+  :deep(.ant-modal-footer) {
+    border: 0;
+  }
+
+  :deep(.ant-modal-header) {
+    border: 0;
+  }
+
+  :deep(.ant-modal-title) {
+    line-height: 24px;
+    font-size: 18px;
+    color: #303133;
+  }
+
+  :deep(.ant-transfer-list-header) {
+    background: #f5f7fa;
+  }
+
+  :deep(.ant-transfer-list-header-selected) {
     display: flex;
-    justify-content: center;
+    width: 90%;
+    flex-direction: row-reverse;
+    justify-content: space-between;
     align-items: center;
-    margin-top: 10px;
-    font-weight: 500;
   }
 
-  .application-Area-down {
-    background: #0087ff;
-    color: #fff;
+  :deep(.ant-transfer-list-header-title) {
+    font-size: 16px;
+    color: #303133;
+    font-weight: 400;
+    text-align: left;
   }
-}
-
-:deep(.ant-image-img) {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-:deep(.ant-modal) {
-  width: 960px;
-}
-
-:deep(.ant-transfer-list) {
-  width: 39.5%;
-  height: 520px;
-}
-
-:deep(.ant-transfer-operation) {
-  flex-direction: row-reverse;
-  margin: 0 30px;
-}
-
-:deep(.ant-btn) {
-  width: 56px;
-  height: 40px;
-  border-radius: 4px;
-}
-
-:deep(.ant-btn:first-child) {
-  margin-left: 4px;
-}
-
-:deep(.ant-modal-footer) {
-  border: 0;
-}
-
-:deep(.ant-modal-header) {
-  border: 0;
-}
-
-:deep(.ant-modal-title) {
-  line-height: 24px;
-  font-size: 18px;
-  color: #303133;
-}
-
-:deep(.ant-transfer-list-header) {
-  background: #f5f7fa;
-}
-
-:deep(.ant-transfer-list-header-selected) {
-  display: flex;
-  width: 90%;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-  align-items: center;
-}
-
-:deep(.ant-transfer-list-header-title) {
-  font-size: 16px;
-  color: #303133;
-  font-weight: 400;
-  text-align: left;
-}
 </style>