Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev

front/src/api/personalCenter.js

@@ -215,3 +215,11 @@ export function selectResourceListByDept(params) {
     params,
   })
 }
+// 获取来源应用列表
+export function queryApplicationRelByResourceId(params) {
+  return request({
+    url: '/dataResourceRel/queryApplicationRelByResourceId',
+    method: 'get',
+    params,
+  })
+}

front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue

@@ -16,21 +16,14 @@
       <template v-if="title.isConfigure">
         <div class="bottom">
           <div class="items" v-if="data[title.name].length > 0">
-            <div
+            <div class="item" v-for="(val, index) in data[title.name]" :key="'key1' + val.name + index">
-              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
+              <p v-for="attr in props.configure.filter(
-                v-for="attr in props.configure.filter(
                 (item, index2) => item.name === title.name
-                )[0].list"
+              )[0].list" :key="'key2' + attr.name + index2">
-                :key="'key2' + attr.name + index2"
-              >
                 <span>{{ attr.name }}</span>
                 <span v-if="attr.type === 'image'">
                   <a-image :width="85" :height="60" :src="val.img" />
@@ -44,51 +37,19 @@
             </div>
           </div>
           <div class="add">添加更多{{ title.name }}</div>
-          <div
+          <div class="form" v-for="(val, index) in props.configure.filter(
-            class="form"
-            v-for="(val, index) in props.configure.filter(
             (item) => item.name === title.name
-            )[0].list"
+          )[0].list" :key="'key3' + val.name + index">
-            :key="'key3' + val.name + index"
-          >
             <span>{{ val.name }}</span>
-            <a-input
+            <a-input v-model:value="val.note1" :maxlength="24" :placeholder="'请填写' + val.name + ',不超过24个字符'"
-              v-model:value="val.note1"
+              v-if="val.type == 'input'" />
-              :maxlength="24"
+            <a-textarea v-model:value="val.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + val.name"
-              :placeholder="'请填写' + val.name + ',不超过24个字符'"
+              v-else-if="val.type == 'textArea'" />
-              v-if="val.type == 'input'"
+            <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-textarea
+            <a-radio-group v-model:value="val.note1" :options="val.options" v-else-if="val.type == 'radio'" />
-              v-model:value="val.note1"
+            <upload :key="showKey" type="图片" btnName="上传图片" :maxCount="1" :data="val" :list="[]" tip="支持图片类型，大小不超过100M"
-              :showCount="true"
+              v-else-if="val.type == 'image'"></upload>
-              :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>
@@ -99,126 +60,73 @@
         <div class="bottom">
           <div class="form" v-for="item in title.children" :key="item.id">
             <span>{{ item.name }}</span>
-            <a-input
+            <a-input v-if="item.type == 'input'" v-model:value="item.note1" :placeholder="'请输入' + item.name" />
-              v-if="item.type == 'input'"
+            <a-radio-group v-else-if="item.type == 'radio'" v-model:value="item.note1" :options="item.options" />
-              v-model:value="item.note1"
+            <a-input v-else-if="item.type == 'text'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
-              :placeholder="'请输入' + item.name"
+              :disabled="true" />
-            />
+            <a-input v-else-if="item.type == 'text2'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
-            <a-radio-group
+              :disabled="true" />
-              v-else-if="item.type == 'radio'"
+            <a-textarea v-else-if="item.type == 'textArea'" v-model:value="item.note1" :showCount="true"
-              v-model:value="item.note1"
+              :maxlength="200" :placeholder="'请输入' + item.name" />
-              :options="item.options"
+            <upload v-else-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
-            />
+              :list="props.imgList" tip="支持图片类型，大小不超过100M"></upload>
-            <a-input
+            <upload v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
-              v-else-if="item.type == 'text'"
+              :data="item" :list="props.fileList" tip="支持文件类型，大小不超过100M"></upload>
-              v-model:value="item.note1"
+            <upload v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :data="item" :busType="2"
-              :placeholder="'请输入' + item.name"
+              :list="props.fileList2" tip="支持文件类型，大小不超过100M"></upload>
-              :disabled="true"
+            <upload v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :data="item"
-            />
+              :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>
-            <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-button v-else-if="item.type == 'dialog'" @click="sourceClick">
               请选择来源应用
             </a-button>
