上架技术文档

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,
+  })
+}

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

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) => {

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) => {

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>

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) => {

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(
+              <p
+                v-for="attr in props.configure.filter(
                   (item, index2) => item.name === title.name
-              )[0].list" :key="'key2' + attr.name + index2">
+                )[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(
+          <div
+            class="form"
+            v-for="(val, index) in props.configure.filter(
               (item) => item.name === title.name
-          )[0].list" :key="'key3' + val.name + index">
+            )[0].list"
+            :key="'key3' + val.name + index"
+          >
             <span>{{ val.name }}</span>
-            <a-input v-model:value="val.note1" :maxlength="24" :placeholder="'请填写' + val.name + ',不超过24个字符'"
+            <a-input
-              v-if="val.type == 'input'" />
+              v-model:value="val.note1"
-            <a-textarea v-model:value="val.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + val.name"
+              :maxlength="24"
-              v-else-if="val.type == 'textArea'" />
+              :placeholder="'请填写' + val.name + ',不超过24个字符'"
-            <a-input-number v-model:value="val.note1" :min="0" :max="9999" :step="0.01" string-mode
+              v-if="val.type == 'input'"
-              :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'" />
+            <a-textarea
-            <upload :key="showKey" type="图片" btnName="上传图片" :maxCount="1" :data="val" :list="[]" tip="支持图片类型，大小不超过100M"
+              v-model:value="val.note1"
-              v-else-if="val.type == 'image'"></upload>
+              :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,77 +99,162 @@
         <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-input
