来源应用

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,110 +60,53 @@
         <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-if="item.type == 'text'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
-              :placeholder="'请输入' + item.name"
+              :disabled="true" />
-            />
+            <a-input v-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-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
+            <a-button v-else-if="item.type == 'dialog'" @click="sourceClick(title.name)">
-              v-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>
@@ -213,8 +117,12 @@
 import mybus from '@/myplugins/mybus'
 import upload from '@/views/components/upload'
 import { message } from 'ant-design-vue'
-  import { getCategoryTreePage } from '@/api/personalCenter'
+import {
+  getCategoryTreePage,
+  queryApplicationRelByResourceId,
+} 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
@@ -364,6 +272,7 @@
   })
 }
 const add = (title) => {
+  console.log(title, 'title')
   let list = props.configure.filter((item) => item.name === title)[0].list
   let flag = true
   list.forEach((item) => {
@@ -415,7 +324,55 @@
     delFlag: 0,
   })
 }
-  const sourceClick = () => {}
+// 来源应用
+const visibleAssociatedApplication = ref(false)
+const mockData = ref([])
+
+const sourceClick = (title) => {
+  console.log(title, 'title')
+  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 handleCancel = (e) => {
+  console.log(e)
+  visibleAssociatedApplication.value = false
+}
+
 watch(data.value.list, (newProps, oldProps) => {
   // console.log(newProps, oldProps)
   newProps.forEach((val) => {
@@ -458,9 +415,11 @@
   flex-direction: column;
   align-items: center;
   padding: 50px 100px 25px;
+
   &>div {
     width: 100%;
     margin-top: 60px;
+
     .top {
       color: #333333;
       font-size: 22px;
@@ -468,40 +427,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) {
           font-size: 18px;
           font-weight: 600;
         }
+
         .del {
           display: flex;
           justify-content: flex-end;
           align-items: center;
+
           .delImg {
             cursor: pointer;
             display: inline-block;
@@ -510,36 +479,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 +528,12 @@
           border-radius: 6px;
         }
       }
+
       .submit {
         margin-top: 40px;
         display: flex;
         justify-content: flex-end;
+
         .ant-btn {
           width: 80px;
           height: 28px;
@@ -566,15 +546,18 @@
       }
     }
   }
+
   &>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;
@@ -590,14 +573,73 @@
     margin-top: 10px;
     font-weight: 500;
   }
+
   .application-Area-down {
     background: #0087ff;
     color: #fff;
   }
 }
+
 :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>