wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

赋能场景，融合服务挂接更改

This commit is contained in:
guoyue 2022-07-22 16:06:40 +08:00
parent c0831d1eea
commit f52cbac587
10 changed files with 712 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
back/src/views/modules/ability/IntegratedServices-add.vue
View File

@ -1,8 +1,8 @@
<template>
<div>
<el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalType === 'display' ? '能力展示' : '挂接'"
@close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
<div v-show="modalType !== 'display'" style="
<el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
:close-on-click-modal="false" :close-on-press-escape="false">
<div style="
text-align: center;
font-weight: 600;
font-size: 18px;
@ -10,14 +10,13 @@
">
填写字段
</div>
<el-checkbox-group v-show="modalType !== 'display'" v-model="checkList" @change="changeBtn"
style="margin-bottom: 20px">
<el-checkbox-button v-for="(item, i) in btnList" :label="item.name" :key="i">{{ item.name }}
<el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
<el-checkbox-button v-for="(item) in btnList" :label="item" :key="item">{{ item }}
</el-checkbox-button>
</el-checkbox-group>
<!-- 挂载和修改-->
<div key="1" v-if="modalType !== 'display'">
<div key="1">
<el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
<!-- 基本信息 -->
@ -34,98 +33,35 @@
<el-input class="input-box" v-model="dataForm.name" placeholder="请输入融合服务名称"></el-input>
</el-form-item>
<el-form-item label="融合服务描述" prop="description">
<el-input class="input-box" v-model="dataForm.description" placeholder="请输入融合服务描述"></el-input>
<el-input type="textarea" :rows="3" class="input-box" v-model="dataForm.description"
placeholder="请输入融合服务描述"></el-input>
</el-form-item>
<el-form-item label="应用领域" prop="applicationArea">
<el-select v-model="dataForm.applicationArea" placeholder="请选择应用领域" filterable>
<el-form-item label="支撑场景" prop="applicationArea">
<el-select v-model="dataForm.applicationArea" placeholder="请选择支撑场景" filterable>
<el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="部门联系人" prop="deptUser">
<el-input class="input-box" v-model="dataForm.deptUser" placeholder="请输入部门联系人"></el-input>
</el-form-item>
<el-form-item label="部门联系人电话" prop="mobile">
<el-input class="input-box" v-model="dataForm.mobile" placeholder="请输入部门联系人电话"></el-input>
</el-form-item>
<el-form-item label="服务商" prop="provider">
<el-input class="input-box" v-model="dataForm.provider" placeholder="请输入服务商"></el-input>
</el-form-item>
<el-form-item label="服务商联系人" prop="providerUser">
<el-input class="input-box" v-model="dataForm.providerUser" placeholder="请输入服务商联系人"></el-input>
</el-form-item>
<el-form-item label="服务商联系人电话" prop="providerMobile">
<el-input class="input-box" v-model="dataForm.providerMobile" placeholder="请输入服务商联系人电话"></el-input>
</el-form-item>
</div>
<!-- 组合能力 -->
<div class="" style="marigin-bottom:40px" v-show="checkList.includes('组合能力')">
<integrated-combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" title="组合能力"
ref="combineAbility" :disabledType="modalType === 'display'">
</integrated-combine-ability>
<div class="title">
组合能力
</div>
<!-- 技术文档 -->
<div style="margin-bottom:20px" v-show="checkList.includes('技术文档')">
<div style="
text-align: center;
font-weight: 600;
font-size: 18px;
margin-bottom: 10px;
">
技术文档
</div>
<div v-for="(item, index) in dataForm.fuseAttrList" :key="index">
<div v-if="item.attrType === '技术文档'">
<el-form-item label="技术文档" prop="attrValue">
<el-upload ref="addUpload" class="upload-demo" :action="fileUploadUrl"
:before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :file-list="fileList"
:show-file-list="false">
<el-button size="small" type="primary">上传</el-button>
</el-upload>
<el-button v-if="item.attrValue" @click="item.attrValue = ''" type="danger">删除</el-button>
</el-form-item>
<div>
<div v-for="(name, i) in fileNameList" :key="i">{{ name }}</div>
</div>
</div>
</div>
</div>
<!-- 常见问题 -->
<div v-show="checkList.includes('常见问题')">
<common-question :dataForm="dataForm" @update="updateDataForm" ref="commonQuestion"></common-question>
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施" ref="jcssDom"
:getDataParams="getListParams['基础设施']"></combine-ability>
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
:getDataParams="getListParams['数据资源']"></combine-ability>
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
:getDataParams="getListParams['组件服务']"></combine-ability>
</div>
</el-form>
</div>
<!-- 展示 -->
<el-form key="2" class="detial-form" v-else :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
<el-form-item :label="displayInfo[data]" v-for="(data, i) in Object.keys(displayInfo)" :key="i" :prop="data">
{{ dataForm[data] || "--" }}
</el-form-item>
<div v-for="(data, i) in displayListInfo['常见问题']" :key="`${i}${JSON.stringify(data)}`">
<el-form-item :label="`常见问题${i + 1}`">
{{ `${data['question']}` }}
</el-form-item>
<el-form-item :label="`问题描述${i + 1}`">
{{ `${data['answer']} ` }}
</el-form-item>
</div>
<div v-for="(data, i) in displayListInfo['组合能力']" :key="`${i}${JSON.stringify(data)}`">
<el-form-item :label="`能力类别${i + 1}`">
{{ `${data['type']}` }}
</el-form-item>
<el-form-item :label="`能力名称${i + 1}`">
{{ `${data['name']} ` }}
</el-form-item>
</div>
</el-form>
<template slot="footer">
<el-button @click="closeModal">{{ $t("cancel") }}</el-button>
<el-button v-if="modalType !== 'display'" type="primary" @click="dataFormSubmitHandle()">{{
<el-button type="primary" @click="dataFormSubmitHandle()">{{
$t("confirm")
}}</el-button>
</template>
@ -139,43 +75,32 @@ import debounce from "lodash/debounce";
import qs from "qs";
import CommonQuestion from './components/common-question.vue';
import IntegratedCombineAbility from './components/integrated-combine-ability.vue';
import CombineAbility from './components/combine-ability.vue';
import Cookies from 'js-cookie'
import { tableColumns } from './IntegratedServices.vue';
import { getFuseResourceList, getListParams, modalTypeText } from "./assignedScene/add-update-scene.vue";
export default {
components: {
CommonQuestion,
IntegratedCombineAbility,
CombineAbility,
},
data() {
return {
fileList: [],
fileUploadUrl: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('ucsToken')}`,
dataForm: {
"name": "",
"applicationArea": "",
"description": "",
"fuseAttrList": [
{
"attrType": "技术文档",
"attrValue": "",
},
{
"attrType": "常见问题",
"attrValue": '[{ question: "", answer: "" }]',
}
],
"fuseAttrList": [],
// 选择的能力
"fuseResourceList": [
{
"resourceId": 0,
"sequence": ""
}
],
"mobile": "",
"name": "",
"provider": "",
"providerMobile": "",
"providerUser": "",
"deptUser": "",
type: '融合服务'
},
rules: {
@ -194,37 +119,19 @@ export default {
},
],
},
btnList: [
{
name: '基本信息',
key: 'basic',
show: true,
},
{
name: '组合能力',
key: 'combine',
show: true,
},
{
name: '技术文档',
key: 'basic',
show: true,
},
{
name: '常见问题',
key: 'basic',
show: true,
},
],
checkList: ['基本信息', '组合能力', '技术文档', '常见问题'],
btnList: ['基本信息', '组合能力'],
checkList: ['基本信息', '组合能力'],
areaList: [],
fileNameList: [],
addOrUpdateVisibleCopy: this.addOrUpdateVisible,
displayInfo: tableColumns,
displayListInfo: {
'常见问题': [],
'组合能力': []
getListParams: getListParams,
refsParseArray: {
'zjfwDom': '组件服务',
'sjzyDom': '数据资源',
'jcssDom': '基础设施',
},
modalTypeText: modalTypeText,
abilityListObj: {}
};
},
props: {
@ -291,29 +198,17 @@ export default {
},
// 更新表单
updateDataForm(data) {
if (data.title == '常见问题') {
this.dataForm.fuseAttrList.map(v => {
if (v.attrType === '常见问题') {
v.attrValue = JSON.stringify(data.list)
}
})
}
if (data.title == '组合能力') {
this.dataForm.fuseResourceList = data.list
if (Object.keys(this.getListParams).includes(data.title)) {
this.abilityListObj[data.title] = data.list;
}
},
getFuseResourceList() {
return getFuseResourceList(this.abilityListObj)
},
// 改变按钮状态
changeBtn(data) {
this.checkList = data;
},
beforeAvatarUpload() { },
handleAvatarSuccess(res, file) {
console.log(file)
if (res.code !== 0) {
return this.$message.error("上传文件失败");
}
this.fileNameList.push(file.name)
},
// 表单提交
dataFormSubmitHandle: debounce(
function () {
@ -326,10 +221,7 @@ export default {
'add': 'post',
'update': 'put'
}
let arr = this.dataForm.fuseResourceList.filter(v => v.resourceId !== '') || []
if (arr.length == 0) {
this.dataForm.fuseResourceList = []
}
this.dataForm.fuseResourceList = this.getFuseResourceList()
this.$http
[methodsObj[this.modalType]]("/fuse", this.dataForm)
.then(({ data: res }) => {
@ -359,29 +251,10 @@ export default {
getDetail(data) {
this.dataForm = data;
this.$nextTick(() => {
this.$refs.combineAbility && this.$refs.combineAbility.getDataInfo(data)
this.$refs.commonQuestion && this.$refs.commonQuestion.getDataInfo(data)
console.log('this.dataForm----详情-------->', this.dataForm);
})
},
// 重组数据
getDisPlayData() {
this.$nextTick(() => {
const questionObj = this.dataForm.fuseAttrList.find(v => v.attrType == '常见问题') || {};
let fuseResourceList = this.dataForm.fuseResourceList || [];
let arr = []
fuseResourceList.map(v => {
if (v.resource) {
arr.push({
name: v.resource.name,
type: v.resource.type,
})
for (const key in this.refsParseArray) {
this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
}
})
this.displayListInfo['常见问题'] = JSON.parse(questionObj.attrValue || '[]')
this.displayListInfo['组合能力'] = arr
})
},
},
beforeDestroy() {

39
back/src/views/modules/ability/IntegratedServices.vue
View File

@ -21,16 +21,15 @@
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
style="width: 100%" :height="qp ? '810px' : '650px'">
<el-table-column v-for="(item) in Object.keys(tableColumns)" :key="item" :prop="item" label="融合服务名称"
header-align="center" align="center"></el-table-column>
<el-table-column v-for="(item) in Object.keys(tableColumns)" :key="item" :prop="item"
:label="tableColumns[item]" header-align="center" align="center"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="240" right="0">
<template slot-scope="scope">
<el-button v-if="$hasPermission('ability:bsabilityai:update')" type="text" size="small"
@click="handleUpdate(scope.row)">{{ $t("update") }}</el-button>
<el-button v-if="$hasPermission('ability:bsabilityai:delete')" type="text" size="small"
@click="deleteRow(scope.row.id)">{{ $t("delete") }}</el-button>
<el-button type="text" size="small" @click="showDetail(scope.row)">能力展示</el-button>
<el-button type="text" size="small" @click="showDocument(scope.row)">技术文档</el-button>
<el-button type="text" size="small" @click="showDetail(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
@ -58,13 +57,7 @@ import { type } from "os";
export const tableColumns = {
'name': '融合服务名称',
'description': '融合服务描述',
'provider': '服务商',
'providerUser': '服务商联系人',
'providerMobile': '服务商联系人电话',
'applicationArea': '应用领域',
'deptId': '所属部门',
'deptUser': '部门联系人',
'mobile': '部门联系人电话',
'applicationArea': '支撑场景',
}
export default {
@ -145,23 +138,17 @@ export default {
closeModal() {
this.addOrUpdateVisible = false;
},
// 展示
// 详情
showDetail(val) {
this.addOrUpdateVisible = true;
this.modalType = 'display';
const cloneVal = JSON.parse(JSON.stringify(val))
this.$nextTick(() => {
this.$refs.addOrUpdate.dataForm = cloneVal;
this.$refs.addOrUpdate.getDisPlayData()
})
},
showDocument(val) {
console.log(val);
window.open(
window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
"_blank"
);
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + val.id)
},
// showDocument(val) {
// console.log(val);
// window.open(
// window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
// "_blank"
// );
// },
fullScreen() {
if (window.outerHeight === screen.availHeight) {
if (window.outerWidth === screen.availWidth) {

250
back/src/views/modules/ability/assignedScene/add-update-scene.vue
View File

@ -2,7 +2,7 @@
<div>
<el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
:close-on-click-modal="false" :close-on-press-escape="false">
<div v-if="modalType !== 'display'" style="
<div style="
text-align: center;
font-weight: 600;
font-size: 18px;
@ -10,16 +10,15 @@
">
填写字段
</div>
<el-checkbox-group v-if="modalType !== 'display'" v-model="checkList" @change="changeBtn"
style="margin-bottom: 20px">
<el-checkbox-button v-for="(item, i) in btnList" :label="item.name" :key="i">{{ item.name }}
<el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
<el-checkbox-button v-for="(item) in btnList" :label="item" :key="item">{{ item }}
</el-checkbox-button>
</el-checkbox-group>
<!-- 挂载和修改 -->
<div key="1">
<el-form v-if="modalType !== 'display'" :model="dataForm" :rules="rules" ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
<el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
:label-width="$i18n.locale === 'en-US' ? '120px' : '100px'">
<!-- 基本信息 -->
<div style="margin-bottom:40px" v-show="checkList.includes('基本信息')">
<div style="
@ -31,101 +30,150 @@
基本信息
</div>
<el-form-item label="名称" prop="name">
<el-input v-model="dataForm.name" placeholder="请输入名称" :disabled="modalType === 'display'"
style="width:90%"></el-input>
<el-input v-model="dataForm.name" placeholder="请输入名称" style="width:90%"></el-input>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input type="textarea" :rows="3" v-model="dataForm.description" placeholder="请输入描述" style="width:90%"
:disabled="modalType === 'display'"></el-input>
<el-input type="textarea" :rows="3" v-model="dataForm.description" placeholder="请输入描述" style="width:90%">
</el-input>
</el-form-item>
</div>
<!-- 关联能力 -->
<div class="" style="marigin-bottom:40px" v-show="checkList.includes('关联能力')">
<integrated-combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" title="关联能力"
ref="combineAbility" :disabledType="modalType === 'display'">
</integrated-combine-ability>
<!-- 场景痛点 -->
<div class="" style="padding-bottom:40px" v-show="checkList.includes('场景痛点')">
<scene-one-input :dataForm="dataForm" @update="updateDataForm" ref="scenePainDom" title="场景痛点"
:keyTextObj="painKeyTextObj"></scene-one-input>
</div>
<!-- 解决方案 -->
<div class="" style="padding-bottom:40px" v-show="checkList.includes('解决方案')">
<scene-one-input :dataForm="dataForm" @update="updateDataForm" ref="solutionDom" title="解决方案"
:keyTextObj="solutionKeyTextObj"></scene-one-input>
</div>
<!-- 组合能力 -->
<div class="" style="padding-bottom:40px" v-show="checkList.includes('组合能力')">
<div class="title">
组合能力
</div>
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施" ref="jcssDom"
:getDataParams="getListParams['基础设施']"></combine-ability>
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
:getDataParams="getListParams['数据资源']"></combine-ability>
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
:getDataParams="getListParams['组件服务']"></combine-ability>
</div>
<!-- 更多能力 -->
<div class="" style="marigin-bottom:40px" v-show="checkList.includes('更多能力')">
<common-question :dataForm="dataForm" @update="updateDataForm" ref="commonQuestion" title="更多能力"
<common-question :dataForm="dataForm" @update="updateDataForm" ref="moreAbilityDom" title="更多能力"
:keyTextObj="moreKeyTextObj">
</common-question>
</div>
<!-- 使用步骤 -->
<div style="marigin-bottom:20px" v-show="checkList.includes('使用步骤')">
<scene-use-step :dataForm="dataForm" @update="updateDataForm" :disabledType="modalType === 'display'"
ref="sceneUseUp">
<scene-use-step :dataForm="dataForm" @update="updateDataForm" ref="sceneUseUpDom">
</scene-use-step>
</div>
</el-form>
</div>
<!-- 展示 -->
<el-form key="2" v-if="modalType === 'display'" class="detial-form"
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
<el-form-item :label="displayInfo[data]" v-for="(data, i) in Object.keys(displayInfo)" :key="i" :prop="data">
{{ dataForm[data] || "--" }}
</el-form-item>
<div class="group-box" v-for="(data, i) in displayListInfo['使用步骤']" :key="`${i}${JSON.stringify(data)}`">
<el-form-item :label="`使用步骤标题${i + 1}`">
{{ `${data['question']}` }}
</el-form-item>
<el-form-item :label="`描述${i + 1}`">
{{ `${data['answer']} ` }}
</el-form-item>
</div>
<div class="group-box" v-for="(data, i) in displayListInfo['关联能力']" :key="`${i}${JSON.stringify(data)}`">
<el-form-item :label="`能力类别${i + 1}`">
{{ `${data['type']}` }}
</el-form-item>
<el-form-item :label="`能力名称${i + 1}`">
{{ `${data['name']} ` }}
</el-form-item>
</div>
</el-form>
<template slot="footer">
<el-button @click="closeModal">{{ $t("cancel") }}</el-button>
<el-button v-if="modalType !== 'display'" type="primary" @click="dataFormSubmitHandle()">{{
<el-button type="primary" @click="dataFormSubmitHandle()">{{
$t("confirm")
}}</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import debounce from "lodash/debounce";
import qs from "qs";
import SceneUseStep from '../components/scene-use-step.vue';
import SceneUseStep from './components/scene-use-step.vue';
import SceneOneInput from './components/scene-one-input.vue';
import CombineAbility from '../components/combine-ability.vue';
import IntegratedCombineAbility from '../components/integrated-combine-ability.vue';
import Cookies from 'js-cookie'
import CommonQuestion from '../components/common-question.vue';
let btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤']
export const getJson = (type) => {
return {
methods: 'get',
url: '/census/center/selectResourceListByType',
postData: {
type
}
}
}
export const getDescJson = (text) => {
return {
descObj: {
text: `${text}描述`,
key: 'description'
},
}
}
export const getListParams = {
'基础设施': {
methods: 'get',
url: '',
postData: {
}
},
'数据资源': getJson('数据资源'),
'组件服务': getJson('组件服务'),
}
export const modalTypeText = {
add: '挂接',
update: '修改'
}
export const getFuseResourceList = (abilityListObj) => {
let arr = []
let length = 0
for (const key in abilityListObj) {
if (Object.hasOwnProperty.call(abilityListObj, key)) {
const itemArray = abilityListObj[key];
itemArray.map((v, i) => {
let index = (i + 1) + length
arr.push({
resourceId: v,
type: key,
sequence: index
})
})
length = itemArray.length
}
}
return arr
}
export default {
components: {
SceneUseStep,
IntegratedCombineAbility,
CommonQuestion,
CombineAbility,
SceneOneInput,
},
data() {
return {
fileList: [],
fileUploadUrl: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('ucsToken')}`,
moreKeyTextObj: {
nameObj: {
text: '能力名称',
key: 'name'
},
descObj: {
text: '能力描述',
key: 'description'
},
...getDescJson('能力'),
},
painKeyTextObj: getDescJson('痛点'),
solutionKeyTextObj: getDescJson('方案'),
dataForm: {
"applicationArea": "",
"description": "",
@ -138,6 +186,14 @@ export default {
"attrType": "更多能力",
"attrValue": [{ name: "", description: "" }],
},
{
"attrType": "场景痛点",
"attrValue": [{ description: "" }],
},
{
"attrType": "解决方案",
"attrValue": [{ description: "" }],
},
],
"fuseResourceList": [
{
@ -168,45 +224,25 @@ export default {
},
],
},
btnList: [
{
name: '基本信息',
key: 'basic',
show: true,
},
{
name: '关联能力',
key: 'combine',
show: true,
},
{
name: '更多能力',
key: 'more',
show: true,
},
{
name: '使用步骤',
key: 'basic',
show: true,
},
],
checkList: ['基本信息', '关联能力', '更多能力', '使用步骤'],
areaList: [],
checkList: JSON.parse(JSON.stringify(btnArray)),
btnList: JSON.parse(JSON.stringify(btnArray)),
addOrUpdateVisibleCopy: this.addOrUpdateVisible,
displayInfo: {
'name': '名称',
'description': '描述',
},
displayListInfo: {
'使用步骤': [],
'关联能力': [],
'更多能力': [],
modalTypeText: modalTypeText,
refsParseArray: {
'sceneUseUpDom': '使用步骤',
'moreAbilityDom': '更多能力',
'scenePainDom': '场景痛点',
'solutionDom': '解决方案',
'zjfwDom': '组件服务',
'sjzyDom': '数据资源',
'jcssDom': '基础设施',
},
modalTypeText: {
add: '挂接',
display: '能力展示',
update: '修改'
}
getListParams: getListParams,
abilityListObj: {}
};
},
props: {
@ -246,13 +282,16 @@ export default {
},
// 更新表单
updateDataForm(data) {
if (data.title == '关联能力') {
this.dataForm.fuseResourceList = data.list
if (Object.keys(this.getListParams).includes(data.title)) {
this.abilityListObj[data.title] = data.list;
} else {
// 更多能力、使用步骤
this.operateFuseAttrList(data.title, data)
}
},
getFuseResourceList() {
return getFuseResourceList(this.abilityListObj)
},
operateFuseAttrList(title, data) {
if (this.dataForm.fuseAttrList.every(v => v.attrType !== title)) {
this.dataForm.fuseAttrList.push({
@ -283,13 +322,11 @@ export default {
'add': 'post',
'update': 'put'
}
let arr = this.dataForm.fuseResourceList.filter(v => v.resourceId !== '') || []
if (arr.length == 0) {
this.dataForm.fuseResourceList = []
}
this.dataForm.fuseResourceList = this.getFuseResourceList()
let _obj = Object.assign({}, this.dataForm, {
type: '赋能场景'
})
this.$http
[methodsObj[this.modalType]]("/fuse", _obj)
.then(({ data: res }) => {
@ -319,32 +356,12 @@ export default {
getDetail(data) {
this.dataForm = data;
this.$nextTick(() => {
this.$refs.combineAbility && this.$refs.combineAbility.getDataInfo(data)
this.$refs.sceneUseUp && this.$refs.sceneUseUp.getDataInfo(data)
this.$refs.commonQuestion && this.$refs.commonQuestion.getDataInfo(data)
for (const key in this.refsParseArray) {
this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
}
console.log('this.dataForm----详情-------->', this.dataForm);
})
},
// 重组数据
// getDisPlayData() {
// this.$nextTick(() => {
// const stepObj = this.dataForm.fuseAttrList.find(v => v.attrType == '使用步骤') || {};
// const moreObj = this.dataForm.fuseAttrList.find(v => v.attrType == '更多能力') || {};
// let fuseResourceList = this.dataForm.fuseResourceList || [];
// let arr = []
// fuseResourceList.map(v => {
// if (v.resource) {
// arr.push({
// name: v.resource.name,
// type: v.resource.type,
// })
// }
// })
// this.displayListInfo['使用步骤'] = JSON.parse(stepObj.attrValue || '[]')
// this.displayListInfo['更多能力'] = JSON.parse(moreObj.attrValue || '[]')
// this.displayListInfo['关联能力'] = arr
// })
// },
},
beforeDestroy() {
this.clearForm()
@ -455,7 +472,10 @@ export default {
line-height: 32px;
}
.group-box {
// margin-bottom: 10px;
.title {
text-align: center;
font-weight: 600;
font-size: 18px;
margin-bottom: 10px;
}
</style>

120
back/src/views/modules/ability/assignedScene/components/scene-one-input.vue Normal file
View File

@ -0,0 +1,120 @@
<template>
<div class="question-box">
<div class="title">
{{ title }}
</div>
<div v-for="(item, index) in dataInfo" :key="index">
<el-form-item :label="keyTextObj.descObj.text">
<el-input type="textarea" :rows="2" v-model="item[keyTextObj.descObj.key]"
:placeholder="`请输入${keyTextObj.descObj.text}`" style="width:90%">
</el-input>
<el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small"
v-if="dataInfo.length > 1">删除
</el-button>
</el-form-item>
<el-button class="add-btn" size="small" v-if="index == dataInfo.length - 1" @click="addItem"
type="primary">添加
</el-button>
</div>
</div>
</template>
<script>
export default {
props: {
dataForm: {
type: Object,
default: () => { }
},
title: {
type: String,
default: ''
},
keyTextObj: {
type: Object,
default: () => {
return {
descObj: {
text: '描述',
key: 'description'
},
}
}
}
},
data() {
return {
dataInfo: []
}
},
watch: {
dataInfo: {
handler(newVal) {
this.dataInfo = newVal;
this.$emit('update', {
title: this.title,
list: newVal
})
},
deep: true,
immediate: true,
},
},
methods: {
getDataInfo(dataForm) {
let arr = []
if (dataForm && (dataForm.id || dataForm.id === 0)) {
let fuseAttrList = dataForm.fuseAttrList || [];
let obj = fuseAttrList.find(v => v.attrType === this.title) || {}
let attrValue = JSON.parse(obj.attrValue || "[]")
if (attrValue.length > 0) {
attrValue.map(v => {
arr.push({
[this.keyTextObj.descObj.key]: v[this.keyTextObj.descObj.key],
})
})
} else {
arr = []
arr.push({
[this.keyTextObj.descObj.key]: '',
})
}
} else {
arr = []
arr.push({
[this.keyTextObj.descObj.key]: '',
})
}
this.dataInfo = arr;
},
// 新增
addItem() {
let index = this.dataInfo.length - 1;
if (this.dataInfo[index][this.keyTextObj.descObj.key] === '') {
return this.$message.warning('请填写完整信息！')
}
this.dataInfo.push({
[this.keyTextObj.descObj.key]: '',
})
},
// 删除
deleteItem(list, index) {
this.dataInfo.splice(index, 1)
}
}
}
</script>
<style lang="scss" scoped>
.question-box {
.title {
text-align: center;
font-weight: 600;
font-size: 18px;
margin-bottom: 10px;
}
}
.add-btn {
margin-top: -12px;
margin-left: 100px;
}
</style>

16
back/src/views/modules/ability/components/scene-use-step.vue → back/src/views/modules/ability/assignedScene/components/scene-use-step.vue
View File

@ -16,8 +16,8 @@
v-if="!disabledType && dataInfo.length > 1">删除
</el-button>
</el-form-item>
<el-button style="margin-left:70px" size="small" v-if="!disabledType && index == dataInfo.length - 1"
@click="addItem" type="primary">添加
<el-button class="add-btn" size="small"
v-if="!disabledType && index == dataInfo.length - 1" @click="addItem" type="primary">添加
</el-button>
</div>
@ -87,6 +87,13 @@ export default {
},
// 新增
addItem() {
let index = this.dataInfo.length - 1;
if (this.dataInfo[index].question === '' || this.dataInfo[index].answer === '') {
return this.$message.warning('请填写完整信息！')
}
if (this.dataInfo.length >= 6) {
return this.$message.warning('最多添加6个使用步骤！')
}
this.dataInfo.push({
question: "",
answer: "",
@ -115,4 +122,9 @@ export default {
.step-box {
padding: 20px 10px 10px 10px;
}
.add-btn {
margin-top: -12px;
margin-left: 100px;
}
</style>

12
back/src/views/modules/ability/assignedScene/index.vue
View File

@ -32,7 +32,7 @@
@click="handleUpdate(scope.row)">{{ $t("update") }}</el-button>
<el-button v-if="$hasPermission('ability:bsabilityai:delete')" type="text" size="small"
@click="deleteRow(scope.row.id)">{{ $t("delete") }}</el-button>
<el-button type="text" size="small" @click="showDetail(scope.row)">能力展示</el-button>
<el-button type="text" size="small" @click="showDetail(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
@ -131,15 +131,9 @@ export default {
closeModal() {
this.addOrUpdateVisible = false;
},
// 展示
// 详情
showDetail(val) {
this.addOrUpdateVisible = true;
this.modalType = 'display';
const cloneVal = JSON.parse(JSON.stringify(val))
this.$nextTick(() => {
this.$refs.addOrUpdate.dataForm = cloneVal;
this.$refs.addOrUpdate.getDisPlayData()
})
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + val.id)
},
fullScreen() {
if (window.outerHeight === screen.availHeight) {

370
back/src/views/modules/ability/components/combine-ability.vue Normal file
View File

@ -0,0 +1,370 @@
<template>
<div class="ability-box">
<div class="top">
<div class="type">{{ type }}</div>
<el-button type="primary" size="small" @click="showModal = true">添加</el-button>
</div>
<el-dialog :visible.sync="showModal" title="关联应用" @close="close" :close-on-click-modal="false"
:close-on-press-escape="false" :key="showKey" append-to-body>
<div class="relate-application-content">
<el-transfer v-model="selectedArray" filterable :filter-method="filterMethod" filter-placeholder="请输入名称"
:titles="nameArray" :props="{
key: 'id',
label: 'name',
}" :data="transferData"></el-transfer>
</div>
<template slot="footer">
<el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="confirmSubmitHandle()">{{
$t("confirm")
}}</el-button>
</template>
</el-dialog>
<div class="show-box" v-if="displayList.length > 0">
<div class="list-box">
<div v-for="(item, i) in displayList" :key="i">
<el-tooltip popper-class="testTooltip" effect="dark" :content="item.name || '--'" placement="top">
<div class="list-item">
{{ item.name || '--' }}
</div>
</el-tooltip>
</div>
</div>
</div>
</div>
</template>
<script>
let sjzyArray = [
{
"zyname": "城阳区图书馆总分馆、社区图书室明细信息",
"sjcczl": 0.02,
"zycode": "307013110716000007",
"ygxjghjls": 0,
"jghxxjlzs": 0,
"neibukeshi": "",
"xgxt": "城阳区图书馆及总分馆、社区图书室明细信息",
"ygxdsjccl": 0,
"zygszl": "et",
"ykfjghjls": 0,
"syqk": 0,
"zyformat": "电子表格",
"guid": "277c51e0-066b-441d-9262-6e53ce6fc99a",
"TGBM": "城阳区文化和旅游局",
"ykfdsjccl": 0
},
{
"zyname": "2021年度西海岸新区科技型中小企业名单信息",
"sjcczl": 0,
"zycode": "307013109000000010",
"ygxjghjls": 0,
"jghxxjlzs": 0,
"neibukeshi": "高新技术科",
"xgxt": "2021年度西海岸新区科技型中小企业名单信息，企业名称，入库编号。",
"ygxdsjccl": 0,
"zygszl": "access",
"ykfjghjls": 0,
"syqk": 0,
"zyformat": "数据库",
"guid": "6ed1a478-443a-48ee-8af0-4c7ac2681a94",
"TGBM": "青岛西海岸新区工业和信息化局（区科技局、区大数据局）",
"ykfdsjccl": 0
},
{
"zyname": "西海岸新区高新技术企业名单信息",
"sjcczl": 0,
"zycode": "307013109000000012",
"ygxjghjls": 0,
"jghxxjlzs": 0,
"neibukeshi": "高新技术科",
"xgxt": "西海岸新区高新技术企业名单信息",
"ygxdsjccl": 0,
"zygszl": "access",
"ykfjghjls": 0,
"syqk": 0,
"zyformat": "数据库",
"guid": "770a9127-e7fd-4a6b-ba17-c80cf06ab670",
"TGBM": "青岛西海岸新区工业和信息化局（区科技局、区大数据局）",
"ykfdsjccl": 0
},
{
"zyname": "西海岸新区高新技术企业认定补助名单信息",
"sjcczl": 0,
"zycode": "307013109000000011",
"ygxjghjls": 0,
"jghxxjlzs": 0,
"neibukeshi": "高新技术科",
"xgxt": "西海岸新区高新技术企业认定补助名单信息，企业名称、扶持项目。",
"ygxdsjccl": 0,
"zygszl": "access",
"ykfjghjls": 0,
"syqk": 0,
"zyformat": "数据库",
"guid": "ae52c5f8-ef6e-4ae9-a657-79dcb6f65643",
"TGBM": "青岛西海岸新区工业和信息化局（区科技局、区大数据局）",
"ykfdsjccl": 0
},
{
"zyname": "青岛西海岸新区第六批区级非物质文化遗产代表性项目名录",
"sjcczl": 0,
"zycode": "307013109026000037",
"ygxjghjls": 0,
"jghxxjlzs": 0,
"neibukeshi": "艺术科",
"xgxt": "青岛西海岸新区第六批区级非物质文化遗产代表性项目名录，如项目类别、序号、项目名称、申报单位",
"ygxdsjccl": 0,
"zygszl": "et",
"ykfjghjls": 0,
"syqk": 0,
"zyformat": "电子表格",
"guid": "6d80a3b1-744e-4292-a904-0168d640b1fc",
"TGBM": "青岛西海岸新区文化和旅游局（区新闻出版广电局、区文物局）",
"ykfdsjccl": 0
}
]
let res = {
"code": 0,
"msg": "success",
"data": {
"PageCount": "2115",
"data": sjzyArray,
"rows": "10573"
}
}
let keyObj = {
'数据资源': {
idKey: 'zycode',
nameKey: 'zyname'
},
'组件服务': {
idKey: 'zycode',
nameKey: 'zyname'
},
'基础设施': {
idKey: 'zycode',
nameKey: 'zyname'
},
}
export default {
props: {
type: {
type: String,
default: ''
},
nameArray: {
type: Array,
default: () => ["未选择名称", "已选择名称"],
},
// 最多选择的数据个数
maxNum: {
type: Number,
default: 10
},
getDataParams: {
type: Object,
default: () => {
return {
methods: 'get',
url: '',
postData: {}
}
}
}
},
data() {
return {
showKey: 0,
showModal: false,
transferData: [], // 穿梭框所有数据
selectedArray: [], // 已选择的数据id
allData: [],
displayList: [], // 用于展示的list
}
},
watch: {
showModal(newVal) {
if (newVal) {
this.getData()
}
}
},
methods: {
async getDataInfo(dataForm) {
await this.getData()
let arr = []
let attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type)
if (attrValue.length > 0) {
attrValue.map(val => {
let item = this.allData.find(v => v.id == val.resourceId) || {};
let _obj = {
type: val.type,
id: val.resourceId,
name: item.name
}
arr.push(_obj)
})
}
// 展示
this.displayList = JSON.parse(JSON.stringify(arr));
// 已选中
this.selectedArray = arr.map(v => v.id);
this.$nextTick(() => {
console.log(999, this.displayList)
})
},
// 获取列表
getData() {
// if (this.getDataParams.url === '') {
// return;
// }
// this.$http[this.getDataParams.methods](this.getDataParams.url, this.getDataParams.postData).then(res => {
// console.log('res.data------------>', res.data);
// if (res.data.code !== 0) {
// return this.$message.error(res.msg);
// }
// this.transferData = res.data.data || [] // allData
// this.allData = res.data.data || []
// }).catch(err => {
// this.$message.error(err);
// })
this.allData = []
this.transferData = []
let arr = JSON.parse(JSON.stringify(sjzyArray));
arr.map(v => {
this.transferData.push({
type: this.type,
id: v[keyObj[this.type].idKey],
name: v[keyObj[this.type].nameKey] || '--'
})
})
this.allData = JSON.parse(JSON.stringify(this.transferData));
},
filterMethod(query, item) {
return item.name && item.name.indexOf(query) > -1;
},
confirmSubmitHandle() {
if (this.selectedArray.length > this.maxNum) {
return this.$message.error('最多选择十条数据！');
}
this.showModal = false;
this.displayList = []
this.allData.map(v => {
if (this.selectedArray.includes(v.id)) {
this.displayList.push(v)
}
})
this.displayList = this.displayList.concat(this.displayList)
this.$emit('update', {
title: this.type,
list: this.selectedArray
})
},
close() {
// this.$emit("isShowRelatePopup", false);
this.showModal = false;
this.selectedArray = []
this.allData = []
this.transferData = []
},
}
}
</script>
<style lang="scss" scoped>
.ability-box {
margin-bottom: 10px;
.show-box {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.top {
display: flex;
align-items: center;
justify-content: flex-start;
}
.type {
padding-right: 12px;
font-size: 14px;
color: #606266;
width: 100px;
box-sizing: border-box;
text-align: right;
line-height: 40px;
height: 40px;
}
.list-box {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
margin-left: 100px;
}
.list-item {
font-size: 14px;
color: #606266;
width: 380px;
text-align: left;
margin-right: 10px;
line-height: 40px;
height: 40px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
</style>
<style lang="scss" scoped>
.icon-input ::v-deep .el-input__inner {
cursor: pointer;
}
::v-deep .el-dialog__body {
height: 580px;
overflow: auto;
}
::v-deep .el-checkbox-button__inner {
width: 130px;
margin: 0 10px 5px;
border-left: unset !important;
border-radius: unset !important;
border: 1px solid #dcdfe6 !important;
}
.relate-application-content {
height: 100%;
::v-deep .el-transfer {
height: 100%;
}
::v-deep .el-transfer-panel {
width: 39.5%;
height: 100%;
}
::v-deep .el-transfer-panel__body {
height: 100%;
}
::v-deep .el-transfer-panel__list.is-filterable {
height: calc(100% - 102px);
}
}
</style>

15
back/src/views/modules/ability/components/common-question.vue
View File

@ -17,8 +17,8 @@
v-if="dataInfo.length > 1">删除
</el-button>
</el-form-item>
<el-button style="margin-left:70px" size="small" v-if="index == dataInfo.length - 1" @click="addItem"
type="primary">添加
<el-button class="add-btn" size="small" v-if="index == dataInfo.length - 1" @click="addItem" type="primary">
添加
</el-button>
</div>
</div>
@ -84,7 +84,6 @@ export default {
})
} else {
arr = []
console.log('this.keyTextObj.nameObj.key------------>', this.keyTextObj.nameObj.key);
arr.push({
[this.keyTextObj.nameObj.key]: '',
[this.keyTextObj.descObj.key]: '',
@ -92,7 +91,6 @@ export default {
}
} else {
arr = []
console.log('this.keyTextObj.nameObj.key------------>', this.keyTextObj.nameObj.key);
arr.push({
[this.keyTextObj.nameObj.key]: '',
[this.keyTextObj.descObj.key]: '',
@ -102,6 +100,10 @@ export default {
},
// 新增
addItem() {
let index = this.dataInfo.length - 1;
if (this.dataInfo[index][this.keyTextObj.nameObj.key] === '' || this.dataInfo[index][this.keyTextObj.descObj.key] === '') {
return this.$message.warning('请填写完整信息！')
}
this.dataInfo.push({
[this.keyTextObj.nameObj.key]: '',
[this.keyTextObj.descObj.key]: '',
@ -123,4 +125,9 @@ export default {
margin-bottom: 10px;
}
}
.add-btn {
margin-top: -12px;
margin-left: 100px;
}
</style>

9
back/src/views/modules/ability/components/integrated-combine-ability.vue
View File

@ -24,7 +24,7 @@
v-if="!disabledType && dataInfo.length > 1">删除
</el-button>
</el-form-item>
<el-button style="margin-left:70px" size="small" v-if="!disabledType && index == dataInfo.length - 1"
<el-button style="margin-left:100px" size="small" v-if="!disabledType && index == dataInfo.length - 1"
@click="addItem(dataInfo, 0)" type="primary">添加
</el-button>
</div>
@ -57,15 +57,9 @@ export default {
{
value: '组件服务',
},
{
value: '应用资源',
},
{
value: '基础设施',
},
{
value: '知识库',
},
],
dataInfo: [],
abilityArrayCopy: [],
@ -157,7 +151,6 @@ export default {
// 过滤掉已选的
item.abilityOptions = arr.filter(v => !selectArray.includes(v.id))
console.log('abilityOptions------------>', item.abilityOptions);
},
}
}

3
front/public/index.html
View File

@ -49,7 +49,8 @@
window.SITE_CONFIG['backUrl'] = 'http://localhost:8001';
window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/';
window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
// window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
window.SITE_CONFIG['apiURL'] = 'http://10.18.1.99:8889/renren-admin';
window.SITE_CONFIG['POI_URL'] = 'http://15.2.21.238:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
// 穿透版本
// window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';