-            <a-radio-group v-else-if="item.type == 'radio'" v-model:value="item.note1" :options="item.options" />
+              v-if="item.type == 'input'"
-            <a-input v-else-if="item.type == 'text'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
+              v-model:value="item.note1"
-              :disabled="true" />
+              :placeholder="'请输入' + item.name"
-            <a-input v-else-if="item.type == 'text2'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
+            />
-              :disabled="true" />
+            <a-radio-group
-            <a-textarea v-else-if="item.type == 'textArea'" v-model:value="item.note1" :showCount="true"
+              v-else-if="item.type == 'radio'"
-              :maxlength="200" :placeholder="'请输入' + item.name" />
+              v-model:value="item.note1"
-            <upload v-else-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
+              :options="item.options"
-              :list="props.imgList" tip="支持图片类型，大小不超过100M"></upload>
+            />
-            <upload v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
+            <a-input
-              :data="item" :list="props.fileList" tip="支持文件类型，大小不超过100M"></upload>
+              v-else-if="item.type == 'text'"
-            <upload v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :data="item" :busType="2"
+              v-model:value="item.note1"
-              :list="props.fileList2" tip="支持文件类型，大小不超过100M"></upload>
+              :placeholder="'请输入' + item.name"
-            <upload v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :data="item"
+              :disabled="true"
-              :list="props.videoList" tip="支持视频类型，大小不超过100M"></upload>
+            />
+            <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"
+            <a-select
-              :placeholder="'请选择' + item.name">
+              v-else-if="item.type == 'select'"
-              <a-select-option v-for="(itemSelect, indexSelect) in item.options" :key="indexSelect"
+              style="width: 240px"
-                :value="itemSelect.dictLabel">
+              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
-              <div v-for="(itemson, indexson) in item.options" :key="indexson" class="application-Area-son"
+              v-else-if="item.type == 'checkBox'"
-                @click="ApplicationArea(item, itemson)" :class="
+              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"
+            <a-modal
-              @cancel="handleCancel" style="width: 960px">
+              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"
+                <a-transfer
-                  :data-source="mockData" :titles="titles" :render="(item) => item.title" @change="handleChange"
+                  v-model:target-keys="targetKeys"
-                  @selectChange="handleSelectChange" />
+                  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 { ref, defineProps, watch, onMounted } from 'vue'
-import mybus from '@/myplugins/mybus'
+  import mybus from '@/myplugins/mybus'
-import upload from '@/views/components/upload'
+  import upload from '@/views/components/upload'
-import { message } from 'ant-design-vue'
+  import { message } from 'ant-design-vue'
-import {
+  import {
     getCategoryTreePage,
     queryApplicationRelByResourceId,
     queryResourceRelByKeyId,
-} from '@/api/personalCenter'
+    filesUpload,
-import { useRouter } from 'vue-router'
+  } from '@/api/personalCenter'
-
+  import VueTemplateDemo from '@/views/capacityOnTheShelf/FilesUpload.vue'
-const router = useRouter()
+  import { useRouter } from 'vue-router'
-const abilityToType = router.currentRoute.value.query.abilityToType
+  const router = useRouter()
-const componentTypeValue = router.currentRoute.value.query.componentTypeValue
+  const abilityToType = router.currentRoute.value.query.abilityToType
-const props = defineProps({
+  const componentTypeValue = router.currentRoute.value.query.componentTypeValue
+  const props = defineProps({
     // 展示数据
     refData: { type: Object, default: null },
     // 表单数据
@@ -188,13 +312,13 @@ const props = defineProps({
     //     }
     //   ]
     // }]
-})
+  })
-// console.log('props==========>', props)
+  // console.log('props==========>', props)
-const data = ref({
+  const data = ref({
     list: [],
-})
+  })
-const showKey = ref(0)
+  const showKey = ref(0)
-props.refData.children.map((item) => {
+  props.refData.children.map((item) => {
     if (item.name == '基本信息') {
       item.children.map((val) => {
         if (val.name == '能力类型') {
@@ -214,8 +338,8 @@ props.refData.children.map((item) => {
     } else {
       item.isConfigure = false
     }
-})
+  })
-let arr = props.refData.children.filter((item) => {
+  let arr = props.refData.children.filter((item) => {
     if (props.configure) {
       if (!item.isConfigure) {
         return item
@@ -223,10 +347,10 @@ let arr = props.refData.children.filter((item) => {
     } else {
       return item
     }
-})
+  })
-data.value.list = []
+  data.value.list = []
-// 获取字典数据
+  // 获取字典数据
-arr.forEach((val) => {
+  arr.forEach((val) => {
     val.children.forEach((item) => {
       if (item.isLinkToDic === 'true' && item.linkValue) {
         getCategoryTreePage({
@@ -251,8 +375,8 @@ arr.forEach((val) => {
         data.value.list.push(item)
       }
     })
-})
+  })
-if (props.dataFrom) {
+  if (props.dataFrom) {
     // console.log(props.dataFrom, data.value.list)
     props.dataFrom.infoList.forEach((item) => {
       if (
@@ -274,8 +398,18 @@ if (props.dataFrom) {
         //  item.note1 = item.attrValue.split(';')
       }
     })
-}
+  }
-const add = (title) => {
+  //显示富文本
+  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
@@ -306,16 +440,16 @@ const add = (title) => {
     } else {
       message.warning('请填写完整')
     }
-}
+  }
-const del = (title, index) => {
+  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) => {
+  const ApplicationArea = (item, itemson) => {
     // console.log(item, itemson)
     if (item.note2.indexOf(itemson.dictLabel) === -1) {
       item.note2.push(itemson.dictLabel)
@@ -327,14 +461,14 @@ const ApplicationArea = (item, itemson) => {
       attrValue: item.note2.join(';'),
       delFlag: 0,
     })
-}
+  }
-// 来源应用
+  // 来源应用
-const visibleAssociatedApplication = ref(false)
+  const visibleAssociatedApplication = ref(false)
-const mockData = ref([])
+  const mockData = ref([])
-const titles = ref(['未关联的应用名称', '已关联的应用名称'])
+  const titles = ref(['未关联的应用名称', '已关联的应用名称'])
-const titleName = ref('关联应用')
+  const titleName = ref('关联应用')
 
-const sourceClick = () => {
+  const sourceClick = () => {
     visibleAssociatedApplication.value = true
     queryApplicationRelByResourceId({
       referenceId: 0,
@@ -349,9 +483,9 @@ const sourceClick = () => {
         })
       })
     })
-}
+  }
-// 关联组件
+  // 关联组件
-const componentsClick = () => {
+  const componentsClick = () => {
     titles.value = ['未关联的组件名称', '已关联的组件名称']
     titleName.value = '关联组件'
 
@@ -371,21 +505,21 @@ const componentsClick = () => {
         })
       })
     })
-}
+  }
-const targetKeys = ref([])
+  const targetKeys = ref([])
-const selectedKeys = ref([])
+  const selectedKeys = ref([])
 
-const handleChange = (nextTargetKeys, direction, moveKeys) => {
+  const handleChange = (nextTargetKeys, direction, moveKeys) => {
     console.log('targetKeys: ', nextTargetKeys)
     console.log('direction: ', direction)
     console.log('moveKeys: ', moveKeys)
-}
+  }
 
-const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+  const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
     console.log('targetSelectedKeys: ', targetSelectedKeys)
-}
+  }
 
-const handleOk = (e) => {
+  const handleOk = (e) => {
     console.log(e)
     visibleAssociatedApplication.value = false
     // console.log('2222222222222', props.refData)
@@ -394,13 +528,13 @@ const handleOk = (e) => {
         item.note1 = targetKeys.value + ''
       }
     })
-}
+  }
-const handleCancel = (e) => {
+  const handleCancel = (e) => {
     console.log(e)
     visibleAssociatedApplication.value = false
-}
+  }
 
-watch(data.value.list, (newProps, oldProps) => {
+  watch(data.value.list, (newProps, oldProps) => {
     // console.log(newProps, oldProps)
     newProps.forEach((val) => {
       // console.log('数据发生改变==========>', val)
@@ -432,10 +566,10 @@ watch(data.value.list, (newProps, oldProps) => {
         }
       }
     })
-})
+  })
 </script>
 <style lang="less" scoped>
-.put-on-the-shelf {
+  .put-on-the-shelf {
     height: 680px;
     overflow: scroll;
     display: flex;
@@ -443,7 +577,7 @@ watch(data.value.list, (newProps, oldProps) => {
     align-items: center;
     padding: 50px 100px 25px;
 
-  &>div {
+    & > div {
       width: 100%;
       margin-top: 60px;
 
@@ -488,7 +622,7 @@ watch(data.value.list, (newProps, oldProps) => {
             }
           }
 
-        p:nth-of-type(1)>span:nth-of-type(1) {
+          p:nth-of-type(1) > span:nth-of-type(1) {
             font-size: 18px;
             font-weight: 600;
           }
@@ -574,12 +708,12 @@ watch(data.value.list, (newProps, oldProps) => {
       }
     }
 
-  &>div:nth-of-type(1) {
+    & > div:nth-of-type(1) {
       margin-top: 0;
     }
-}
+  }
 
-.application-Area {
+  .application-Area {
     width: 570px;
     display: grid;
     margin-top: -5px;
@@ -605,68 +739,68 @@ watch(data.value.list, (newProps, oldProps) => {
       background: #0087ff;
       color: #fff;
     }
-}
+  }
 
-:deep(.ant-image-img) {
+  :deep(.ant-image-img) {
     width: 100%;
     height: 100%;
     object-fit: contain;
-}
+  }
 
-:deep(.ant-modal) {
+  :deep(.ant-modal) {
     width: 960px;
-}
+  }
 
-:deep(.ant-transfer-list) {
+  :deep(.ant-transfer-list) {
     width: 39.5%;
     height: 520px;
-}
+  }
 
-:deep(.ant-transfer-operation) {
+  :deep(.ant-transfer-operation) {
     flex-direction: row-reverse;
     margin: 0 30px;
-}
+  }
 
-:deep(.ant-btn) {
+  :deep(.ant-btn) {
     width: 56px;
     height: 40px;
     border-radius: 4px;
-}
+  }
 
-:deep(.ant-btn:first-child) {
+  :deep(.ant-btn:first-child) {
     margin-left: 4px;
-}
+  }
 
-:deep(.ant-modal-footer) {
+  :deep(.ant-modal-footer) {
     border: 0;
-}
+  }
 
-:deep(.ant-modal-header) {
+  :deep(.ant-modal-header) {
     border: 0;
-}
+  }
 
-:deep(.ant-modal-title) {
+  :deep(.ant-modal-title) {
     line-height: 24px;
     font-size: 18px;
     color: #303133;
-}
+  }
 
-:deep(.ant-transfer-list-header) {
+  :deep(.ant-transfer-list-header) {
     background: #f5f7fa;
-}
+  }
 
-:deep(.ant-transfer-list-header-selected) {
+  :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) {
+  :deep(.ant-transfer-list-header-title) {
     font-size: 16px;
     color: #303133;
     font-weight: 400;
     text-align: left;
-}
+  }
 </style>