-            <a-select
+            <a-select v-else-if="item.type == 'select'" style="width: 240px" v-model:value="item.note1"
-              v-else-if="item.type == 'select'"
+              :placeholder="'请选择' + item.name">
-              style="width: 240px"
+              <a-select-option v-for="(itemSelect, indexSelect) in item.options" :key="indexSelect"
-              v-model:value="item.note1"
+                :value="itemSelect.dictLabel">
-              :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
+            <div v-else-if="item.type == 'checkBox'" class="application-Area" id="application-Area" :key="showKey">
-              v-else-if="item.type == 'checkBox'"
+              <div v-for="(itemson, indexson) in item.options" :key="indexson" class="application-Area-son"
-              class="application-Area"
+                @click="ApplicationArea(item, itemson)" :class="
-              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="关联应用" @ok="handleOk" @cancel="handleCancel"
+              style="width: 960px">
+              <div>
+                <a-transfer v-model:target-keys="targetKeys" v-model:selected-keys="selectedKeys"
+                  :data-source="mockData" :titles="['未关联的应用名称', '已关联的应用名称']" :render="(item) => item.title"
+                  @change="handleChange" @selectChange="handleSelectChange" />
+              </div>
+            </a-modal>
+          </div>
         </div>
       </template>
     </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 { getCategoryTreePage } from '@/api/personalCenter'
+import {
-  import { useRouter } from 'vue-router'
+  getCategoryTreePage,
-  const router = useRouter()
+  queryApplicationRelByResourceId,
-  const abilityToType = router.currentRoute.value.query.abilityToType
+} from '@/api/personalCenter'
-  const componentTypeValue = router.currentRoute.value.query.componentTypeValue
+import { useRouter } from 'vue-router'
-  const props = defineProps({
+
+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 },
   // 表单数据
@@ -276,13 +184,13 @@
   //     }
   //   ]
   // }]
-  })
+})
-  // 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 == '能力类型') {
@@ -302,8 +210,8 @@
   } 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
@@ -311,10 +219,10 @@
   } 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({
@@ -339,8 +247,8 @@
       data.value.list.push(item)
     }
   })
-  })
+})
-  if (props.dataFrom) {
+if (props.dataFrom) {
   // console.log(props.dataFrom, data.value.list)
   props.dataFrom.infoList.forEach((item) => {
     if (
@@ -362,8 +270,9 @@
       //  item.note1 = item.attrValue.split(';')
     }
   })
-  }
+}
-  const add = (title) => {
+const add = (title) => {
+  console.log(title, 'title')
   let list = props.configure.filter((item) => item.name === title)[0].list
   let flag = true
   list.forEach((item) => {
@@ -393,16 +302,16 @@
   } 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)
@@ -414,9 +323,56 @@
     attrValue: item.note2.join(';'),
     delFlag: 0,
   })
+}
+// 来源应用
+const visibleAssociatedApplication = ref(false)
+const mockData = 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 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.note1 = targetKeys.value + ''
     }
-  const sourceClick = () => {}
+  })
-  watch(data.value.list, (newProps, oldProps) => {
+}
+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)
@@ -448,19 +404,21 @@
       }
     }
   })
-  })
+})
 </script>
 <style lang="less" scoped>
-  .put-on-the-shelf {
+.put-on-the-shelf {
   height: 680px;
   overflow: scroll;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 50px 100px 25px;
-    & > div {
+
+  &>div {
     width: 100%;
     margin-top: 60px;
+
     .top {
       color: #333333;
       font-size: 22px;
@@ -468,40 +426,50 @@
       justify-content: center;
       align-items: center;
       margin-bottom: 25px;
+
       div:first-child,
       div:last-child {
         width: 245px;
         height: 1px;
         background: #f0f0f0;
       }
+
       div:nth-child(2) {
         margin: 0 30px;
       }
     }
+
     .bottom {
       margin-top: 25px;
+
       .items {
         background: #fafafa;
         padding: 10px;
+
         p {
           display: flex;
           justify-content: space-between;
+
           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) {
+
+        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;
@@ -510,36 +478,45 @@
             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: 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;
@@ -550,10 +527,12 @@
           border-radius: 6px;
         }
       }
+
       .submit {
         margin-top: 40px;
         display: flex;
         justify-content: flex-end;
+
         .ant-btn {
           width: 80px;
           height: 28px;
@@ -566,15 +545,18 @@
       }
     }
   }
-    & > div:nth-of-type(1) {
+
+  &>div:nth-of-type(1) {
     margin-top: 0;
   }
-  }
+}
-  .application-Area {
+
+.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;
@@ -590,14 +572,73 @@
     margin-top: 10px;
     font-weight: 500;
   }
+
   .application-Area-down {
     background: #0087ff;
     color: #fff;
   }
-  }
+}
-  :deep(.ant-image-img) {
+
+: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>