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

赋能案例--数据资源

This commit is contained in:
gaoyuanwei 2022-08-26 18:55:19 +08:00
parent ca51b29fbc
commit 244123dd74
2 changed files with 329 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,19 +94,20 @@
</template>
<script>
import debounce from "lodash/debounce";
import qs from "qs";
import SceneUseStep from './components/scene-use-step.vue';
import SceneOneInput from './components/scene-one-input.vue';
import CombineAbility from '../components/combine-ability.vue';
import CommonQuestion from '../components/common-question.vue';
import debounce from 'lodash/debounce'
import qs from 'qs'
import SceneUseStep from './components/scene-use-step.vue'
import SceneOneInput from './components/scene-one-input.vue'
import CombineAbility from '../components/combine-ability.vue'
import CommonQuestion from '../components/common-question.vue'
import InfrastructureModal from './components/infrastructure-modal.vue'
import Cookies from 'js-cookie'
import upload from '@/views/modules/components/upload'
let btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤']
const btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤']
// 数据资源\组件服务
export const getJson = (type) => {
if (type === '组件服务') {
return {
methods: 'get',
url: '/census/center/selectResourceListByType',
@ -114,20 +115,33 @@ export const getJson = (type) => {
type
}
}
} else {
return {
methods: 'post',
url: '/resource/getDataResource',
postData: {
serviceName: '', // 资源名称
orderField: 'fbrq', // 排序字段
orderType: 'desc',
pageNum: 1, // 页码
pageSize: 15 // 分页大小
}
}
}
}
export const getDescJson = (text) => {
return {
descObj: {
text: `${text}描述`,
key: 'description'
},
}
}
}
// 弹框的方法
export const getListParams = {
'数据资源': getJson('数据资源'),
'组件服务': getJson('组件服务'),
'基础设施': ''
数据资源: getJson('数据资源'),
组件服务: getJson('组件服务'),
基础设施: ''
}
// 模态框标题
export const modalTypeText = {
@ -136,13 +150,13 @@ export const modalTypeText = {
}
export const getFuseResourceList = (abilityListObj) => {
let arr = []
const arr = []
let length = 0
for (const key in abilityListObj) {
if (Object.hasOwnProperty.call(abilityListObj, key)) {
const itemArray = abilityListObj[key];
const itemArray = abilityListObj[key]
itemArray.map((v, i) => {
let index = (i + 1) + length
const index = (i + 1) + length
arr.push({
resourceId: v,
type: key,
@ -162,9 +176,9 @@ export default {
SceneOneInput,
upload,
CommonQuestion,
InfrastructureModal,
InfrastructureModal
},
data() {
data () {
return {
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
moreKeyTextObj: {
@ -172,80 +186,80 @@ export default {
text: '能力名称',
key: 'name'
},
...getDescJson('能力'),
...getDescJson('能力')
},
painKeyTextObj: getDescJson('痛点'),
solutionKeyTextObj: getDescJson('方案'),
dataForm: {
"name": "",
"applicationArea": "",
"description": "",
"fuseAttrList": [
name: '',
applicationArea: '',
description: '',
fuseAttrList: [
{
"attrType": "使用步骤",
"attrValue": [{ question: "", answer: "" }],
attrType: '使用步骤',
attrValue: [{ question: '', answer: '' }]
},
{
"attrType": "更多能力",
"attrValue": [{ name: "", description: "" }],
attrType: '更多能力',
attrValue: [{ name: '', description: '' }]
},
{
"attrType": "场景痛点",
"attrValue": [{ description: "" }],
attrType: '场景痛点',
attrValue: [{ description: '' }]
},
{
"attrType": "解决方案",
"attrValue": [{ description: "" }],
attrType: '解决方案',
attrValue: [{ description: '' }]
},
{
"attrType": "服务图片",
"attrValue": "",
},
attrType: '服务图片',
attrValue: ''
}
],
"fuseResourceList": [],
fuseResourceList: []
},
rules: {
name: [
{
required: true,
message: "请输入名称",
trigger: "change",
},
message: '请输入名称',
trigger: 'change'
}
],
description: [
{
required: true,
message: "请输入描述",
trigger: "change",
},
],
message: '请输入描述',
trigger: 'change'
}
]
},
checkList: JSON.parse(JSON.stringify(btnArray)),
btnList: JSON.parse(JSON.stringify(btnArray)),
addOrUpdateVisibleCopy: this.addOrUpdateVisible,
displayInfo: {
'name': '名称',
'description': '描述',
name: '名称',
description: '描述'
},
modalTypeText: modalTypeText,
refsParseArray: {
'sceneUseUpDom': '使用步骤',
'moreAbilityDom': '更多能力',
'scenePainDom': '场景痛点',
'solutionDom': '解决方案',
'zjfwDom': '组件服务',
'sjzyDom': '数据资源',
'jcssDom': '基础设施',
sceneUseUpDom: '使用步骤',
moreAbilityDom: '更多能力',
scenePainDom: '场景痛点',
solutionDom: '解决方案',
zjfwDom: '组件服务',
sjzyDom: '数据资源',
jcssDom: '基础设施'
},
getListParams: getListParams,
abilityListObj: {},
imgData: [],
// 限定图片
handleExceed() {
handleExceed () {
this.$message({ type: 'error', message: '最多支持一张图片上传' })
},
imageUrl: '',
};
imageUrl: ''
}
},
props: {
modalType: {
@ -259,47 +273,47 @@ export default {
},
watch: {
dataForm: {
handler(newVal) {
handler (newVal) {
this.dataForm = newVal
},
deep: true,
immediate: true,
immediate: true
},
addOrUpdateVisible: {
handler(newVal) {
this.addOrUpdateVisibleCopy = newVal;
handler (newVal) {
this.addOrUpdateVisibleCopy = newVal
if (this.modalType == 'add' && newVal) {
localStorage.setItem('InfrastructureSearchData', JSON.stringify({}))
this.getDetail(this.dataForm)
}
},
immediate: true,
immediate: true
}
},
methods: {
clearForm() {
this.$refs.dataForm && this.$refs.dataForm.resetFields();
clearForm () {
this.$refs.dataForm && this.$refs.dataForm.resetFields()
},
closeModal() {
closeModal () {
this.$emit('closeModal')
},
// 更新表单
updateDataForm(data) {
updateDataForm (data) {
if (Object.keys(this.getListParams).includes(data.title)) {
this.abilityListObj[data.title] = data.list;
this.abilityListObj[data.title] = data.list
} else {
// 更多能力、使用步骤
this.operateFuseAttrList(data.title, data)
}
},
getFuseResourceList() {
getFuseResourceList () {
return getFuseResourceList(this.abilityListObj)
},
operateFuseAttrList(title, data) {
operateFuseAttrList (title, data) {
if (this.dataForm.fuseAttrList.every(v => v.attrType !== title)) {
this.dataForm.fuseAttrList.push({
'attrType': title,
'attrValue': JSON.stringify(data.list)
attrType: title,
attrValue: JSON.stringify(data.list)
})
} else {
this.dataForm.fuseAttrList.map(v => {
@ -310,71 +324,71 @@ export default {
}
},
// 改变按钮状态
changeBtn(data) {
this.checkList = data;
changeBtn (data) {
this.checkList = data
},
// 表单提交
dataFormSubmitHandle: debounce(
function () {
this.$refs.dataForm.validate((valid) => {
if (!valid) {
this.$message.error("请检查表单是否填写完整");
return false;
this.$message.error('请检查表单是否填写完整')
return false
}
let methodsObj = {
'add': 'post',
'update': 'put'
const methodsObj = {
add: 'post',
update: 'put'
}
this.dataForm.fuseResourceList = this.getFuseResourceList()
if (this.imageUrl == '') {
this.$message.error("请上传图片！");
return;
this.$message.error('请上传图片！')
return
}
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || '';
let _obj = Object.assign({}, this.dataForm, {
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
const _obj = Object.assign({}, this.dataForm, {
type: '赋能场景'
})
console.log('this.dataForm------表单提交------>', this.dataForm);
console.log('this.dataForm------表单提交------>', this.dataForm)
this.$http
[methodsObj[this.modalType]]("/fuse", _obj)
[methodsObj[this.modalType]]('/fuse', _obj)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
return this.$message.error(res.msg)
}
this.$message({
message: this.$t("prompt.success"),
type: "success",
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.$refs.dataForm && this.$refs.dataForm.resetFields();
this.$emit("refreshDataList");
this.$emit("closeModal");
},
});
this.$refs.dataForm && this.$refs.dataForm.resetFields()
this.$emit('refreshDataList')
this.$emit('closeModal')
}
})
})
.catch((err) => {
this.$message.error(err)
});
});
})
})
},
1000,
{ leading: true, trailing: false }
),
// 详情
getDetail(data) {
console.log('data---详情--------->', data);
this.dataForm = data;
getDetail (data) {
console.log('data---详情--------->', data)
this.dataForm = data
this.$nextTick(() => {
for (const key in this.refsParseArray) {
this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
}
let _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {};
this.imageUrl = _imgObj.attrValue;
const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}
this.imageUrl = _imgObj.attrValue
// 组合能力--特殊处理
Object.keys(this.getListParams).map(k => {
let arr = data.fuseResourceList.filter(v => v.type == k);
let arr2 = [];
const arr = data.fuseResourceList.filter(v => v.type == k)
const arr2 = []
arr.map(v => {
arr2.push(v.resourceId)
})
@ -382,13 +396,13 @@ export default {
})
})
},
handleAvatarSuccess(res, file) {
handleAvatarSuccess (res, file) {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.imageUrl = res.data
},
beforeAvatarUpload(file) {
beforeAvatarUpload (file) {
const isImage =
file.type === 'image/jpeg' ||
file.type === 'image/jpg' ||
@ -398,11 +412,11 @@ export default {
}
return isImage
},
addUploadRemoveFile(file, fileList) {
addUploadRemoveFile (file, fileList) {
this.$refs.addUpload.clearFiles()
this.imageUrl = ''
},
editBeforeAvatarUpload(file) {
editBeforeAvatarUpload (file) {
const isImage =
file.type === 'image/jpeg' ||
file.type === 'image/jpg' ||
@ -413,21 +427,21 @@ export default {
}
return isImage
},
editUploadRemoveFile(file, fileList) {
editUploadRemoveFile (file, fileList) {
this.$refs.editUpload.clearFiles()
this.imageUrl = ''
},
eidtHandleAvatarSuccess(res, file) {
eidtHandleAvatarSuccess (res, file) {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.imageUrl = res.data
}
},
},
beforeDestroy() {
beforeDestroy () {
this.clearForm()
},
};
}
}
</script>
<style lang="scss" scoped>
@ -466,10 +480,8 @@ export default {
<style lang="scss" scoped>
.mod-sys__menu {
.menu-list,
.icon-list {
.el-input__inner,
.el-input__suffix {
cursor: pointer;
@ -493,11 +505,11 @@ export default {
padding: 0;
margin: -8px 0 0 -8px;
>.el-button {
> .el-button {
padding: 8px;
margin: 8px 0 0 8px;
>span {
> span {
display: inline-block;
vertical-align: middle;
width: 18px;

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

@ -2,12 +2,12 @@
<div class="ability-box">
<div class="top">
<div class="type">{{ type }}</div>
<el-button type="primary" size="small" @click="showModal = true">添加</el-button>
<el-button type="primary" size="small" @click="clickOpen">添加</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">
<div class="relate-application-content" v-if="type==='组件服务'">
<el-transfer v-model="selectedArray" filterable :filter-method="filterMethod" filter-placeholder="请输入名称"
:titles="nameArray" :props="{
key: 'id',
@ -15,6 +15,28 @@
}" :data="transferData">
</el-transfer>
</div>
<div v-else-if="type==='数据资源'" class="dataTransfer">
<el-transfer v-model="selectedArray" filter-placeholder="请输入名称"
:titles="nameArray" :props="{
key: 'id',
label: 'name',
}" :data="transferData">
</el-transfer>
<el-input
v-model="searchValue"
placeholder="请输入名称"
></el-input>
<el-button @click="rest" class="restClick">重置</el-button>
</div>
<el-pagination
v-if="type==='数据资源'"
:current-page="currentPage"
:page-size="15"
layout="total, prev, pager, next"
:total="total"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
<template slot="footer">
<el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="confirmSubmitHandle()">{{
@ -173,7 +195,11 @@ export default {
transferData: [],
selectedArray: [],
allData: [],
displayList: [] // 用于展示的list
displayList: [], // 用于展示的list
total: 0,
currentPage: 1,
newNum: 1,
searchValue: ''
}
},
watch: {
@ -181,6 +207,18 @@ export default {
if (newVal) {
this.getData()
}
},
newNum (newVal) {
if (newVal) {
this.getDataParams.postData.pageNum = newVal
this.getData()
}
},
searchValue (newVal) {
if (newVal) {
this.getDataParams.postData.serviceName = newVal
this.getData()
}
}
},
methods: {
@ -212,6 +250,7 @@ export default {
if (this.getDataParams.url === '') {
return
}
if (this.type === '组件服务') {
this.$http[this.getDataParams.methods](this.getDataParams.url, {
params: this.getDataParams.postData
}).then(res => {
@ -229,11 +268,37 @@ export default {
})
})
this.allData = JSON.parse(JSON.stringify(this.transferData))
console.log(this.allData, 'this.transferData')
}).catch(err => {
this.$message.error(err)
})
} else if (this.type === '数据资源') {
this.getDataParams.postData.pageNum = this.newNum
this.$http[this.getDataParams.methods](this.getDataParams.url,
this.getDataParams.postData
).then(res => {
console.log('res.data----获取列表-------->', res.data)
this.total = Number(res.data.data.rows)
if (res.data.code !== 0) {
return this.$message.error(res.msg)
}
this.transferData = []
this.allData = [];
(res.data.data.data || []).map(v => {
this.transferData.push({
type: this.type,
id: v.guid,
name: v.zyname || '--'
})
})
this.allData = JSON.parse(JSON.stringify(this.transferData))
}).catch(err => {
this.$message.error(err)
})
}
},
filterMethod (query, item) {
console.log('1111111111111111111111111')
return item.name && item.name.indexOf(query) > -1
},
confirmSubmitHandle () {
@ -261,9 +326,29 @@ export default {
this.selectedArray = []
this.allData = []
this.transferData = []
},
pageCurrentChangeHandle (val) {
console.log(this.newNum, val, 'wowowo')
this.newNum = val
},
clickOpen () {
this.searchValue = ''
this.getDataParams.postData.serviceName = ''
this.currentPage = 1
this.showModal = true
this.getData()
},
rest () {
this.currentPage = 1
this.searchValue = ''
this.getDataParams.postData.serviceName = ''
this.getData()
}
},
components: { InfrastructureModal, DisplayList }
components: { InfrastructureModal, DisplayList },
mounted () {
console.log(this.type, 'this.type')
}
}
</script>
<style lang="scss" scoped>
@ -354,4 +439,37 @@ export default {
height: calc(100% - 102px);
}
}
.dataTransfer {
position: relative;
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 {
height: calc(100% - 102px);
margin-top: 4rem;
}
::v-deep .el-input {
position: absolute;
font-size: 14px;
display: inline-block;
width: 30%;
top: 52px;
left: 12px;
}
.restClick {
position: absolute;
top: 52px;
left: 284px;
}
}
</style>