hi-ucs/back/src/views/modules/ability/businessComponents.vue

955 lines
31 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-ability__bsabilityai">
<el-form :inline="true" :model="dataForm">
<el-form-item>
<el-input
v-model="dataForm.name"
placeholder="图层名称"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDataList2(dataForm.name)">{{
$t('query')
}}</el-button>
</el-form-item>
<!--<el-form-item>
<el-button type="info" @click="exportHandle()">{{
$t('export')
}}</el-button>
</el-form-item>
<el-form-item>
<el-button
v-if="$hasPermission('ability:bsabilityai:save')"
type="primary"
@click="addOrUpdateHandleAI()"
>挂接</el-button
>
</el-form-item> -->
<el-form-item>
<el-button type="primary" @click="showPutOnTheShelf()"
>盘点入库</el-button
>
</el-form-item>
<el-form-item>
<el-button
v-if="$hasPermission('ability:bsabilityai:delete')"
type="danger"
@click="deleteHandle2()"
>{{ $t('deleteBatch') }}</el-button
>
</el-form-item>
<el-form-item>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
height="650px"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
></el-table-column>
<el-table-column
:show-overflow-tooltip="true"
prop="name"
label="组件名称"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:show-overflow-tooltip="true"
prop="description"
label="能力描述"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:show-overflow-tooltip="true"
prop="deptName"
label="归属项目"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:show-overflow-tooltip="true"
prop="deptName"
label="归属系统"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:show-overflow-tooltip="true"
prop="deptName"
label="归属部门"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:show-overflow-tooltip="true"
prop="deptContacts"
label="注册者"
header-align="center"
align="center"
></el-table-column>
<!-- <el-table-column
:show-overflow-tooltip="true"
width="280"
prop="deptPhone"
label="联系人电话"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:show-overflow-tooltip="true"
width="280"
prop="updateDate"
label="上架时间"
header-align="center"
align="center"
></el-table-column> -->
<el-table-column
label="操作"
fixed="right"
header-align="center"
align="center"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="UpdateData(scope.row)"
>{{ $t('update') }}</el-button
>
<!-- <el-button
type="text"
size="small"
@click="deleteHandle2(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"
>标签化</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper"
:total="total" :page-size="pageSize" :current-page="currentPage">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
:disabled="disabled"
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
<relate-application
v-if="relateApplicationVisible"
ref="relateApplication"
:nameArray="['未关联应用名称', '已关联应用名称']"
:relateInfo="relateInfo"
@isShowRelatePopup="handleIsShowRelatePopup"
></relate-application>
</div>
<el-dialog
title="选择组件类型"
:visible.sync="showPutOnTheShelfFlag"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="clear"
width="30%"
>
<el-radio v-model="radio" label="智能算法">智能算法</el-radio>
<el-radio v-model="radio" label="图层服务">图层服务</el-radio>
<el-radio v-model="radio" label="开发组件">开发组件</el-radio>
<el-radio v-model="radio" label="业务组件">业务组件</el-radio>
<span slot="footer" class="dialog-footer">
<el-button @click="clear">取 消</el-button>
<el-button type="primary" @click="showPutOnTheShelfVue"
>确 定</el-button
>
</span>
</el-dialog>
<el-dialog
:title="submitFrom.id ? '修改' + radio : '上架' + radio"
:visible.sync="showPutOnTheShelfFlag2"
:close-on-click-modal="false"
:close-on-press-escape="false"
:destroy-on-close="true"
:before-close="clear"
width="50%"
>
<putOnTheShelf
ref="putOnTheShelf"
:putOnTheShelfList="putOnTheShelfList"
@changeInfoList="changeInfoList"
:type="radio"
:typeInput="typeInput"
:required="required"
:notFilled="notFilled"
@submitData="submitData"
></putOnTheShelf>
<span slot="footer" class="dialog-footer">
<el-button @click="clear">取 消</el-button>
<el-button type="primary" @click="submitData"> </el-button>
</span>
</el-dialog>
</el-card>
</template>
<script>
//import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './bsabilityai-add-or-update'
import dictionaries from '@/utils/dictionaries'
import qs from 'qs'
import { pinyin } from 'pinyin-pro'
import RelateApplication from './bsabilityai-relate-application.vue'
import putOnTheShelf from '@/views/modules/putOnTheShelf'
export default {
// mixins: [mixinViewModule], @selection-change="dataListSelectionChangeHandle"
data () {
return {
required: ['归属部门', '部门联系人', '部门联系人电话', '应用领域', '共享条件', '算法名称', '算法描述', '图层名称', '图层描述', '组件名称', '组件描述', '组件地址', '服务地址', '服务接口', '接口请求方式', '算法类别'],
notFilled: [],
insertList: [],
putOnTheShelfList: [],
radio: '',
showPutOnTheShelfFlag: false,
showPutOnTheShelfFlag2: false,
submitFrom: {
type: '组件服务',
deptId: '',
delFlag: 0,
infoList: [
{
attrType: '组件类型',
attrValue: '图层服务',
delFlag: 0,
}
]
},
mixinViewModuleOptions: {
getDataListURL: '/resource/page',
getDataListIsPage: true,
exportURL: '/ability/bsabilityai/export',
deleteURL: '/resource/delete',
deleteIsBatch: true
},
disabled: false,
sceneArr: dictionaries.sceneArr,
fieldArr: dictionaries.fieldArr,
shareFormArr: dictionaries.shareFormArr,
dataForm: {
name: '',
creator: '',
delFlag: 0,
selectType: 0,
type: '组件服务'
},
// qp: false,
// 关联应用弹窗
relateApplicationVisible: false,
relateInfo: {
id: '',
responseData: {},
linkType: ''
},
typeInput: '组件服务',
uuidOne: '',
uuidTwo: '',
uuidSnum: '',
addOrUpdateVisible:false,
dataList:[],
dataListLoading:false,
currentPage: 1,
pageSize: 10,
total: null,
dataListSelections:[]
}
},
watch: {},
components: {
AddOrUpdate,
RelateApplication,
putOnTheShelf
},
created () {
this.dataForm.name = ''
this.dataForm.type = '组件服务'
},
mounted () {
this.getDataList();
},
methods: {
//获取图层服务列表数据
getDataList(){
//console.log('开始获取列表数据');
let params = {
deptIds: [],
districtId: '',
infoList: [{ attrType: '组件类型', attrValue: '业务组件' }],
name: '',
orderField: 'total',
orderType: 'DESC',
pageNum: this.currentPage,
pageSize: 10,
type: '组件服务',
};
this.$http.post(`/resource/pageWithAttrs`, params).then((res) => {
this.dataList = res.data.data.records;
this.total = parseInt(res.data.data.total);
})
},
handleCurrentChange (val) {
console.log('val------------>', val)
this.currentPage = val;
this.getDataList();
},
//删除,可以批量删除
deleteHandle2 (id) {
console.log('删除========================》', id, this.dataListSelections)
const ids = []
if (id) {
ids.push(id)
} else {
if (this.dataListSelections.length > 0) {
this.dataListSelections.forEach(item => {
ids.push(item.id)
})
}
}
this.$http.post('/resource/delete', { ids: ids }).then(res => {
console.log('删除成功', res)
this.getDataList()
})
},
//多选多选
handleSelectionChange(val){
this.dataListSelections = val;
},
// 置顶
toppingCapacity (item) {
this.$http.put('/resource/pin_top/' + item.id).then(res => {
console.log('置顶', res.data.code)
if (res.data.code == 0) {
this.$message({
message: '置顶成功',
type: 'success'
})
} else {
this.$message({
message: '置顶失败',
type: 'warning'
})
}
})
},
reset () {
this.getDataList();
},
findValue (list, type) {
const found = list.find((item) => item.attrType === type)
if (found) {
return found.attrValue
} else {
return '暂无数据'
}
},
showDetail (val) {
console.log(val)
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + val.id)
// this.addOrUpdateHandle(id)
// this.addOrUpdateVisible = true
// this.disabled = false
// this.$nextTick(() => {
// this.$refs.addOrUpdate.UpdateState = false
// this.$refs.addOrUpdate.dataFormShowDetails = val
// this.$refs.addOrUpdate.init()
// })
// this.disabled = true
},
// 创建uuid
uuid (len, radix) {
var chars =
'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
var uuid = []
var i
radix = radix || chars.length
if (len) {
// Compact form
for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)]
} else {
// rfc4122, version 4 form
var r
// rfc4122 requires these characters
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
uuid[14] = '4'
// Fill in random data. At i==19 set the high bits of clock sequence as
// per rfc4122, sec. 4.1.5
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | (Math.random() * 16)
uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r]
}
}
}
return uuid.join('')
},
uuidSplice () {
this.uuidOne = this.uuid(13, 16)
this.uuidTwo = this.uuid(13, 16)
this.uuidSnum = this.uuidOne + this.uuidTwo
this.uuidSnum = this.uuidSnum.replace(/\s+/g, '')
console.log('this.uuidOne', this.uuidSnum)
},
showDocument (val) {
// 第一步:创建文档
// 不存在文档时创建空文档
this.uuidSplice()
const uuidParam = val.infoList.filter((item) => {
if (item.attrType === '技术文档') {
return item
}
})
if (uuidParam.length > 0) {
this.uuidSnum = uuidParam[0].attrValue.split('/')[1].split('.')[0]
} else {
const type = pinyin(val.type, {
pattern: 'initial'
}).replace(/\s*/g, '')
const obj = {
attrType: '技术文档',
attrValue: type + '/' + this.uuidSnum + '.md',
delFlag: 0
}
val.infoList.push(obj)
}
// 存在时加入文档
this.$http
.put('/resource/update', val)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
// 打开这个空的开发文档
window.open(
window.SITE_CONFIG.frontUrl + '?id=' + this.uuidSnum + '&&type=' + val.type,
'_blank'
)
}
})
})
.catch(() => {})
// 第二部update列数据成功后打开文档编辑
},
getDataList2 (names) {
if (names != null) {
this.$http
.get(
this.mixinViewModuleOptions.getDataListURL +
'?' +
qs.stringify({
// order: this.order,
// orderField: this.orderField,
// type: '组件服务',
pageNum: 1,
pageSize: this.limit,
type: '组件服务',
creator: '',
selectType: 0,
delFlag: 0,
name: names,
})
)
.then(({ data: res }) => {
if (res.code !== 0) {
this.dataList = []
this.total = 0
return this.$message.error(res.msg)
}
if (res.data.list.length !== 0) {
this.dataList = res.data.list
this.total = this.mixinViewModuleOptions.getDataListIsPage
? res.data.total
: 0
if (this.mixinViewModuleOptions.requestCallback) {
this.mixinViewModuleOptions.requestCallback(res.data)
}
this.dataListLoading = false
this.dataList.map((item, index) => {
const dataListSinforList = []
item.infoList.map((itemson, indexson) => {
if (
itemson.attrType === '应用领域' ||
itemson.attrType === '组件类型'
) {
dataListSinforList.push(itemson)
}
})
this.dataList[index].infoList2 = dataListSinforList
})
} else {
this.$message.error('未查询到相关信息')
this.reset()
}
})
.catch(() => {
this.dataListLoading = false
})
} else {
this.$message.error('查询信息不能为空')
}
},
// fullScreen () {
// if (window.outerHeight === screen.availHeight) {
// if (window.outerWidth === screen.availWidth) {
// this.qp = false
// } else {
// this.qp = true
// }
// } else {
// this.qp = true
// }
// },
// 点击关联应用按钮
showRelateApplication (row) {
this.$http
.get(
`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`
)
.then(({ data: res }) => {
if (res && res.data) {
this.relateApplicationVisible = true
this.relateInfo = {
id: row.id,
responseData: res.data,
linkType: '2'
}
}
})
.catch(() => {})
},
// 是否展示关联应用弹窗
handleIsShowRelatePopup (type) {
this.relateApplicationVisible = type
},
// 新上架
clear () {
console.log('清空----------------------------------------')
this.notFilled = []
this.showPutOnTheShelfFlag = false
this.showPutOnTheShelfFlag2 = false
this.insertList = []
this.putOnTheShelfList = []
this.radio = ''
this.submitFrom = {
type: '组件服务',
deptId: '',
delFlag: 0,
infoList: [
{
attrType: '组件类型',
attrValue: '图层服务',
delFlag: 0
}
]
}
this.reset()
},
showPutOnTheShelf () {
this.showPutOnTheShelfFlag = true
this.$http.get('/category/getCategoryTree').then((res) => {
this.insertList = res.data.data.filter(
(item) => item.name === '组件服务一'
)[0]
})
},
showPutOnTheShelfVue () {
this.showPutOnTheShelfFlag = false
this.showPutOnTheShelfFlag2 = true
this.submitFrom.infoList[0].attrValue = this.radio
this.putOnTheShelfList = this.insertList.children.filter(
(item) => item.name === this.radio
)[0].children
},
changeInfoList (obj) {
console.log(obj, this.submitFrom)
this.submitFrom.infoList = this.submitFrom.infoList.filter(
(item) => item.attrType !== obj.attrType
)
this.submitFrom.infoList.push(obj)
},
changeAdd () {
const arr = []
switch (this.radio) {
case '智能算法':
arr.push('算法优势')
arr.push('计费标准信息')
break
case '开发组件':
case '业务组件':
arr.push('功能介绍')
break
}
arr.push('应用场景')
arr.push('常见问题')
this.$refs.putOnTheShelf.submit(arr)
},
submitData () {
console.log('提交11111111111===============>', this.putOnTheShelfList, this.submitFrom)
const arr = []
this.putOnTheShelfList.map((item) => {
item.children.map((child) => {
if (child.children) {
if (
child.name === '算法优势' ||
child.name === '应用场景' ||
child.name === '功能介绍'
) {
arr.push(child.name)
if (
this.submitFrom.infoList.filter(
(value) => value.attrType === child.name
).length === 0
) {
this.submitFrom.infoList.push({
attrType: child.name,
attrValue: child.note1,
delFlag: 0
})
}
}
child.children.map((val) => {
arr.push(val.name)
if (
val.type === 'input' ||
val.type === 'textArea' ||
val.type === 'select' ||
val.type === 'checkBox' ||
val.type === 'radio'
) {
this.submitFrom.infoList = this.submitFrom.infoList.filter(
(item) => item.attrType !== val.name
)
}
if (val.note1 == '' || val.note1) {
switch (val.name) {
case '算法名称':
case '应用名称':
case '组件名称':
case '图层名称':
this.submitFrom.name = val.note1
break
case '算法描述':
case '应用描述':
case '组件描述':
case '图层描述':
this.submitFrom.description = val.note1
break
case '共享条件':
this.submitFrom.shareCondition = val.note1
break
case '共享类型':
this.submitFrom.shareType = val.note1
break
case '服务接口':
this.submitFrom.apiUrl = val.note1
break
case '接口请求方式':
this.submitFrom.apiMethodType = val.note1
break
case '访问地址':
this.submitFrom.link = val.note1
break
case '部门联系人':
this.submitFrom.deptContacts = val.note1
break
case '部门联系人电话':
this.submitFrom.deptPhone = val.note1
break
case '归属部门':
this.submitFrom.deptId = val.note1
break
case '能力类型':
this.submitFrom.type = val.note1
break
default:
if (
val.type !== 'image' &&
val.type !== 'file' &&
val.type !== 'video'
) {
this.submitFrom.infoList.push({
attrType: val.name,
attrValue: val.note1,
delFlag: 0
})
} else {
if (
this.submitFrom.infoList.filter(
(value) => value.attrType === val.name
).length === 0
) {
this.submitFrom.infoList.push({
attrType: val.name,
attrValue: val.note1,
delFlag: 0,
note2: val.note2 || null
})
}
}
break
}
}
})
}
})
})
this.submitFrom.infoList = this.submitFrom.infoList.sort(
(a, b) => arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
)
this.notFilled = []
if (!this.submitFrom.name) {
this.notFilled.push('算法名称')
this.notFilled.push('图层名称')
this.notFilled.push('组件名称')
}
if (!this.submitFrom.description) {
this.notFilled.push('算法描述')
this.notFilled.push('图层描述')
this.notFilled.push('组件描述')
}
if (!this.submitFrom.shareCondition) {
this.notFilled.push('共享条件')
}
if (!this.submitFrom.deptContacts) {
this.notFilled.push('部门联系人')
}
if (!this.submitFrom.deptId) {
this.notFilled.push('归属部门')
}
if (!this.submitFrom.deptPhone) {
this.notFilled.push('部门联系人电话')
}
if (this.radio === '智能算法' && !this.submitFrom.apiUrl) {
if ((this.submitFrom.infoList.filter(val => val.attrType === '使用方式')[0].attrValue === '调用接口')) {
this.notFilled.push('服务接口')
}
}
if (this.radio === '智能算法' && !this.submitFrom.apiMethodType) {
if ((this.submitFrom.infoList.filter(val => val.attrType === '使用方式')[0].attrValue === '调用接口')) {
this.notFilled.push('接口请求方式')
}
}
if (this.radio === '智能算法' && (!this.submitFrom.infoList.filter(val => val.attrType === '算法类别')[0] || !this.submitFrom.infoList.filter(val => val.attrType === '算法类别')[0].attrValue)) {
this.notFilled.push('算法类别')
}
if (!this.submitFrom.infoList.filter(val => val.attrType === '应用领域')[0] || !this.submitFrom.infoList.filter(val => val.attrType === '应用领域')[0].attrValue) {
this.notFilled.push('应用领域')
}
if (this.radio === '图层服务' && (!this.submitFrom.infoList.filter(val => val.attrType === '服务地址')[0] || !this.submitFrom.infoList.filter(val => val.attrType === '服务地址')[0].attrValue)) {
this.notFilled.push('服务地址')
}
if ((this.radio === '业务组件' || this.radio === '开发组件') && (!this.submitFrom.infoList.filter(val => val.attrType === '组件地址')[0] || !this.submitFrom.infoList.filter(val => val.attrType === '组件地址')[0].attrValue)) {
this.notFilled.push('组件地址')
}
console.log(this.submitFrom, this.notFilled, '表单验证')
if (this.notFilled.length > 0) {
this.$message({
message: '请填写必填字段!',
type: 'warning'
})
} else {
if (this.submitFrom.id) {
// 解决编辑无组件类型
this.submitFrom.infoList.map((val) => {
if (val.attrType === '组件类型') {
val.attrValue = this.radio
}
})
console.log('编辑===============>', this.submitFrom)
console.log(this.submitFrom.infoList, '===============abc')
// 去重
const newArr = this.submitFrom.infoList.filter(
(element, index, self) => {
return (
self.findIndex((x) => x.attrType === element.attrType) === index
)
}
)
this.submitFrom.infoList = newArr
// 检验是否有空值
this.submitFrom.infoList = this.submitFrom.infoList.filter(item => item.attrValue)
this.$http
.put('/resource/update', this.submitFrom)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error('修改失败!')
} else {
this.$message.success('修改成功!')
this.clear()
}
})
.catch(() => {})
} else {
console.log('提交11111111111===============>', this.putOnTheShelfList, this.submitFrom)
this.$http
.post('/resource/insert?source= b', this.submitFrom)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error('上架失败!')
} else {
this.$message.success('上架成功!')
this.clear()
}
})
.catch(() => {})
}
}
},
// 新修改
UpdateData (item) {
this.$http.get('/category/getCategoryTree').then((res) => {
this.insertList = res.data.data.filter(
(item) => item.name === '组件服务一'
)[0]
this.radio = item.infoList.filter(
(val) => val.attrType === '组件类型'
)[0].attrValue
this.putOnTheShelfList = this.insertList.children.filter(
(item) => item.name === this.radio
)[0].children
this.putOnTheShelfList.map((parent) => {
parent.children.map((child) => {
if (
child.name === '算法优势' ||
child.name === '应用场景' ||
child.name === '功能介绍'
) {
const obj = item.infoList.filter(
(val) => val.attrType === child.name
)[0]
if (obj) {
child.note1 = obj.attrValue
}
} else {
if (child.children) {
child.children.map((data) => {
if (
data.name === '计费标准信息' ||
data.name === '常见问题'
) {
const obj = item.infoList.filter(
(val) => val.attrType === child.name
)[0]
if (obj) {
data.note1 = obj.attrValue
}
} else {
switch (data.name) {
case '算法名称':
case '应用名称':
case '组件名称':
case '图层名称':
data.note1 = item.name
break
case '算法描述':
case '应用描述':
case '组件描述':
case '图层描述':
data.note1 = item.description
break
case '共享条件':
data.note1 = item.shareCondition
break
case '共享类型':
data.note1 = item.shareType
break
case '服务接口':
data.note1 = item.apiUrl
break
case '接口请求方式':
data.note1 = item.apiMethodType
break
case '访问地址':
data.note1 = item.link
break
case '部门联系人':
data.note1 = item.deptContacts
break
case '部门联系人电话':
data.note1 = item.deptPhone
break
case '归属部门':
data.note1 = item.deptId
break
case '能力类型':
data.note1 = item.type
break
default:
// eslint-disable-next-line no-case-declarations
const obj1 = item.infoList.filter(
(val) => val.attrType === data.name
)[0]
if (obj1) {
data.note1 = obj1.attrValue
}
break
}
if (
data.type === 'image' ||
data.type === 'file' ||
data.type === 'video'
) {
const obj1 = item.infoList.filter(
(val) => val.attrType === data.name
)[0]
if (obj1) {
data.note2 = obj1.note2
}
}
}
})
}
}
})
})
this.submitFrom.id = item.id
this.showPutOnTheShelfFlag2 = true
})
}
}
}
</script>
<style lang="scss" scoped>
.el-tooltip__popper {
max-width: 50%;
}
// ::v-deep .el-table .cell {
// width: 200px;
// }
::v-deep .el-upload-list__item-name {
width: 400px;
}
</style>