合并版本v0.8.7.2
This commit is contained in:
commit
ff971b798b
|
|
@ -4,4 +4,9 @@ back/dist-西海岸-后台管理-带配置文件.zip
|
|||
back/dist-市局-后台管理-带配置文件.zip
|
||||
back/dist-包头-后台管理.zip
|
||||
back/dist-市局-后台管理.zip
|
||||
|
||||
back/dist-市局-后台管理-v0.8.2.1.zip
|
||||
front/public/index.html
|
||||
back/dist-西海岸-后台管理-v0.8.2.1.zip
|
||||
back/dist-市局-后台管理-v0.8.2.3.zip
|
||||
back/dist-西海岸-后台管理-v0.8.2.4.d.zip
|
||||
*.zip
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -22,6 +22,7 @@
|
|||
"carddragger": "^0.3.6",
|
||||
"clipboard": "^2.0.6",
|
||||
"core-js": "^3.6.5",
|
||||
"crypto-js": "^4.1.1",
|
||||
"echarts": "^4.7.0",
|
||||
"element-ui": "^2.13.2",
|
||||
"file-saver": "^2.0.5",
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
"lodash": "^4.17.19",
|
||||
"monaco-editor": "^0.20.0",
|
||||
"monaco-editor-webpack-plugin": "^1.9.0",
|
||||
"pinyin-pro": "^3.11.0",
|
||||
"qs": "^6.9.4",
|
||||
"quill": "^1.3.7",
|
||||
"sass": "^1.51.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
/*
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-08-25 14:37:49
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-08-29 09:57:52
|
||||
* @Description: 告诉大家这是什么
|
||||
*/
|
||||
var _global = {}
|
||||
var CONFIGITEM = {
|
||||
// version: 'qingdao', // 青岛
|
||||
// version: 'xihaian', // 西海岸
|
||||
version: 'test', // 测试
|
||||
// version: 'frp', // 内网穿透
|
||||
// version: 'dev', // 开发
|
||||
vNum: 'v0.8.7.2',
|
||||
configData: {
|
||||
// 青岛市大数据局
|
||||
qingdao: {
|
||||
previewUrl: 'http://15.72.183.90:7008/',
|
||||
apiURL: 'http://15.72.183.90:8000/renren-admin',
|
||||
websocketURL: 'ws://15.72.183.90:8000/renren-admin/websocket'
|
||||
},
|
||||
// 西海岸大数据局
|
||||
xihaian: {
|
||||
previewUrl: 'http://10.134.135.9:9796/',
|
||||
apiURL: 'http://10.134.135.9:8888/renren-admin',
|
||||
websocketURL: 'ws://10.134.135.9:8888/renren-admin/websocket'
|
||||
},
|
||||
// 测试
|
||||
test: {
|
||||
previewUrl: 'http://192.168.124.243:9796/',
|
||||
apiURL: 'http://192.168.124.243:8888/renren-admin',
|
||||
websocketURL: 'ws://192.168.124.243:8888/renren-admin/websocket'
|
||||
},
|
||||
// 内网穿透
|
||||
frp: {
|
||||
previewUrl: 'http://124.222.94.39:9796/',
|
||||
apiURL: 'http://124.222.94.39:8888/renren-admin',
|
||||
websocketURL: 'ws://124.222.94.39:8888/renren-admin/websocket'
|
||||
},
|
||||
dev: {
|
||||
previewUrl: 'http://localhost:8080/',
|
||||
apiURL: 'http://192.168.124.236:8888/renren-admin',
|
||||
websocketURL: 'ws://192.168.124.236:8888/renren-admin/websocket'
|
||||
}
|
||||
}
|
||||
}
|
||||
_global.config = CONFIGITEM.configData[CONFIGITEM.version]
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<!--
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-04-11 10:11:40
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-23 18:30:45
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-08-29 09:54:59
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -11,10 +11,11 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<script type="text/javascript" src="./config/basicConfig.js"></script>
|
||||
<!-- 站点配置 -->
|
||||
<script>
|
||||
window.SITE_CONFIG = {};
|
||||
window.SITE_CONFIG['version'] = 'v2.9.0';
|
||||
window.SITE_CONFIG['version'] = CONFIGITEM.vNum;
|
||||
window.SITE_CONFIG['nodeEnv'] = '<%= process.env.VUE_APP_NODE_ENV %>';
|
||||
window.SITE_CONFIG['apiURL'] = ''; // api请求地址
|
||||
window.SITE_CONFIG['storeState'] = {}; // vuex本地储存初始化状态（用于不刷新页面的情况下，也能重置初始化项目中所有状态）
|
||||
|
|
@ -27,58 +28,19 @@
|
|||
'isTab': true, // 是否通过tab展示内容?
|
||||
'iframeURL': '' // 是否通过iframe嵌套展示内容? (以http[s]://开头, 自动匹配)
|
||||
};
|
||||
window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/#/vueTemplateDemo';
|
||||
// window.SITE_CONFIG['frontUrl'] = 'http://124.222.94.39:9796/#/vueTemplateDemo';
|
||||
// window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/#/vueTemplateDemo';
|
||||
// window.SITE_CONFIG['frontUrl'] = 'http://10.134.135.9:9797/#/vueTemplateDemo';
|
||||
window.SITE_CONFIG['menuList'] = []; // 左侧菜单列表（后台返回，未做处理）
|
||||
window.SITE_CONFIG['permissions'] = []; // 页面按钮操作权限（后台返回，未做处理）
|
||||
window.SITE_CONFIG['dynamicRoutes'] = []; // 动态路由列表
|
||||
window.SITE_CONFIG['dynamicMenuRoutes'] = []; // 动态(菜单)路由列表
|
||||
window.SITE_CONFIG['dynamicMenuRoutesHasAdded'] = false; // 动态(菜单)路由是否已经添加的状态标示（用于判断是否需要重新拉取数据并进行动态添加操作）
|
||||
</script>
|
||||
|
||||
<!-- 开发环境 -->
|
||||
<% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
|
||||
<script>
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://15.2.21.166:8888/renren-admin';
|
||||
window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://15.2.23.141:8000/renren-admin';
|
||||
// WebSocket地址
|
||||
window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';
|
||||
</script>
|
||||
<% } %>
|
||||
<!-- 集成测试环境 -->
|
||||
<% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
|
||||
<script>
|
||||
window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/renren-admin';
|
||||
window.SITE_CONFIG['frontUrl'] = _global.config.previewUrl + '#/vueTemplateDemo';
|
||||
window.SITE_CONFIG['previewUrl'] = _global.config.previewUrl;
|
||||
window.SITE_CONFIG['apiURL'] = _global.config.apiURL;
|
||||
// WebSocket地址
|
||||
window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';
|
||||
window.SITE_CONFIG['socketURL'] =_global.config.socketURL;
|
||||
</script>
|
||||
<% } %>
|
||||
<!-- 验收测试环境 -->
|
||||
<% if (process.env.VUE_APP_NODE_ENV === 'prod:uat') { %>
|
||||
<script>
|
||||
window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/renren-admin';
|
||||
// WebSocket地址
|
||||
window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';
|
||||
</script>
|
||||
<% } %>
|
||||
<!-- 生产环境 -->
|
||||
<% if (process.env.VUE_APP_NODE_ENV === 'prod') { %>
|
||||
<script>
|
||||
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
|
||||
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
|
||||
window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
|
||||
// WebSocket地址
|
||||
window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';
|
||||
</script>
|
||||
<% } %>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1013 B |
Binary file not shown.
|
After Width: | Height: | Size: 1015 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1016 B |
Binary file not shown.
|
After Width: | Height: | Size: 1020 B |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -1,15 +1,15 @@
|
|||
<!--
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-04-11 16:30:04
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-06 13:14:02
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-16 15:07:44
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<!-- 流程图 -->
|
||||
<h4>{{ $t('process.flowImage') }}</h4>
|
||||
<img :src="getResourceURL()" class="image">
|
||||
<!-- <h4>{{ $t('process.flowImage') }}</h4>
|
||||
<img :src="getResourceURL()" class="image"> -->
|
||||
<!-- 流转详情 -->
|
||||
<h4>{{ $t('process.circulation') }}</h4>
|
||||
<div class="mod-sys__dict">
|
||||
|
|
|
|||
|
|
@ -486,7 +486,7 @@ $--cascader-tag-background: #f0f2f5;
|
|||
|
||||
/* Group
|
||||
-------------------------- */
|
||||
$--group-option-flex: 0 0 (1/5) * 100% !default;
|
||||
$--group-option-flex: 0 0 20% !default;
|
||||
$--group-option-offset-bottom: 12px !default;
|
||||
$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
|
||||
$--group-title-color: $--color-black !default;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import Cookies from 'js-cookie'
|
|||
import qs from 'qs'
|
||||
import { deepClone } from '@/utils/form-generator/index'
|
||||
export default {
|
||||
data() {
|
||||
data () {
|
||||
/* eslint-disable */
|
||||
return {
|
||||
// 设置属性
|
||||
|
|
@ -38,19 +38,19 @@ export default {
|
|||
}
|
||||
/* eslint-enable */
|
||||
},
|
||||
created() {
|
||||
created () {
|
||||
if (this.mixinViewModuleOptions.createdIsNeed) {
|
||||
this.query()
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
activated () {
|
||||
if (this.mixinViewModuleOptions.activatedIsNeed) {
|
||||
this.query()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取数据列表
|
||||
query() {
|
||||
query () {
|
||||
this.dataListLoading = true
|
||||
this.$http.get(
|
||||
this.mixinViewModuleOptions.getDataListURL + '?' + qs.stringify({
|
||||
|
|
@ -102,13 +102,22 @@ export default {
|
|||
return item
|
||||
}
|
||||
})
|
||||
this.total = this.mixinViewModuleOptions.getDataListIsPage ? this.dataList.length : 0
|
||||
this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
|
||||
})
|
||||
} else {
|
||||
this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
|
||||
}
|
||||
|
||||
console.log('数据列表', this.dataList, this.mixinViewModuleOptions.getDataListURL)
|
||||
if (this.dataList[0].type === '组件服务') {
|
||||
this.dataList.map(val => {
|
||||
val.infoList2 = val.infoList.filter(item => item.attrType === '应用领域' || item.attrType === '组件类型')
|
||||
})
|
||||
} else if (this.dataList[0].type === '应用资源') {
|
||||
this.dataList.map(val => {
|
||||
val.infoList2 = val.infoList.filter(item => item.attrType === '应用领域')
|
||||
})
|
||||
}
|
||||
if (this.mixinViewModuleOptions.requestCallback) {
|
||||
this.mixinViewModuleOptions.requestCallback(res.data)
|
||||
}
|
||||
|
|
@ -118,11 +127,11 @@ export default {
|
|||
})
|
||||
},
|
||||
// 多选
|
||||
dataListSelectionChangeHandle(val) {
|
||||
dataListSelectionChangeHandle (val) {
|
||||
this.dataListSelections = val
|
||||
},
|
||||
// 排序
|
||||
dataListSortChangeHandle(data) {
|
||||
dataListSortChangeHandle (data) {
|
||||
if (!data.order || !data.prop) {
|
||||
this.order = ''
|
||||
this.orderField = ''
|
||||
|
|
@ -133,13 +142,13 @@ export default {
|
|||
this.query()
|
||||
},
|
||||
// 分页, 每页条数
|
||||
pageSizeChangeHandle(val) {
|
||||
pageSizeChangeHandle (val) {
|
||||
this.page = 1
|
||||
this.limit = val
|
||||
this.query()
|
||||
},
|
||||
// 分页, 当前页
|
||||
pageCurrentChangeHandle(val) {
|
||||
pageCurrentChangeHandle (val) {
|
||||
this.page = val
|
||||
this.query()
|
||||
},
|
||||
|
|
@ -148,7 +157,7 @@ export default {
|
|||
this.query()
|
||||
},
|
||||
// 新增
|
||||
addOrUpdateHandle(id) {
|
||||
addOrUpdateHandle (id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.disabled = false
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -159,7 +168,7 @@ export default {
|
|||
},
|
||||
|
||||
// 组件服务新增
|
||||
addOrUpdateHandleAI(id) {
|
||||
addOrUpdateHandleAI (id) {
|
||||
// const infoList = []
|
||||
let showList = []
|
||||
this.$http.get('category/getCategoryTree').then(({ data: res }) => {
|
||||
|
|
@ -217,7 +226,7 @@ export default {
|
|||
}, 100)
|
||||
},
|
||||
// 应用资源新增
|
||||
addOrUpdateHandleServe(id) {
|
||||
addOrUpdateHandleServe (id) {
|
||||
// const infoList = []
|
||||
let showList = []
|
||||
this.$http.get('category/getCategoryTree').then(({ data: res }) => {
|
||||
|
|
@ -275,7 +284,7 @@ export default {
|
|||
}, 100)
|
||||
},
|
||||
// 修改
|
||||
UpdateHandle(val) {
|
||||
UpdateHandle (val) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.disabled = false
|
||||
const cloneVal = deepClone(val)
|
||||
|
|
@ -300,7 +309,7 @@ export default {
|
|||
})
|
||||
},
|
||||
// 关闭当前窗口
|
||||
closeCurrentTab(data) {
|
||||
closeCurrentTab (data) {
|
||||
var tabName = this.$store.state.contentTabsActiveName
|
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
|
||||
if (this.$store.state.contentTabs.length <= 0) {
|
||||
|
|
@ -312,7 +321,7 @@ export default {
|
|||
}
|
||||
},
|
||||
// 删除
|
||||
deleteHandle(id) {
|
||||
deleteHandle (id) {
|
||||
if (this.mixinViewModuleOptions.deleteIsBatch && !id && this.dataListSelections.length <= 0) {
|
||||
return this.$message({
|
||||
message: this.$t('prompt.deleteBatch'),
|
||||
|
|
@ -346,7 +355,7 @@ export default {
|
|||
}).catch(() => { })
|
||||
},
|
||||
|
||||
deleteHandle2(id) {
|
||||
deleteHandle2 (id) {
|
||||
console.log('删除========================》', id, this.dataListSelections)
|
||||
const ids = []
|
||||
if (id) {
|
||||
|
|
@ -364,7 +373,7 @@ export default {
|
|||
})
|
||||
},
|
||||
// 导出
|
||||
exportHandle() {
|
||||
exportHandle () {
|
||||
var params = qs.stringify({
|
||||
token: Cookies.get('ucsToken'),
|
||||
...this.dataForm
|
||||
|
|
|
|||
|
|
@ -5,10 +5,9 @@ import { isURL } from '@/utils/validate'
|
|||
import store from '@/store'
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
|
||||
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
|
||||
const originalPush = Router.prototype.push
|
||||
Router.prototype.push = function push(location) {
|
||||
Router.prototype.push = function push (location) {
|
||||
return originalPush.call(this, location).catch(err => err)
|
||||
}
|
||||
|
||||
|
|
@ -42,7 +41,8 @@ export const moduleRoutes = {
|
|||
meta: { title: '主入口布局' },
|
||||
children: [
|
||||
// todos 临时调整，后期去掉
|
||||
{ path: '/home', redirect: '/bscatalogue-bscatalogue', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } },
|
||||
// { path: '/home', redirect: '/bscatalogue-bscatalogue', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } },
|
||||
{ path: '/home', redirect: '/workBench-workBench', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } },
|
||||
{ path: '/iframe', component: null, name: 'iframe', meta: { title: 'iframe', isTab: true } }
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
/*
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-07-05 12:53:03
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-08-23 16:37:05
|
||||
* @Description: 告诉大家这是什么
|
||||
*/
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
|
@ -62,12 +69,12 @@ export default new Vuex.Store({
|
|||
// dispatch('getDepartmentSelects')
|
||||
},
|
||||
getCatalogueTree ({ commit }) {
|
||||
http.get('bscatalogue/bscatalogue/page').then(res => {
|
||||
if (res.data.code === 0) {
|
||||
console.log(22222, res.data)
|
||||
commit('setCatalogueTree', res.data.data)
|
||||
}
|
||||
})
|
||||
// http.get('bscatalogue/bscatalogue/page').then(res => {
|
||||
// if (res.data.code === 0) {
|
||||
// console.log(22222, res.data)
|
||||
// commit('setCatalogueTree', res.data.data)
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getDepartmentSelects ({ commit }) {
|
||||
http.get('applyRecord/bsAbilityApplyRecord/page').then(({ data: res }) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
/*
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-08-23 10:30:11
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-08-25 21:05:18
|
||||
* @Description: 告诉大家这是什么
|
||||
*/
|
||||
const returnLocationStr = () => {
|
||||
return 'qingdao1'
|
||||
}
|
||||
|
||||
export default returnLocationStr
|
||||
|
|
@ -100,25 +100,25 @@
|
|||
</nav>
|
||||
</template>
|
||||
<script>
|
||||
import { messages } from "@/i18n";
|
||||
import screenfull from "screenfull";
|
||||
import UpdatePassword from "./main-navbar-update-password";
|
||||
import { clearLoginInfo } from "@/utils";
|
||||
import { messages } from '@/i18n'
|
||||
import screenfull from 'screenfull'
|
||||
import UpdatePassword from './main-navbar-update-password'
|
||||
import { clearLoginInfo } from '@/utils'
|
||||
// import Cookies from 'js-cookie'
|
||||
// var socket = null
|
||||
export default {
|
||||
inject: ["refresh"],
|
||||
data() {
|
||||
inject: ['refresh'],
|
||||
data () {
|
||||
return {
|
||||
i18nMessages: messages,
|
||||
updatePasswordVisible: false,
|
||||
messageTip: false,
|
||||
};
|
||||
messageTip: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
UpdatePassword,
|
||||
UpdatePassword
|
||||
},
|
||||
created() {
|
||||
created () {
|
||||
// var vue = this
|
||||
// socket = new WebSocket(`${window.SITE_CONFIG['socketURL']}?token=${Cookies.get('token')}`)
|
||||
// socket.onopen = function () {}
|
||||
|
|
@ -144,70 +144,70 @@ export default {
|
|||
// }
|
||||
|
||||
// 未读通知数
|
||||
this.getUnReadCount();
|
||||
this.getUnReadCount()
|
||||
},
|
||||
methods: {
|
||||
myNoticeRouter() {
|
||||
this.$router.replace("notice-notice-user");
|
||||
myNoticeRouter () {
|
||||
this.$router.replace('notice-notice-user')
|
||||
},
|
||||
getUnReadCount() {
|
||||
getUnReadCount () {
|
||||
this.$http
|
||||
.get("/sys/notice/mynotice/unread")
|
||||
.get('/sys/notice/mynotice/unread')
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
if (res.data > 0) {
|
||||
this.messageTip = true;
|
||||
this.messageTip = true
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => {})
|
||||
},
|
||||
// 全屏
|
||||
fullscreenHandle() {
|
||||
fullscreenHandle () {
|
||||
if (!screenfull.enabled) {
|
||||
return this.$message({
|
||||
message: this.$t("fullscreen.prompt"),
|
||||
type: "warning",
|
||||
duration: 500,
|
||||
});
|
||||
message: this.$t('fullscreen.prompt'),
|
||||
type: 'warning',
|
||||
duration: 500
|
||||
})
|
||||
}
|
||||
screenfull.toggle();
|
||||
screenfull.toggle()
|
||||
},
|
||||
// 修改密码
|
||||
updatePasswordHandle() {
|
||||
this.updatePasswordVisible = true;
|
||||
updatePasswordHandle () {
|
||||
this.updatePasswordVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.updatePassword.init();
|
||||
});
|
||||
this.$refs.updatePassword.init()
|
||||
})
|
||||
},
|
||||
// 退出
|
||||
logoutHandle() {
|
||||
logoutHandle () {
|
||||
this.$confirm(
|
||||
this.$t("prompt.info", { handle: this.$t("logout") }),
|
||||
this.$t("prompt.title"),
|
||||
this.$t('prompt.info', { handle: this.$t('logout') }),
|
||||
this.$t('prompt.title'),
|
||||
{
|
||||
confirmButtonText: this.$t("confirm"),
|
||||
cancelButtonText: this.$t("cancel"),
|
||||
type: "warning",
|
||||
confirmButtonText: this.$t('confirm'),
|
||||
cancelButtonText: this.$t('cancel'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
this.$http
|
||||
.post("/logout")
|
||||
.post('/logout')
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
clearLoginInfo();
|
||||
this.$router.push({ name: "login" });
|
||||
clearLoginInfo()
|
||||
this.$router.push({ name: 'login' })
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => {})
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
.catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@font-face {
|
||||
|
|
|
|||
|
|
@ -16,122 +16,122 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import MainNavbar from "./main-navbar";
|
||||
import MainSidebar from "./main-sidebar";
|
||||
import MainContent from "./main-content";
|
||||
import MainThemeTools from "./main-theme-tools";
|
||||
import debounce from "lodash/debounce";
|
||||
import { isURL } from "@/utils/validate";
|
||||
import MainNavbar from './main-navbar'
|
||||
import MainSidebar from './main-sidebar'
|
||||
import MainContent from './main-content'
|
||||
import MainThemeTools from './main-theme-tools'
|
||||
import debounce from 'lodash/debounce'
|
||||
import { isURL } from '@/utils/validate'
|
||||
export default {
|
||||
provide() {
|
||||
provide () {
|
||||
return {
|
||||
// 刷新
|
||||
refresh() {
|
||||
this.$store.state.contentIsNeedRefresh = true;
|
||||
refresh () {
|
||||
this.$store.state.contentIsNeedRefresh = true
|
||||
this.$nextTick(() => {
|
||||
this.$store.state.contentIsNeedRefresh = false;
|
||||
});
|
||||
},
|
||||
};
|
||||
this.$store.state.contentIsNeedRefresh = false
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
};
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MainNavbar,
|
||||
MainSidebar,
|
||||
MainContent,
|
||||
MainThemeTools,
|
||||
MainThemeTools
|
||||
},
|
||||
watch: {
|
||||
$route: "routeHandle",
|
||||
$route: 'routeHandle'
|
||||
},
|
||||
created() {
|
||||
this.windowResizeHandle();
|
||||
this.routeHandle(this.$route);
|
||||
created () {
|
||||
this.windowResizeHandle()
|
||||
this.routeHandle(this.$route)
|
||||
Promise.all([this.getUserInfo(), this.getPermissions()]).then(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 窗口改变大小
|
||||
windowResizeHandle() {
|
||||
windowResizeHandle () {
|
||||
this.$store.state.sidebarFold =
|
||||
document.documentElement["clientWidth"] <= 992 || false;
|
||||
document.documentElement.clientWidth <= 992 || false
|
||||
window.addEventListener(
|
||||
"resize",
|
||||
'resize',
|
||||
debounce(() => {
|
||||
this.$store.state.sidebarFold =
|
||||
document.documentElement["clientWidth"] <= 992 || false;
|
||||
document.documentElement.clientWidth <= 992 || false
|
||||
}, 150)
|
||||
);
|
||||
)
|
||||
},
|
||||
// 路由, 监听
|
||||
routeHandle(route) {
|
||||
routeHandle (route) {
|
||||
if (!route.meta.isTab) {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
let tab = {};
|
||||
let routeName = route.name;
|
||||
let routeMeta = route.meta;
|
||||
if (route.name === "iframe") {
|
||||
let url = route.query.url || "";
|
||||
let tab = {}
|
||||
let routeName = route.name
|
||||
const routeMeta = route.meta
|
||||
if (route.name === 'iframe') {
|
||||
const url = route.query.url || ''
|
||||
if (!isURL(url)) {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
let key = route.query.key || new Date().getTime();
|
||||
routeName = `${routeName}_${key}`;
|
||||
routeMeta.title = key.toString();
|
||||
routeMeta.menuId = route.query.menuId || "";
|
||||
routeMeta.iframeURL = url;
|
||||
const key = route.query.key || new Date().getTime()
|
||||
routeName = `${routeName}_${key}`
|
||||
routeMeta.title = key.toString()
|
||||
routeMeta.menuId = route.query.menuId || ''
|
||||
routeMeta.iframeURL = url
|
||||
}
|
||||
tab = this.$store.state.contentTabs.filter(
|
||||
(item) => item.name === routeName
|
||||
)[0];
|
||||
)[0]
|
||||
if (!tab) {
|
||||
tab = {
|
||||
...window.SITE_CONFIG["contentTabDefault"],
|
||||
...window.SITE_CONFIG.contentTabDefault,
|
||||
...routeMeta,
|
||||
name: routeName,
|
||||
params: { ...route.params },
|
||||
query: { ...route.query },
|
||||
};
|
||||
query: { ...route.query }
|
||||
}
|
||||
this.$store.state.contentTabs =
|
||||
this.$store.state.contentTabs.concat(tab);
|
||||
this.$store.state.contentTabs.concat(tab)
|
||||
}
|
||||
this.$store.state.sidebarMenuActiveName = tab.menuId;
|
||||
this.$store.state.contentTabsActiveName = tab.name;
|
||||
this.$store.state.sidebarMenuActiveName = tab.menuId
|
||||
this.$store.state.contentTabsActiveName = tab.name
|
||||
},
|
||||
// 获取当前管理员信息
|
||||
getUserInfo() {
|
||||
getUserInfo () {
|
||||
return this.$http
|
||||
.get("/sys/user/info")
|
||||
.get('/sys/user/info')
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.$store.state.user.id = res.data.id;
|
||||
this.$store.state.user.name = res.data.username;
|
||||
this.$store.state.user.superAdmin = res.data.superAdmin;
|
||||
this.$store.state.user.id = res.data.id
|
||||
this.$store.state.user.name = res.data.realName
|
||||
this.$store.state.user.superAdmin = res.data.superAdmin
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => {})
|
||||
},
|
||||
// 获取权限
|
||||
getPermissions() {
|
||||
getPermissions () {
|
||||
return this.$http
|
||||
.get("/sys/menu/permissions")
|
||||
.get('/sys/menu/permissions')
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
window.SITE_CONFIG["permissions"] = res.data;
|
||||
window.SITE_CONFIG.permissions = res.data
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
.catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.aui-content__wrapper {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,463 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
|
||||
:close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<div class="first-title">
|
||||
填写字段
|
||||
</div>
|
||||
<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 :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
|
||||
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
|
||||
<!-- 基本信息 -->
|
||||
<div style="margin-bottom:20px" v-show="checkList.includes('基本信息')">
|
||||
<div style="
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
">
|
||||
基本信息
|
||||
</div>
|
||||
<el-form-item label="融合服务名称" prop="name">
|
||||
<el-input class="input-box" v-model="dataForm.name" placeholder="请输入融合服务名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="融合服务描述" prop="description">
|
||||
<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-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="图片">
|
||||
<el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
|
||||
:on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1" :file-list="[]"
|
||||
:on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
|
||||
<el-button size="small" type="primary" class="button-new">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传图片文件</div>
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 组合能力 -->
|
||||
<div class="" style="marigin-bottom:40px" v-show="checkList.includes('组合能力')">
|
||||
<div class="title">
|
||||
组合能力
|
||||
</div>
|
||||
<InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
|
||||
:modalType="modalType" ref="jcssDom"></InfrastructureModal>
|
||||
<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>
|
||||
|
||||
<template slot="footer">
|
||||
<el-button @click="closeModal">{{ $t("cancel") }}</el-button>
|
||||
<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 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";
|
||||
import InfrastructureModal from './assignedScene/components/infrastructure-modal.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CommonQuestion,
|
||||
IntegratedCombineAbility,
|
||||
CombineAbility,
|
||||
InfrastructureModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
|
||||
dataForm: {
|
||||
"name": "",
|
||||
"applicationArea": "",
|
||||
"description": "",
|
||||
"fuseAttrList": [
|
||||
{
|
||||
"attrType": "服务图片",
|
||||
"attrValue": "",
|
||||
},
|
||||
],
|
||||
// 选择的能力
|
||||
"fuseResourceList": [
|
||||
{
|
||||
"resourceId": 0,
|
||||
"sequence": ""
|
||||
}
|
||||
],
|
||||
type: '打包模式'
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入融合服务名称",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
description: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入融合服务描述",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
},
|
||||
btnList: ['基本信息', '组合能力'],
|
||||
checkList: ['基本信息', '组合能力'],
|
||||
areaList: [],
|
||||
addOrUpdateVisibleCopy: this.addOrUpdateVisible,
|
||||
displayInfo: tableColumns,
|
||||
getListParams: getListParams,
|
||||
refsParseArray: {
|
||||
'zjfwDom': '组件服务',
|
||||
'sjzyDom': '数据资源',
|
||||
'jcssDom': '基础设施',
|
||||
},
|
||||
modalTypeText: modalTypeText,
|
||||
abilityListObj: {},
|
||||
// 限定图片
|
||||
handleExceed() {
|
||||
this.$message({ type: 'error', message: '最多支持一张图片上传' })
|
||||
},
|
||||
imageUrl: ''
|
||||
};
|
||||
},
|
||||
props: {
|
||||
modalType: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
},
|
||||
addOrUpdateVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataForm: {
|
||||
handler(newVal) {
|
||||
this.dataForm = newVal
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
addOrUpdateVisible: {
|
||||
handler(newVal) {
|
||||
this.addOrUpdateVisibleCopy = newVal;
|
||||
if (this.modalType == 'add' && newVal) {
|
||||
this.getDetail(this.dataForm)
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 获取应用领域
|
||||
this.getAreaInfo()
|
||||
},
|
||||
methods: {
|
||||
clearForm() {
|
||||
this.$refs.dataForm && this.$refs.dataForm.resetFields();
|
||||
},
|
||||
closeModal() {
|
||||
this.$emit('closeModal')
|
||||
},
|
||||
// 获取应用领域
|
||||
getAreaInfo() {
|
||||
const params = {
|
||||
page: 1,
|
||||
limit: 99,
|
||||
dictTypeId: "1513712507692818433",
|
||||
};
|
||||
this.$http
|
||||
.get("/sys/dict/data/page" + "?" + qs.stringify(params))
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
res.data.list.map((item) => {
|
||||
this.areaList.push({
|
||||
label: item.dictLabel,
|
||||
value: item.dictLabel
|
||||
});
|
||||
});
|
||||
}).catch(err => {
|
||||
this.$message.error(err);
|
||||
})
|
||||
},
|
||||
// 更新表单
|
||||
updateDataForm(data) {
|
||||
if (Object.keys(this.getListParams).includes(data.title)) {
|
||||
this.abilityListObj[data.title] = data.list;
|
||||
}
|
||||
},
|
||||
getFuseResourceList() {
|
||||
return getFuseResourceList(this.abilityListObj)
|
||||
},
|
||||
// 改变按钮状态
|
||||
changeBtn(data) {
|
||||
this.checkList = data;
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmitHandle: debounce(
|
||||
function () {
|
||||
this.$refs.dataForm.validate((valid) => {
|
||||
if (!valid) {
|
||||
this.$message.error("请检查表单是否填写完整");
|
||||
return false;
|
||||
}
|
||||
let methodsObj = {
|
||||
'add': 'post',
|
||||
'update': 'put'
|
||||
}
|
||||
this.dataForm.fuseResourceList = this.getFuseResourceList()
|
||||
if (this.imageUrl == '') {
|
||||
this.$message.error("请上传图片！");
|
||||
return;
|
||||
}
|
||||
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || '';
|
||||
this.$http
|
||||
[methodsObj[this.modalType]]("/fuse", this.dataForm)
|
||||
.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: () => {
|
||||
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) {
|
||||
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;
|
||||
|
||||
// 组合能力
|
||||
Object.keys(this.getListParams).map(k => {
|
||||
let arr = data.fuseResourceList.filter(v => v.type == k);
|
||||
let arr2 = [];
|
||||
arr.map(v => {
|
||||
arr2.push(v.resourceId)
|
||||
})
|
||||
this.abilityListObj[k] = arr2
|
||||
})
|
||||
|
||||
console.log('this.dataForm----详情-------->', this.dataForm);
|
||||
})
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
const isImage =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png'
|
||||
|
||||
if (!isImage) {
|
||||
this.$message.error('上传头像图片只能是 jpg/png 格式!')
|
||||
}
|
||||
return isImage
|
||||
},
|
||||
addUploadRemoveFile(file, fileList) {
|
||||
this.$refs.addUpload.clearFiles()
|
||||
this.imageUrl = ''
|
||||
},
|
||||
editBeforeAvatarUpload(file) {
|
||||
const isImage =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png'
|
||||
if (!isImage) {
|
||||
this.$message.error('上传头像图片只能是 jpg/png 格式!')
|
||||
}
|
||||
return isImage
|
||||
},
|
||||
editUploadRemoveFile(file, fileList) {
|
||||
this.$refs.editUpload.clearFiles()
|
||||
this.imageUrl = ''
|
||||
},
|
||||
eidtHandleAvatarSuccess(res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.imageUrl = res.data
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearForm()
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog__body {
|
||||
height: 580px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon-input ::v-deep .el-input__inner {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.detial-form ::v-deep {
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.mod-sys__menu {
|
||||
|
||||
.menu-list,
|
||||
.icon-list {
|
||||
|
||||
.el-input__inner,
|
||||
.el-input__suffix {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon-popover {
|
||||
width: 458px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-icon-inner {
|
||||
width: 478px;
|
||||
max-height: 258px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&-icon-list {
|
||||
width: 458px;
|
||||
padding: 0;
|
||||
margin: -8px 0 0 -8px;
|
||||
|
||||
>.el-button {
|
||||
padding: 8px;
|
||||
margin: 8px 0 0 8px;
|
||||
|
||||
>span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.previewImg {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 32px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 132px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
|
||||
.first-title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
<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 @click="searchData">{{
|
||||
$t("query")
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button v-if="$hasPermission('ability:bsabilityai:save')" type="primary" @click="addServe()">挂接</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 @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="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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="Number(total)"
|
||||
layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle">
|
||||
</el-pagination>
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="query" @closeModal="closeModal"
|
||||
:addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
|
||||
</add-or-update>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from "@/mixins/view-module";
|
||||
import AddOrUpdate from "./IntegratedServices-add";
|
||||
import qs from "qs";
|
||||
import { type } from "os";
|
||||
|
||||
export const tableColumns = {
|
||||
'name': '名称',
|
||||
'description': '描述',
|
||||
'applicationArea': '应用领域',
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [mixinViewModule],
|
||||
data() {
|
||||
return {
|
||||
// 表格--列
|
||||
tableColumns: tableColumns,
|
||||
tableData: [],
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: "/fuse/page",
|
||||
exportURL: "/ability/bsabilityai/export",
|
||||
deleteURL: "/fuse",
|
||||
getDataListIsPage: true,
|
||||
deleteIsBatch: false,
|
||||
},
|
||||
dataForm: {
|
||||
name: "",
|
||||
order: 'desc',
|
||||
orderField: 'create_date',
|
||||
type: '打包模式'
|
||||
},
|
||||
qp: false,
|
||||
modalType: 'add',
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("resize", this.a);
|
||||
this.fullScreen();
|
||||
},
|
||||
methods: {
|
||||
deleteRow(id) {
|
||||
this.$http.delete('/fuse/delete', {
|
||||
data: [id]
|
||||
}).then(res => {
|
||||
console.log('删除成功', res)
|
||||
if (res.data.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: "success",
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.query()
|
||||
},
|
||||
});
|
||||
}).catch(err => {
|
||||
this.$message.error(err);
|
||||
})
|
||||
},
|
||||
// 查询
|
||||
searchData() {
|
||||
this.query()
|
||||
},
|
||||
// 重置
|
||||
reset() {
|
||||
this.dataForm.name = "";
|
||||
this.query()
|
||||
},
|
||||
// 修改
|
||||
handleUpdate(val) {
|
||||
this.addOrUpdateVisible = true;
|
||||
this.modalType = 'update';
|
||||
const cloneVal = JSON.parse(JSON.stringify(val))
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.getDetail(cloneVal)
|
||||
})
|
||||
},
|
||||
// 挂接
|
||||
addServe() {
|
||||
this.addOrUpdateVisible = true
|
||||
this.modalType = 'add';
|
||||
},
|
||||
closeModal() {
|
||||
this.addOrUpdateVisible = false;
|
||||
},
|
||||
// 详情
|
||||
showDetail(val) {
|
||||
window.open(window.SITE_CONFIG.previewUrl + '#/packagingDetails?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) {
|
||||
console.log(
|
||||
"全屏1",
|
||||
);
|
||||
this.qp = false;
|
||||
} else {
|
||||
console.log(
|
||||
"不是全屏2",
|
||||
);
|
||||
this.qp = true;
|
||||
}
|
||||
} else {
|
||||
console.log(
|
||||
"不是全屏3",
|
||||
);
|
||||
this.qp = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-tooltip__popper {
|
||||
max-width: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,567 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
|
||||
:close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<div class="first-title">
|
||||
填写字段
|
||||
</div>
|
||||
<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 :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="
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
">
|
||||
基本信息
|
||||
</div>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<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%">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="图片">
|
||||
<el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
|
||||
:on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1" :file-list="[]"
|
||||
:on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
|
||||
<el-button size="small" type="primary" class="button-new">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传图片文件</div>
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 场景痛点 -->
|
||||
<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>
|
||||
<InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
|
||||
:modalType="modalType" ref="jcssDom"></InfrastructureModal>
|
||||
<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="moreAbilityDom" title="更多能力"
|
||||
:keyTextObj="moreKeyTextObj">
|
||||
</common-question>
|
||||
</div>
|
||||
|
||||
<!-- 使用步骤 -->
|
||||
<div style="marigin-bottom:20px" v-show="checkList.includes('使用步骤')">
|
||||
<scene-use-step :dataForm="dataForm" @update="updateDataForm" ref="sceneUseUpDom">
|
||||
</scene-use-step>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<el-button @click="closeModal">{{ $t("cancel") }}</el-button>
|
||||
<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 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'
|
||||
|
||||
const btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤']
|
||||
// 数据资源\组件服务
|
||||
export const getJson = (type) => {
|
||||
if (type === '组件服务') {
|
||||
return {
|
||||
methods: 'get',
|
||||
url: '/census/center/selectResourceListByType',
|
||||
postData: {
|
||||
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('组件服务'),
|
||||
基础设施: ''
|
||||
}
|
||||
// 模态框标题
|
||||
export const modalTypeText = {
|
||||
add: '挂接',
|
||||
update: '修改'
|
||||
}
|
||||
|
||||
export const getFuseResourceList = (abilityListObj) => {
|
||||
const arr = []
|
||||
let length = 0
|
||||
for (const key in abilityListObj) {
|
||||
if (Object.hasOwnProperty.call(abilityListObj, key)) {
|
||||
const itemArray = abilityListObj[key]
|
||||
itemArray.map((v, i) => {
|
||||
const index = (i + 1) + length
|
||||
arr.push({
|
||||
resourceId: v,
|
||||
type: key,
|
||||
sequence: index
|
||||
})
|
||||
})
|
||||
length = itemArray.length
|
||||
}
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SceneUseStep,
|
||||
CombineAbility,
|
||||
SceneOneInput,
|
||||
upload,
|
||||
CommonQuestion,
|
||||
InfrastructureModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
|
||||
moreKeyTextObj: {
|
||||
nameObj: {
|
||||
text: '能力名称',
|
||||
key: 'name'
|
||||
},
|
||||
...getDescJson('能力')
|
||||
},
|
||||
painKeyTextObj: getDescJson('痛点'),
|
||||
solutionKeyTextObj: getDescJson('方案'),
|
||||
dataForm: {
|
||||
name: '',
|
||||
applicationArea: '',
|
||||
description: '',
|
||||
fuseAttrList: [
|
||||
{
|
||||
attrType: '使用步骤',
|
||||
attrValue: [{ question: '', answer: '' }]
|
||||
},
|
||||
{
|
||||
attrType: '更多能力',
|
||||
attrValue: [{ name: '', description: '' }]
|
||||
},
|
||||
{
|
||||
attrType: '场景痛点',
|
||||
attrValue: [{ description: '' }]
|
||||
},
|
||||
{
|
||||
attrType: '解决方案',
|
||||
attrValue: [{ description: '' }]
|
||||
},
|
||||
{
|
||||
attrType: '服务图片',
|
||||
attrValue: ''
|
||||
}
|
||||
],
|
||||
fuseResourceList: []
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
description: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入描述',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
checkList: JSON.parse(JSON.stringify(btnArray)),
|
||||
btnList: JSON.parse(JSON.stringify(btnArray)),
|
||||
addOrUpdateVisibleCopy: this.addOrUpdateVisible,
|
||||
displayInfo: {
|
||||
name: '名称',
|
||||
description: '描述'
|
||||
},
|
||||
modalTypeText: modalTypeText,
|
||||
refsParseArray: {
|
||||
sceneUseUpDom: '使用步骤',
|
||||
moreAbilityDom: '更多能力',
|
||||
scenePainDom: '场景痛点',
|
||||
solutionDom: '解决方案',
|
||||
zjfwDom: '组件服务',
|
||||
sjzyDom: '数据资源',
|
||||
jcssDom: '基础设施'
|
||||
},
|
||||
getListParams: getListParams,
|
||||
abilityListObj: {},
|
||||
imgData: [],
|
||||
// 限定图片
|
||||
handleExceed () {
|
||||
this.$message({ type: 'error', message: '最多支持一张图片上传' })
|
||||
},
|
||||
imageUrl: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modalType: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
},
|
||||
addOrUpdateVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataForm: {
|
||||
handler (newVal) {
|
||||
this.dataForm = newVal
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
addOrUpdateVisible: {
|
||||
handler (newVal) {
|
||||
this.addOrUpdateVisibleCopy = newVal
|
||||
if (this.modalType == 'add' && newVal) {
|
||||
localStorage.setItem('InfrastructureSearchData', JSON.stringify({}))
|
||||
this.getDetail(this.dataForm)
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearForm () {
|
||||
this.$refs.dataForm && this.$refs.dataForm.resetFields()
|
||||
},
|
||||
closeModal () {
|
||||
this.$emit('closeModal')
|
||||
},
|
||||
// 更新表单
|
||||
updateDataForm (data) {
|
||||
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({
|
||||
attrType: title,
|
||||
attrValue: JSON.stringify(data.list)
|
||||
})
|
||||
} else {
|
||||
this.dataForm.fuseAttrList.map(v => {
|
||||
if (v.attrType === title) {
|
||||
v.attrValue = JSON.stringify(data.list)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 改变按钮状态
|
||||
changeBtn (data) {
|
||||
this.checkList = data
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmitHandle: debounce(
|
||||
function () {
|
||||
this.$refs.dataForm.validate((valid) => {
|
||||
if (!valid) {
|
||||
this.$message.error('请检查表单是否填写完整')
|
||||
return false
|
||||
}
|
||||
const methodsObj = {
|
||||
add: 'post',
|
||||
update: 'put'
|
||||
}
|
||||
this.dataForm.fuseResourceList = this.getFuseResourceList()
|
||||
if (this.imageUrl == '') {
|
||||
this.$message.error('请上传图片！')
|
||||
return
|
||||
}
|
||||
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
|
||||
const _obj = Object.assign({}, this.dataForm, {
|
||||
type: '赋能场景'
|
||||
})
|
||||
console.log('this.dataForm------表单提交------>', this.dataForm)
|
||||
this.$http
|
||||
[methodsObj[this.modalType]]('/fuse', _obj)
|
||||
.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: () => {
|
||||
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
|
||||
this.$nextTick(() => {
|
||||
for (const key in this.refsParseArray) {
|
||||
this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
|
||||
}
|
||||
const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}
|
||||
this.imageUrl = _imgObj.attrValue
|
||||
|
||||
// 组合能力--特殊处理
|
||||
Object.keys(this.getListParams).map(k => {
|
||||
const arr = data.fuseResourceList.filter(v => v.type == k)
|
||||
const arr2 = []
|
||||
arr.map(v => {
|
||||
arr2.push(v.resourceId)
|
||||
})
|
||||
this.abilityListObj[k] = arr2
|
||||
})
|
||||
})
|
||||
},
|
||||
handleAvatarSuccess (res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.imageUrl = res.data
|
||||
},
|
||||
beforeAvatarUpload (file) {
|
||||
const isImage =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png'
|
||||
if (!isImage) {
|
||||
this.$message.error('上传头像图片只能是 jpg/png 格式!')
|
||||
}
|
||||
return isImage
|
||||
},
|
||||
addUploadRemoveFile (file, fileList) {
|
||||
this.$refs.addUpload.clearFiles()
|
||||
this.imageUrl = ''
|
||||
},
|
||||
editBeforeAvatarUpload (file) {
|
||||
const isImage =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png'
|
||||
|
||||
if (!isImage) {
|
||||
this.$message.error('上传头像图片只能是 jpg/png 格式!')
|
||||
}
|
||||
return isImage
|
||||
},
|
||||
editUploadRemoveFile (file, fileList) {
|
||||
this.$refs.editUpload.clearFiles()
|
||||
this.imageUrl = ''
|
||||
},
|
||||
eidtHandleAvatarSuccess (res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.imageUrl = res.data
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearForm()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog__body {
|
||||
height: 580px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon-input ::v-deep .el-input__inner {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.detial-form ::v-deep {
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mod-sys__menu {
|
||||
.menu-list,
|
||||
.icon-list {
|
||||
.el-input__inner,
|
||||
.el-input__suffix {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon-popover {
|
||||
width: 458px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-icon-inner {
|
||||
width: 478px;
|
||||
max-height: 258px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&-icon-list {
|
||||
width: 458px;
|
||||
padding: 0;
|
||||
margin: -8px 0 0 -8px;
|
||||
|
||||
> .el-button {
|
||||
padding: 8px;
|
||||
margin: 8px 0 0 8px;
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.previewImg {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 32px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 132px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.first-title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<div class="show-box" v-if="displayList.length > 0">
|
||||
<div class="list-box">
|
||||
<div v-for="(item, i) in displayList" :key="i">
|
||||
<div class="list-item">
|
||||
{{ item[showKey] || '--' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
displayList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
showKey: {
|
||||
type: String,
|
||||
default: 'name'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
displayList: {
|
||||
handler(newVal) {
|
||||
this.displayList = newVal;
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.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>
|
||||
|
|
@ -0,0 +1,535 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="top flex-row-start">
|
||||
<div class="type">{{ type }}</div>
|
||||
<el-button type="primary" size="small" @click="showModal = true">{{ modalType == 'add' ? '添加' : '编辑' }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-dialog class="modal-box" :visible.sync="showModal" title="请选择" @close="close" :close-on-click-modal="false"
|
||||
:close-on-press-escape="false" :key="showKey" append-to-body>
|
||||
<div class="infrastructure-box">
|
||||
<div class="search-box">
|
||||
<div class="flex-row-start" style="margin-bottom:10px">
|
||||
<div class="left-text">设施类型</div>
|
||||
<div class="flex-row-start btn-list">
|
||||
<div class="btn-text" v-for="(item) in btnList" :key="item"
|
||||
:class="{ 'active-btn': item === activeBtn }" @click="changeBtn(item)">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-row-start" style="margin-bottom:10px;align-items: flex-start;">
|
||||
<div class="left-text" style="margin-top: 8px;">{{ showText[activeBtn] }}</div>
|
||||
<div style="flex:1;">
|
||||
<el-button v-if="activeBtn == '视频资源'" type="primary"
|
||||
style="margin-left:10px;margin-bottom:10px" size="small" @click="clearVideo">清空
|
||||
</el-button>
|
||||
<div class="flex-row-start btn-list video-btn-list">
|
||||
<div class="btn-text" v-for="(item) in currentList" :key="item.labelCode"
|
||||
:class="{ 'active-btn': checkList.includes(item.labelCode) }"
|
||||
@click="changeVideoBtn(item)">
|
||||
{{ item.labelName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-row-start" style="margin-bottom:10px;align-items: flex-start;">
|
||||
<div class="left-text" style="margin-top: 10px;">关键词</div>
|
||||
<el-input style="margin-left:10px;width: 200px;" v-model="searchData.cameraName"
|
||||
placeholder="名称" clearable>
|
||||
</el-input>
|
||||
<el-button type="primary" style="margin-left:10px;margin-top:4px" size="small" @click="getData">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="primary" style="margin-left:10px;margin-top:4px" size="small" @click="clear">
|
||||
重置
|
||||
</el-button>
|
||||
<el-button type="primary" style="margin-left:10px;margin-top:4px" size="small"
|
||||
@click="clearSelectArray">
|
||||
清空已选择
|
||||
</el-button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tree-table-box">
|
||||
<InfrastructureTree @changeParentId="changeParentId"></InfrastructureTree>
|
||||
<div class="table-box">
|
||||
<el-table v-loading="dataListLoading" :data="dataList" border ref="dataTable"
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
style="width: 95%;margin: 0 auto 10px auto" size="mini">
|
||||
<el-table-column type="selection" header-align="center" align="center" width="50">
|
||||
</el-table-column>
|
||||
<el-table-column prop="channelName" label="名称" header-align="center" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="nodeName" label="归属" header-align="center" align="center">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination style="justify-content: center;display: flex;" :current-page="searchData.pageNum"
|
||||
:page-sizes="[10, 20, 50, 100]" :page-size="searchData.pageSize" :total="pageData.total"
|
||||
layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<DisplayList :displayList="displayList" showKey="channelName"></DisplayList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InfrastructureTree from './infrastructure-tree.vue'
|
||||
import DisplayList from './display-list.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
InfrastructureTree,
|
||||
DisplayList
|
||||
},
|
||||
props: {
|
||||
// 最多选择的数据个数
|
||||
maxNum: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: "基础设施"
|
||||
},
|
||||
modalType: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const getYunList = () => {
|
||||
let yunList = ['云主机', '算力主机', '对象存储', '堡垒机', '防火墙', '网闸', '负载均衡', '公网IP'];
|
||||
let arr = []
|
||||
yunList.map(v => arr.push({ labelCode: v, labelName: v }))
|
||||
return arr
|
||||
}
|
||||
return {
|
||||
showKey: 0,
|
||||
showModal: false,
|
||||
selectedArray: [], // 已选择的数据id
|
||||
selectedArrayCopy: [],
|
||||
displayList: [], // 用于展示的list
|
||||
btnList: ['视频资源', '云资源', '感知资源'],
|
||||
showText: {
|
||||
'视频资源': '视频标签',
|
||||
'云资源': '云资源分类',
|
||||
'感知资源': '感知资源分类',
|
||||
},
|
||||
tabData: [
|
||||
{
|
||||
tabName: '视频资源',
|
||||
list: []
|
||||
},
|
||||
{
|
||||
tabName: '云资源',
|
||||
list: getYunList()
|
||||
},
|
||||
{
|
||||
tabName: '感知资源',
|
||||
list: []
|
||||
},
|
||||
],
|
||||
currentList: [],
|
||||
dataListLoading: false,
|
||||
dataList: [],
|
||||
pageData: {
|
||||
total: 0,
|
||||
},
|
||||
cameraName: '',
|
||||
postData: {},
|
||||
activeBtn: '视频资源',
|
||||
checkList: [],
|
||||
searchData: {
|
||||
cameraName: '',
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
parentId: ''
|
||||
},
|
||||
dataFormCopy: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
async showModal(newVal) {
|
||||
if (newVal) {
|
||||
// 默认选中复选框
|
||||
this.$nextTick(() => {
|
||||
this.selectCheckbox()
|
||||
})
|
||||
if (this.modalType == 'add') {
|
||||
this.clear()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 获取视频资源
|
||||
this.getVideoBtn()
|
||||
},
|
||||
methods: {
|
||||
selectCheckbox() {
|
||||
if (this.selectedArray.length > 0) {
|
||||
let list = []
|
||||
this.dataList.forEach((item) => {
|
||||
this.selectedArray.forEach(val => {
|
||||
if (val === item.idtCameraChannel) {
|
||||
list.push(item)
|
||||
}
|
||||
})
|
||||
})
|
||||
if (list.length) {
|
||||
list.forEach((row) => {
|
||||
this.$refs.dataTable && this.$refs.dataTable.toggleRowSelection(row, true)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
showAction() {
|
||||
this.showModal = true;
|
||||
},
|
||||
// 详情
|
||||
async getDataInfo(dataForm) {
|
||||
this.modalType == 'edit'
|
||||
this.dataFormCopy = dataForm;
|
||||
await this.getVideoBtn();
|
||||
let arr = [];
|
||||
let attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type);
|
||||
if (attrValue.length > 0) {
|
||||
attrValue.map(val => {
|
||||
let _obj = Object.assign({}, val, val.resource)
|
||||
arr.push(_obj);
|
||||
});
|
||||
}
|
||||
// 展示
|
||||
this.displayList = JSON.parse(JSON.stringify(arr));
|
||||
// 已选中
|
||||
this.selectedArray = arr.map(v => v.idtCameraChannel);
|
||||
this.selectedArrayCopy = JSON.parse(JSON.stringify(arr));
|
||||
|
||||
this.dataList = JSON.parse(JSON.stringify(arr));
|
||||
this.pageData.total = arr.length;
|
||||
// 默认选中复选框
|
||||
this.$nextTick(() => {
|
||||
this.selectCheckbox()
|
||||
})
|
||||
},
|
||||
// 点击复选框
|
||||
dataListSelectionChangeHandle(data) {
|
||||
this.selectedArray = data;
|
||||
},
|
||||
pageCurrentChangeHandle(pageNum) {
|
||||
this.searchData.pageNum = pageNum;
|
||||
this.getData()
|
||||
},
|
||||
pageSizeChangeHandle(pageSize) {
|
||||
this.searchData.pageSize = pageSize;
|
||||
this.getData()
|
||||
},
|
||||
changeBtn(btn) {
|
||||
this.activeBtn = btn;
|
||||
this.currentList = this.tabData.find(v => v.tabName == btn).list || [];
|
||||
this.checkList = [];
|
||||
this.searchData.cameraName = '';
|
||||
this.getData()
|
||||
},
|
||||
// 获取视频标签列表
|
||||
getVideoBtn() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$http.get('/api/project/selectAllLabel', {}).then(res => {
|
||||
resolve(res)
|
||||
if (res.data.code !== 1) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.tabData[0].list = res.data.data || [];
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.currentList = this.tabData.find(v => v.tabName == this.activeBtn).list || [];
|
||||
if (this.modalType == 'add') {
|
||||
this.clear()
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
this.$message.error(err);
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
// 视频-清空标签
|
||||
clearVideo() {
|
||||
this.checkList = []
|
||||
this.getData()
|
||||
},
|
||||
// 切换视频
|
||||
changeVideoBtn(item) {
|
||||
let _index = this.checkList.findIndex(v => item.labelCode == v)
|
||||
if (_index > -1) {
|
||||
this.checkList.splice(_index, 1)
|
||||
} else {
|
||||
this.checkList.push(item.labelCode)
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
// 获取列表
|
||||
getData() {
|
||||
let postData = Object.assign({}, {
|
||||
checkStatus: 1,
|
||||
gpsX: '',
|
||||
gpsY: '',
|
||||
radius: '',
|
||||
labelCodes: this.checkList.join(),
|
||||
}, this.searchData);
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$http.get('/api/project/selectByParentIdNew', { params: postData }).then(res => {
|
||||
resolve(res)
|
||||
if (res.data.code !== 1) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.dataList = res.data.data || []
|
||||
this.pageData.total = res.data.count || 0;
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
this.$message.error(err);
|
||||
})
|
||||
})
|
||||
},
|
||||
changeParentId(parentId) {
|
||||
this.searchData.parentId = parentId;
|
||||
this.getData(parentId)
|
||||
},
|
||||
clearSelectArray() {
|
||||
this.selectedArrayCopy = []
|
||||
this.selectedArray = []
|
||||
this.getData()
|
||||
},
|
||||
confirmSubmitHandle() {
|
||||
// 新选择的
|
||||
let idtCameraChannelArray = this.selectedArray.map(v => v.idtCameraChannel)
|
||||
// 选过的
|
||||
let newIdArray = this.selectedArrayCopy.map(v => v.idtCameraChannel)
|
||||
let idArray = [...new Set(newIdArray.concat(idtCameraChannelArray))]
|
||||
if (idArray.length > this.maxNum) {
|
||||
return this.$message.error('最多选择十条数据！');
|
||||
}
|
||||
|
||||
let listArray = [].concat(this.selectedArrayCopy, this.dataList);
|
||||
this.displayList = [];
|
||||
idArray.map(v => {
|
||||
let obj = listArray.find(k => k.idtCameraChannel === v)
|
||||
if (obj) {
|
||||
this.displayList.push({
|
||||
channelName: obj.channelName
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
this.$emit('update', {
|
||||
title: this.type,
|
||||
list: idArray,
|
||||
})
|
||||
this.showModal = false;
|
||||
},
|
||||
close() {
|
||||
this.showModal = false;
|
||||
this.searchData.cameraName = ''
|
||||
// this.selectedArray = [];
|
||||
this.$emit('closeModal');
|
||||
},
|
||||
clear() {
|
||||
this.changeBtn('视频资源')
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-row-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
.btn-list {
|
||||
margin-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.left-text {
|
||||
width: 90px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
// width: 80px;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
border: 1px solid #ccc;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
color: #0058e1;
|
||||
}
|
||||
}
|
||||
|
||||
.active-btn {
|
||||
background: #0058e1;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border: 1px solid #0058e1;
|
||||
|
||||
&:hover {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.video-btn-list {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.top {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.type {
|
||||
padding-right: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
width: 100px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: right;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-table-box {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.table-box {
|
||||
width: calc(100% - 400px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="wrapper-title-left-tree" :key="showKey">
|
||||
<div v-for="item in treeData" :key="item.id" class="primaryNode">
|
||||
<div class="top" @click="showBottom(item)" :class="item.show ? 'topSelect' : ''">
|
||||
{{ item.name }}
|
||||
({{ item.channelCount }})
|
||||
<i class="el-icon-arrow-down" v-show="!item.show"></i>
|
||||
<i class="el-icon-arrow-top" v-show="item.show"></i>
|
||||
</div>
|
||||
<div class="bottom" v-show="item.show">
|
||||
<div v-for="val in item.children" :key="val.id" class="item">
|
||||
<div class="up" :class="selectId == val.id ? 'select' : ''"
|
||||
@click="showDown(item, val), onSelect(item, val)">
|
||||
<div>
|
||||
<svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="2156" width="25px" height="25px"
|
||||
v-show="selectId == val.id">
|
||||
<path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157"
|
||||
fill="#0058e1"></path>
|
||||
</svg>
|
||||
<span class="name">{{ val.name }}({{ val.channelCount }})</span>
|
||||
</div>
|
||||
<span v-if="item.children.length < 0">{{ val.total }}</span>
|
||||
<span v-else>
|
||||
<i class="el-icon-arrow-down" v-show="!val.show"></i>
|
||||
<i class="el-icon-arrow-top" v-show="val.show"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="down" v-show="val.show">
|
||||
<div v-for="child in val.children" :key="child.id" class="child"
|
||||
:class="selectId == child.id ? 'select2' : ''" @click="onSelect(item, child, child)">
|
||||
<div>
|
||||
<svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="2156" width="25px" height="25px"
|
||||
v-show="selectId == child.id">
|
||||
<path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157"
|
||||
fill="#0058e1"></path>
|
||||
</svg>
|
||||
<span class="name">
|
||||
{{ child.name }}
|
||||
</span>
|
||||
</div>
|
||||
<span>{{ child.channelCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedKeys: [],
|
||||
checkedKeys: [],
|
||||
showKey: 0,
|
||||
treeData: [],
|
||||
selectId: '',
|
||||
value: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checkedKeys(val) {
|
||||
if (val.checked.length > 1) {
|
||||
val.checked.halfChecked = val.checked.shift()
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
getCameraAllOrgan(params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$http.get('/api/project/selectSubOrganNew', { params }).then(res => {
|
||||
resolve(res)
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
init() {
|
||||
this.treeData = []
|
||||
this.getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
|
||||
(res) => {
|
||||
if (res.data.code !== 1) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.treeData = res.data.data
|
||||
}).catch(err => {
|
||||
this.$message.error(err);
|
||||
})
|
||||
},
|
||||
onSelect(item, val, child) {
|
||||
this.$emit('changeParentId', val.id)
|
||||
this.getCameraAllOrgan({ parentId: val.id }).then((res) => {
|
||||
if (res.data.code !== 1) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.treeData.map((treeDataItem, index) => {
|
||||
if (item.id == treeDataItem.id) {
|
||||
this.treeData[index].children.map((childItem, childIndex) => {
|
||||
if (childItem.id == val.id) {
|
||||
this.treeData[index].children[childIndex].children =
|
||||
res.data.data;
|
||||
this.$nextTick(() => {
|
||||
this.treeData = this.treeData.splice(0)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
this.$message.error(err);
|
||||
})
|
||||
if (child) {
|
||||
this.selectId = child.id
|
||||
}
|
||||
},
|
||||
showBottom(item) {
|
||||
item.show = !item.show;
|
||||
this.getCameraAllOrgan({ parentId: item.id }).then((res) => {
|
||||
if (res.data.code !== 1) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.treeData.map((treeDataItem, index) => {
|
||||
if (item.id == treeDataItem.id) {
|
||||
this.treeData[index].children = res.data.data || []
|
||||
this.$nextTick(() => {
|
||||
this.treeData = this.treeData.splice(0)
|
||||
console.log('this.treeData.[index]', this.treeData[index])
|
||||
})
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
this.$message.error(err);
|
||||
})
|
||||
},
|
||||
showDown(item, val) {
|
||||
console.log('showDown', val)
|
||||
if (item.children) {
|
||||
val.show = !val.show
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
margin-right: 20px;
|
||||
width: 300px;
|
||||
|
||||
|
||||
.primaryNode {
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: rgba(0, 135, 225, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.top:hover {
|
||||
cursor: pointer;
|
||||
// 0058e1 透明度 0.5
|
||||
background: rgba(0, 88, 225, 0.8);
|
||||
color: white;
|
||||
|
||||
:deep(.anticon) {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.topSelect {
|
||||
background: #0058e1;
|
||||
color: white;
|
||||
|
||||
:deep(.anticon) {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
background: rgba(244, 245, 248, 0.8);
|
||||
padding: 0 10px;
|
||||
|
||||
.up {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 0 10px;
|
||||
|
||||
&>div {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.up:hover {
|
||||
.name {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
padding: 0 0.1rem 0 0;
|
||||
|
||||
.name {
|
||||
width: 190px;
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-of-type(1) .up {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.down {
|
||||
width: 100%;
|
||||
|
||||
.child {
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
|
||||
&>div {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.child:hover {
|
||||
.name {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.select2 {
|
||||
.name {
|
||||
width: 190px;
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<template>
|
||||
<div class="question-box">
|
||||
<div class="title">
|
||||
能力使用步骤
|
||||
</div>
|
||||
<div v-for="(item, index) in dataInfo" :key="index">
|
||||
<el-form-item label="标题" prop="question">
|
||||
<el-input v-model="item.question" placeholder="请输入标题" style="width:90%" :disabled="disabledType">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="解释说明" prop="question">
|
||||
<el-input type="textarea" :rows="3" v-model="item.answer" placeholder="请输入解释说明" style="width:90%"
|
||||
:disabled="disabledType">
|
||||
</el-input>
|
||||
<el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small"
|
||||
v-if="!disabledType && dataInfo.length > 1">删除
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-button class="add-btn" size="small"
|
||||
v-if="!disabledType && index == dataInfo.length - 1" @click="addItem" type="primary">添加
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="step-box">
|
||||
<el-steps :active="2">
|
||||
<el-step status="finish" :title="item.question || `标题${index + 1}`" v-for="(item, index) in dataInfo"
|
||||
:key="index">
|
||||
</el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
dataForm: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
},
|
||||
// 是否可编辑
|
||||
disabledType: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataInfo: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataInfo: {
|
||||
handler(newVal) {
|
||||
this.dataInfo = newVal;
|
||||
this.$emit('update', {
|
||||
title: '使用步骤',
|
||||
list: newVal
|
||||
})
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getDataInfo(dataForm) {
|
||||
let arr = []
|
||||
let fuseAttrList = dataForm.fuseAttrList || [];
|
||||
let obj = fuseAttrList.find(v => v.attrType === '使用步骤') || {}
|
||||
let attrValue = JSON.parse(obj.attrValue || "[]")
|
||||
|
||||
if (attrValue.length > 0) {
|
||||
attrValue.map(v => {
|
||||
arr.push({
|
||||
question: v.question,
|
||||
answer: v.answer,
|
||||
})
|
||||
})
|
||||
} else {
|
||||
arr = []
|
||||
arr.push({
|
||||
question: "",
|
||||
answer: "",
|
||||
})
|
||||
}
|
||||
this.dataInfo = arr;
|
||||
},
|
||||
// 新增
|
||||
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: "",
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteItem(list, index) {
|
||||
this.dataInfo.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.question-box {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 40px;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-box {
|
||||
padding: 20px 10px 10px 10px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
margin-top: -12px;
|
||||
margin-left: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<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 @click="searchData">{{
|
||||
$t("query")
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button v-if="$hasPermission('ability:bsabilityai:save')" type="primary" @click="addServe()">挂接</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 @selection-change="dataListSelectionChangeHandle"
|
||||
style="width: 100%" :height="qp ? '810px' : '650px'">
|
||||
<el-table-column prop="name" label="名称" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="description" label="描述" 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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="Number(total)"
|
||||
layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle">
|
||||
</el-pagination>
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-update-scene v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="query" @closeModal="closeModal"
|
||||
:addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
|
||||
</add-update-scene>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from "@/mixins/view-module";
|
||||
import AddUpdateScene from "./add-update-scene";
|
||||
|
||||
export default {
|
||||
mixins: [mixinViewModule],
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
childName: '',
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: "/fuse/page",
|
||||
exportURL: "/ability/bsabilityai/export",
|
||||
deleteURL: "/fuse",
|
||||
getDataListIsPage: true,
|
||||
deleteIsBatch: false,
|
||||
},
|
||||
disabled: false,
|
||||
dataForm: {
|
||||
name: "",
|
||||
order: 'desc',
|
||||
orderField: 'create_date',
|
||||
type: '赋能场景'
|
||||
},
|
||||
qp: false,
|
||||
modalType: 'add',
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AddUpdateScene,
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("resize", this.a);
|
||||
this.fullScreen();
|
||||
},
|
||||
methods: {
|
||||
deleteRow(id) {
|
||||
this.$http.delete('/fuse/delete', {
|
||||
data: [id]
|
||||
}).then(res => {
|
||||
console.log('删除成功', res)
|
||||
if (res.data.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: "success",
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.query()
|
||||
},
|
||||
});
|
||||
}).catch(err => {
|
||||
this.$message.error(err);
|
||||
})
|
||||
},
|
||||
// 查询
|
||||
searchData() {
|
||||
this.query()
|
||||
},
|
||||
// 重置
|
||||
reset() {
|
||||
this.dataForm.name = "";
|
||||
this.query()
|
||||
},
|
||||
// 修改
|
||||
handleUpdate(val) {
|
||||
this.addOrUpdateVisible = true;
|
||||
this.modalType = 'update';
|
||||
const cloneVal = JSON.parse(JSON.stringify(val))
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.getDetail(cloneVal)
|
||||
})
|
||||
},
|
||||
// 挂接
|
||||
addServe() {
|
||||
this.addOrUpdateVisible = true
|
||||
this.modalType = 'add';
|
||||
},
|
||||
closeModal() {
|
||||
this.addOrUpdateVisible = false;
|
||||
},
|
||||
// 详情
|
||||
showDetail(val) {
|
||||
window.open(window.SITE_CONFIG.previewUrl + '#/integrationServicesDetails?id=' + val.id)
|
||||
},
|
||||
fullScreen() {
|
||||
if (window.outerHeight === screen.availHeight) {
|
||||
if (window.outerWidth === screen.availWidth) {
|
||||
console.log(
|
||||
"全屏1",
|
||||
);
|
||||
this.qp = false;
|
||||
} else {
|
||||
console.log(
|
||||
"不是全屏2",
|
||||
);
|
||||
this.qp = true;
|
||||
}
|
||||
} else {
|
||||
console.log(
|
||||
"不是全屏3",
|
||||
);
|
||||
this.qp = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-tooltip__popper {
|
||||
max-width: 50%;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -271,8 +271,7 @@
|
|||
v-if="
|
||||
item.attrType != '应用领域' &&
|
||||
item.attrType != '应用类型' &&
|
||||
item.attrType != '发布端' &&
|
||||
item.attrType != '应用状态'
|
||||
item.attrType != '发布端'
|
||||
"
|
||||
></el-input>
|
||||
<el-select
|
||||
|
|
@ -368,30 +367,30 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import debounce from "lodash/debounce";
|
||||
import dictionaries from "@/utils/dictionaries";
|
||||
import { mapState } from "vuex";
|
||||
import { getIconList } from "@/utils";
|
||||
import Cookies from "js-cookie";
|
||||
import upload from "./upload.vue";
|
||||
import bus from "@/views/bus.js";
|
||||
import qs from "qs";
|
||||
import Vue from "vue";
|
||||
import debounce from 'lodash/debounce'
|
||||
import dictionaries from '@/utils/dictionaries'
|
||||
import { mapState } from 'vuex'
|
||||
import { getIconList } from '@/utils'
|
||||
import Cookies from 'js-cookie'
|
||||
import upload from './upload.vue'
|
||||
import bus from '@/views/bus.js'
|
||||
import qs from 'qs'
|
||||
import Vue from 'vue'
|
||||
export default {
|
||||
components: {
|
||||
upload,
|
||||
upload
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
checkList: [],
|
||||
dialogVisibleImg: false,
|
||||
previewImg: "", // 预览图片
|
||||
previewImg: '', // 预览图片
|
||||
dialogVisible: false,
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + "/upload",
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
|
||||
uploadUrl:
|
||||
window.SITE_CONFIG.apiURL +
|
||||
"/sys/oss/upload?token=" +
|
||||
Cookies.get("ucsToken"),
|
||||
'/sys/oss/upload?token=' +
|
||||
Cookies.get('ucsToken'),
|
||||
companyArr: dictionaries.companyArr,
|
||||
visible: false,
|
||||
sceneArr: dictionaries.sceneArr,
|
||||
|
|
@ -403,602 +402,602 @@ export default {
|
|||
menuListVisible: false,
|
||||
UpdateState: false,
|
||||
dataForm: {
|
||||
id: "",
|
||||
deptId: "",
|
||||
deptContacts: "",
|
||||
deptPhone: "",
|
||||
dataVolume: "",
|
||||
shareCondition: "",
|
||||
shareType: "",
|
||||
shareMode: "",
|
||||
id: '',
|
||||
deptId: '',
|
||||
deptContacts: '',
|
||||
deptPhone: '',
|
||||
dataVolume: '',
|
||||
shareCondition: '',
|
||||
shareType: '',
|
||||
shareMode: '',
|
||||
delFlag: 0,
|
||||
description: "",
|
||||
description: '',
|
||||
downloads: 0,
|
||||
image: "",
|
||||
image: '',
|
||||
showList: [],
|
||||
infoList: [],
|
||||
link: "",
|
||||
name: "",
|
||||
note1: "",
|
||||
note2: "",
|
||||
note3: "",
|
||||
note4: "",
|
||||
note5: "",
|
||||
score: "",
|
||||
type: "应用资源",
|
||||
apiMethodType: "",
|
||||
apiUrl: "",
|
||||
visits: 0,
|
||||
link: '',
|
||||
name: '',
|
||||
note1: '',
|
||||
note2: '',
|
||||
note3: '',
|
||||
note4: '',
|
||||
note5: '',
|
||||
score: '',
|
||||
type: '应用资源',
|
||||
apiMethodType: '',
|
||||
apiUrl: '',
|
||||
visits: 0
|
||||
},
|
||||
deptId: "",
|
||||
fangwendizhi: "",
|
||||
mingzi: "",
|
||||
deptId: '',
|
||||
fangwendizhi: '',
|
||||
mingzi: '',
|
||||
dataFormUpdate: {},
|
||||
dataFormShowDetails: {},
|
||||
infoList2: [],
|
||||
infoList3: [],
|
||||
typeOptions: [
|
||||
{ value: "有条件共享", label: "有条件共享" },
|
||||
{ value: "无条件共享", label: "无条件共享" },
|
||||
{ value: '有条件共享', label: '有条件共享' },
|
||||
{ value: '无条件共享', label: '无条件共享' }
|
||||
],
|
||||
conditionOptions: [
|
||||
{ value: "申请", label: "申请" },
|
||||
{ value: "免批申请", label: "免批申请" },
|
||||
{ value: '申请', label: '申请' },
|
||||
{ value: '免批申请', label: '免批申请' }
|
||||
],
|
||||
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入应用名称",
|
||||
trigger: "change",
|
||||
},
|
||||
message: '请输入应用名称',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
description: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入应用描述",
|
||||
trigger: "change",
|
||||
},
|
||||
message: '请输入应用描述',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
deptContacts: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入部门联系人",
|
||||
trigger: "change",
|
||||
},
|
||||
message: '请输入部门联系人',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
deptPhone: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入部门联系人电话",
|
||||
trigger: "change",
|
||||
},
|
||||
message: '请输入部门联系人电话',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
shareCondition: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择共享条件",
|
||||
trigger: "change",
|
||||
},
|
||||
message: '请选择共享条件',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
shareType: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择请输入共享类型",
|
||||
trigger: "change",
|
||||
},
|
||||
message: '请选择请输入共享类型',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
shareMode: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入共享方式",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
message: '请输入共享方式',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(["catalogueTree"]),
|
||||
...mapState(["departmentSelects"]),
|
||||
dataRule() {
|
||||
...mapState(['catalogueTree']),
|
||||
...mapState(['departmentSelects']),
|
||||
dataRule () {
|
||||
return {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
version: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
visitUrl: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
shareType: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
shareForm: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
field: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
scene: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
deptId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
rank: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
useInfo: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
remarks: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
isUp: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 上传图片
|
||||
handleAvatarSuccess(res, file) {
|
||||
handleAvatarSuccess (res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error("上传图片失败");
|
||||
return this.$message.error('上传图片失败')
|
||||
}
|
||||
debugger;
|
||||
debugger
|
||||
this.dataForm.infoList.map((item, index) => {
|
||||
if (item.attrType == "应用图片") {
|
||||
if (item.attrType == '应用图片') {
|
||||
if (!this.dataForm.infoList[index].attrValue) {
|
||||
this.dataForm.infoList[index].attrValue = res.data;
|
||||
this.dataForm.infoList[index].attrValue = res.data
|
||||
} else {
|
||||
this.dataForm.infoList[index].attrValue += ";" + res.data;
|
||||
this.dataForm.infoList[index].attrValue += ';' + res.data
|
||||
}
|
||||
console.log("上传图片", this.dataForm.infoList[index]);
|
||||
console.log('上传图片', this.dataForm.infoList[index])
|
||||
}
|
||||
});
|
||||
})
|
||||
// this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
handleAvatarSuccessone(res, file) {
|
||||
handleAvatarSuccessone (res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error("上传图片失败");
|
||||
return this.$message.error('上传图片失败')
|
||||
}
|
||||
debugger;
|
||||
debugger
|
||||
this.dataForm.infoList.map((item, index) => {
|
||||
if (item.attrType == "子系统一图片") {
|
||||
if (item.attrType == '子系统一图片') {
|
||||
if (!this.dataForm.infoList[index].attrValue) {
|
||||
this.dataForm.infoList[index].attrValue = res.data;
|
||||
this.dataForm.infoList[index].attrValue = res.data
|
||||
} else {
|
||||
this.dataForm.infoList[index].attrValue = "";
|
||||
this.dataForm.infoList[index].attrValue = res.data;
|
||||
this.dataForm.infoList[index].attrValue = ''
|
||||
this.dataForm.infoList[index].attrValue = res.data
|
||||
}
|
||||
console.log("上传图片", this.dataForm.infoList[index]);
|
||||
console.log('上传图片', this.dataForm.infoList[index])
|
||||
}
|
||||
});
|
||||
})
|
||||
// this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
handleAvatarSuccesstwo(res, file) {
|
||||
handleAvatarSuccesstwo (res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error("上传图片失败");
|
||||
return this.$message.error('上传图片失败')
|
||||
}
|
||||
debugger;
|
||||
debugger
|
||||
this.dataForm.infoList.map((item, index) => {
|
||||
if (item.attrType == "子系统二图片") {
|
||||
if (item.attrType == '子系统二图片') {
|
||||
if (!this.dataForm.infoList[index].attrValue) {
|
||||
this.dataForm.infoList[index].attrValue = res.data;
|
||||
this.dataForm.infoList[index].attrValue = res.data
|
||||
} else {
|
||||
this.dataForm.infoList[index].attrValue = "";
|
||||
this.dataForm.infoList[index].attrValue = res.data;
|
||||
this.dataForm.infoList[index].attrValue = ''
|
||||
this.dataForm.infoList[index].attrValue = res.data
|
||||
}
|
||||
console.log("上传图片", this.dataForm.infoList[index]);
|
||||
console.log('上传图片', this.dataForm.infoList[index])
|
||||
}
|
||||
});
|
||||
})
|
||||
// this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
handleAvatarSuccessthree(res, file) {
|
||||
handleAvatarSuccessthree (res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error("上传图片失败");
|
||||
return this.$message.error('上传图片失败')
|
||||
}
|
||||
debugger;
|
||||
debugger
|
||||
this.dataForm.infoList.map((item, index) => {
|
||||
if (item.attrType == "子系统三图片") {
|
||||
if (item.attrType == '子系统三图片') {
|
||||
if (!this.dataForm.infoList[index].attrValue) {
|
||||
this.dataForm.infoList[index].attrValue = res.data;
|
||||
this.dataForm.infoList[index].attrValue = res.data
|
||||
} else {
|
||||
this.dataForm.infoList[index].attrValue = "";
|
||||
this.dataForm.infoList[index].attrValue = res.data;
|
||||
this.dataForm.infoList[index].attrValue = ''
|
||||
this.dataForm.infoList[index].attrValue = res.data
|
||||
}
|
||||
console.log("上传图片", this.dataForm.infoList[index]);
|
||||
console.log('上传图片', this.dataForm.infoList[index])
|
||||
}
|
||||
});
|
||||
})
|
||||
// this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
beforeAvatarUpload (file) {
|
||||
const isImage =
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/png";
|
||||
const isLt2M = file.size / 1024 / 1024 < 9999;
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png'
|
||||
const isLt2M = file.size / 1024 / 1024 < 9999
|
||||
|
||||
if (!isImage) {
|
||||
this.$message.error("上传头像图片只能是 JPG 格式!");
|
||||
this.$message.error('上传头像图片只能是 JPG 格式!')
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||||
this.$message.error('上传头像图片大小不能超过 2MB!')
|
||||
}
|
||||
return isImage && isLt2M;
|
||||
return isImage && isLt2M
|
||||
},
|
||||
addUploadRemoveFile(file, fileList) {
|
||||
this.$refs.addUpload.clearFiles();
|
||||
this.addDataFrom.imageUrl = "";
|
||||
addUploadRemoveFile (file, fileList) {
|
||||
this.$refs.addUpload.clearFiles()
|
||||
this.addDataFrom.imageUrl = ''
|
||||
},
|
||||
showView(file) {
|
||||
this.previewImg = file.url;
|
||||
this.dialogVisibleImg = true;
|
||||
showView (file) {
|
||||
this.previewImg = file.url
|
||||
this.dialogVisibleImg = true
|
||||
},
|
||||
// 获取当前管理员信息
|
||||
getUserInfo() {
|
||||
this.$http.get("/sys/user/info").then(({ data: res }) => {
|
||||
this.dataForm.deptId = res.data.deptId;
|
||||
this.deptId = res.data.deptId;
|
||||
console.log("depid", this.dataForm);
|
||||
});
|
||||
getUserInfo () {
|
||||
this.$http.get('/sys/user/info').then(({ data: res }) => {
|
||||
this.dataForm.deptId = res.data.deptId
|
||||
this.deptId = res.data.deptId
|
||||
console.log('depid', this.dataForm)
|
||||
})
|
||||
},
|
||||
guanbi() {
|
||||
guanbi () {
|
||||
this.dataForm = {
|
||||
id: "",
|
||||
deptId: "",
|
||||
deptContacts: "",
|
||||
deptPhone: "",
|
||||
dataVolume: "",
|
||||
shareCondition: "",
|
||||
shareType: "",
|
||||
shareMode: "",
|
||||
id: '',
|
||||
deptId: '',
|
||||
deptContacts: '',
|
||||
deptPhone: '',
|
||||
dataVolume: '',
|
||||
shareCondition: '',
|
||||
shareType: '',
|
||||
shareMode: '',
|
||||
delFlag: 0,
|
||||
description: "",
|
||||
description: '',
|
||||
downloads: 0,
|
||||
image: "",
|
||||
image: '',
|
||||
showList: [],
|
||||
infoList: [],
|
||||
link: "",
|
||||
name: "",
|
||||
note1: "",
|
||||
note2: "",
|
||||
note3: "",
|
||||
note4: "",
|
||||
note5: "",
|
||||
score: "",
|
||||
type: "应用资源",
|
||||
apiMethodType: "",
|
||||
apiUrl: "",
|
||||
visits: 0,
|
||||
};
|
||||
link: '',
|
||||
name: '',
|
||||
note1: '',
|
||||
note2: '',
|
||||
note3: '',
|
||||
note4: '',
|
||||
note5: '',
|
||||
score: '',
|
||||
type: '应用资源',
|
||||
apiMethodType: '',
|
||||
apiUrl: '',
|
||||
visits: 0
|
||||
}
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
handleRemove (file, fileList) {
|
||||
console.log(file, fileList)
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
handlePictureCardPreview (file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 上传图片之前
|
||||
uploadBeforeUploadHandle(file) {
|
||||
uploadBeforeUploadHandle (file) {
|
||||
if (
|
||||
file.type !== "image/jpg" &&
|
||||
file.type !== "image/jpeg" &&
|
||||
file.type !== "image/png" &&
|
||||
file.type !== "image/gif"
|
||||
file.type !== 'image/jpg' &&
|
||||
file.type !== 'image/jpeg' &&
|
||||
file.type !== 'image/png' &&
|
||||
file.type !== 'image/gif'
|
||||
) {
|
||||
this.$message.error("只支持jpg、png、gif格式的图片！");
|
||||
return false;
|
||||
this.$message.error('只支持jpg、png、gif格式的图片！')
|
||||
return false
|
||||
}
|
||||
},
|
||||
imgUploadSuccess(res, file, fileList) {
|
||||
console.log("zzzzzzz", res, file, fileList);
|
||||
imgUploadSuccess (res, file, fileList) {
|
||||
console.log('zzzzzzz', res, file, fileList)
|
||||
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
},
|
||||
init() {
|
||||
this.getInfoList();
|
||||
this.visible = true;
|
||||
init () {
|
||||
this.getInfoList()
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataForm && this.$refs.dataForm.resetFields();
|
||||
this.iconList = getIconList();
|
||||
this.$refs.dataForm && this.$refs.dataForm.resetFields()
|
||||
this.iconList = getIconList()
|
||||
if (this.dataForm.id) {
|
||||
this.getInfo();
|
||||
this.getInfo()
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
// 获取属性信息
|
||||
getInfoList() {
|
||||
getInfoList () {
|
||||
const parms = {
|
||||
topCategoryName: "应用资源",
|
||||
};
|
||||
this.infoList2 = [];
|
||||
topCategoryName: '应用资源'
|
||||
}
|
||||
this.infoList2 = []
|
||||
this.$http
|
||||
.get("/category/getAllFiledByTopCategory" + "?" + qs.stringify(parms))
|
||||
.get('/category/getAllFiledByTopCategory' + '?' + qs.stringify(parms))
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
res.data.map((item, index) => {
|
||||
if (
|
||||
item.name.search("应用名称") == -1 &&
|
||||
item.name.search("地址") == -1 &&
|
||||
item.name.search('应用名称') == -1 &&
|
||||
item.name.search('地址') == -1 &&
|
||||
// item.name.search("描述") == -1 &&
|
||||
item.name !== "组件描述" &&
|
||||
item.name !== "组件名称" &&
|
||||
item.name !== "服务接口" &&
|
||||
item.name !== "共享类型" &&
|
||||
item.name !== "共享条件" &&
|
||||
item.name !== "共享方式" &&
|
||||
item.name !== "部门联系人电话" &&
|
||||
item.name !== "部门统一社会代码" &&
|
||||
item.name !== "部门联系人" &&
|
||||
item.name !== "服务商统一社会信用代码" &&
|
||||
item.name !== "服务接口请求方式" &&
|
||||
item.name !== "部门名称"
|
||||
item.name !== '组件描述' &&
|
||||
item.name !== '组件名称' &&
|
||||
item.name !== '服务接口' &&
|
||||
item.name !== '共享类型' &&
|
||||
item.name !== '共享条件' &&
|
||||
item.name !== '共享方式' &&
|
||||
item.name !== '部门联系人电话' &&
|
||||
item.name !== '部门统一社会代码' &&
|
||||
item.name !== '部门联系人' &&
|
||||
item.name !== '服务商统一社会信用代码' &&
|
||||
item.name !== '服务接口请求方式' &&
|
||||
item.name !== '部门名称'
|
||||
) {
|
||||
const duixiang = {
|
||||
attrType: item.name,
|
||||
attrValue: "",
|
||||
delFlag: 0,
|
||||
};
|
||||
this.infoList2.push(item);
|
||||
if (item.isLinkToDic != "false") {
|
||||
attrValue: '',
|
||||
delFlag: 0
|
||||
}
|
||||
this.infoList2.push(item)
|
||||
if (item.isLinkToDic != 'false') {
|
||||
const xinxi = {
|
||||
page: 1,
|
||||
limit: 99,
|
||||
dictTypeId: item.linkValue,
|
||||
dictLabel: "",
|
||||
dictValue: "",
|
||||
};
|
||||
dictLabel: '',
|
||||
dictValue: ''
|
||||
}
|
||||
this.$http
|
||||
.get("/sys/dict/data/page" + "?" + qs.stringify(xinxi))
|
||||
.get('/sys/dict/data/page' + '?' + qs.stringify(xinxi))
|
||||
.then(({ data: res2 }) => {
|
||||
// this.infoList2[index - 1].children = res2.data.list
|
||||
this.infoList2.map((item3, index3) => {
|
||||
if (item3.name == item.name) {
|
||||
Vue.set(
|
||||
this.infoList2[index3],
|
||||
"children",
|
||||
'children',
|
||||
res2.data.list
|
||||
);
|
||||
)
|
||||
}
|
||||
});
|
||||
})
|
||||
this.dataFormUpdate.infoList.map((item3, index3) => {
|
||||
if (item3.attrType == item.name) {
|
||||
Vue.set(
|
||||
this.dataFormUpdate.infoList[index3],
|
||||
"children",
|
||||
'children',
|
||||
res2.data.list
|
||||
);
|
||||
)
|
||||
}
|
||||
});
|
||||
})
|
||||
console.log(
|
||||
"11111111111111111111111111110",
|
||||
'11111111111111111111111111110',
|
||||
this.dataFormUpdate
|
||||
);
|
||||
});
|
||||
)
|
||||
})
|
||||
}
|
||||
this.dataForm.infoList.push(duixiang);
|
||||
this.dataForm.infoList.push(duixiang)
|
||||
}
|
||||
});
|
||||
console.log("this.infoList", this.dataFormUpdate);
|
||||
})
|
||||
console.log('this.infoList', this.dataFormUpdate)
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => {})
|
||||
this.$http
|
||||
.get("/sys/dict/data/page" + "?" + qs.stringify(parms))
|
||||
.get('/sys/dict/data/page' + '?' + qs.stringify(parms))
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
console.log("this.infoList", this.dataForm);
|
||||
console.log('this.infoList', this.dataForm)
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => {})
|
||||
},
|
||||
// 图标, 选中
|
||||
iconListCurrentChangeHandle(icon) {
|
||||
this.dataForm.imgurl = icon;
|
||||
this.iconListVisible = false;
|
||||
iconListCurrentChangeHandle (icon) {
|
||||
this.dataForm.imgurl = icon
|
||||
this.iconListVisible = false
|
||||
},
|
||||
// 上级菜单树, 选中
|
||||
menuListTreeCurrentChangeHandle(data) {
|
||||
this.dataForm.pid = data.id;
|
||||
this.dataForm.type = data.name;
|
||||
this.menuListVisible = false;
|
||||
menuListTreeCurrentChangeHandle (data) {
|
||||
this.dataForm.pid = data.id
|
||||
this.dataForm.type = data.name
|
||||
this.menuListVisible = false
|
||||
},
|
||||
// 上级菜单树, 设置默认值
|
||||
deptListTreeSetDefaultHandle() {
|
||||
this.dataForm.pid = "0";
|
||||
this.dataForm.type = "目录级别";
|
||||
deptListTreeSetDefaultHandle () {
|
||||
this.dataForm.pid = '0'
|
||||
this.dataForm.type = '目录级别'
|
||||
},
|
||||
// 获取信息
|
||||
getInfo() {
|
||||
getInfo () {
|
||||
this.$http
|
||||
.get("/ability/bsabilityai/" + this.dataForm.id)
|
||||
.get('/ability/bsabilityai/' + this.dataForm.id)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.dataForm = {
|
||||
...this.dataForm,
|
||||
...res.data,
|
||||
};
|
||||
...res.data
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => {})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmitHandle: debounce(
|
||||
function () {
|
||||
this.$refs.dataForm.validate((valid) => {
|
||||
this.getUserInfo();
|
||||
this.dataForm.deptId = this.deptId;
|
||||
this.getUserInfo()
|
||||
this.dataForm.deptId = this.deptId
|
||||
if (!valid) {
|
||||
this.$message.error("请检查表单是否填写完整");
|
||||
return false;
|
||||
this.$message.error('请检查表单是否填写完整')
|
||||
return false
|
||||
}
|
||||
console.log("表单数据=======================》", this.dataForm);
|
||||
console.log('表单数据=======================》', this.dataForm)
|
||||
if (!this.UpdateState) {
|
||||
this.dataForm.infoList = [];
|
||||
this.dataForm.infoList = []
|
||||
this.dataForm.showListAll.forEach((val) => {
|
||||
if (val.name !== "必填信息") {
|
||||
if (val.name === "服务接口信息") {
|
||||
if (val.name !== '必填信息') {
|
||||
if (val.name === '服务接口信息') {
|
||||
val.children.forEach((item) => {
|
||||
if (item.name === "服务接口") {
|
||||
this.dataForm.apiUrl = item.note1;
|
||||
if (item.name === '服务接口') {
|
||||
this.dataForm.apiUrl = item.note1
|
||||
}
|
||||
if (item.name === "接口请求方式") {
|
||||
this.dataForm.apiMethodType = item.note1;
|
||||
if (item.name === '接口请求方式') {
|
||||
this.dataForm.apiMethodType = item.note1
|
||||
}
|
||||
if (item.name === "访问地址") {
|
||||
this.dataForm.link = item.note1;
|
||||
if (item.name === '访问地址') {
|
||||
this.dataForm.link = item.note1
|
||||
}
|
||||
});
|
||||
})
|
||||
} else {
|
||||
val.children.forEach((item) => {
|
||||
this.dataForm.infoList.push({
|
||||
attrType: item.name,
|
||||
attrValue: item.note1,
|
||||
delFlag: 0,
|
||||
});
|
||||
});
|
||||
delFlag: 0
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
this.$http
|
||||
.post("/resource/insert?source= b", this.dataForm)
|
||||
.post('/resource/insert?source= b', this.dataForm)
|
||||
.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.visible = false;
|
||||
this.$emit("refreshDataList");
|
||||
},
|
||||
});
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.$http
|
||||
.put("/resource/update", this.dataFormUpdate)
|
||||
.put('/resource/update', this.dataFormUpdate)
|
||||
.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.visible = false;
|
||||
this.$emit("refreshDataList");
|
||||
},
|
||||
});
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => {})
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
1000,
|
||||
{ leading: true, trailing: false }
|
||||
),
|
||||
showListChagne() {
|
||||
showListChagne () {
|
||||
this.dataForm.showList = this.dataForm.showListAll.filter(
|
||||
(item) => this.checkList.indexOf(item.name) > -1
|
||||
);
|
||||
)
|
||||
console.log(
|
||||
"属性变更===================>",
|
||||
'属性变更===================>',
|
||||
this.checkList,
|
||||
this.dataForm.showList,
|
||||
this.dataForm.showListAll
|
||||
);
|
||||
},
|
||||
)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getUserInfo();
|
||||
mounted () {
|
||||
this.getUserInfo()
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log("销毁~~~~~~~~~~~~~~~~~~~~");
|
||||
},
|
||||
};
|
||||
beforeDestroy () {
|
||||
console.log('销毁~~~~~~~~~~~~~~~~~~~~')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -19,13 +19,20 @@
|
|||
$t("export")
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<!-- <el-form-item>
|
||||
<el-button
|
||||
v-if="$hasPermission('ability:bsabilityai:save')"
|
||||
type="primary"
|
||||
@click="addOrUpdateHandleServe()"
|
||||
>挂接</el-button
|
||||
>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="showPutOnTheShelf()"
|
||||
>上架</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
|
|
@ -45,7 +52,7 @@
|
|||
border
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
style="width: 100%"
|
||||
:height="qp ? '810px' : '650px'"
|
||||
height="650px"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
|
|
@ -54,38 +61,81 @@
|
|||
width="50"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
width="280"
|
||||
prop="name"
|
||||
label="应用名称"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-for="(item, index) in dataList[0].infoList"
|
||||
:key="index"
|
||||
:label="item.attrType"
|
||||
<af-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
width="280"
|
||||
prop="description"
|
||||
label="应用描述"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></af-table-column>
|
||||
<af-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ findValue(scope.row.infoList, item.attrType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
width="280"
|
||||
prop="deptName"
|
||||
label="归属部门"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></af-table-column>
|
||||
<af-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
width="280"
|
||||
prop="deptContacts"
|
||||
label="部门联系人"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></af-table-column>
|
||||
<af-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
width="280"
|
||||
prop="deptPhone"
|
||||
label="部门联系人电话"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></af-table-column>
|
||||
<af-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
width="280"
|
||||
prop="shareCondition"
|
||||
label="共享条件"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></af-table-column>
|
||||
<template v-if="dataList[0] && dataList[0].infoList2">
|
||||
<el-table-column
|
||||
v-for="(item, index) in dataList[0].infoList2"
|
||||
:key="index"
|
||||
:label="item.attrType"
|
||||
header-align="center"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="280"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ findValue(scope.row.infoList2, item.attrType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="94"
|
||||
right="0"
|
||||
width="300"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="$hasPermission('ability:bsabilityai:update')"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="UpdateHandle(scope.row)"
|
||||
@click="UpdateData(scope.row)"
|
||||
>{{ $t("update") }}</el-button
|
||||
>
|
||||
<el-button
|
||||
|
|
@ -96,10 +146,10 @@
|
|||
>{{ $t("delete") }}</el-button
|
||||
>
|
||||
<el-button type="text" size="small" @click="showDetail(scope.row)"
|
||||
>展示</el-button
|
||||
>详情</el-button
|
||||
>
|
||||
<el-button type="text" size="small" @click="showDocument(scope.row)"
|
||||
>开发文档</el-button
|
||||
>技术文档</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
|
|
@ -153,63 +203,99 @@
|
|||
@isShowRelatePopup="handleIsShowRelatePopupApply"
|
||||
></relate-application>
|
||||
</div>
|
||||
<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 :required="required" :notFilled="notFilled":putOnTheShelfList='putOnTheShelfList' @changeInfoList='changeInfoList' :type='radio' :typeInput='typeInput'></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 "./bsabilityservice-add-or-update";
|
||||
import dictionaries from "@/utils/dictionaries";
|
||||
import RelateApplication from "./bsabilityai-relate-application.vue";
|
||||
import qs from "qs";
|
||||
import { type } from "os";
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import AddOrUpdate from './bsabilityservice-add-or-update'
|
||||
import dictionaries from '@/utils/dictionaries'
|
||||
import RelateApplication from './bsabilityai-relate-application.vue'
|
||||
import qs from 'qs'
|
||||
import { type } from 'os'
|
||||
import putOnTheShelf from '@/views/modules/putOnTheShelf'
|
||||
|
||||
export default {
|
||||
mixins: [mixinViewModule],
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
required: ['归属部门', '部门联系人', '部门联系人电话', '应用领域', '共享条件', '应用名称', '应用描述', '应用类型'],
|
||||
notFilled: [],
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: "/resource/page",
|
||||
getDataListURL: '/resource/page',
|
||||
getDataListIsPage: true,
|
||||
exportURL: "/ability/bsabilityai/export",
|
||||
deleteURL: "/resource/delete",
|
||||
deleteIsBatch: true,
|
||||
exportURL: '/ability/bsabilityai/export',
|
||||
deleteURL: '/resource/delete',
|
||||
deleteIsBatch: true
|
||||
},
|
||||
disabled: false,
|
||||
sceneArr: dictionaries.sceneArr,
|
||||
fieldArr: dictionaries.fieldArr,
|
||||
shareFormArr: dictionaries.shareFormArr,
|
||||
dataForm: {
|
||||
name: "",
|
||||
creator: "",
|
||||
name: '',
|
||||
creator: '',
|
||||
selectType: 0,
|
||||
delFlag: 0,
|
||||
type: "应用资源",
|
||||
type: '应用资源'
|
||||
},
|
||||
qp: false,
|
||||
relateApplicationResourceVisible: false,
|
||||
relationData: {}, //打开穿梭框时传递的参数
|
||||
relationData: {}, // 打开穿梭框时传递的参数
|
||||
topNameArray: [], //
|
||||
};
|
||||
radio: '应用资源',
|
||||
insertList: [],
|
||||
putOnTheShelfList: [],
|
||||
showPutOnTheShelfFlag2: false,
|
||||
submitFrom: {
|
||||
type: '应用资源',
|
||||
deptId: '',
|
||||
delFlag: 0,
|
||||
infoList: [
|
||||
// {
|
||||
// attrType: '组件类型',
|
||||
// attrValue: '',
|
||||
// delFlag: 0
|
||||
// }
|
||||
]
|
||||
},
|
||||
typeInput: '应用资源'
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
RelateApplication,
|
||||
putOnTheShelf
|
||||
},
|
||||
created() {
|
||||
this.dataForm.name = "";
|
||||
this.dataForm.type = "应用资源";
|
||||
created () {
|
||||
this.dataForm.name = ''
|
||||
this.dataForm.type = '应用资源'
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("resize", this.a);
|
||||
this.fullScreen();
|
||||
mounted () {
|
||||
// window.addEventListener('resize', this.a)
|
||||
// this.fullScreen()
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
reset () {
|
||||
this.$http
|
||||
.get(
|
||||
this.mixinViewModuleOptions.getDataListURL +
|
||||
"?" +
|
||||
'?' +
|
||||
qs.stringify({
|
||||
// order: this.order,
|
||||
// orderField: this.orderField,
|
||||
|
|
@ -218,233 +304,542 @@ export default {
|
|||
selectType: 0,
|
||||
limit: 10,
|
||||
delFlag: 0,
|
||||
creator: "",
|
||||
type: "应用资源",
|
||||
name: "",
|
||||
creator: '',
|
||||
type: '应用资源',
|
||||
name: ''
|
||||
})
|
||||
)
|
||||
.then(({ data: res }) => {
|
||||
this.dataForm.name = "";
|
||||
this.dataForm.name = ''
|
||||
if (res.code !== 0) {
|
||||
this.dataList = [];
|
||||
this.total = 0;
|
||||
return this.$message.error(res.msg);
|
||||
this.dataList = []
|
||||
this.total = 0
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.dataList = this.mixinViewModuleOptions.getDataListIsPage
|
||||
? res.data.list
|
||||
: res.data;
|
||||
: res.data
|
||||
this.total = this.mixinViewModuleOptions.getDataListIsPage
|
||||
? res.data.total
|
||||
: 0;
|
||||
: 0
|
||||
if (this.mixinViewModuleOptions.requestCallback) {
|
||||
this.mixinViewModuleOptions.requestCallback(res.data);
|
||||
this.mixinViewModuleOptions.requestCallback(res.data)
|
||||
}
|
||||
this.dataListLoading = false;
|
||||
this.dataListLoading = false
|
||||
this.dataList.map((item, index) => {
|
||||
const dataListSinforList = []
|
||||
item.infoList.map((itemson, indexson) => {
|
||||
if (
|
||||
itemson.attrType === '应用领域'
|
||||
) {
|
||||
dataListSinforList.push(itemson)
|
||||
}
|
||||
})
|
||||
this.dataList[index].infoList2 = dataListSinforList
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
this.dataListLoading = false
|
||||
})
|
||||
},
|
||||
showDetail(val) {
|
||||
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;
|
||||
showDetail (val) {
|
||||
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + val.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
|
||||
},
|
||||
showDocument(val) {
|
||||
console.log(val);
|
||||
showDocument (val) {
|
||||
console.log(val)
|
||||
window.open(
|
||||
window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
|
||||
"_blank"
|
||||
);
|
||||
window.SITE_CONFIG.frontUrl + '?id=' + val.id + '&&type=' + val.type,
|
||||
'_blank'
|
||||
)
|
||||
},
|
||||
findValue(list, type) {
|
||||
const found = list.find((item) => item.attrType === type);
|
||||
findValue (list, type) {
|
||||
const found = list.find((item) => item.attrType === type)
|
||||
if (found) {
|
||||
return found.attrValue;
|
||||
return found.attrValue
|
||||
} else {
|
||||
return "暂无数据";
|
||||
return '暂无数据'
|
||||
}
|
||||
},
|
||||
getDataList2(names) {
|
||||
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: "",
|
||||
type: '应用资源',
|
||||
creator: '',
|
||||
selectType: 0,
|
||||
delFlag: 0,
|
||||
name: names,
|
||||
name: names
|
||||
})
|
||||
)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.dataList = [];
|
||||
this.total = 0;
|
||||
return this.$message.error(res.msg);
|
||||
this.dataList = []
|
||||
this.total = 0
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
if (res.data.list.length !== 0) {
|
||||
this.dataList = res.data.list;
|
||||
this.dataList = res.data.list
|
||||
this.total = this.mixinViewModuleOptions.getDataListIsPage
|
||||
? res.data.total
|
||||
: 0;
|
||||
: 0
|
||||
if (this.mixinViewModuleOptions.requestCallback) {
|
||||
this.mixinViewModuleOptions.requestCallback(res.data);
|
||||
this.mixinViewModuleOptions.requestCallback(res.data)
|
||||
}
|
||||
this.dataListLoading = false;
|
||||
this.dataListLoading = false
|
||||
this.dataList.map((item, index) => {
|
||||
const dataListSinforList = []
|
||||
item.infoList.map((itemson, indexson) => {
|
||||
if (
|
||||
itemson.attrType === '应用领域'
|
||||
) {
|
||||
dataListSinforList.push(itemson)
|
||||
}
|
||||
})
|
||||
this.dataList[index].infoList2 = dataListSinforList
|
||||
})
|
||||
} else {
|
||||
this.$message.error("未查询到相关信息");
|
||||
this.reset();
|
||||
this.$message.error('未查询到相关信息')
|
||||
this.reset()
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
this.dataListLoading = false
|
||||
})
|
||||
} else {
|
||||
this.$message.error("查询不能输入为空");
|
||||
this.$message.error('查询不能输入为空')
|
||||
}
|
||||
},
|
||||
fullScreen() {
|
||||
if (window.outerHeight === screen.availHeight) {
|
||||
if (window.outerWidth === screen.availWidth) {
|
||||
console.log(
|
||||
"全屏1",
|
||||
window.outerHeight,
|
||||
screen.availHeight,
|
||||
window.outerWidth,
|
||||
screen.availWidth
|
||||
);
|
||||
this.qp = false;
|
||||
} else {
|
||||
console.log(
|
||||
"不是全屏2",
|
||||
window.outerHeight,
|
||||
screen.availHeight,
|
||||
window.outerWidth,
|
||||
screen.availWidth
|
||||
);
|
||||
this.qp = true;
|
||||
}
|
||||
} else {
|
||||
console.log(
|
||||
"不是全屏3",
|
||||
window.outerHeight,
|
||||
screen.availHeight,
|
||||
window.outerWidth,
|
||||
screen.availWidth
|
||||
);
|
||||
this.qp = true;
|
||||
}
|
||||
},
|
||||
//应用与组件
|
||||
applyAndAssembly(val) {
|
||||
console.log("vvvv", val);
|
||||
//根据id和类型查询已关联的组件，将id,type和查出来的数据传递给组件
|
||||
let type = "组件服务";
|
||||
let id = val.id;
|
||||
// fullScreen () {
|
||||
// if (window.outerHeight === screen.availHeight) {
|
||||
// if (window.outerWidth === screen.availWidth) {
|
||||
// console.log(
|
||||
// '全屏1',
|
||||
// window.outerHeight,
|
||||
// screen.availHeight,
|
||||
// window.outerWidth,
|
||||
// screen.availWidth
|
||||
// )
|
||||
// this.qp = false
|
||||
// } else {
|
||||
// console.log(
|
||||
// '不是全屏2',
|
||||
// window.outerHeight,
|
||||
// screen.availHeight,
|
||||
// window.outerWidth,
|
||||
// screen.availWidth
|
||||
// )
|
||||
// this.qp = true
|
||||
// }
|
||||
// } else {
|
||||
// console.log(
|
||||
// '不是全屏3',
|
||||
// window.outerHeight,
|
||||
// screen.availHeight,
|
||||
// window.outerWidth,
|
||||
// screen.availWidth
|
||||
// )
|
||||
// this.qp = true
|
||||
// }
|
||||
// },
|
||||
// 应用与组件
|
||||
applyAndAssembly (val) {
|
||||
console.log('vvvv', val)
|
||||
// 根据id和类型查询已关联的组件，将id,type和查出来的数据传递给组件
|
||||
const type = '组件服务'
|
||||
const id = val.id
|
||||
this.$http
|
||||
.get(`/dataResourceRel/queryResourceRelByKeyId`, {
|
||||
.get('/dataResourceRel/queryResourceRelByKeyId', {
|
||||
params: {
|
||||
keyId: id,
|
||||
type: type,
|
||||
referenceName: "",
|
||||
},
|
||||
referenceName: ''
|
||||
}
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
console.log("rrrrressssz", res.data);
|
||||
this.relateApplicationResourceVisible = true;
|
||||
console.log('rrrrressssz', res.data)
|
||||
this.relateApplicationResourceVisible = true
|
||||
this.relationData = {
|
||||
id: id,
|
||||
linkType: "1",
|
||||
responseData: res.data,
|
||||
};
|
||||
this.topNameArray = ["未关联组件名称", "已关联组件名称"];
|
||||
console.log(" this.relationData", this.relationData);
|
||||
//将数据传递给引入的组件
|
||||
});
|
||||
linkType: '1',
|
||||
responseData: res.data
|
||||
}
|
||||
this.topNameArray = ['未关联组件名称', '已关联组件名称']
|
||||
console.log(' this.relationData', this.relationData)
|
||||
// 将数据传递给引入的组件
|
||||
})
|
||||
},
|
||||
//应用与数据资源
|
||||
applyAndDataResource(val) {
|
||||
console.log("数据资源");
|
||||
// 应用与数据资源
|
||||
applyAndDataResource (val) {
|
||||
console.log('数据资源')
|
||||
},
|
||||
//应用与项目
|
||||
applyAndProject(val) {
|
||||
let type = "项目";
|
||||
let id = val.id;
|
||||
// 应用与项目
|
||||
applyAndProject (val) {
|
||||
const type = '项目'
|
||||
const id = val.id
|
||||
this.$http
|
||||
.get(`/dataResourceRel/queryResourceRelByKeyId`, {
|
||||
.get('/dataResourceRel/queryResourceRelByKeyId', {
|
||||
params: {
|
||||
keyId: id,
|
||||
type: type,
|
||||
referenceName: "",
|
||||
},
|
||||
referenceName: ''
|
||||
}
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
console.log("rrrrressssx", res.data);
|
||||
this.relateApplicationResourceVisible = true;
|
||||
console.log('rrrrressssx', res.data)
|
||||
this.relateApplicationResourceVisible = true
|
||||
this.relationData = {
|
||||
id: id,
|
||||
linkType: "1",
|
||||
responseData: res.data,
|
||||
};
|
||||
this.topNameArray = ["未关联项目名称", "已关联项目名称"];
|
||||
//将数据传递给引入的组件
|
||||
});
|
||||
linkType: '1',
|
||||
responseData: res.data
|
||||
}
|
||||
this.topNameArray = ['未关联项目名称', '已关联项目名称']
|
||||
// 将数据传递给引入的组件
|
||||
})
|
||||
},
|
||||
//应用与基础设施
|
||||
applyAndInfrastructure(val) {
|
||||
let type = "基础设施";
|
||||
let id = val.id;
|
||||
// 应用与基础设施
|
||||
applyAndInfrastructure (val) {
|
||||
const type = '基础设施'
|
||||
const id = val.id
|
||||
this.$http
|
||||
.get(`/dataResourceRel/queryResourceRelByKeyId`, {
|
||||
.get('/dataResourceRel/queryResourceRelByKeyId', {
|
||||
params: {
|
||||
keyId: id,
|
||||
type: type,
|
||||
referenceName: "",
|
||||
},
|
||||
referenceName: ''
|
||||
}
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
console.log("rrrrressssj", res.data);
|
||||
this.relateApplicationResourceVisible = true;
|
||||
console.log('rrrrressssj', res.data)
|
||||
this.relateApplicationResourceVisible = true
|
||||
this.relationData = {
|
||||
id: id,
|
||||
linkType: "1",
|
||||
responseData: res.data,
|
||||
};
|
||||
this.topNameArray = ["未关联基础设施名称", "已关联基础设施名称"];
|
||||
//将数据传递给引入的组件
|
||||
});
|
||||
linkType: '1',
|
||||
responseData: res.data
|
||||
}
|
||||
this.topNameArray = ['未关联基础设施名称', '已关联基础设施名称']
|
||||
// 将数据传递给引入的组件
|
||||
})
|
||||
},
|
||||
// 是否展示关联应用弹窗
|
||||
handleIsShowRelatePopupApply(type) {
|
||||
this.relateApplicationResourceVisible = type;
|
||||
handleIsShowRelatePopupApply (type) {
|
||||
this.relateApplicationResourceVisible = type
|
||||
},
|
||||
},
|
||||
};
|
||||
// 新上架
|
||||
clear () {
|
||||
this.notFilled = []
|
||||
this.showPutOnTheShelfFlag2 = false
|
||||
this.insertList = []
|
||||
this.putOnTheShelfList = []
|
||||
this.radio = '应用资源'
|
||||
this.submitFrom = {
|
||||
type: '应用资源',
|
||||
deptId: '',
|
||||
delFlag: 0,
|
||||
infoList: [
|
||||
// {
|
||||
// attrType: '组件类型',
|
||||
// attrValue: '',
|
||||
// delFlag: 0
|
||||
// }
|
||||
]
|
||||
}
|
||||
this.reset()
|
||||
},
|
||||
// 上架
|
||||
showPutOnTheShelf () {
|
||||
this.showPutOnTheShelfFlag2 = true
|
||||
this.$http.get('/category/getCategoryTree').then(res => {
|
||||
this.insertList = res.data.data.filter(item => item.name === '应用资源一')[0]
|
||||
console.log(this.insertList, this, this.radio, 'hhhhhhhhhhh')
|
||||
this.putOnTheShelfList = this.insertList.children
|
||||
})
|
||||
},
|
||||
changeInfoList (obj) {
|
||||
this.submitFrom.infoList = this.submitFrom.infoList.filter((item) => item.attrType !== obj.attrType)
|
||||
this.submitFrom.infoList.push(obj)
|
||||
},
|
||||
submitData () {
|
||||
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 = []
|
||||
console.log(this.submitFrom, '表单验证')
|
||||
if (!this.submitFrom.name) {
|
||||
this.notFilled.push('应用名称')
|
||||
}
|
||||
if (!this.submitFrom.description) {
|
||||
this.notFilled.push('应用描述')
|
||||
}
|
||||
if (!this.submitFrom.shareCondition) {
|
||||
this.notFilled.push('共享条件')
|
||||
}
|
||||
if (!this.submitFrom.deptId) {
|
||||
this.notFilled.push('归属部门')
|
||||
}
|
||||
if (!this.submitFrom.deptContacts) {
|
||||
this.notFilled.push('部门联系人')
|
||||
}
|
||||
if (!this.submitFrom.deptPhone) {
|
||||
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.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.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)
|
||||
// 检验是否有空值
|
||||
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('修改失败!')
|
||||
this.showPutOnTheShelfFlag2 = false
|
||||
} else {
|
||||
this.$message.success('修改成功！')
|
||||
this.showPutOnTheShelfFlag2 = false
|
||||
this.clear()
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.$http
|
||||
.post('/resource/insert?source= b', this.submitFrom)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error('上架失败!')
|
||||
this.showPutOnTheShelfFlag2 = false
|
||||
} else {
|
||||
this.$message.success('上架成功！')
|
||||
this.showPutOnTheShelfFlag2 = false
|
||||
this.clear()
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 新修改
|
||||
UpdateData (item) {
|
||||
this.$http.get('/category/getCategoryTree').then(res => {
|
||||
this.insertList = res.data.data.filter(item => item.name === '应用资源一')[0]
|
||||
this.radio = '应用资源'
|
||||
// this.radio = item.infoList.filter(val => val.attrType === '应用资源')[0].attrValue
|
||||
this.putOnTheShelfList = this.insertList.children
|
||||
// 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-upload-list__item-name {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
{{ this.$route.meta.type }}
|
||||
<div class="mod-ability__bsabilityvideo">
|
||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||
<el-form-item>
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
|
||||
<el-table-column prop="orderId" :label="$t('dataresources.resourcesName')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="productName" :label="$t('dataresources.resourcesCode')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="productName" :label="$t('dataresources.resourcesName')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="orderId" :label="$t('dataresources.resourcesCode')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="payAmount" :label="$t('dataresources.resourcesProvide')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="status" :label="$t('dataresources.resourcesAbstract')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="payAt" :label="$t('dataresources.putOnDate')" header-align="center" align="center"></el-table-column>
|
||||
|
|
@ -50,8 +50,8 @@
|
|||
<script>
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
// import AddOrUpdate from './order-add-or-update'
|
||||
import {addDynamicRoute} from "@/router";
|
||||
import RelateApplication from "./bsabilityai-relate-application.vue"
|
||||
import { addDynamicRoute } from '@/router'
|
||||
import RelateApplication from './bsabilityai-relate-application.vue'
|
||||
|
||||
export default {
|
||||
mixins: [mixinViewModule],
|
||||
|
|
@ -68,7 +68,7 @@ export default {
|
|||
status: '',
|
||||
userId: ''
|
||||
},
|
||||
// 关联应用弹窗
|
||||
// 关联应用弹窗
|
||||
relateApplicationVisible: false,
|
||||
relateInfo: {
|
||||
id: '',
|
||||
|
|
@ -79,31 +79,35 @@ export default {
|
|||
},
|
||||
components: {
|
||||
// AddOrUpdate,
|
||||
RelateApplication,
|
||||
RelateApplication
|
||||
},
|
||||
methods: {
|
||||
//重置
|
||||
resetDataList(){
|
||||
this.dataForm=this.noDataForm;
|
||||
this.page=1; // 当前页码
|
||||
this.query();
|
||||
},
|
||||
// 点击关联应用按钮
|
||||
showRelateApplication(row){
|
||||
// 重置
|
||||
resetDataList () {
|
||||
this.dataForm = {
|
||||
orderId: '',
|
||||
status: '',
|
||||
userId: ''
|
||||
},
|
||||
this.page = 1 // 当前页码
|
||||
this.query()
|
||||
},
|
||||
// 点击关联应用按钮
|
||||
showRelateApplication (row) {
|
||||
this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
|
||||
if( res && res.data ) {
|
||||
this.relateApplicationVisible = true;
|
||||
if (res && res.data) {
|
||||
this.relateApplicationVisible = true
|
||||
this.relateInfo = {
|
||||
id: row.id,
|
||||
responseData: res.data,
|
||||
linkType: '2'
|
||||
};
|
||||
}
|
||||
}
|
||||
}).catch(() => { })
|
||||
},
|
||||
// 是否展示关联应用弹窗
|
||||
handleIsShowRelatePopup(type) {
|
||||
this.relateApplicationVisible = type;
|
||||
// 是否展示关联应用弹窗
|
||||
handleIsShowRelatePopup (type) {
|
||||
this.relateApplicationVisible = type
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,8 +46,8 @@
|
|||
<script>
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
// import AddOrUpdate from './order-add-or-update'
|
||||
import {addDynamicRoute} from "@/router";
|
||||
import RelateApplication from "./bsabilityai-relate-application.vue"
|
||||
import { addDynamicRoute } from '@/router'
|
||||
import RelateApplication from './bsabilityai-relate-application.vue'
|
||||
export default {
|
||||
mixins: [mixinViewModule],
|
||||
data () {
|
||||
|
|
@ -62,7 +62,7 @@ export default {
|
|||
orderId: '',
|
||||
status: '',
|
||||
userId: '',
|
||||
type: "基础设施",
|
||||
type: '基础设施'
|
||||
},
|
||||
// 关联应用弹窗
|
||||
relateApplicationVisible: false,
|
||||
|
|
@ -75,33 +75,33 @@ export default {
|
|||
},
|
||||
components: {
|
||||
// AddOrUpdate,
|
||||
RelateApplication,
|
||||
RelateApplication
|
||||
},
|
||||
methods: {
|
||||
//重置
|
||||
resetDataList(){
|
||||
this.dataForm=this.noDataForm;
|
||||
this.page=1; // 当前页码
|
||||
this.query();
|
||||
},
|
||||
// 点击关联应用按钮
|
||||
showRelateApplication(row){
|
||||
// 重置
|
||||
resetDataList () {
|
||||
this.dataForm.orderId = ''
|
||||
this.page = 1 // 当前页码
|
||||
this.query()
|
||||
},
|
||||
// 点击关联应用按钮
|
||||
showRelateApplication (row) {
|
||||
this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
|
||||
if( res && res.data ) {
|
||||
this.relateApplicationVisible = true;
|
||||
if (res && res.data) {
|
||||
this.relateApplicationVisible = true
|
||||
this.relateInfo = {
|
||||
id: row.id,
|
||||
responseData: res.data,
|
||||
linkType: '2'
|
||||
};
|
||||
}
|
||||
}
|
||||
}).catch(() => { })
|
||||
},
|
||||
// 是否展示关联应用弹窗
|
||||
handleIsShowRelatePopup(type) {
|
||||
this.relateApplicationVisible = type;
|
||||
// 是否展示关联应用弹窗
|
||||
handleIsShowRelatePopup (type) {
|
||||
this.relateApplicationVisible = type
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,475 @@
|
|||
<template>
|
||||
<div class="ability-box">
|
||||
<div class="top">
|
||||
<div class="type">{{ type }}</div>
|
||||
<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" v-if="type==='组件服务'">
|
||||
<el-transfer v-model="selectedArray" filterable :filter-method="filterMethod" filter-placeholder="请输入名称"
|
||||
:titles="nameArray" :props="{
|
||||
key: 'id',
|
||||
label: 'name',
|
||||
}" :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()">{{
|
||||
$t("confirm")
|
||||
}}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<DisplayList :displayList="displayList" showKey="name"></DisplayList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InfrastructureModal from '../assignedScene/components/infrastructure-modal.vue'
|
||||
import DisplayList from '../assignedScene/components/display-list.vue'
|
||||
|
||||
const 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
|
||||
}
|
||||
]
|
||||
|
||||
const res = {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: {
|
||||
PageCount: '2115',
|
||||
data: sjzyArray,
|
||||
rows: '10573'
|
||||
}
|
||||
}
|
||||
|
||||
const keyObj = {
|
||||
"数据资源": {
|
||||
idKey: 'id',
|
||||
nameKey: 'name'
|
||||
},
|
||||
"组件服务": {
|
||||
idKey: 'id',
|
||||
nameKey: 'name'
|
||||
}
|
||||
}
|
||||
|
||||
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: [],
|
||||
allData: [],
|
||||
displayList: [], // 用于展示的list
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
newNum: 1,
|
||||
searchValue: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showModal (newVal) {
|
||||
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: {
|
||||
async getDataInfo (dataForm) {
|
||||
await this.getData()
|
||||
const arr = []
|
||||
const attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type)
|
||||
if (attrValue.length > 0) {
|
||||
attrValue.map(val => {
|
||||
const _obj = {
|
||||
type: val.type,
|
||||
id: val.resourceId,
|
||||
name: val.resource && val.resource.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
|
||||
}
|
||||
if (this.type === '组件服务') {
|
||||
this.$http[this.getDataParams.methods](this.getDataParams.url, {
|
||||
params: this.getDataParams.postData
|
||||
}).then(res => {
|
||||
console.log('res.data----获取列表-------->', res.data)
|
||||
if (res.data.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.transferData = []
|
||||
this.allData = [];
|
||||
(res.data.data || []).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))
|
||||
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 () {
|
||||
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.$emit('update', {
|
||||
title: this.type,
|
||||
list: this.selectedArray
|
||||
})
|
||||
},
|
||||
getDisplay (displayList) {
|
||||
this.displayList = []
|
||||
this.displayList = displayList
|
||||
},
|
||||
close () {
|
||||
this.showModal = false
|
||||
// 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 },
|
||||
mounted () {
|
||||
console.log(this.type, 'this.type')
|
||||
}
|
||||
}
|
||||
</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);
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<template>
|
||||
<div class="question-box">
|
||||
<div class="title">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div v-for="(item, index) in dataInfo" :key="index">
|
||||
<el-form-item :label="keyTextObj.nameObj.text">
|
||||
<el-input v-model="item[keyTextObj.nameObj.key]" :placeholder="`请输入${keyTextObj.nameObj.text}`"
|
||||
style="width:90%">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<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 {
|
||||
nameObj: {
|
||||
text: '问题名称',
|
||||
key: 'question'
|
||||
},
|
||||
descObj: {
|
||||
text: '问题描述',
|
||||
key: 'answer'
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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.nameObj.key]: v[this.keyTextObj.nameObj.key],
|
||||
[this.keyTextObj.descObj.key]: v[this.keyTextObj.descObj.key],
|
||||
})
|
||||
})
|
||||
} else {
|
||||
arr = []
|
||||
arr.push({
|
||||
[this.keyTextObj.nameObj.key]: '',
|
||||
[this.keyTextObj.descObj.key]: '',
|
||||
})
|
||||
}
|
||||
} else {
|
||||
arr = []
|
||||
arr.push({
|
||||
[this.keyTextObj.nameObj.key]: '',
|
||||
[this.keyTextObj.descObj.key]: '',
|
||||
})
|
||||
}
|
||||
this.dataInfo = arr;
|
||||
},
|
||||
// 新增
|
||||
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]: '',
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
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>
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
<!-- 融合服务--组合能力 -->
|
||||
<template>
|
||||
<div class="content-box">
|
||||
<div class="title">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="no-data loading-box" v-loading="loading" v-if="loading">
|
||||
</div>
|
||||
<div v-if="!loading">
|
||||
<div v-for="(item, index) in dataInfo" :key="index">
|
||||
<el-form-item label="能力类别" prop="">
|
||||
<el-select v-model="item.type" placeholder="请选择能力类别" @change="(data) => filterSelect(data, item)"
|
||||
:disabled="disabledType">
|
||||
<el-option v-for="val in typeOptions" :key="val.value" :label="val.value" :value="val.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select class="ability-input" style="margin-left: 20px;max-width:530px" v-model="item.resourceId"
|
||||
placeholder="请选择能力" filterable :disabled="disabledType">
|
||||
<el-option style="max-width:530px" v-for="val in item.abilityOptions" :key="val.id"
|
||||
:label="val.name || '--'" :value="val.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button style="margin-left:10px" @click="deleteItem(dataInfo, index)" type="danger" size="small"
|
||||
v-if="!disabledType && dataInfo.length > 1">删除
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-button style="margin-left:100px" size="small" v-if="!disabledType && index == dataInfo.length - 1"
|
||||
@click="addItem(dataInfo, 0)" type="primary">添加
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
dataForm: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '组合能力'
|
||||
},
|
||||
// 是否可编辑
|
||||
disabledType: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
typeOptions: [
|
||||
{
|
||||
value: '数据资源',
|
||||
},
|
||||
{
|
||||
value: '组件服务',
|
||||
},
|
||||
{
|
||||
value: '基础设施',
|
||||
},
|
||||
],
|
||||
dataInfo: [],
|
||||
abilityArrayCopy: [],
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataInfo: {
|
||||
handler(newVal) {
|
||||
this.dataInfo = newVal;
|
||||
let arr = newVal.map((v, index) => {
|
||||
return {
|
||||
sequence: index,
|
||||
resourceId: v.resourceId,
|
||||
}
|
||||
})
|
||||
this.$emit('update', {
|
||||
title: this.title,
|
||||
list: arr
|
||||
})
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
async getDataInfo(dataForm) {
|
||||
await this.getAbility()
|
||||
let arr = []
|
||||
let attrValue = dataForm.fuseResourceList || []
|
||||
if (attrValue.length > 0) {
|
||||
attrValue.map(v => {
|
||||
let _obj = {
|
||||
type: v.resource && v.resource.type,
|
||||
resourceId: v.resourceId,
|
||||
}
|
||||
this.filterSelect(v.resource && v.resource.type, _obj)
|
||||
arr.push(_obj)
|
||||
})
|
||||
} else {
|
||||
arr = []
|
||||
arr.push({
|
||||
type: "",
|
||||
resourceId: "",
|
||||
abilityOptions: []
|
||||
})
|
||||
}
|
||||
this.dataInfo = arr;
|
||||
this.$nextTick(() => {
|
||||
console.log(999, this.dataInfo)
|
||||
})
|
||||
},
|
||||
// 新增
|
||||
addItem(list) {
|
||||
list.push({
|
||||
type: "",
|
||||
resourceId: "",
|
||||
abilityOptions: []
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteItem(list, index) {
|
||||
list.splice(index, 1)
|
||||
},
|
||||
// 获取能力
|
||||
getAbility() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.abilityArrayCopy = []
|
||||
this.loading = true;
|
||||
this.$http.get(`/resource/list`, {}).then(({ data: res }) => {
|
||||
this.loading = false;
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.abilityArrayCopy = res.data || []
|
||||
resolve(res)
|
||||
}).catch((err) => {
|
||||
this.loading = false;
|
||||
this.$message.error(err)
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
filterSelect(type, item) {
|
||||
let arr = this.abilityArrayCopy.filter(v => v.type == type)
|
||||
let selectArray = this.dataInfo.map(v => v.resourceId) || [];
|
||||
// 过滤掉已选的
|
||||
item.abilityOptions = arr.filter(v => !selectArray.includes(v.id))
|
||||
console.log('abilityOptions------------>', item.abilityOptions);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content-box {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-box {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.ability-input {
|
||||
width: calc(100% - 300px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<template>
|
||||
<el-dialog :visible.sync="isShow" :title="childName" :close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<el-table
|
||||
border
|
||||
:data="tableData"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="主键id"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="fuseId"
|
||||
label="融合服务id"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-if="childName==='融合资源属性'"
|
||||
prop="attrType"
|
||||
label="属性类型"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-if="childName==='融合资源属性'"
|
||||
prop="attrValue"
|
||||
label="属性值"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-if="childName==='资源融合关系'"
|
||||
prop="resourceId"
|
||||
label="资源id"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-if="childName==='资源融合关系'"
|
||||
prop="sequence"
|
||||
label="资源挂载顺序"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'quill/dist/quill.snow.css'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
childName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// columns: {
|
||||
// type: Array,
|
||||
// default: function () {
|
||||
// return []
|
||||
// }
|
||||
// },
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.visible = true
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-input ::v-deep .el-input__inner {
|
||||
cursor: pointer;
|
||||
}
|
||||
.detial-form ::v-deep {
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.el-form-item__label {
|
||||
line-height: 32px;
|
||||
}
|
||||
.el-form-item__content {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.mod-sys__menu {
|
||||
.menu-list,
|
||||
.icon-list {
|
||||
.el-input__inner,
|
||||
.el-input__suffix {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&-icon-popover {
|
||||
width: 458px;
|
||||
overflow: hidden;
|
||||
}
|
||||
&-icon-inner {
|
||||
width: 478px;
|
||||
max-height: 258px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
&-icon-list {
|
||||
width: 458px;
|
||||
padding: 0;
|
||||
margin: -8px 0 0 -8px;
|
||||
> .el-button {
|
||||
padding: 8px;
|
||||
margin: 8px 0 0 8px;
|
||||
> span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -48,8 +48,6 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
onSuccess (res, file) {
|
||||
console.log('limit', this.limit)
|
||||
console.log(res, file, this.child)
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error('上传图片失败')
|
||||
}
|
||||
|
|
@ -88,10 +86,8 @@ export default {
|
|||
} else {
|
||||
this.child.note1 = arr.join(';')
|
||||
}
|
||||
console.log(this.child.note1)
|
||||
},
|
||||
onPreview (file) {
|
||||
console.log('点击预览===============>', file)
|
||||
window.open(file.response.data)
|
||||
},
|
||||
onExceed (files, fileList) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<div class='container'>
|
||||
<span class='title-style'>应用资源</span>
|
||||
<span class='page-introduction'>发布情况统计</span>
|
||||
<div>
|
||||
<span class='title-style'>应用资源</span>
|
||||
<span class='page-introduction'>发布情况统计</span>
|
||||
<button class='back-btn' @click="backBtn">返回</button>
|
||||
</div>
|
||||
|
||||
<div class='container-body'>
|
||||
<div class='container-body1'>
|
||||
<span style='font-size:18px;color;#000000;'>应用贡献组件被调用次数分布</span>
|
||||
|
|
@ -44,7 +48,7 @@
|
|||
</div>
|
||||
<div class='container-body8'>
|
||||
<span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
|
||||
<div id="main8" style="width: 300px;height:200px;"></div>
|
||||
<div id="main8" style="width: 300px;height:200px;margin-left:-20px;"></div>
|
||||
</div>
|
||||
<div class='container-body9'>
|
||||
<span style='font-size:18px;color;#000000;'>应用状态分布情况</span>
|
||||
|
|
@ -57,31 +61,216 @@
|
|||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
props:{
|
||||
tableId:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
fatherId:{
|
||||
type:Number,
|
||||
default:null,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
data2:[],
|
||||
data3:[],
|
||||
data4:[],
|
||||
data5:[],
|
||||
data6:[],
|
||||
data7:[],
|
||||
data8:[],
|
||||
data9:[],
|
||||
data10:[],
|
||||
data11:[],
|
||||
colorList:['linear-gradient(to right, rgba(82, 106, 255,0.8),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
|
||||
widthList:['90px','80px','70px','60px','50px'],
|
||||
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
|
||||
usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getDistributedList()
|
||||
this.getUsedList()
|
||||
this.getTopList()
|
||||
this.getApplicationDistribution()
|
||||
this.getFieldDistribution()
|
||||
this.getStatuesDistribution()
|
||||
},
|
||||
mounted(){
|
||||
|
||||
this.myEcharts1()
|
||||
this.myEcharts2()
|
||||
this.myEcharts3()
|
||||
this.myEcharts4()
|
||||
this.myEcharts6()
|
||||
this.myEcharts7()
|
||||
this.myEcharts8()
|
||||
this.myEcharts9()
|
||||
// this.myEcharts2()
|
||||
// this.myEcharts3()
|
||||
// this.myEcharts4()
|
||||
// this.myEcharts6()
|
||||
// this.myEcharts7()
|
||||
// this.myEcharts8()
|
||||
// this.myEcharts9()
|
||||
},
|
||||
methods:{
|
||||
// 应用贡献组件数量分布（算法、图层、开发、业务）
|
||||
getDistributedList () {
|
||||
this.$http.get('/census/center/v3/assemblerUseProjectInfo/' ,{
|
||||
params : {
|
||||
id:
|
||||
// '1522550195034857476'
|
||||
this.tableId
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.num,
|
||||
name:item.attr_value
|
||||
}
|
||||
this.data2.push(single)
|
||||
this.data5.push(single.value)
|
||||
this.data6.push(single.name)
|
||||
this.myEcharts2()
|
||||
this.myEcharts4()
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
// 应用贡献组件分别被多少应用使用
|
||||
getUsedList () {
|
||||
this.$http.get('/census/center/v3/applicationUsedCapabilityNum/' ,{
|
||||
params : {
|
||||
id:
|
||||
// '1522550195034857476'
|
||||
this.tableId
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.appNum,
|
||||
name:item.attr_value
|
||||
}
|
||||
this.data3.push(single.name)
|
||||
this.data4.push(single.value)
|
||||
console.log("2222", this.data3);
|
||||
this.myEcharts3()
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
//评分分布12345
|
||||
getTopList () {
|
||||
this.$http.get('/census/center/v3/assemblerScoreInfo/' ,{
|
||||
params : {
|
||||
id:this.tableId,
|
||||
// '1067246875800000066',
|
||||
resourceType:'应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.scoreNum,
|
||||
name:item.score
|
||||
}
|
||||
this.data8.push(single)
|
||||
this.myEcharts6()
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
//发布端应用分布情况
|
||||
getApplicationDistribution() {
|
||||
this.$http.get('/census/center/v3/applicationReleaseCapabilitySet/' ,{
|
||||
params : {
|
||||
id:
|
||||
// '1067246875800000066',
|
||||
this.tableId,
|
||||
resourceType:'应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.num,
|
||||
name:item.publisher
|
||||
}
|
||||
this.data7.push(single)
|
||||
this.myEcharts7()
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
//应用领域分布情况
|
||||
getFieldDistribution() {
|
||||
this.$http.get('/census/center/v3/applicationAreaCapabilityList/' ,{
|
||||
params : {
|
||||
id:
|
||||
// '1067246875800000066',
|
||||
this.tableId,
|
||||
resourceType:'应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.total,
|
||||
name:item.type
|
||||
}
|
||||
this.data9.push(single)
|
||||
this.myEcharts8()
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
//应用状态分布情况
|
||||
getStatuesDistribution() {
|
||||
this.$http.get('/census/center/v3/applicationStateCapabilitySet/' ,{
|
||||
params : {
|
||||
id:
|
||||
// '1067246875800000066',
|
||||
this.tableId,
|
||||
resourceType:'应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.num,
|
||||
name:item.state
|
||||
}
|
||||
this.data10.push(single)
|
||||
this.myEcharts9()
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
myEcharts1(){
|
||||
var chartDom = document.getElementById('main1');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(32, 33, 36,.7)',
|
||||
borderColor: 'rgba(32, 33, 36,0.20)',
|
||||
borderWidth: 1,
|
||||
textStyle: { // 文字提示样式
|
||||
color: '#fff',
|
||||
fontSize: '12'
|
||||
},
|
||||
axisPointer: { // 坐标轴虚线
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
bottom: '23%',
|
||||
},
|
||||
|
|
@ -98,7 +287,7 @@ export default {
|
|||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:"#ebebeb"
|
||||
color:"#f5f5f5"
|
||||
}
|
||||
},
|
||||
axisLabel: {//y轴文字的配置
|
||||
|
|
@ -133,11 +322,25 @@ export default {
|
|||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [5, 5, 5, 5, 5, 5],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
stack: '1',
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(178, 189, 255,0)' },
|
||||
// { offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: 'rgba(82, 106, 255,0)' }
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [60, 90, 50, 80],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
|
||||
stack: '1',
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -175,7 +378,7 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
|
|
@ -217,12 +420,7 @@ export default {
|
|||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '算法' },
|
||||
{ value: 735, name: '图层' },
|
||||
{ value: 580, name: '开发' },
|
||||
{ value: 484, name: '业务' },
|
||||
]
|
||||
data:this.data2
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
@ -234,12 +432,29 @@ export default {
|
|||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(32, 33, 36,.7)',
|
||||
borderColor: 'rgba(32, 33, 36,0.20)',
|
||||
borderWidth: 1,
|
||||
textStyle: { // 文字提示样式
|
||||
color: '#fff',
|
||||
fontSize: '12'
|
||||
},
|
||||
axisPointer: { // 坐标轴虚线
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
bottom: '23%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['算法', '图层', '开发', '业务'],
|
||||
data:this.data3,
|
||||
fontSize:12,
|
||||
color:['#f5f5f5'],
|
||||
axisTick:{
|
||||
show:false,//不显示坐标轴刻度线
|
||||
|
|
@ -254,8 +469,17 @@ export default {
|
|||
}
|
||||
},
|
||||
axisLabel: {//x轴文字的配置
|
||||
formatter: val => {
|
||||
let txt = val
|
||||
if (val.length > 3) {
|
||||
txt = val.substr(0, 3) + '...'
|
||||
}
|
||||
return txt
|
||||
},
|
||||
textStyle: {
|
||||
color: "#999999",//x轴内容文字颜色
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -285,11 +509,25 @@ export default {
|
|||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [60, 90, 50, 80],
|
||||
{
|
||||
data: [1, 1, 1, 1, 1, 1],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
|
||||
stack: '1',
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(178, 189, 255,0)' },
|
||||
// { offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: 'rgba(82, 106, 255,0)' }
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
data: this.data4,
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
stack: '1',
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -315,11 +553,11 @@ export default {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'],
|
||||
data:this.data6,
|
||||
color:['#f5f5f5'],
|
||||
axisTick:{
|
||||
show:false,//不显示坐标轴刻度线
|
||||
},
|
||||
axisTick: { // 坐标轴 刻度
|
||||
show: false, // 是否显示
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
color:['#f5f5f5']
|
||||
|
|
@ -362,10 +600,24 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
data: [60, 90, 50, 80, 50, 80],
|
||||
data: [1, 1, 1, 1, 1, 1],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
|
||||
stack: '1',
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(178, 189, 255,0)' },
|
||||
// { offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: 'rgba(82, 106, 255,0)' }
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
data:this.data5,
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
stack: '1',
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -374,7 +626,7 @@ export default {
|
|||
{ offset: 1, color: 'rgba(82, 106, 255,0.8)' }
|
||||
])
|
||||
},
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
|
|
@ -403,7 +655,7 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
|
|
@ -444,13 +696,7 @@ export default {
|
|||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '1分' },
|
||||
{ value: 735, name: '2分' },
|
||||
{ value: 580, name: '3分' },
|
||||
{ value: 484, name: '4分' },
|
||||
{ value: 300, name: '5分' }
|
||||
]
|
||||
data:this.data8
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
@ -480,7 +726,7 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
|
|
@ -522,175 +768,197 @@ export default {
|
|||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '应用名称1' },
|
||||
{ value: 735, name: '应用名称2' },
|
||||
{ value: 580, name: '应用名称3' },
|
||||
{ value: 484, name: '应用名称4' },
|
||||
{ value: 300, name: '应用名称5' }
|
||||
]
|
||||
data:this.data7
|
||||
// [
|
||||
// { value: 1048, name: '应用名称1' },
|
||||
// { value: 735, name: '应用名称2' },
|
||||
// { value: 580, name: '应用名称3' },
|
||||
// { value: 484, name: '应用名称4' },
|
||||
// { value: 300, name: '应用名称5' }
|
||||
// ]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts8(){
|
||||
var chartDom = document.getElementById('main8');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '40%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
fontSize:12,
|
||||
padding:[0,8,0,10]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['30%', '45%'],
|
||||
center:['19%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '应用领域1' },
|
||||
{ value: 735, name: '应用领域2' },
|
||||
{ value: 580, name: '应用领域3' },
|
||||
{ value: 484, name: '应用领域4' },
|
||||
{ value: 300, name: '应用领域5' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myEcharts8(){
|
||||
var chartDom = document.getElementById('main8');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical", type: 'scroll',
|
||||
top: '14%',
|
||||
left: '40%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `{a|${name}} {b|${p}%}`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
fontSize:12,
|
||||
rich: {
|
||||
// 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
|
||||
a: {
|
||||
// 设置文字、数学、英语这一列的样式
|
||||
width: 80,
|
||||
color: "#666666",
|
||||
fontSize: 12,
|
||||
// fontWeight: "bolder",
|
||||
},
|
||||
b: {
|
||||
// 设置10分、20分、30分这一列的样式
|
||||
width: 35,
|
||||
color: "#333",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
padding:[0,8,0,10]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['30%', '45%'],
|
||||
center:['19%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data:this.data9
|
||||
// [
|
||||
// { value: 1048, name: '应用领域1' },
|
||||
// { value: 735, name: '应用领域2' },
|
||||
// { value: 580, name: '应用领域3' },
|
||||
// { value: 484, name: '应用领域4' },
|
||||
// { value: 300, name: '应用领域5' }
|
||||
// ]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts9(){
|
||||
var chartDom = document.getElementById('main9');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '47%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
fontSize:12,
|
||||
padding:[0,8,0,10]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['30%', '45%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '应用状态1' },
|
||||
{ value: 735, name: '应用状态2' },
|
||||
{ value: 580, name: '应用状态3' },
|
||||
{ value: 484, name: '应用状态4' },
|
||||
{ value: 300, name: '应用状态5' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts9(){
|
||||
var chartDom = document.getElementById('main9');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '47%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
fontSize:12,
|
||||
padding:[0,8,0,10]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['30%', '45%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data:this.data10
|
||||
// [
|
||||
// { value: 1048, name: '应用状态1' },
|
||||
// { value: 735, name: '应用状态2' },
|
||||
// { value: 580, name: '应用状态3' },
|
||||
// { value: 484, name: '应用状态4' },
|
||||
// { value: 300, name: '应用状态5' }
|
||||
// ]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
backBtn(){
|
||||
this.$emit('closeApplication')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -698,6 +966,8 @@ export default {
|
|||
<style scoped>
|
||||
.container{
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.title-style{
|
||||
font-size: 24px;
|
||||
|
|
@ -708,6 +978,13 @@ export default {
|
|||
font-size: 18px;
|
||||
color:#666666;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.back-btn{
|
||||
background: #3e8ef7;
|
||||
border-color: rgba(101, 165, 249,0);
|
||||
color: #FFF;
|
||||
margin-left:1030px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.container-body{
|
||||
width:1300px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<div class='container'>
|
||||
<span class='title-style'>组件服务</span>
|
||||
<span class='page-introduction'>发布情况统计</span>
|
||||
<div>
|
||||
<span class='title-style'>组件服务</span>
|
||||
<span class='page-introduction'>发布情况统计</span>
|
||||
<button class='back-btn' @click="backBtn">返回</button>
|
||||
</div>
|
||||
|
||||
<div class='container-body'>
|
||||
<div class='container-body1'>
|
||||
<span style='font-size:18px;color;#000000;'>评分发布情况</span>
|
||||
|
|
@ -26,7 +30,7 @@
|
|||
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
|
||||
</div>
|
||||
<span class='num-style'>{{item.name}}</span>
|
||||
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span>
|
||||
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,7 +45,7 @@
|
|||
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
|
||||
</div>
|
||||
<span class='num-style'>{{item.name}}</span>
|
||||
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span>
|
||||
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,258 +61,383 @@
|
|||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
props:{
|
||||
tableId:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
fatherId:{
|
||||
type:Number,
|
||||
default:null,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
data1:[],
|
||||
data2: [
|
||||
// { value: 1048,name: '算法' },
|
||||
// { value: 735, name: '图层' },
|
||||
// { nums: 580, attr_value: '开发' },
|
||||
// { nums: 484, attr_value: '业务' },
|
||||
],
|
||||
data3: [
|
||||
// { value: 1048,name: '算法' },
|
||||
],
|
||||
colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
|
||||
widthList:['90px','80px','70px','60px','50px'],
|
||||
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
|
||||
usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
|
||||
applicationList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},]
|
||||
usedList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},],
|
||||
applicationList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.fatherId===1){
|
||||
this.getBeCalled()
|
||||
this.getBeApplied()
|
||||
this.getAlgorithm()
|
||||
this.getDistributed()
|
||||
this.getScoreList()
|
||||
}else{
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
mounted(){
|
||||
this.myEcharts1()
|
||||
this.myEcharts2()
|
||||
this.myEcharts3()
|
||||
|
||||
|
||||
},
|
||||
methods:{
|
||||
myEcharts1(){
|
||||
var chartDom = document.getElementById('main1');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '55%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
// 评分发布情况
|
||||
getScoreList () {
|
||||
this.$http.get('/census/center/v3/assemblerScoreInfo' ,{
|
||||
params : {
|
||||
id:this.tableId,
|
||||
resourceType:"应用资源"
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
|
||||
const single={
|
||||
value:item.scoreNum,
|
||||
name:item.score
|
||||
}
|
||||
// const newList=[]
|
||||
this.data1.push(single)
|
||||
// this.data2=newList
|
||||
this.myEcharts1()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
// 算法图层开发业务
|
||||
getAlgorithm () {
|
||||
this.$http.get('/census/center/v3/assemblerUsedInfo' ,{
|
||||
params : {
|
||||
id:this.tableId,
|
||||
resourceType:"组件服务"
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
|
||||
const single={
|
||||
value:item.nums,
|
||||
name:item.attr_value
|
||||
}
|
||||
// const newList=[]
|
||||
this.data2.push(single)
|
||||
// this.data2=newList
|
||||
this.myEcharts2()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
// 应用领域分布
|
||||
getDistributed () {
|
||||
this.$http.get('/census/center/v3/applicationAreaCapabilityList' ,{
|
||||
params : {
|
||||
id:this.tableId,
|
||||
resourceType:"应用资源"
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.total,
|
||||
name:item.type
|
||||
}
|
||||
const newList=[]
|
||||
this.data3.push(single)
|
||||
// this.data2=newList
|
||||
this.myEcharts3()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '1分' },
|
||||
{ value: 735, name: '2分' },
|
||||
{ value: 580, name: '3分' },
|
||||
{ value: 484, name: '4分' },
|
||||
{ value: 300, name: '5分' }
|
||||
// 被调用组件及数量
|
||||
getBeCalled () {
|
||||
this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
|
||||
params : {
|
||||
id:this.tableId,
|
||||
resourceType:"应用资源"
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
this.applicationList =res.data.data
|
||||
})
|
||||
},
|
||||
// 被申请组件及数量
|
||||
getBeApplied () {
|
||||
this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
|
||||
params : {
|
||||
id:this.tableId,
|
||||
resourceType:"组件服务"
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
this.applicationList =res.data.data
|
||||
})
|
||||
},
|
||||
myEcharts1(){
|
||||
var chartDom = document.getElementById('main1');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '55%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((v / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.data1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts2(){
|
||||
var chartDom = document.getElementById('main2');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
myEcharts2(){
|
||||
var chartDom = document.getElementById('main2');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '22%',
|
||||
left: '50%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '22%',
|
||||
left: '50%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '算法' },
|
||||
{ value: 735, name: '图层' },
|
||||
{ value: 580, name: '开发' },
|
||||
{ value: 484, name: '业务' },
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.data2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts3(){
|
||||
var chartDom = document.getElementById('main3');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
myEcharts3(){
|
||||
var chartDom = document.getElementById('main3');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '22%',
|
||||
left: '50%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
legend: {
|
||||
orient: "vertical", type: 'scroll',
|
||||
top: '22%',
|
||||
left: '50%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `{a|${name}} {b|${p}%}`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
rich: {
|
||||
// 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
|
||||
a: {
|
||||
// 设置文字、数学、英语这一列的样式
|
||||
width: 100,
|
||||
color: "#666666",
|
||||
fontSize: 12,
|
||||
// fontWeight: "bolder",
|
||||
},
|
||||
b: {
|
||||
// 设置10分、20分、30分这一列的样式
|
||||
width: 35,
|
||||
color: "#333",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
color: "#666666",
|
||||
backgroundColor: "transparent",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '应用领域' },
|
||||
{ value: 735, name: '应用领域2' },
|
||||
{ value: 580, name: '应用领域3' },
|
||||
{ value: 484, name: '应用领域4' },
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data:this.data3
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
backBtn(){
|
||||
this.$emit('closeChild')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container{
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.title-style{
|
||||
font-size: 24px;
|
||||
|
|
@ -320,6 +449,13 @@ export default {
|
|||
color:#666666;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.back-btn{
|
||||
background: #3e8ef7;
|
||||
border-color: rgba(101, 165, 249,0);
|
||||
color: #FFF;
|
||||
margin-left:1030px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.container-body{
|
||||
width:1300px;
|
||||
margin-top:30px;
|
||||
|
|
@ -358,6 +494,9 @@ export default {
|
|||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
margin-right: 20px;
|
||||
background-image:url("../../../assets/img/排行榜背景图.png");
|
||||
background-repeat:no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.container-body5{
|
||||
width:640px;
|
||||
|
|
@ -366,6 +505,9 @@ export default {
|
|||
padding-top:20px;
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
background-image:url("../../../assets/img/排行榜背景图.png");
|
||||
background-repeat:no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.footer{
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,554 @@
|
|||
<template>
|
||||
<div class='container'>
|
||||
<div>
|
||||
<span class='title-style'>组件服务</span>
|
||||
<span class='page-introduction'>使用情况统计</span>
|
||||
<button class='back-btn' @click="backBtn">返回</button>
|
||||
</div>
|
||||
|
||||
<div class='container-body'>
|
||||
<!-- <div class='container-body1'>
|
||||
<span style='font-size:18px;color;#000000;'>评分发布情况</span>
|
||||
<div id="main1" style="width: 400px;height:200px;"></div>
|
||||
</div> -->
|
||||
<div class='container-body2'>
|
||||
<span style='font-size:18px;color;#000000;'>使用组件数量分布</span>
|
||||
<div id="main2" style="width: 400px;height:200px;"></div>
|
||||
</div>
|
||||
<div class='container-body3'>
|
||||
<span style='font-size:18px;color;#000000;'>使用组件应用领域分布情况</span>
|
||||
<div id="main3" style="width: 400px;height:200px;"></div>
|
||||
</div>
|
||||
<div class='container-body4'>
|
||||
<div style='margin-bottom:30px'>
|
||||
<span style='font-size:18px;color;#000000;'>Top5使用组件</span>
|
||||
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
||||
</div>
|
||||
<div v-for="(item,index) in usedList" :key='index' >
|
||||
<div style='display:flex'>
|
||||
<div class='ranking-img' :style="{background:colorList[index%5],width: widthList[index%5]}">
|
||||
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
|
||||
</div>
|
||||
<span class='num-style'>{{item.name}}</span>
|
||||
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.useNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='container-body5'>
|
||||
<div style='margin-bottom:30px'>
|
||||
<span style='font-size:18px;color;#000000;'>使用组件评分</span>
|
||||
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
||||
</div>
|
||||
<div v-for="(item,index) in applicationList" :key='index' >
|
||||
<div style='display:flex'>
|
||||
<div class='ranking-img' :style="{background:colorList[index%5],width: widthList[index%5]}">
|
||||
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
|
||||
</div>
|
||||
<span class='num-style'>{{item.name}}</span>
|
||||
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.score}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='footer'>
|
||||
<div class='footer-left' ></div>
|
||||
<span style='color:#b7c2d1;font-size:16px'>到底啦</span>
|
||||
<div class='footer-right'></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
tableId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fatherId: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data1: [],
|
||||
data2: [
|
||||
// { value: 1048,name: '算法' },
|
||||
// { value: 735, name: '图层' },
|
||||
// { nums: 580, attr_value: '开发' },
|
||||
// { nums: 484, attr_value: '业务' },
|
||||
],
|
||||
data3: [
|
||||
// { value: 1048,name: '算法' },
|
||||
],
|
||||
colorList: ['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)', 'linear-gradient(to right,rgba(250, 179, 2,.6),transparent)', 'linear-gradient(to right,rgba(82, 106, 255,.6),transparent', 'linear-gradient(to right,rgba(82, 106, 255,.6),transparent)'],
|
||||
widthList: ['90px', '80px', '70px', '60px', '50px'],
|
||||
numColorList: ['#fc5656', '#ff8a00', '#f9af0a', '#808fff', '#808fff'],
|
||||
usedList: [{ name: '组件名称一', useNum: 111 }, { name: '组件名称一', useNum: 111 }, { name: '组件名称一', useNum: 111 }, { name: '组件名称四', useNum: 111 }, { name: '组件名称五', useNum: 111 }],
|
||||
applicationList: [{ name: '组件名称一', score: 111 }, { name: '组件名称一', score: 111 }, { name: '组件名称一', score: 111 }, { name: '组件名称四', score: 111 }, { name: '组件名称五', score: 111 }]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.fatherId === 1) {
|
||||
this.getBeCalled()
|
||||
this.getBeApplied()
|
||||
this.getAlgorithm()
|
||||
this.getDistributed()
|
||||
this.getScoreList()
|
||||
} else {
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 评分发布情况
|
||||
getScoreList () {
|
||||
this.$http.get('/census/center/v3/assemblerScoreInfo', {
|
||||
params: {
|
||||
id: this.tableId,
|
||||
resourceType: '应用资源'
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
let arry = []
|
||||
arry = res.data.data
|
||||
arry.forEach((item) => {
|
||||
const single = {
|
||||
value: item.scoreNum,
|
||||
name: item.score
|
||||
}
|
||||
// const newList=[]
|
||||
this.data1.push(single)
|
||||
// this.data2=newList
|
||||
this.myEcharts1()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 算法图层开发业务
|
||||
getAlgorithm () {
|
||||
this.$http.get('/census/center/v3/assemblerUsedInfo', {
|
||||
params: {
|
||||
id: this.tableId,
|
||||
resourceType: '组件服务'
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
let arry = []
|
||||
arry = res.data.data
|
||||
arry.forEach((item) => {
|
||||
const single = {
|
||||
value: item.nums,
|
||||
name: item.attr_value
|
||||
}
|
||||
// const newList=[]
|
||||
this.data2.push(single)
|
||||
// this.data2=newList
|
||||
this.myEcharts2()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 应用领域分布
|
||||
getDistributed () {
|
||||
this.$http.get('/census/center/v3/applicationUsedAreaCapabilityList', {
|
||||
params: {
|
||||
id: this.tableId,
|
||||
resourceType: '组件服务'
|
||||
}
|
||||
}).then(res => {
|
||||
let arry = []
|
||||
arry = res.data.data
|
||||
arry.forEach((item) => {
|
||||
const single = {
|
||||
value: item.total,
|
||||
name: item.type
|
||||
}
|
||||
this.data3.push(single)
|
||||
this.myEcharts3()
|
||||
})
|
||||
})
|
||||
},
|
||||
// top5使用组件
|
||||
getBeCalled () {
|
||||
this.$http.get('/census/center/v3/assemblerUseTopInfo', {
|
||||
params: {
|
||||
id: this.tableId,
|
||||
resourceType: '组件服务'
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
this.usedList = res.data.data
|
||||
})
|
||||
},
|
||||
// 使用组件评分5
|
||||
getBeApplied () {
|
||||
this.$http.get('/census/center/v3/assemblerUseScoreTopInfo', {
|
||||
params: {
|
||||
id: this.tableId,
|
||||
resourceType: '应用资源'
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
this.applicationList = res.data.data
|
||||
})
|
||||
},
|
||||
myEcharts1 () {
|
||||
var chartDom = document.getElementById('main1')
|
||||
var myChart = echarts.init(chartDom)
|
||||
var option
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '55%',
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
orient: 'vertical',
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function (name) {
|
||||
var data = option.series[0].data
|
||||
var total = 0
|
||||
var tarValue
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += Number(data[i].value)
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value
|
||||
}
|
||||
}
|
||||
var v = tarValue
|
||||
var p = Math.round(((v / total) * 100))
|
||||
return `${name} ${p}%`
|
||||
},
|
||||
itemStyle: {},
|
||||
textStyle: {
|
||||
color: '#666666',
|
||||
padding: [0, 8, 0, 18]
|
||||
}
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center: ['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.data1
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
},
|
||||
myEcharts2 () {
|
||||
var chartDom = document.getElementById('main2')
|
||||
var myChart = echarts.init(chartDom)
|
||||
var option
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '22%',
|
||||
left: '50%',
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
orient: 'vertical',
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function (name) {
|
||||
var data = option.series[0].data
|
||||
var total = 0
|
||||
var tarValue
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += Number(data[i].value)
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value
|
||||
}
|
||||
}
|
||||
var v = tarValue
|
||||
var p = Math.round(((tarValue / total) * 100))
|
||||
return `${name} ${p}%`
|
||||
},
|
||||
itemStyle: {},
|
||||
textStyle: {
|
||||
color: '#666666',
|
||||
padding: [0, 8, 0, 18]
|
||||
}
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center: ['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.data2
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
},
|
||||
myEcharts3 () {
|
||||
var chartDom = document.getElementById('main3')
|
||||
var myChart = echarts.init(chartDom)
|
||||
var option
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
type: 'scroll',
|
||||
top: '22%',
|
||||
left: '50%',
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
orient: 'vertical',
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
|
||||
// 使用回调函数
|
||||
formatter: function (name) {
|
||||
var data = option.series[0].data
|
||||
var total = 0
|
||||
var tarValue
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += Number(data[i].value)
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value
|
||||
}
|
||||
}
|
||||
// var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100))
|
||||
console.log('@@@@', tarValue, total)
|
||||
return `{a|${name}} {b|${p}%}`
|
||||
},
|
||||
itemStyle: {},
|
||||
textStyle: {
|
||||
rich: {
|
||||
// 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
|
||||
a: {
|
||||
// 设置文字、数学、英语这一列的样式
|
||||
width: 100,
|
||||
color: '#000000',
|
||||
fontSize: 12,
|
||||
fontWeight: 'bolder'
|
||||
},
|
||||
b: {
|
||||
// 设置10分、20分、30分这一列的样式
|
||||
width: 35,
|
||||
color: '#333',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
color: '#666666',
|
||||
backgroundColor: 'transparent',
|
||||
padding: [0, 8, 0, 18]
|
||||
}
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center: ['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.data3
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
},
|
||||
backBtn () {
|
||||
this.$emit('closeChild2')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.title-style {
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.page-introduction {
|
||||
font-size: 18px;
|
||||
color: #666666;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.back-btn {
|
||||
background: #3e8ef7;
|
||||
border-color: rgba(101, 165, 249, 0);
|
||||
color: #fff;
|
||||
margin-left: 1030px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.container-body {
|
||||
width: 1300px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.container-body1 {
|
||||
width: 420px;
|
||||
height: 250px;
|
||||
background-color: #ffffff;
|
||||
margin-right: 20px;
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.container-body2 {
|
||||
width: 640px;
|
||||
height: 250px;
|
||||
background-color: #ffffff;
|
||||
margin-right: 20px;
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.container-body3 {
|
||||
width: 640px;
|
||||
height: 250px;
|
||||
background-color: #ffffff;
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.container-body4 {
|
||||
width: 640px;
|
||||
height: 300px;
|
||||
background-color: #ffffff;
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
margin-right: 20px;
|
||||
background-image: url("../../../assets/img/排行榜背景图.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.container-body5 {
|
||||
width: 640px;
|
||||
height: 300px;
|
||||
background-color: #ffffff;
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
background-image: url("../../../assets/img/排行榜背景图.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
margin-top: 50px;
|
||||
margin-left: 365px;
|
||||
}
|
||||
.footer-left {
|
||||
width: 250px;
|
||||
height: 1px;
|
||||
background-color: #e0eaf8;
|
||||
margin-right: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.footer-right {
|
||||
width: 250px;
|
||||
height: 1px;
|
||||
background-color: #e0eaf8;
|
||||
margin-left: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.ranking-img {
|
||||
width: 60px;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
line-height: 26px;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 10px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.num-style {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin-left: 90px;
|
||||
width: 200px;
|
||||
margin-top: 5px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.count-style {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin-left: 400px;
|
||||
margin-top: 5px;
|
||||
color: #333333;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,27 @@
|
|||
<template>
|
||||
<div>
|
||||
<div >
|
||||
<div class='container'>
|
||||
<!-- <div class='container-left' v-if='homeIsShow'>
|
||||
<div class='left-search'>
|
||||
<div>
|
||||
<input type="text" class='input-style' placeholder="请输入部门关键词" v-model="inputTxt">
|
||||
<div class='input-search' @click='searchBtn'>
|
||||
<img src="@/assets/img/搜索.png" style='margin-top:7px;margin-left:16px' >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-tree
|
||||
class='tree-style'
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
accordion
|
||||
@node-click="handleNodeClick">
|
||||
<span slot-scope="{ node }" class='tree-text-style'>
|
||||
<img src="@/assets/img/一级图标.png" style="width: 16px; height: 16px" />
|
||||
{{ node.label }}
|
||||
</span>
|
||||
</el-tree>
|
||||
</div> -->
|
||||
<el-card shadow="never" class="aui-card--fill" v-if='homeIsShow'>
|
||||
<div class="mod-demand__bsdemand">
|
||||
<div class='top-box'>
|
||||
|
|
@ -14,60 +36,70 @@
|
|||
<span style='margin-right:30px' :class="[departmentId===1?'departmentStyle':'']" @click="handleChose(1)">
|
||||
部门发布情况
|
||||
</span>
|
||||
<span :class="[departmentId===2?'departmentStyle':'']" @click="handleChose(2)">
|
||||
<span v-if='this.choseId===0' :class="[departmentId===2?'departmentStyle':'']" @click="handleChose(2)">
|
||||
部门使用情况
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class='line-style'></div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%">
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
prop="deptName"
|
||||
label="部门名称"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="releaseNum"
|
||||
<el-table-column v-if='this.departmentId===1'
|
||||
prop="resourceNum"
|
||||
label="发布总数"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="applyNum"
|
||||
<el-table-column v-if="this.choseId===0 && this.departmentId===1 "
|
||||
prop="resourceCarNum"
|
||||
label="被申请总数"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="browseNmu"
|
||||
<el-table-column v-if="this.departmentId===1"
|
||||
prop="resourceBrowseNum"
|
||||
label="浏览总量"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="collectNum"
|
||||
<el-table-column v-if="this.departmentId===1"
|
||||
prop="resourceCollectionNum"
|
||||
label="收藏量"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="transferNum"
|
||||
<el-table-column v-if="this.choseId===0 && this.departmentId===1 "
|
||||
prop="resourceVisits"
|
||||
label="被调用总数"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="applicationNum"
|
||||
<el-table-column v-if="this.choseId===0 && this.departmentId===1 "
|
||||
prop="resourceRelNum"
|
||||
label="被应用总数"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="needApplicationNum"
|
||||
<el-table-column v-if="this.choseId===0 && this.departmentId===1 "
|
||||
prop="resourceShareNum"
|
||||
label="需申请数量"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="reductionNum"
|
||||
<el-table-column v-if="this.choseId===0 && this.departmentId===1 "
|
||||
prop="resourceShareNonNum"
|
||||
label="免批数量"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column v-if="this.departmentId===2"
|
||||
prop="resourceUseNum"
|
||||
label="使用总数"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column v-if="this.departmentId===2"
|
||||
prop="resourceCallNum"
|
||||
label="申请总数"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
min-width="92%">
|
||||
|
|
@ -78,173 +110,383 @@
|
|||
</el-table>
|
||||
<div class="block">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage4"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
:total="40">
|
||||
:total="total"
|
||||
:page-size="5"
|
||||
:current-page="currentPage"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<component-services v-if='servicesIsShow' ></component-services>
|
||||
<application-resources v-if='resourcesIsShow'></application-resources>
|
||||
|
||||
</div>
|
||||
<component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild2='closeChild2'></component-used>
|
||||
<component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services>
|
||||
<application-resources v-if='resourcesIsShow' :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import componentServices from './componentServices.vue'
|
||||
import applicationResources from './applicationResources.vue'
|
||||
import ComponentUsed from './componentUsed.vue'
|
||||
export default {
|
||||
components:{componentServices,applicationResources},
|
||||
data(){
|
||||
return{
|
||||
choseId:null,
|
||||
departmentId:1,
|
||||
currentPage4: 4,
|
||||
homeIsShow:true,
|
||||
servicesIsShow:false,
|
||||
resourcesIsShow:false,
|
||||
titleList:[
|
||||
{name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3},
|
||||
],
|
||||
tableData: [{
|
||||
name: '部门名称一',
|
||||
releaseNum: 111,
|
||||
applyNum: 222,
|
||||
browseNmu: 333,
|
||||
collectNum:444,
|
||||
transferNum:555,
|
||||
applicationNum:666,
|
||||
needApplicationNum:777,
|
||||
reductionNum:888,
|
||||
},{
|
||||
name: '部门名称一',
|
||||
releaseNum: 111,
|
||||
applyNum: 222,
|
||||
browseNmu: 333,
|
||||
collectNum:444,
|
||||
transferNum:555,
|
||||
applicationNum:666,
|
||||
needApplicationNum:777,
|
||||
reductionNum:888,
|
||||
},{
|
||||
name: '部门名称一',
|
||||
releaseNum: 111,
|
||||
applyNum: 222,
|
||||
browseNmu: 333,
|
||||
collectNum:444,
|
||||
transferNum:555,
|
||||
applicationNum:666,
|
||||
needApplicationNum:777,
|
||||
reductionNum:888,
|
||||
},{
|
||||
name: '部门名称一',
|
||||
releaseNum: 111,
|
||||
applyNum: 222,
|
||||
browseNmu: 333,
|
||||
collectNum:444,
|
||||
transferNum:555,
|
||||
applicationNum:666,
|
||||
needApplicationNum:777,
|
||||
reductionNum:888,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(row) {
|
||||
console.log(row);
|
||||
components: { componentServices, applicationResources, ComponentUsed },
|
||||
data () {
|
||||
return {
|
||||
inputTxt: '',
|
||||
tableId: '',
|
||||
fatherId: '',
|
||||
treeData: [{
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
label: '三级 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 2-2',
|
||||
children: [{
|
||||
label: '三级 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
label: '二级 3-1',
|
||||
children: [{
|
||||
label: '三级 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 3-2',
|
||||
children: [{
|
||||
label: '三级 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
total: null,
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
//选择组件
|
||||
choseBtn(index){
|
||||
this.choseId=index
|
||||
if (index===0){
|
||||
this.homeIsShow=false
|
||||
this.servicesIsShow=true
|
||||
} else if(index===1){
|
||||
this.homeIsShow=false
|
||||
this.servicesIsShow=false
|
||||
this.resourcesIsShow=true
|
||||
}
|
||||
},
|
||||
//选择发布or使用表格
|
||||
handleChose(index){
|
||||
this.departmentId=index
|
||||
},
|
||||
//翻页
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
choseId: 0,
|
||||
departmentId: 1,
|
||||
currentPage: 1,
|
||||
homeIsShow: true,
|
||||
servicesIsShow: false,
|
||||
resourcesIsShow: false,
|
||||
UsedIsShow: false,
|
||||
titleList: [
|
||||
{ name: '组件服务', key: 1 }, { name: '应用资源', key: 2 }, { name: '基础设施', key: 3 }, { name: '数据资源', key: 3 }, { name: '知识库', key: 3 }
|
||||
],
|
||||
tableData: [{ deptName: '部门', resourceNum: 222 }]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
mounted () {
|
||||
this.getFirstTree()
|
||||
},
|
||||
methods: {
|
||||
// 搜索框
|
||||
// searchBtn(){
|
||||
// this.getALLTree()
|
||||
// },
|
||||
// //树
|
||||
// handleNodeClick(data) {
|
||||
// console.log(data.name);
|
||||
// this.getTreeName(data)
|
||||
// },
|
||||
// 翻页
|
||||
handleCurrentChange (val) {
|
||||
if (this.choseId === 0) {
|
||||
this.getFirstTree(val)
|
||||
} else if (this.choseId === 1) {
|
||||
this.getReleaseTree(val)
|
||||
}
|
||||
},
|
||||
getTreeName (data) {
|
||||
this.$http.get('/census/center/v3/treeList/', {
|
||||
params: {
|
||||
keywords: data.name,
|
||||
deptId: '1067246875800000066'
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData = res.data.data
|
||||
})
|
||||
},
|
||||
// // 获取部门列表
|
||||
// getALLTree () {
|
||||
// this.$http.get('/census/center/v3/treeList/' ,{
|
||||
// params : {
|
||||
// keywords:this.inputTxt,
|
||||
// deptId:'1067246875800000066',
|
||||
// // pageNo: pageNo || 1,
|
||||
// // pageSize: 20
|
||||
// }
|
||||
// }).then(res => {
|
||||
// this.treeData =res.data.data
|
||||
// // this.tableData =res.data.data
|
||||
// })
|
||||
// },
|
||||
|
||||
// 组件服务部门发布情况
|
||||
getFirstTree (page) {
|
||||
this.$http.get('/census/center/v3/resourceReleaseDetails/', {
|
||||
params: {
|
||||
page: page || 1,
|
||||
limit: 5,
|
||||
// id:'1067246875800000066',
|
||||
resourceType: '组件服务'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData = res.data.data.list
|
||||
this.total = res.data.data.total
|
||||
})
|
||||
},
|
||||
// 组件服务部门使用情况列表
|
||||
getSecondTree () {
|
||||
this.$http.get('/census/center/v3/resourceUsedDetails/', {
|
||||
params: {
|
||||
limit: 5,
|
||||
page: 1,
|
||||
// id:'1067246875800000064',
|
||||
resourceType: '组件服务'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData = res.data.data.list
|
||||
})
|
||||
},
|
||||
// 应用资源部门发布情况列表
|
||||
getReleaseTree (page) {
|
||||
this.$http.get('/census/center/v3/resourceReleaseDetails/', {
|
||||
params: {
|
||||
limit: 5,
|
||||
page: page || 1,
|
||||
// id:'1067246875800000066',
|
||||
resourceType: '应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData = res.data.data.list
|
||||
this.total = res.data.data.total
|
||||
})
|
||||
},
|
||||
// 应用资源部门使用情况列表
|
||||
getUsedTree () {
|
||||
this.$http.get('/census/center/v3/resourceReleaseDetails/', {
|
||||
params: {
|
||||
limit: 5,
|
||||
page: 1,
|
||||
// id:'1067246875800000066',
|
||||
resourceType: '应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData = res.data.data.list
|
||||
})
|
||||
},
|
||||
handleClick (row) {
|
||||
if (this.choseId === 0) {
|
||||
if (this.departmentId === 1) {
|
||||
this.homeIsShow = false
|
||||
this.servicesIsShow = true
|
||||
this.tableId = row.deptId
|
||||
this.fatherId = 1
|
||||
} else if (this.departmentId === 2) {
|
||||
this.homeIsShow = false
|
||||
this.UsedIsShow = true
|
||||
this.tableId = row.deptId
|
||||
this.fatherId = 1
|
||||
}
|
||||
} else if (this.choseId === 1) {
|
||||
this.homeIsShow = false
|
||||
this.resourcesIsShow = true
|
||||
this.tableId = row.deptId
|
||||
this.fatherId = 2
|
||||
}
|
||||
},
|
||||
// 选择组件
|
||||
choseBtn (index) {
|
||||
this.choseId = index
|
||||
this.handleChose(1)
|
||||
},
|
||||
// choseBtn(index){
|
||||
// this.choseId=index
|
||||
// if (index===0){
|
||||
// this.homeIsShow=false
|
||||
// this.servicesIsShow=true
|
||||
// } else if(index===1){
|
||||
// this.homeIsShow=false
|
||||
// this.servicesIsShow=false
|
||||
// this.resourcesIsShow=true
|
||||
// }
|
||||
// },
|
||||
// 选择发布or使用表格
|
||||
handleChose (index) {
|
||||
this.departmentId = index
|
||||
if (index === 1) {
|
||||
if (this.choseId === 0) {
|
||||
this.getFirstTree()
|
||||
} else if (this.choseId === 1) {
|
||||
this.getReleaseTree()
|
||||
}
|
||||
} else if (index === 2) {
|
||||
if (this.choseId === 0) {
|
||||
this.getSecondTree()
|
||||
} else {
|
||||
this.getUsedTree()
|
||||
}
|
||||
}
|
||||
},
|
||||
// 翻页
|
||||
handleSizeChange (val) {
|
||||
console.log(`每页 ${val} 条`)
|
||||
},
|
||||
closeChild () {
|
||||
this.homeIsShow = true
|
||||
this.servicesIsShow = false
|
||||
this.handleCurrentChange(1)
|
||||
},
|
||||
closeChild2 () {
|
||||
this.homeIsShow = true
|
||||
this.UsedIsShow = false
|
||||
this.handleCurrentChange(1)
|
||||
},
|
||||
closeApplication () {
|
||||
this.homeIsShow = true
|
||||
this.resourcesIsShow = false
|
||||
this.handleCurrentChange(1)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.top-box{
|
||||
height:80px;
|
||||
background-color: #fafafc;
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
.container-left {
|
||||
width: 250px;
|
||||
height: 1000px;
|
||||
display: inline-block;
|
||||
// background-color: #ffffff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.left-search {
|
||||
width: 250px;
|
||||
height: 76px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.input-style {
|
||||
width: 210px;
|
||||
height: 36px;
|
||||
margin: 20px 20px;
|
||||
padding-left: 20px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid transparent;
|
||||
background-color: #f2f4fa;
|
||||
}
|
||||
input::placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #b0b3ca;
|
||||
}
|
||||
.input-search {
|
||||
width: 44px;
|
||||
height: 30px;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
border-radius: 15px;
|
||||
top: 38px;
|
||||
left: 196px;
|
||||
}
|
||||
::v-deep.tree-style {
|
||||
.el-tree-node__label {
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-tree-node__content {
|
||||
width: 240px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.top-box {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
background-color: #fafafc;
|
||||
display: inline-block;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
padding-left: 15px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.title-list-style {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.title-single {
|
||||
font-size: 14px;
|
||||
width: 90px;
|
||||
color: #666666;
|
||||
height: 24px;
|
||||
margin-left: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.box-style {
|
||||
width: 90px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.second-title {
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #979eb9;
|
||||
cursor: pointer;
|
||||
}
|
||||
.line-style {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #f5f6fa;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.aui-card--fill {
|
||||
width: 100% !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
.choseStyle {
|
||||
color: #526aff;
|
||||
border: 1px solid #526aff;
|
||||
}
|
||||
.departmentStyle {
|
||||
color: #526aff;
|
||||
}
|
||||
::v-deep .tree-text-styleJ {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
font-size:20px;
|
||||
color:#000000;
|
||||
font-weight: bold;
|
||||
padding-left:15px;
|
||||
padding-top:10px;
|
||||
}
|
||||
.title-list-style{
|
||||
display: flex;
|
||||
margin-top:10px;
|
||||
|
||||
}
|
||||
.title-single{
|
||||
font-size:14px;
|
||||
width:90px;
|
||||
color:#666666;
|
||||
height:24px;
|
||||
margin-left:10px;
|
||||
border:1px solid #cccccc;
|
||||
border-radius: 12px;
|
||||
cursor:pointer
|
||||
|
||||
}
|
||||
.box-style{
|
||||
width:90px;
|
||||
height:24px;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.second-title{
|
||||
margin-top:20px;
|
||||
font-size: 14px;
|
||||
color:#979eb9;
|
||||
cursor:pointer
|
||||
}
|
||||
.line-style{
|
||||
width:100%;
|
||||
height:1px;
|
||||
background-color:#f5f6fa;
|
||||
margin-top:15px;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
.aui-card--fill{
|
||||
width:100% !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
.choseStyle{
|
||||
color:#526aff;
|
||||
border:1px solid #526aff
|
||||
}
|
||||
.departmentStyle{
|
||||
color:#526aff
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,330 @@
|
|||
<template>
|
||||
<el-card shadow="never" class="roomBox">
|
||||
<div class="roomExamineSearch">
|
||||
<el-input
|
||||
v-model="roomName"
|
||||
style="width: 160px"
|
||||
placeholder="请输入会议室名称"
|
||||
></el-input>
|
||||
<el-select
|
||||
v-model="value"
|
||||
style="width: 160px"
|
||||
clearable
|
||||
placeholder="请选择审核状态"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" @click="searchData">查询</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-table border style="width: 100%" :data="tableData">
|
||||
<el-table-column
|
||||
label="申请人"
|
||||
prop="name"
|
||||
header-align="center"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="申请部门"
|
||||
prop="dept"
|
||||
header-align="center"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="申请会议室"
|
||||
prop="roomName"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="申请时段"
|
||||
prop="bookDate"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="申请状态"
|
||||
prop="state"
|
||||
header-align="center"
|
||||
align="center"
|
||||
:formatter="formatter"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="taskDetails(scope.row, scope.row.state)"
|
||||
>{{ scope.row.state == '1' ? '处理' : '详情' }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<el-dialog
|
||||
:title="lookData.roomName"
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
>
|
||||
<div class="modalResult" style="margin-bottom: 20px">处理结果</div>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
height: 0.01rem;
|
||||
border-top: 1px solid #ccc;
|
||||
transform: scaleY(0.5);
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
class="modalExamine"
|
||||
style="display: flex; flex-direction: column; margin-top: 20px"
|
||||
>
|
||||
<span style="margin-bottom: 20px">
|
||||
审核结果：{{ lookData.state === '2' ? '通过' : '不通过' }}
|
||||
</span>
|
||||
<span style="width: 90%; margin-bottom: 20px">
|
||||
审核意见：{{ lookData.auditViem }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="modalYuyue" style="margin-bottom: 20px">预约信息</div>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
height: 0.01rem;
|
||||
border-top: 1px solid #ccc;
|
||||
transform: scaleY(0.5);
|
||||
"
|
||||
></div>
|
||||
<div class="modalTime" style="margin-bottom: 20px">
|
||||
<div style="margin: 20px 0 20px 0">
|
||||
预约日期：{{ lookData.bookDate }}
|
||||
</div>
|
||||
<div>预约时段：{{ lookData.startTime }}-{{ lookData.endTime }}</div>
|
||||
<div
|
||||
class="modalContent"
|
||||
style="
|
||||
width: 85%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 15px 0 15px 0;
|
||||
"
|
||||
>
|
||||
<span>预约人：{{ lookData.name }}</span>
|
||||
<span>联系方式：{{ lookData.phone }}</span>
|
||||
<span>预约部门：{{ lookData.dept }}</span>
|
||||
</div>
|
||||
<div style="width: 800px; margin-bottom: 30px">
|
||||
使用事项：{{ lookData.matter }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<span>附件：</span>
|
||||
<el-button
|
||||
v-show="file != ''"
|
||||
size="mini"
|
||||
@click="downloadTemplate(file)"
|
||||
>下载</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:title="lookData.roomName"
|
||||
:visible.sync="dialogVisibleChuli"
|
||||
width="50%"
|
||||
>
|
||||
<div class="modalResult" style="margin-bottom: 10px">预约信息</div>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
height: 0.01rem;
|
||||
border-top: 1px solid #ccc;
|
||||
transform: scaleY(0.5);
|
||||
"
|
||||
></div>
|
||||
<el-row style="display: flex; margin-top: 20px">
|
||||
<el-col :span="8">预约日期：{{ lookData.bookDate }}</el-col>
|
||||
<el-col :span="8"
|
||||
>预约时段：{{ lookData.startTime }}-{{ lookData.endTime }}</el-col
|
||||
>
|
||||
</el-row>
|
||||
<div class="modalTime">
|
||||
<el-row class="modalContent" style="margin: 15px 0 15px 0">
|
||||
<el-col :span="8">申请人：{{ lookData.name }}</el-col>
|
||||
<el-col :span="8">联系方式：{{ lookData.phone }}</el-col>
|
||||
<el-col :span="8">申请部门：{{ lookData.dept }}</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-bottom: 30px">
|
||||
<el-col :span="24"> 使用事项：{{ lookData.matter }} </el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="2">审核结果：</el-col>
|
||||
<el-col :span="8" style="display: flex">
|
||||
<el-radio v-model="radio" label="2">通过</el-radio>
|
||||
<el-radio v-model="radio" label="3">不通过</el-radio>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="display: flex; margin-top: 20px">
|
||||
<el-col :span="2">审核意见：</el-col>
|
||||
<el-col :span="16">
|
||||
<el-input type="textarea" v-model="desc"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="No">取 消</el-button>
|
||||
<el-button type="primary" @click="ok">确 定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
import Cookies from 'js-cookie'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
value: '1',
|
||||
label: '待审核',
|
||||
},
|
||||
{
|
||||
value: '0',
|
||||
label: '审核完成',
|
||||
},
|
||||
],
|
||||
value: '',
|
||||
limit: 10,
|
||||
page: 1,
|
||||
total: 0,
|
||||
roomName: '',
|
||||
tableData: [],
|
||||
dialogVisible: false,
|
||||
dialogVisibleChuli: false,
|
||||
lookData: {},
|
||||
radio: '2',
|
||||
desc: '',
|
||||
id: '',
|
||||
num: '',
|
||||
file: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getSerach()
|
||||
},
|
||||
methods: {
|
||||
getSerach() {
|
||||
this.$http
|
||||
.get(
|
||||
`/bookMeeting/auditPage?page=${this.page}&limit=${this.limit}&roomName=${this.roomName}&state=${this.value}`
|
||||
)
|
||||
.then(({ data: res }) => {
|
||||
console.log(res, 7777777)
|
||||
this.tableData = res.data.list
|
||||
this.total = res.data.total
|
||||
})
|
||||
},
|
||||
downloadTemplate(file) {
|
||||
// window.SITE_CONFIG.apiURL +
|
||||
window.open(`${file}?token=` + Cookies.get('ucsToken'))
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.limit = val
|
||||
this.getSerach()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.page = val
|
||||
this.getSerach()
|
||||
},
|
||||
searchData() {
|
||||
this.getSerach()
|
||||
},
|
||||
taskDetails(item, num) {
|
||||
if (num == '1') {
|
||||
this.dialogVisibleChuli = true
|
||||
this.id = item.id
|
||||
} else {
|
||||
this.dialogVisible = true
|
||||
this.$http.get(`bookMeeting/${item.id}`).then(({ data: res }) => {
|
||||
console.log(55555555)
|
||||
this.file = res.data.file
|
||||
})
|
||||
}
|
||||
this.lookData = item
|
||||
},
|
||||
|
||||
ok() {
|
||||
let query = {
|
||||
auditViem: this.desc,
|
||||
state: this.radio,
|
||||
id: this.id,
|
||||
}
|
||||
this.$http.put('/bookMeeting', query).then(({ data: res }) => {
|
||||
this.dialogVisibleChuli = false
|
||||
this.radio = '2'
|
||||
this.desc = ''
|
||||
this.getSerach()
|
||||
})
|
||||
},
|
||||
No() {
|
||||
this.radio = '2'
|
||||
this.desc = ''
|
||||
this.dialogVisibleChuli = false
|
||||
},
|
||||
formatter(row, column) {
|
||||
return row.state == '1' ? '待审核' : '审核完成'
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.roomBox {
|
||||
min-height: calc(calc(100vh - 50px - 38px - 30px));
|
||||
.roomHeadSpan {
|
||||
font-weight: 600;
|
||||
}
|
||||
.roomExamineSearch {
|
||||
display: flex;
|
||||
width: 410px;
|
||||
margin-bottom: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.dialog-footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
// ::v-deep .el-input {
|
||||
// margin-right: 15px;
|
||||
// display: inline-block;
|
||||
// }
|
||||
// ::v-deep .el-select {
|
||||
// margin-right: 20px;
|
||||
// display: inline-block;
|
||||
// }
|
||||
</style>
|
||||
|
|
@ -64,25 +64,55 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 流程综合组件 -->
|
||||
<ren-process-multiple
|
||||
<!-- <ren-process-multiple
|
||||
v-if="processVisible"
|
||||
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
|
||||
saveFormUrl="/processForm/tabilityapplication"
|
||||
dataFormName="dataForm"
|
||||
ref="renProcessMultiple"
|
||||
></ren-process-multiple>
|
||||
></ren-process-multiple> -->
|
||||
<!-- 审批 -->
|
||||
<div class="agreeOr" v-if="taskId">
|
||||
<div>
|
||||
<el-button type="primary" @click="showDialog('同意')">同意</el-button>
|
||||
<el-button type="danger" plain @click="showDialog('拒绝')"
|
||||
>驳回</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 审批弹窗 -->
|
||||
<el-dialog
|
||||
title="审批意见"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-input v-model="input" placeholder="请输入审批意见"></el-input>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose2">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click.native="agreeOrNot($store.state.contentTabsActiveName)"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入工作流公共方法
|
||||
import processModule from '@/mixins/process-module'
|
||||
import qs from 'qs'
|
||||
import debounce from 'lodash/debounce'
|
||||
import bus from '@/views/bus.js'
|
||||
export default {
|
||||
// 注入公共方法
|
||||
mixins: [processModule],
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
// visible: false,
|
||||
// 表单属性是否可编辑
|
||||
fieldDisabled: false,
|
||||
dataForm: {
|
||||
|
|
@ -94,7 +124,13 @@ export default {
|
|||
system: '',
|
||||
scene: '',
|
||||
basis: ''
|
||||
}
|
||||
},
|
||||
// 审批
|
||||
dialogVisible: false,
|
||||
dialogType: '',
|
||||
input: '',
|
||||
visible: true,
|
||||
taskId: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
|
@ -113,6 +149,8 @@ export default {
|
|||
}
|
||||
// 初始化综合组件
|
||||
this.initProcessMultiple(callbacks)
|
||||
this.taskId = this.$route.params.taskId
|
||||
this.dataForm.taskId = this.$route.params.taskId
|
||||
},
|
||||
computed: {
|
||||
dataRule () {
|
||||
|
|
@ -164,6 +202,128 @@ export default {
|
|||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
// 审批
|
||||
showDialog (title) {
|
||||
this.dialogVisible = true
|
||||
this.dialogType = title
|
||||
},
|
||||
handleClose (done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then((_) => {
|
||||
this.input = ''
|
||||
done()
|
||||
})
|
||||
.catch((_) => {})
|
||||
},
|
||||
handleClose2 () {
|
||||
this.dialogVisible = false
|
||||
this.input = ''
|
||||
},
|
||||
// 同意与退回
|
||||
agreeOrNot: debounce(
|
||||
function (data) {
|
||||
this.dataForm.taskId = this.$route.params.taskId
|
||||
if (this.dialogType === '同意') {
|
||||
if (this.input !== '') {
|
||||
console.log('this.dataForm', this.dataForm)
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.taskId,
|
||||
comment: this.input
|
||||
})
|
||||
console.log(params)
|
||||
this.$http
|
||||
.post('/act/task/complete?' + params)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error(res.msg)
|
||||
if (this.callbacks.taskHandleErrorCallback) {
|
||||
this.callbacks.taskHandleErrorCallback(res)
|
||||
}
|
||||
return
|
||||
}
|
||||
bus.$emit('AbilityResourcesRemovedInit')
|
||||
this.$message({
|
||||
message: this.$t('prompt.success'),
|
||||
type: 'success',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.dialogVisible = false
|
||||
if (this.callbacks.taskHandleSuccessCallback) {
|
||||
this.callbacks.taskHandleSuccessCallback(res)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
this.tabRemoveHandle(data)
|
||||
} else {
|
||||
this.$message.error('请输入审批意见！')
|
||||
}
|
||||
} else if (this.dialogType === '拒绝') {
|
||||
if (this.input !== '') {
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.taskId,
|
||||
comment: this.input
|
||||
})
|
||||
this.$http
|
||||
.post('/act/task/backToFirst?', params)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error(res.msg)
|
||||
if (this.callbacks.taskHandleErrorCallback) {
|
||||
this.callbacks.taskHandleErrorCallback(res)
|
||||
}
|
||||
return
|
||||
}
|
||||
bus.$emit('AbilityResourcesRemovedInit')
|
||||
this.$message({
|
||||
message: this.$t('prompt.success'),
|
||||
type: 'success',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
if (this.callbacks.taskHandleSuccessCallback) {
|
||||
this.callbacks.taskHandleSuccessCallback(res)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.tabRemoveHandle(data)
|
||||
} else {
|
||||
this.$message.error('请输入审批意见！')
|
||||
}
|
||||
}
|
||||
},
|
||||
1000,
|
||||
{ leading: true, trailing: false }
|
||||
),
|
||||
tabRemoveHandle (tabName) {
|
||||
console.log(tabName, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
|
||||
if (tabName === 'home') {
|
||||
return false
|
||||
}
|
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
|
||||
(item) => item.name !== tabName
|
||||
)
|
||||
if (this.$store.state.contentTabs.length <= 0) {
|
||||
this.$store.state.sidebarMenuActiveName =
|
||||
this.$store.state.contentTabsActiveName = 'home'
|
||||
return false
|
||||
}
|
||||
// 当前选中tab被删除
|
||||
if (tabName === this.$store.state.contentTabsActiveName) {
|
||||
const tab =
|
||||
this.$store.state.contentTabs[
|
||||
this.$store.state.contentTabs.length - 1
|
||||
]
|
||||
this.$router.push({
|
||||
name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
|
||||
params: { ...tab.params },
|
||||
query: { ...tab.query }
|
||||
})
|
||||
}
|
||||
},
|
||||
// 启动流程出错回调
|
||||
startProcessErrorCallback (data) {
|
||||
console.log(data)
|
||||
|
|
@ -173,3 +333,12 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.agreeOr {
|
||||
& > div {
|
||||
// text-align: right;
|
||||
padding-right: 40px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,28 +7,65 @@
|
|||
@keyup.enter.native="dataFormSubmitHandle()"
|
||||
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
|
||||
>
|
||||
<el-form-item label="评论内容">
|
||||
<el-input
|
||||
v-model="dataForm.comment"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="评论内容"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-tooltip placement="bottom" :content="dataForm.comment">
|
||||
<template #title>
|
||||
<span>{{ dataForm.comment }}</span>
|
||||
</template>
|
||||
<el-form-item label="评论内容">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="dataForm.comment"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="评论内容"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-tooltip>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 流程综合组件 -->
|
||||
<ren-process-multiple
|
||||
<!-- <ren-process-multiple
|
||||
v-if="processVisible"
|
||||
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
|
||||
saveFormUrl="/processForm/tabilityapplication"
|
||||
dataFormName="dataForm"
|
||||
ref="renProcessMultiple"
|
||||
></ren-process-multiple>
|
||||
></ren-process-multiple> -->
|
||||
<!-- 审批 -->
|
||||
<div class="agreeOr" v-if="taskId">
|
||||
<div>
|
||||
<el-button type="primary" @click="showDialog('同意')">同意</el-button>
|
||||
<el-button type="danger" plain @click="showDialog('拒绝')"
|
||||
>驳回</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 审批弹窗 -->
|
||||
<el-dialog
|
||||
title="审批意见"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-input v-model="input" placeholder="请输入审批意见"></el-input>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose2">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click.native="agreeOrNot($store.state.contentTabsActiveName)"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import processModule from '@/mixins/process-module'
|
||||
import qs from 'qs'
|
||||
import debounce from 'lodash/debounce'
|
||||
import bus from '@/views/bus.js'
|
||||
|
||||
export default {
|
||||
// 注入公共方法
|
||||
mixins: [processModule],
|
||||
|
|
@ -44,12 +81,19 @@ export default {
|
|||
data () {
|
||||
return {
|
||||
// processVisible: true,
|
||||
visible: false,
|
||||
// visible: false,
|
||||
// 表单属性是否可编辑
|
||||
fieldDisabled: false,
|
||||
dataForm: [],
|
||||
id: '',
|
||||
shifoushizujian: true
|
||||
shifoushizujian: true,
|
||||
// 审批
|
||||
dialogVisible: false,
|
||||
dialogType: '',
|
||||
input: '',
|
||||
visible: true,
|
||||
taskId: ''
|
||||
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
|
|
@ -72,18 +116,141 @@ export default {
|
|||
})
|
||||
},
|
||||
getInfo (id) {
|
||||
this.$http.get('/resourceMountApply/' + id).then(({ data: res }) => {
|
||||
this.$http.get('/demandComment/' + id).then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.dataForm = res.data.resourceDTO
|
||||
if (this.dataForm.type != '应用资源') {
|
||||
this.shifoushizujian = false
|
||||
} else {
|
||||
this.shifoushizujian = true
|
||||
}
|
||||
this.dataForm = res.data
|
||||
// this.dataForm = res.data.resourceDTO
|
||||
// if (this.dataForm.type != '应用资源') {
|
||||
// this.shifoushizujian = false
|
||||
// } else {
|
||||
// this.shifoushizujian = true
|
||||
// }
|
||||
console.log('this.dataForm', this.dataForm)
|
||||
})
|
||||
},
|
||||
// 审批
|
||||
showDialog (title) {
|
||||
this.dialogVisible = true
|
||||
this.dialogType = title
|
||||
},
|
||||
handleClose (done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then((_) => {
|
||||
this.input = ''
|
||||
done()
|
||||
})
|
||||
.catch((_) => {})
|
||||
},
|
||||
handleClose2 () {
|
||||
this.dialogVisible = false
|
||||
this.input = ''
|
||||
},
|
||||
// 同意与退回
|
||||
agreeOrNot: debounce(
|
||||
function (data) {
|
||||
this.dataForm.taskId = this.$route.params.taskId
|
||||
if (this.dialogType === '同意') {
|
||||
if (this.input !== '') {
|
||||
console.log('this.dataForm', this.dataForm)
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.taskId,
|
||||
comment: this.input
|
||||
})
|
||||
console.log(params)
|
||||
this.$http
|
||||
.post('/act/task/complete?' + params)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error(res.msg)
|
||||
if (this.callbacks.taskHandleErrorCallback) {
|
||||
this.callbacks.taskHandleErrorCallback(res)
|
||||
}
|
||||
return
|
||||
}
|
||||
bus.$emit('AbilityResourcesRemovedInit')
|
||||
this.$message({
|
||||
message: this.$t('prompt.success'),
|
||||
type: 'success',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.dialogVisible = false
|
||||
if (this.callbacks.taskHandleSuccessCallback) {
|
||||
this.callbacks.taskHandleSuccessCallback(res)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
this.tabRemoveHandle(data)
|
||||
} else {
|
||||
this.$message.error('请输入审批意见！')
|
||||
}
|
||||
} else if (this.dialogType === '拒绝') {
|
||||
if (this.input !== '') {
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.taskId,
|
||||
comment: this.input
|
||||
})
|
||||
this.$http
|
||||
.post('/act/task/backToFirst?', params)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error(res.msg)
|
||||
if (this.callbacks.taskHandleErrorCallback) {
|
||||
this.callbacks.taskHandleErrorCallback(res)
|
||||
}
|
||||
return
|
||||
}
|
||||
bus.$emit('AbilityResourcesRemovedInit')
|
||||
this.$message({
|
||||
message: this.$t('prompt.success'),
|
||||
type: 'success',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
if (this.callbacks.taskHandleSuccessCallback) {
|
||||
this.callbacks.taskHandleSuccessCallback(res)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.tabRemoveHandle(data)
|
||||
} else {
|
||||
this.$message.error('请输入审批意见！')
|
||||
}
|
||||
}
|
||||
},
|
||||
1000,
|
||||
{ leading: true, trailing: false }
|
||||
),
|
||||
tabRemoveHandle (tabName) {
|
||||
console.log(tabName, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
|
||||
if (tabName === 'home') {
|
||||
return false
|
||||
}
|
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
|
||||
(item) => item.name !== tabName
|
||||
)
|
||||
if (this.$store.state.contentTabs.length <= 0) {
|
||||
this.$store.state.sidebarMenuActiveName =
|
||||
this.$store.state.contentTabsActiveName = 'home'
|
||||
return false
|
||||
}
|
||||
// 当前选中tab被删除
|
||||
if (tabName === this.$store.state.contentTabsActiveName) {
|
||||
const tab =
|
||||
this.$store.state.contentTabs[
|
||||
this.$store.state.contentTabs.length - 1
|
||||
]
|
||||
this.$router.push({
|
||||
name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
|
||||
params: { ...tab.params },
|
||||
query: { ...tab.query }
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
|
@ -101,14 +268,27 @@ export default {
|
|||
}
|
||||
// 初始化综合组件
|
||||
this.initProcessMultiple(callbacks)
|
||||
this.taskId = this.$route.params.taskId
|
||||
this.dataForm.taskId = this.$route.params.taskId
|
||||
},
|
||||
mounted () {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.kuandukuandukuandu{
|
||||
max-width:1500px;
|
||||
<style lang="scss" >
|
||||
.kuandukuandukuandu {
|
||||
max-width: 1500px;
|
||||
}
|
||||
.agreeOr {
|
||||
& > div {
|
||||
// text-align: right;
|
||||
padding-right: 40px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.wrapper {
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-textarea__inner {
|
||||
height: 100px;
|
||||
resize: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -241,180 +241,177 @@ export default {
|
|||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .big-BOX{
|
||||
background:rgba(244,245,248,0.8);
|
||||
padding:24px;
|
||||
h3{
|
||||
font-size:16px;
|
||||
color:#212121
|
||||
::v-deep .big-BOX {
|
||||
background: rgba(244, 245, 248, 0.8);
|
||||
padding: 24px;
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
}
|
||||
p{
|
||||
width:78%;
|
||||
display:flex;
|
||||
p {
|
||||
width: 78%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color:#212121;
|
||||
font-size:14px;
|
||||
span{
|
||||
display:inline-block;
|
||||
margin-left:8px;
|
||||
line-height:32px;
|
||||
span{
|
||||
font-weight:bold;
|
||||
color: #212121;
|
||||
font-size: 14px;
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
line-height: 32px;
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
p:last-of-type{
|
||||
margin-top:16px;
|
||||
width:100%;
|
||||
span{
|
||||
display:flex;
|
||||
span{
|
||||
padding:0 12px;
|
||||
height:32px;
|
||||
background:rgba(232,234,239,1);
|
||||
border-radius:2px;
|
||||
button{
|
||||
background:unset;
|
||||
border:0;
|
||||
color:#0558e1;
|
||||
font-size:14px;
|
||||
}
|
||||
p:last-of-type {
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
span {
|
||||
display: flex;
|
||||
span {
|
||||
padding: 0 12px;
|
||||
height: 32px;
|
||||
background: rgba(232, 234, 239, 1);
|
||||
border-radius: 2px;
|
||||
button {
|
||||
background: unset;
|
||||
border: 0;
|
||||
color: #0558e1;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .AbilityApply{
|
||||
margin-top:32px;
|
||||
::v-deep .AbilityApply {
|
||||
margin-top: 32px;
|
||||
|
||||
h3{
|
||||
font-size:16px;
|
||||
color:#212121;
|
||||
border-bottom:1px solid #dddee1;
|
||||
padding-bottom:10px;
|
||||
}
|
||||
ul{
|
||||
padding-left: 0px;
|
||||
li{
|
||||
list-style:none;
|
||||
padding: 30px 0;
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
border-bottom: 1px solid #dddee1;
|
||||
display:flex;
|
||||
img{
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
div{
|
||||
margin-left:16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
h2{
|
||||
margin-bottom:20px;
|
||||
font-size:20px;
|
||||
color:#000;
|
||||
display:flex;
|
||||
span{
|
||||
display:block;
|
||||
font-size:14px;
|
||||
color:#ffffff;
|
||||
margin-left:8px;
|
||||
background:rgba(0,184,230,0.8);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
ul {
|
||||
padding-left: 0px;
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 30px 0;
|
||||
border-bottom: 1px solid #dddee1;
|
||||
display: flex;
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
div {
|
||||
margin-left: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
h2 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
display: flex;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
background: rgba(0, 184, 230, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
p{
|
||||
margin-bottom:0;
|
||||
.clearfix:after {
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
.title {
|
||||
color: #0558e1;
|
||||
font-size: 18px;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.title:before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
background: #0558e1;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.clearfix:after{
|
||||
display:block;
|
||||
content:"";
|
||||
clear:both;
|
||||
}
|
||||
.title{
|
||||
color:#0558e1;
|
||||
font-size:18px;
|
||||
padding-bottom:0;
|
||||
border-bottom: 0;
|
||||
|
||||
}
|
||||
.title:before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
background: #0558e1;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
::v-deep .agreeOr>div{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
.el-input{
|
||||
::v-deep .agreeOr > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.el-input {
|
||||
margin-right: 10px;
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
}
|
||||
::v-deep .agreeOr>div:last-of-type{
|
||||
margin-top:15px;
|
||||
::v-deep .agreeOr > div:last-of-type {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.blueAll {
|
||||
::v-deep .el-radio-button__inner {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
background: #ffffff;
|
||||
color: #0558e1;
|
||||
border: 1px solid #0558e1;
|
||||
}
|
||||
.blueAll{
|
||||
::v-deep .el-radio-button__inner{
|
||||
width:80px;
|
||||
height:32px;
|
||||
line-height:32px;
|
||||
padding:0;
|
||||
border-radius:2px;
|
||||
background:#ffffff;
|
||||
color:#0558e1;
|
||||
border:1px solid #0558e1;
|
||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
box-shadow: unset !important;
|
||||
background: #0558e1;
|
||||
color: #ffffff;
|
||||
}
|
||||
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
|
||||
box-shadow: unset !important;
|
||||
background:#0558e1;
|
||||
color:#ffffff;
|
||||
}
|
||||
.inputBule {
|
||||
width: 55px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
background: #0558e1;
|
||||
color: #ffffff;
|
||||
border: 1px solid #0558e1;
|
||||
}
|
||||
.redAll {
|
||||
margin-left: 10px;
|
||||
::v-deep .el-radio-button__inner {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #e83a48;
|
||||
background: #ffffff;
|
||||
color: #e83a48;
|
||||
margin-left: 10px;
|
||||
}
|
||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
box-shadow: unset !important;
|
||||
color: #ffffff;
|
||||
background: #e83a48;
|
||||
}
|
||||
.inputBule{
|
||||
width:55px;
|
||||
height:32px;
|
||||
line-height:32px;
|
||||
padding:0;
|
||||
border-radius:2px;
|
||||
background:#0558e1;
|
||||
color:#ffffff;
|
||||
border:1px solid #0558e1;
|
||||
}
|
||||
.redAll{
|
||||
margin-left:10px;
|
||||
::v-deep .el-radio-button__inner{
|
||||
width:80px;
|
||||
height:32px;
|
||||
line-height:32px;
|
||||
padding:0;
|
||||
border-radius:2px;
|
||||
border:1px solid #e83a48;
|
||||
background:#ffffff;
|
||||
color:#e83a48;
|
||||
margin-left:10px;
|
||||
}
|
||||
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
|
||||
box-shadow: unset !important;
|
||||
color:#ffffff;
|
||||
background: #e83a48;
|
||||
}
|
||||
}
|
||||
.blueInput{
|
||||
width:55px;
|
||||
}
|
||||
}
|
||||
.blueInput {
|
||||
width: 55px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -66,21 +66,35 @@
|
|||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="!shifoushizujian">
|
||||
<el-form-item label="组件名称">
|
||||
<el-form-item label="组件名称" v-if="algorithmShow">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="组件名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用描述">
|
||||
<el-form-item label="算法名称" v-if="nameNotShow">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="算法名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用描述" v-if="algorithmShow">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="应用描述"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门联系人">
|
||||
<el-form-item label="算法描述" v-if="nameNotShow">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="算法描述"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门联系人" v-if="algorithmShow">
|
||||
<el-input
|
||||
v-model="dataForm.deptContacts"
|
||||
:disabled="fieldDisabled"
|
||||
|
|
@ -94,7 +108,7 @@
|
|||
placeholder="共享类型"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="共享方式">
|
||||
<el-form-item label="共享方式" v-if="coverageNotShow && algorithmShow">
|
||||
<el-input
|
||||
v-model="dataForm.shareMode"
|
||||
:disabled="fieldDisabled"
|
||||
|
|
@ -108,16 +122,16 @@
|
|||
placeholder="共享方条件"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="服务接口">
|
||||
<el-form-item label="服务接口" v-if="coverageNotShow">
|
||||
<el-input
|
||||
v-model="dataForm.apiUrl"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="服务接口"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="接口请求方式">
|
||||
<el-form-item label="接口请求方式" v-if="coverageNotShow">
|
||||
<el-input
|
||||
v-model="dataForm.applyCount"
|
||||
v-model="dataForm.apiMethodType"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="接口请求方式"
|
||||
></el-input>
|
||||
|
|
@ -179,7 +193,10 @@ export default {
|
|||
fieldDisabled: false,
|
||||
dataForm: [],
|
||||
id: '',
|
||||
shifoushizujian: true
|
||||
shifoushizujian: true,
|
||||
coverageNotShow: true,
|
||||
nameNotShow: false,
|
||||
algorithmShow: true
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
|
|
@ -209,6 +226,15 @@ export default {
|
|||
this.dataForm = res.data.resourceDTO
|
||||
if (this.dataForm.type != '应用资源') {
|
||||
this.shifoushizujian = false
|
||||
this.dataForm.infoList.forEach((val) => {
|
||||
if (val.attrValue === '图层服务') {
|
||||
this.coverageNotShow = false
|
||||
} else if (val.attrValue === '智能算法') {
|
||||
this.nameNotShow = true
|
||||
this.algorithmShow = false
|
||||
console.log(this.nameNotShow, 'wowowo')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.shifoushizujian = true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,549 @@
|
|||
<!-- 能力下架审批 -->
|
||||
<template>
|
||||
<div class="Ability-to-take-off-the-shelf-approval">
|
||||
<div class="Ability-to-take-off-the-shelf-approval-title">能力下架审批</div>
|
||||
<div class="basic-information">
|
||||
<div class="basic-information-title">
|
||||
<span></span><span>基本信息</span>
|
||||
</div>
|
||||
<div class="basic-information-content">
|
||||
<p>
|
||||
<span class="text">
|
||||
能力申请标题：<span> {{ dataForm.undercarriageTitle || '--' }}</span></span
|
||||
>
|
||||
<span class="text"
|
||||
>下架单号：<span>{{ dataForm.applyNumber || '--' }}</span></span
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<span class="text"
|
||||
>申请人：<span>
|
||||
{{ dataForm.undercarriageUserName || '--' }}</span
|
||||
></span
|
||||
>
|
||||
<span class="text"
|
||||
>电话：<span>{{ dataForm.undercarriageUserPhone || '--' }}</span></span
|
||||
>
|
||||
<span class="text"
|
||||
>单位：<span>{{ dataForm.deptName || deptName }}</span></span
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<span class="text"
|
||||
>能力下架原因：<span>{{ dataForm.undercarriageReason || '--' }}</span></span
|
||||
>
|
||||
</p>
|
||||
<p v-if="dataForm.undercarriageEnclosure" class="accessory">
|
||||
<span>
|
||||
申请附件：<span>
|
||||
{{ dataForm.undercarriageEnclosureName || '--'
|
||||
}}<button @click="downloadFile2(dataForm.undercarriageEnclosure)">
|
||||
预览
|
||||
</button></span
|
||||
></span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Ability-to-apply-for">
|
||||
<div class="Ability-to-apply-for-title">
|
||||
<span></span><span>申请能力</span>
|
||||
</div>
|
||||
<div class="Ability-to-apply-for-content">
|
||||
<div class="data-list">
|
||||
<div class="data-list-left"></div>
|
||||
<div class="data-list-right">
|
||||
<div class="data-list-right-titleAndDescription">
|
||||
<div class="data-list-right-title">
|
||||
<div class="title-left">
|
||||
<span>{{ dataForm.name }}</span>
|
||||
<span>{{ dataForm.type }}</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<span>能力使用状态：</span>
|
||||
<span v-if="dataList.total > 0">正在被使用</span>
|
||||
<span v-else>未使用</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list-right-description">
|
||||
{{ dataForm.name }}：{{ dataForm.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list-right-table">
|
||||
<div class="data-list-right-table-title">
|
||||
正在使用应用数：{{ dataList.total }}
|
||||
</div>
|
||||
<div class="data-list-right-table-list">
|
||||
<div class="data-list-right-table-list-tab">
|
||||
<span
|
||||
v-for="(item, index) in datalistrighttablelist"
|
||||
:key="`data-list-right-table-list-tab-${index}`"
|
||||
>
|
||||
{{ item }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="data-list-right-table-list-content"
|
||||
v-if="dataList.total > 0"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in dataList.list"
|
||||
:key="`data-list-right-table-list-content-${index}`"
|
||||
>
|
||||
<span>{{ item.applicationSystem }}</span>
|
||||
<span>{{ item.unit }}</span>
|
||||
<span>{{ item.user }}</span>
|
||||
<span>{{ item.phone }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="zanwu">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="agreeOr" v-if="taskId">
|
||||
<div>
|
||||
<!-- <el-radio-group v-model="agreeOrList" style="width:230px;">
|
||||
<el-radio-button label="同意" class="blueAll" @click="showDialog('同意')">同意</el-radio-button>
|
||||
<el-radio-button label="退回" class="redAll" @click="showDialog('退回')">退回</el-radio-button>
|
||||
</el-radio-group> -->
|
||||
<el-button type="primary" @click="showDialog('同意')">同意</el-button>
|
||||
<el-button type="danger" plain @click="showDialog('拒绝')"
|
||||
>驳回</el-button
|
||||
>
|
||||
<!-- <el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意意见"></el-input>
|
||||
<el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回意见"></el-input>
|
||||
<el-button class="inputBule" @click="agreeOrNot">提交</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 流程详情 -->
|
||||
<ren-process-detail></ren-process-detail>
|
||||
<el-dialog
|
||||
title="审批意见"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-input v-model="input" placeholder="请输入审批意见"></el-input>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose2">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click.native="agreeOrNot($store.state.contentTabsActiveName)"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入工作流公共方法
|
||||
import bus from '@/views/bus.js'
|
||||
import processModule from '@/mixins/process-module'
|
||||
import RenProcessDetail from '@/components/ren-process-detail/src/ren-process-detail'
|
||||
import debounce from 'lodash/debounce'
|
||||
import qs from 'qs'
|
||||
export default {
|
||||
components: { RenProcessDetail },
|
||||
props: {},
|
||||
mixins: [processModule],
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dialogType: '',
|
||||
input: '',
|
||||
visible: true,
|
||||
showKey: 0,
|
||||
dataForm: [],
|
||||
deptName: '',
|
||||
dataList: {},
|
||||
taskId: '',
|
||||
datalistrighttablelist: [
|
||||
'赋能应用名称',
|
||||
'应用归属部门',
|
||||
'部门联系人',
|
||||
'联系人电话'
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
computed: {},
|
||||
methods: {
|
||||
init () {
|
||||
this.getInfo(this.$router.currentRoute.params.businessKey)
|
||||
},
|
||||
getInfo (id) {
|
||||
this.$http.get('/resource/' + id).then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
console.log('this.dataForm', res.data)
|
||||
this.dataForm = res.data
|
||||
this.deptIdQuery()
|
||||
this.AbilityToPullDownPages()
|
||||
})
|
||||
},
|
||||
deptIdQuery () {
|
||||
this.$http
|
||||
.get(`/sys/dept/${this.dataForm.deptId}`)
|
||||
.then(({ data: res }) => {
|
||||
this.deptName = res.data.name
|
||||
console.log('dataFrom', this.deptName)
|
||||
})
|
||||
},
|
||||
AbilityToPullDownPages () {
|
||||
this.$http
|
||||
.get(
|
||||
'/processForm/tabilityapplication/in_use_page?resourceId=' +
|
||||
this.dataForm.id
|
||||
)
|
||||
.then((res) => {
|
||||
this.dataList = res.data.data
|
||||
})
|
||||
},
|
||||
showDialog (title) {
|
||||
this.dialogVisible = true
|
||||
this.dialogType = title
|
||||
},
|
||||
downloadFile2 (url) {
|
||||
console.log(window.SITE_CONFIG.previewUrl)
|
||||
window.open(
|
||||
window.SITE_CONFIG.previewUrl +
|
||||
'hisense_office/onlinePreview?url=' +
|
||||
btoa(encodeURI(url))
|
||||
)
|
||||
},
|
||||
handleClose (done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then((_) => {
|
||||
this.input = ''
|
||||
done()
|
||||
})
|
||||
.catch((_) => {})
|
||||
},
|
||||
handleClose2 () {
|
||||
this.dialogVisible = false
|
||||
this.input = ''
|
||||
},
|
||||
// 同意与退回
|
||||
agreeOrNot: debounce(
|
||||
function (data) {
|
||||
this.dataForm.taskId = this.$route.params.taskId
|
||||
if (this.dialogType === '同意') {
|
||||
if (this.input !== '') {
|
||||
console.log('this.dataForm', this.dataForm)
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.taskId,
|
||||
comment: this.input
|
||||
})
|
||||
console.log(params)
|
||||
this.$http
|
||||
.post('/act/task/complete?' + params)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error(res.msg)
|
||||
if (this.callbacks.taskHandleErrorCallback) {
|
||||
this.callbacks.taskHandleErrorCallback(res)
|
||||
}
|
||||
return
|
||||
}
|
||||
bus.$emit('AbilityResourcesRemovedInit')
|
||||
this.$message({
|
||||
message: this.$t('prompt.success'),
|
||||
type: 'success',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.dialogVisible = false
|
||||
if (this.callbacks.taskHandleSuccessCallback) {
|
||||
this.callbacks.taskHandleSuccessCallback(res)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
this.tabRemoveHandle(data)
|
||||
} else {
|
||||
this.$message.error('请输入审批意见！')
|
||||
}
|
||||
} else if (this.dialogType === '拒绝') {
|
||||
if (this.input !== '') {
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.taskId,
|
||||
comment: this.input
|
||||
})
|
||||
this.$http
|
||||
.post('/act/task/backToFirst?', params)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error(res.msg)
|
||||
if (this.callbacks.taskHandleErrorCallback) {
|
||||
this.callbacks.taskHandleErrorCallback(res)
|
||||
}
|
||||
return
|
||||
}
|
||||
bus.$emit('AbilityResourcesRemovedInit')
|
||||
this.$message({
|
||||
message: this.$t('prompt.success'),
|
||||
type: 'success',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
if (this.callbacks.taskHandleSuccessCallback) {
|
||||
this.callbacks.taskHandleSuccessCallback(res)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.tabRemoveHandle(data)
|
||||
} else {
|
||||
this.$message.error('请输入审批意见！')
|
||||
}
|
||||
}
|
||||
},
|
||||
1000,
|
||||
{ leading: true, trailing: false }
|
||||
),
|
||||
tabRemoveHandle (tabName) {
|
||||
console.log(tabName, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
|
||||
if (tabName === 'home') {
|
||||
return false
|
||||
}
|
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
|
||||
(item) => item.name !== tabName
|
||||
)
|
||||
if (this.$store.state.contentTabs.length <= 0) {
|
||||
this.$store.state.sidebarMenuActiveName =
|
||||
this.$store.state.contentTabsActiveName = 'home'
|
||||
return false
|
||||
}
|
||||
// 当前选中tab被删除
|
||||
if (tabName === this.$store.state.contentTabsActiveName) {
|
||||
const tab =
|
||||
this.$store.state.contentTabs[
|
||||
this.$store.state.contentTabs.length - 1
|
||||
]
|
||||
this.$router.push({
|
||||
name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
|
||||
params: { ...tab.params },
|
||||
query: { ...tab.query }
|
||||
})
|
||||
}
|
||||
},
|
||||
// 启动流程出错回调
|
||||
startProcessErrorCallback (data) {
|
||||
console.log(data)
|
||||
},
|
||||
// 任务处理出错回调
|
||||
taskHandleErrorCallback (data) {}
|
||||
},
|
||||
created () {
|
||||
this.taskId = this.$route.params.taskId
|
||||
this.dataForm.taskId = this.$route.params.taskId
|
||||
this.init()
|
||||
},
|
||||
mounted () {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.Ability-to-take-off-the-shelf-approval {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
.Ability-to-take-off-the-shelf-approval-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.basic-information {
|
||||
margin-left: 40px;
|
||||
margin-bottom: 40px;
|
||||
.basic-information-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
span:first-child {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 5px;
|
||||
background: #0087ff;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.basic-information-content {
|
||||
background: rgba(244, 245, 248, 0.8);
|
||||
padding: 24px;
|
||||
margin-left: 10px;
|
||||
p {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 33%);
|
||||
color: #212121;
|
||||
font-size: 14px;
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
line-height: 32px;
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
.accessory {
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
span {
|
||||
display: flex;
|
||||
span {
|
||||
padding: 0 12px;
|
||||
height: 32px;
|
||||
background: rgba(232, 234, 239, 1);
|
||||
border-radius: 2px;
|
||||
button {
|
||||
background: unset;
|
||||
border: 0;
|
||||
color: #0558e1;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.Ability-to-apply-for {
|
||||
margin-left: 40px;
|
||||
.Ability-to-apply-for-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px #dddee1 solid;
|
||||
padding-bottom: 10px;
|
||||
span:first-child {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 5px;
|
||||
background: #0087ff;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.Ability-to-apply-for-content {
|
||||
.data-list {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #dddee1;
|
||||
margin-bottom: 10px;
|
||||
.data-list-left {
|
||||
width: 80px;
|
||||
height: 110px;
|
||||
background: url("~@/assets/img/Capabilitydiagram.png") no-repeat;
|
||||
background-size: 80px 80px;
|
||||
background-position: center;
|
||||
margin-left: 10px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.data-list-right {
|
||||
width: calc(100% - 83px);
|
||||
margin-left: 10px;
|
||||
padding-bottom: 20px;
|
||||
border-left: 1px solid #dddee1;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
.data-list-right-titleAndDescription {
|
||||
padding-left: 10px;
|
||||
padding-right: 20px;
|
||||
border-bottom: 1px solid #dddee1;
|
||||
padding-bottom: 10px;
|
||||
.data-list-right-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.2rem;
|
||||
.title-left {
|
||||
span:first-child {
|
||||
font-weight: 600;
|
||||
}
|
||||
span:last-child {
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
padding: 0 5px;
|
||||
border-radius: 30px;
|
||||
background: #00b8e6;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-list-right-description {
|
||||
margin: 10px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.data-list-right-table {
|
||||
.data-list-right-table-title {
|
||||
margin-left: 10px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
padding: 0 5px;
|
||||
border-radius: 30px;
|
||||
background: #00b8e6;
|
||||
color: #fff;
|
||||
}
|
||||
.data-list-right-table-list {
|
||||
padding: 0 5px;
|
||||
.data-list-right-table-list-tab {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 25%);
|
||||
background: rgba(191, 191, 191, 0.1);
|
||||
span {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
.data-list-right-table-list-content {
|
||||
& > div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 25%);
|
||||
span {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
div:nth-child(even) {
|
||||
background: rgba(191, 191, 191, 0.1);
|
||||
}
|
||||
div:nth-child(odd) {
|
||||
span {
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.zanwu {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.agreeOr {
|
||||
& > div {
|
||||
text-align: right;
|
||||
padding-right: 40px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<!--
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-04-27 19:34:30
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-23 21:08:01
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-16 11:40:26
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -40,6 +40,17 @@
|
|||
align="center"
|
||||
width="50"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column label="申请标题" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
(scope.row.params && scope.row.params.tAbilityApplicationDTOList && scope.row.params.tAbilityApplicationDTOList[0].title) ||
|
||||
(scope.row.params && scope.row.params.comment) ||
|
||||
(scope.row.params && scope.row.params.userName) ||
|
||||
(scope.row.params && scope.row.params.undercarriageUserName)||
|
||||
(scope.row.params && scope.row.params.name)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="申请人" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@
|
|||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="title" label="摘要">
|
||||
<el-form-item prop="note1" label="摘要">
|
||||
<el-input
|
||||
v-model="addDataFrom.note1"
|
||||
autocomplete="off"
|
||||
|
|
@ -224,7 +224,7 @@
|
|||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="title" label="摘要">
|
||||
<el-form-item prop="note1" label="摘要">
|
||||
<el-input
|
||||
v-model="eidtDataForm.note1"
|
||||
autocomplete="off"
|
||||
|
|
@ -340,15 +340,15 @@
|
|||
<script>
|
||||
// @ is an alias to /src
|
||||
export default {
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + "/upload",
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
|
||||
// 表格筛选条件对象
|
||||
queryData: {
|
||||
keyworld: "",
|
||||
keyworld: '',
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
total: 0
|
||||
},
|
||||
// 表格数据数组对象
|
||||
tableData: [],
|
||||
|
|
@ -359,307 +359,307 @@ export default {
|
|||
// imageUrl: '',
|
||||
// 新增数据表单对象
|
||||
addDataFrom: {
|
||||
title: "",
|
||||
note1: "",
|
||||
content: "",
|
||||
imageUrl: "",
|
||||
delFlag: 0,
|
||||
title: '',
|
||||
note1: '',
|
||||
content: '',
|
||||
imageUrl: '',
|
||||
delFlag: 0
|
||||
},
|
||||
// 新增数据表单验证对象
|
||||
addDataFromRules: {
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
|
||||
content: [{ required: true, message: "请输入内容", trigger: "blur" }],
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
note1: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
|
||||
content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
|
||||
imageUrl: [
|
||||
{ required: true, message: "请输入图片地址", trigger: "blur" },
|
||||
],
|
||||
{ required: true, message: '请输入图片地址', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
editDataDialogVisabled: false,
|
||||
eidtDataForm: {
|
||||
title: "",
|
||||
note1: "",
|
||||
content: "",
|
||||
imageUrl: "",
|
||||
title: '',
|
||||
note1: '',
|
||||
content: '',
|
||||
imageUrl: ''
|
||||
},
|
||||
eidtDataFromRules: {
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
|
||||
content: [{ required: true, message: "请输入内容", trigger: "blur" }],
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
note1: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
|
||||
content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
|
||||
imageUrl: [
|
||||
{ required: true, message: "请输入图片地址", trigger: "blur" },
|
||||
],
|
||||
{ required: true, message: '请输入图片地址', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
perviewDataDialogVisabled: false,
|
||||
previewData: {
|
||||
title: "",
|
||||
note1: "",
|
||||
content: "",
|
||||
imageUrl: "",
|
||||
delFlag: 0,
|
||||
title: '',
|
||||
note1: '',
|
||||
content: '',
|
||||
imageUrl: '',
|
||||
delFlag: 0
|
||||
},
|
||||
previewImg: "", // 预览图片
|
||||
previewImg: '', // 预览图片
|
||||
deleteDataArr: [],
|
||||
dialogVisibleImg: false,
|
||||
};
|
||||
dialogVisibleImg: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTableData();
|
||||
created () {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
tableChange(val) {
|
||||
this.deleteDataArr = val.map((item) => item.id);
|
||||
console.log(this.deleteDataArr);
|
||||
tableChange (val) {
|
||||
this.deleteDataArr = val.map((item) => item.id)
|
||||
console.log(this.deleteDataArr)
|
||||
},
|
||||
restTableData() {
|
||||
this.queryData.keyworld = "";
|
||||
this.getTableData();
|
||||
restTableData () {
|
||||
this.queryData.keyworld = ''
|
||||
this.getTableData()
|
||||
},
|
||||
showView(file) {
|
||||
this.previewImg = file.url;
|
||||
this.dialogVisibleImg = true;
|
||||
showView (file) {
|
||||
this.previewImg = file.url
|
||||
this.dialogVisibleImg = true
|
||||
},
|
||||
getTableData() {
|
||||
getTableData () {
|
||||
this.$http
|
||||
.get("/workdynamics/page", {
|
||||
.get('/workdynamics/page', {
|
||||
params: {
|
||||
limit: this.queryData.pageSize,
|
||||
page: this.queryData.pageIndex,
|
||||
name: this.queryData.keyworld,
|
||||
},
|
||||
name: this.queryData.keyworld
|
||||
}
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.tableData = res.data.list;
|
||||
this.queryData.total = res.data.total;
|
||||
this.tableData = res.data.list
|
||||
this.queryData.total = res.data.total
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => {})
|
||||
},
|
||||
flashTableData() {
|
||||
this.queryData.pageIndex = 1;
|
||||
this.getTableData();
|
||||
flashTableData () {
|
||||
this.queryData.pageIndex = 1
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页大小更改
|
||||
handleSizeChange(value) {
|
||||
this.queryData.pageSize = value;
|
||||
this.getTableData();
|
||||
handleSizeChange (value) {
|
||||
this.queryData.pageSize = value
|
||||
this.getTableData()
|
||||
},
|
||||
// 当前索引更改
|
||||
handleCurrentChange(val) {
|
||||
this.queryData.pageIndex = val;
|
||||
this.getTableData();
|
||||
handleCurrentChange (val) {
|
||||
this.queryData.pageIndex = val
|
||||
this.getTableData()
|
||||
},
|
||||
// 新增数据窗口关闭事件
|
||||
addDataDialogClose() {
|
||||
this.$refs.addDataFormRef.resetFields();
|
||||
this.addDataFrom.imageUrl = "";
|
||||
this.$refs.addUpload.clearFiles();
|
||||
addDataDialogClose () {
|
||||
this.$refs.addDataFormRef.resetFields()
|
||||
this.addDataFrom.imageUrl = ''
|
||||
this.$refs.addUpload.clearFiles()
|
||||
// this.addDataFrom.imagesFiles = []
|
||||
// this.$refs.addDataFromUploadRef.clearFiles()
|
||||
},
|
||||
editDataDialogClose() {
|
||||
this.$refs.editDataFormRef.resetFields();
|
||||
this.eidtDataForm.imageUrl = "";
|
||||
this.$refs.editUpload.clearFiles();
|
||||
editDataDialogClose () {
|
||||
this.$refs.editDataFormRef.resetFields()
|
||||
this.eidtDataForm.imageUrl = ''
|
||||
this.$refs.editUpload.clearFiles()
|
||||
},
|
||||
// 追加数据
|
||||
addDataDialogConfirm() {
|
||||
addDataDialogConfirm () {
|
||||
this.$refs.addDataFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
//console.log("新增新增", this.addDataFrom);
|
||||
// console.log("新增新增", this.addDataFrom);
|
||||
this.$http
|
||||
.post("/workdynamics/insert", this.addDataFrom)
|
||||
.post('/workdynamics/insert', this.addDataFrom)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.$message.success("新增成功");
|
||||
this.addDataDialogVisabled = false;
|
||||
this.getTableData();
|
||||
this.$message.success('新增成功')
|
||||
this.addDataDialogVisabled = false
|
||||
this.getTableData()
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.$message.success("表单数据填写不完整");
|
||||
this.$message.success('表单数据填写不完整')
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
// 限定图片
|
||||
handleExceed() {
|
||||
this.$message({ type: "error", message: "最多支持一张图片上传" });
|
||||
handleExceed () {
|
||||
this.$message({ type: 'error', message: '最多支持一张图片上传' })
|
||||
},
|
||||
// 限制标题
|
||||
titleExceed(str) {
|
||||
titleExceed (str) {
|
||||
if (str.length >= 200) {
|
||||
this.$message.error("标题文字不能超过200字");
|
||||
this.$message.error('标题文字不能超过200字')
|
||||
}
|
||||
},
|
||||
// 限制内容
|
||||
contentExceed(str) {
|
||||
contentExceed (str) {
|
||||
if (str.length >= 2000) {
|
||||
this.$message.error("内容文字不能超过2000字");
|
||||
this.$message.error('内容文字不能超过2000字')
|
||||
}
|
||||
},
|
||||
//限制摘要
|
||||
noteExceed(str) {
|
||||
// 限制摘要
|
||||
noteExceed (str) {
|
||||
if (str.length >= 1000) {
|
||||
this.$message.error("摘要文字不能超过1000字");
|
||||
this.$message.error('摘要文字不能超过1000字')
|
||||
}
|
||||
},
|
||||
// 删除数据
|
||||
deleteData(row) {
|
||||
console.log(row);
|
||||
this.$confirm("此操作将删除当前数据, 是否继续?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
deleteData (row) {
|
||||
console.log(row)
|
||||
this.$confirm('此操作将删除当前数据, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
let ids = [];
|
||||
let ids = []
|
||||
if (this.deleteDataArr.length > 1) {
|
||||
ids = this.deleteDataArr;
|
||||
ids = this.deleteDataArr
|
||||
} else {
|
||||
ids = [row.id];
|
||||
ids = [row.id]
|
||||
}
|
||||
console.log(ids);
|
||||
console.log(ids)
|
||||
this.$http
|
||||
.delete("/workdynamics/delete", {
|
||||
data: ids,
|
||||
.delete('/workdynamics/delete', {
|
||||
data: ids
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
this.getTableData();
|
||||
});
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
})
|
||||
this.getTableData()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
})
|
||||
})
|
||||
},
|
||||
//预览工作动态信息
|
||||
async openPreviewData(row) {
|
||||
console.log("预览预览", row);
|
||||
// 预览工作动态信息
|
||||
async openPreviewData (row) {
|
||||
console.log('预览预览', row)
|
||||
const { data: res } = await this.$http.get(
|
||||
`workdynamics/select/${row.id}`
|
||||
);
|
||||
)
|
||||
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
|
||||
this.previewData = res.data;
|
||||
this.previewData = res.data
|
||||
|
||||
this.perviewDataDialogVisabled = true;
|
||||
this.perviewDataDialogVisabled = true
|
||||
},
|
||||
perviewDataDialogClose() {
|
||||
this.perviewDataDialogVisabled = false;
|
||||
perviewDataDialogClose () {
|
||||
this.perviewDataDialogVisabled = false
|
||||
},
|
||||
handleAvatarSuccess(res, file) {
|
||||
handleAvatarSuccess (res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
|
||||
this.addDataFrom.imageUrl = res.data;
|
||||
this.addDataFrom.imageUrl = res.data
|
||||
// this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
beforeAvatarUpload (file) {
|
||||
const isImage =
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/png";
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png'
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
|
||||
if (!isImage) {
|
||||
this.$message.error("上传头像图片只能是 JPG 格式!");
|
||||
this.$message.error('上传头像图片只能是 jpg/png 格式!')
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||||
this.$message.error('上传头像图片大小不能超过 2MB!')
|
||||
}
|
||||
return isImage && isLt2M;
|
||||
return isImage && isLt2M
|
||||
},
|
||||
eidtHandleAvatarSuccess(res, file) {
|
||||
eidtHandleAvatarSuccess (res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
|
||||
this.eidtDataForm.imageUrl = res.data;
|
||||
this.eidtDataForm.imageUrl = res.data
|
||||
// this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
editBeforeAvatarUpload(file) {
|
||||
editBeforeAvatarUpload (file) {
|
||||
const isImage =
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/png";
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png'
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
|
||||
if (!isImage) {
|
||||
this.$message.error("上传头像图片只能是 JPG 格式!");
|
||||
this.$message.error('上传头像图片只能是 jpg/png 格式!')
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||||
this.$message.error('上传头像图片大小不能超过 2MB!')
|
||||
}
|
||||
return isImage && isLt2M;
|
||||
return isImage && isLt2M
|
||||
},
|
||||
async openEditDialog(row) {
|
||||
async openEditDialog (row) {
|
||||
const { data: res } = await this.$http.get(
|
||||
`workdynamics/select/${row.id}`
|
||||
);
|
||||
)
|
||||
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
|
||||
this.eidtDataForm = res.data;
|
||||
this.eidtDataForm = res.data
|
||||
|
||||
this.editDataDialogVisabled = true;
|
||||
this.editDataDialogVisabled = true
|
||||
},
|
||||
eidtDataDialogConfirm() {
|
||||
eidtDataDialogConfirm () {
|
||||
this.$refs.editDataFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
console.log(this.eidtDataForm);
|
||||
console.log(this.eidtDataForm)
|
||||
this.$http
|
||||
.put("/workdynamics/update", this.eidtDataForm)
|
||||
.put('/workdynamics/update', this.eidtDataForm)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.$message.success("编辑成功");
|
||||
this.editDataDialogVisabled = false;
|
||||
this.getTableData();
|
||||
this.$message.success('编辑成功')
|
||||
this.editDataDialogVisabled = false
|
||||
this.getTableData()
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.$message.success("表单数据填写不完整");
|
||||
this.$message.success('表单数据填写不完整')
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
addUploadRemoveFile(file, fileList) {
|
||||
this.$refs.addUpload.clearFiles();
|
||||
this.addDataFrom.imageUrl = "";
|
||||
},
|
||||
editUploadRemoveFile(file, fileList) {
|
||||
this.$refs.editUpload.clearFiles();
|
||||
this.eidtDataForm.imageUrl = "";
|
||||
addUploadRemoveFile (file, fileList) {
|
||||
this.$refs.addUpload.clearFiles()
|
||||
this.addDataFrom.imageUrl = ''
|
||||
},
|
||||
editUploadRemoveFile (file, fileList) {
|
||||
this.$refs.editUpload.clearFiles()
|
||||
this.eidtDataForm.imageUrl = ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editDialogShowFileList() {
|
||||
editDialogShowFileList () {
|
||||
if (this.eidtDataForm.imageUrl) {
|
||||
return [
|
||||
{ name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl },
|
||||
];
|
||||
{ name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl }
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
|
|
@ -698,6 +698,7 @@ export default {
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.boxcontent {
|
||||
width: 100%;
|
||||
|
|
@ -707,6 +708,7 @@ export default {
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.preview-dialog {
|
||||
width: 100%;
|
||||
|
|
@ -728,7 +730,7 @@ export default {
|
|||
|
||||
.preview-title {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
min-height: 90px;
|
||||
//margin-top: -40px;
|
||||
border-bottom: solid #c6c6c6 1px;
|
||||
.title-text {
|
||||
|
|
@ -752,7 +754,7 @@ export default {
|
|||
}
|
||||
.preview-note {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
text-align: left;
|
||||
margin-top: 24px;
|
||||
text-indent: 2em;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
<el-form-item>
|
||||
<el-button @click="flashTableData">查询</el-button>
|
||||
<el-button @click="resetTableData">重置</el-button>
|
||||
<el-button type="primary" @click="addTask">任务新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table row-key="id" :data="dataList" border style="width: 100%;">
|
||||
|
|
@ -129,7 +130,9 @@ export default {
|
|||
|
||||
return '未知状态'
|
||||
},
|
||||
|
||||
addTask () {
|
||||
window.open('http://10.132.191.54:10219/skyline/auth/third/client/view')
|
||||
},
|
||||
// 重置
|
||||
resetTableData () {
|
||||
this.queryData.keyworld = ''
|
||||
|
|
|
|||
|
|
@ -6,130 +6,206 @@
|
|||
* @Description: 编目弹窗
|
||||
-->
|
||||
<template>
|
||||
<div class="management-pop">
|
||||
<div class="top">
|
||||
<a-button series="primary" @click="showAdd()">
|
||||
新增
|
||||
</a-button>
|
||||
<div class="management-pop">
|
||||
<div class="top">
|
||||
<a-button series="primary" @click="showAdd()"> 新增 </a-button>
|
||||
<a-popconfirm
|
||||
title="是否删除选中字段?"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
@confirm="confirmDel"
|
||||
@cancel="cancelDel"
|
||||
>
|
||||
<!-- <a-button series="primary">批量删除</a-button> -->
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
:expanded-row-keys.sync="expandedRowKeys"
|
||||
:pagination="false"
|
||||
ref="aTable"
|
||||
:key="showKey"
|
||||
:scroll="{ x: 1200, y: 500 }"
|
||||
>
|
||||
<template
|
||||
v-for="col in [
|
||||
'name',
|
||||
'isAttr',
|
||||
'isLinkToDic',
|
||||
'linkValue',
|
||||
'isFilterCriteria',
|
||||
'type',
|
||||
'xh',
|
||||
'operation'
|
||||
]"
|
||||
:slot="col"
|
||||
slot-scope="text, record, index"
|
||||
class="text"
|
||||
>
|
||||
<div :key="col" style="display: inline-block" v-if="col === 'name'">
|
||||
<a-input
|
||||
v-if="record.editable"
|
||||
style="margin: -5px 0"
|
||||
:value="text"
|
||||
@change="(e) => handleChange(e.target.value, record.key, col)"
|
||||
/>
|
||||
<template v-else>
|
||||
{{ text }}
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
:key="col"
|
||||
style="display: inline-block"
|
||||
v-else-if="col === 'isAttr'"
|
||||
>
|
||||
<a-switch
|
||||
v-if="record.editable && !record.children"
|
||||
default-checked
|
||||
@change="isAttrOnChange"
|
||||
:checked="text"
|
||||
/>
|
||||
<template v-else>
|
||||
<a-switch default-checked :disabled="disabled" :checked="text" />
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
:key="col"
|
||||
style="display: inline-block"
|
||||
v-else-if="col === 'isLinkToDic'"
|
||||
>
|
||||
<a-switch
|
||||
v-if="record.editable && record.isAttr"
|
||||
default-checked
|
||||
@change="isLinkToDicOnChange"
|
||||
:checked="text"
|
||||
/>
|
||||
<template v-else>
|
||||
<a-switch default-checked :disabled="disabled" :checked="text" />
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
:key="col"
|
||||
style="display: inline-block"
|
||||
v-else-if="col === 'linkValue'"
|
||||
>
|
||||
<a-select
|
||||
:defaultValue="text"
|
||||
style="width: 150px"
|
||||
@change="linkValueHandleChange"
|
||||
:disabled="
|
||||
record.editable && record.isLinkToDic ? !disabled : disabled
|
||||
"
|
||||
>
|
||||
<a-select-option :value="val.id" v-for="val in zdList" :key="val">
|
||||
{{ val.dictName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div
|
||||
:key="col"
|
||||
style="display: inline-block"
|
||||
v-else-if="col === 'isFilterCriteria'"
|
||||
>
|
||||
<a-switch
|
||||
v-if="record.editable && record.linkValue"
|
||||
default-checked
|
||||
@change="isFilterCriteriaOnChange"
|
||||
:checked="text"
|
||||
/>
|
||||
<template v-else>
|
||||
<a-switch default-checked :disabled="disabled" :checked="text" />
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
:key="col"
|
||||
style="display: inline-block"
|
||||
v-else-if="col === 'type'"
|
||||
>
|
||||
<a-select
|
||||
:defaultValue="text"
|
||||
style="width: 150px"
|
||||
@change="typeHandleChange"
|
||||
:disabled="
|
||||
record.editable && !record.children ? !disabled : disabled
|
||||
"
|
||||
>
|
||||
<a-select-option
|
||||
:value="val.dictValue"
|
||||
v-for="val in fieldTypeList"
|
||||
:key="val"
|
||||
>
|
||||
{{ val.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div :key="col" style="display: inline-block" v-else-if="col === 'xh'">
|
||||
<a-input
|
||||
v-if="record.editable"
|
||||
style="margin: -5px 0"
|
||||
:value="text"
|
||||
@change="(e) => handleChange(e.target.value, record.key, col)"
|
||||
/>
|
||||
<template v-else>
|
||||
{{ text }}
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
:key="col"
|
||||
class="editable-row-operations"
|
||||
v-else-if="col === 'operation'"
|
||||
>
|
||||
<span v-if="record.editable">
|
||||
<a @click="() => save(record.key)">保存</a>
|
||||
<a-popconfirm
|
||||
title="是否删除选中字段?"
|
||||
title="是否取消修改?"
|
||||
@confirm="() => cancel(record.key)"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
@confirm="confirmDel"
|
||||
>
|
||||
<a>取消</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
<span v-else>
|
||||
<a
|
||||
:disabled="editingKey !== ''"
|
||||
@click="() => add(record.id, record.children)"
|
||||
v-if="!record.isAttr && record.cengji <= 3"
|
||||
>新增</a
|
||||
>
|
||||
<a :disabled="editingKey !== ''" @click="() => edit(record.key)"
|
||||
>修改</a
|
||||
>
|
||||
<a-popconfirm
|
||||
title="是否确定删除?"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
@confirm="del(record)"
|
||||
@cancel="cancelDel"
|
||||
>
|
||||
<!-- <a-button series="primary">批量删除</a-button> -->
|
||||
</a-popconfirm>
|
||||
<a :disabled="editingKey !== ''">删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
:expanded-row-keys.sync="expandedRowKeys"
|
||||
:pagination='false'
|
||||
ref="aTable"
|
||||
:key="showKey"
|
||||
:scroll="{ x: 1200, y: 500 }"
|
||||
>
|
||||
<template
|
||||
v-for="col in ['name', 'isAttr', 'isLinkToDic', 'linkValue', 'isFilterCriteria', 'type', 'xh', 'operation']"
|
||||
:slot="col"
|
||||
slot-scope="text, record, index"
|
||||
class="text"
|
||||
>
|
||||
<div :key="col" style="display: inline-block;" v-if="col==='name'">
|
||||
<a-input
|
||||
v-if="record.editable"
|
||||
style="margin: -5px 0"
|
||||
:value="text"
|
||||
@change="e => handleChange(e.target.value, record.key, col)"
|
||||
/>
|
||||
<template v-else>
|
||||
{{ text }}
|
||||
</template>
|
||||
</div>
|
||||
<div :key="col" style="display: inline-block;" v-else-if="col==='isAttr'">
|
||||
<a-switch v-if="record.editable && !record.children" default-checked @change="isAttrOnChange" :checked="text" />
|
||||
<template v-else>
|
||||
<a-switch default-checked :disabled='disabled' :checked="text" />
|
||||
</template>
|
||||
</div>
|
||||
<div :key="col" style="display: inline-block;" v-else-if="col==='isLinkToDic'">
|
||||
<a-switch v-if="record.editable && record.isAttr" default-checked @change="isLinkToDicOnChange" :checked="text" />
|
||||
<template v-else>
|
||||
<a-switch default-checked :disabled='disabled' :checked="text" />
|
||||
</template>
|
||||
</div>
|
||||
<div :key="col" style="display: inline-block;" v-else-if="col==='linkValue'">
|
||||
<a-select :defaultValue="text" style="width: 150px" @change="linkValueHandleChange" :disabled='(record.editable && record.isLinkToDic)?!disabled:disabled'>
|
||||
<a-select-option :value="val.id" v-for="val in zdList" :key="val">
|
||||
{{val.dictName}}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div :key="col" style="display: inline-block;" v-else-if="col==='isFilterCriteria'">
|
||||
<a-switch v-if="record.editable && record.linkValue" default-checked @change="isFilterCriteriaOnChange" :checked="text" />
|
||||
<template v-else>
|
||||
<a-switch default-checked :disabled='disabled' :checked="text" />
|
||||
</template>
|
||||
</div>
|
||||
<div :key="col" style="display: inline-block;" v-else-if="col==='type'">
|
||||
<a-select :defaultValue="text" style="width: 150px" @change="typeHandleChange" :disabled='(record.editable && !record.children)?!disabled:disabled'>
|
||||
<a-select-option :value="val.dictValue" v-for="val in fieldTypeList" :key="val">
|
||||
{{val.dictLabel}}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div :key="col" style="display: inline-block;" v-else-if="col==='xh'">
|
||||
<a-input
|
||||
v-if="record.editable"
|
||||
style="margin: -5px 0"
|
||||
:value="text"
|
||||
@change="e => handleChange(e.target.value, record.key, col)"
|
||||
/>
|
||||
<template v-else>
|
||||
{{ text }}
|
||||
</template>
|
||||
</div>
|
||||
<div :key="col" class="editable-row-operations" v-else-if="col==='operation'">
|
||||
<span v-if="record.editable">
|
||||
<a @click="() => save(record.key)">保存</a>
|
||||
<a-popconfirm title="是否取消修改?" @confirm="() => cancel(record.key)" okText='是' cancelText='否'>
|
||||
<a>取消</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
<span v-else>
|
||||
<a :disabled="editingKey !== ''" @click="() => add(record.id,record.children)" v-if="!record.isAttr&&record.cengji<=3">新增</a>
|
||||
<a :disabled="editingKey !== ''" @click="() => edit(record.key)">修改</a>
|
||||
<a-popconfirm
|
||||
title="是否确定删除?"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
@confirm="del(record)"
|
||||
@cancel="cancelDel"
|
||||
>
|
||||
<a :disabled="editingKey !== ''">删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-modal
|
||||
:visible="visible"
|
||||
style="margin-top: 200px"
|
||||
title="新增编目"
|
||||
okText="新增"
|
||||
cancelText="取消"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
字段名：
|
||||
<a-input
|
||||
style="width: 80%"
|
||||
placeholder="请输入字段名"
|
||||
v-model="nameTxt"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-modal
|
||||
:visible="visible"
|
||||
style="margin-top: 200px"
|
||||
title="新增编目"
|
||||
okText="新增"
|
||||
cancelText="取消"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
字段名：
|
||||
<a-input
|
||||
style="width: 80%"
|
||||
placeholder="请输入字段名"
|
||||
v-model="nameTxt"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
|
|
@ -184,9 +260,7 @@ const columns = [
|
|||
]
|
||||
const data = []
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
components: {},
|
||||
props: {
|
||||
showItem: {
|
||||
type: Object,
|
||||
|
|
@ -198,7 +272,7 @@ export default {
|
|||
}
|
||||
},
|
||||
data () {
|
||||
this.cacheData = data.map(item => ({ ...item }))
|
||||
this.cacheData = data.map((item) => ({ ...item }))
|
||||
return {
|
||||
time: true,
|
||||
showKey: 0,
|
||||
|
|
@ -217,19 +291,27 @@ export default {
|
|||
editingKey: '',
|
||||
rowSelection: {
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
|
||||
console.log(
|
||||
`selectedRowKeys: ${selectedRowKeys}`,
|
||||
'selectedRows: ',
|
||||
selectedRows
|
||||
)
|
||||
this.delList = []
|
||||
if (selectedRows) {
|
||||
selectedRows.forEach((val) => {
|
||||
this.delList.push(val.key)
|
||||
})
|
||||
}
|
||||
console.log('delList================>', this.expandedRowKeys, this.delList)
|
||||
console.log(
|
||||
'delList================>',
|
||||
this.expandedRowKeys,
|
||||
this.delList
|
||||
)
|
||||
},
|
||||
onSelect: (record, selected, selectedRows) => {
|
||||
console.log(record, selected, selectedRows)
|
||||
if (record.children) {
|
||||
record.children.forEach(item => {
|
||||
record.children.forEach((item) => {
|
||||
this.delList.push(item.key)
|
||||
})
|
||||
}
|
||||
|
|
@ -258,81 +340,16 @@ export default {
|
|||
},
|
||||
// 查询所有编目
|
||||
getCategoryTree () {
|
||||
this.$http.get('/category/getCategoryTree').then(res => {
|
||||
console.log(res.data.data, this.index)
|
||||
this.$http.get('/category/getCategoryTree').then((res) => {
|
||||
res.data.data.map((item, indexFather) => {
|
||||
if (item.id === this.showItem.id) {
|
||||
this.index = indexFather
|
||||
}
|
||||
})
|
||||
this.data = []
|
||||
if (res.data.data[this.index].children) {
|
||||
res.data.data[this.index].children.forEach(val => {
|
||||
res.data.data[this.index].children.forEach((val) => {
|
||||
this.initData(val, this.cengji)
|
||||
// if (val.children) {
|
||||
// if (val.children.length === 0) {
|
||||
// delete val.children
|
||||
// } else {
|
||||
// val.children.forEach(item => {
|
||||
// item.key = item.id
|
||||
// item.cengji = '2'
|
||||
// console.log(item)
|
||||
// if (item.children && item.children.length === 0) {
|
||||
// delete item.children
|
||||
// } else if (item.children) {
|
||||
// item.children.forEach(child => {
|
||||
// child.key = child.id
|
||||
// child.cengji = '3'
|
||||
// if (child.children && child.children.length === 0) {
|
||||
// delete child.children
|
||||
// }
|
||||
// if (child.isAttr === 'true') {
|
||||
// child.isAttr = true
|
||||
// } else if (child.isAttr === 'false') {
|
||||
// child.isAttr = false
|
||||
// }
|
||||
// if (child.isFilterCriteria === 'true') {
|
||||
// child.isFilterCriteria = true
|
||||
// } else if (child.isFilterCriteria === 'false') {
|
||||
// child.isFilterCriteria = false
|
||||
// }
|
||||
// if (child.isLinkToDic === 'true') {
|
||||
// child.isLinkToDic = true
|
||||
// } else if (child.isLinkToDic === 'false') {
|
||||
// child.isLinkToDic = false
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// if (item.isAttr === 'true') {
|
||||
// item.isAttr = true
|
||||
// } else if (item.isAttr === 'false') {
|
||||
// item.isAttr = false
|
||||
// }
|
||||
// if (item.isFilterCriteria === 'true') {
|
||||
// item.isFilterCriteria = true
|
||||
// } else if (item.isFilterCriteria === 'false') {
|
||||
// item.isFilterCriteria = false
|
||||
// }
|
||||
// if (item.isLinkToDic === 'true') {
|
||||
// item.isLinkToDic = true
|
||||
// } else if (item.isLinkToDic === 'false') {
|
||||
// item.isLinkToDic = false
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// val.key = val.id
|
||||
// val.cengji = '1'
|
||||
// if (val.isAttr === 'true') {
|
||||
// val.isAttr = true
|
||||
// } else if (val.isAttr === 'false') {
|
||||
// val.isAttr = false
|
||||
// }
|
||||
// if (val.isFilterCriteria === 'true') {
|
||||
// val.isFilterCriteria = true
|
||||
// } else if (val.isFilterCriteria === 'false') {
|
||||
// val.isFilterCriteria = false
|
||||
// }
|
||||
// if (val.isLinkToDic === 'true') {
|
||||
// val.isLinkToDic = true
|
||||
// } else if (val.isLinkToDic === 'false') {
|
||||
// val.isLinkToDic = false
|
||||
// }
|
||||
})
|
||||
this.data = res.data.data[this.index].children
|
||||
console.log('data======================>', this.data)
|
||||
|
|
@ -365,7 +382,7 @@ export default {
|
|||
delete data.children
|
||||
} else {
|
||||
cengji++
|
||||
data.children.forEach(item => {
|
||||
data.children.forEach((item) => {
|
||||
this.initData(item, cengji)
|
||||
})
|
||||
}
|
||||
|
|
@ -373,17 +390,21 @@ export default {
|
|||
},
|
||||
// 查询所有字典
|
||||
selectZd () {
|
||||
this.$http.get('/sys/dict/type/page?limit=10000&page=1').then(res => {
|
||||
this.$http.get('/sys/dict/type/page?limit=10000&page=1').then((res) => {
|
||||
this.zdList = res.data.data.list
|
||||
console.log(this.zdList)
|
||||
})
|
||||
},
|
||||
// 查询表单类型字典
|
||||
selectFieldType () {
|
||||
this.$http.get('/sys/dict/data/page?limit=10000&page=1&dictTypeId=1531163741457014785').then(res => {
|
||||
this.fieldTypeList = res.data.data.list
|
||||
console.log(this.fieldTypeList)
|
||||
})
|
||||
this.$http
|
||||
.get(
|
||||
'/sys/dict/data/page?limit=10000&page=1&dictTypeId=1531163741457014785'
|
||||
)
|
||||
.then((res) => {
|
||||
this.fieldTypeList = res.data.data.list
|
||||
console.log(this.fieldTypeList)
|
||||
})
|
||||
},
|
||||
// 新增弹窗显示
|
||||
showAdd () {
|
||||
|
|
@ -408,39 +429,42 @@ export default {
|
|||
// 新增编目
|
||||
handleOk () {
|
||||
if (this.nameTxt) {
|
||||
this.$http.post('/category/insert', {
|
||||
isAttr: true,
|
||||
isFilterCriteria: false,
|
||||
isLinkToDic: false,
|
||||
linkValue: '',
|
||||
name: this.nameTxt,
|
||||
pid: this.pid,
|
||||
rootCategory: this.rootCategory,
|
||||
type: 'input',
|
||||
xh: this.px || this.data.length + 1
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
this.visible = false
|
||||
this.nameTxt = ''
|
||||
this.pid = this.showItem.id
|
||||
this.init()
|
||||
})
|
||||
this.$http
|
||||
.post('/category/insert', {
|
||||
isAttr: true,
|
||||
isFilterCriteria: false,
|
||||
isLinkToDic: false,
|
||||
linkValue: '',
|
||||
name: this.nameTxt,
|
||||
pid: this.pid,
|
||||
rootCategory: this.rootCategory,
|
||||
type: 'input',
|
||||
xh: this.px || this.data.length + 1
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res)
|
||||
this.visible = false
|
||||
this.nameTxt = ''
|
||||
this.pid = this.showItem.id
|
||||
this.init()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 批量删除
|
||||
confirmDel () {
|
||||
this.$http.post('/category/deleteById', { ids: this.delList }).then(res => {
|
||||
console.log(res)
|
||||
this.init()
|
||||
})
|
||||
this.$http
|
||||
.post('/category/deleteById', { ids: this.delList })
|
||||
.then((res) => {
|
||||
console.log(res)
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
// 取消修改
|
||||
cancelDel () {
|
||||
},
|
||||
cancelDel () {},
|
||||
handleChange (value, key, column) {
|
||||
const newData = [...this.data]
|
||||
this.editData = {}
|
||||
newData.forEach(val => {
|
||||
newData.forEach((val) => {
|
||||
this.handleChangeFor(val, key)
|
||||
})
|
||||
if (this.editData) {
|
||||
|
|
@ -454,7 +478,7 @@ export default {
|
|||
this.editData = val
|
||||
} else {
|
||||
if (val.children) {
|
||||
val.children.forEach(item => {
|
||||
val.children.forEach((item) => {
|
||||
this.handleChangeFor(item, key)
|
||||
})
|
||||
}
|
||||
|
|
@ -495,7 +519,7 @@ export default {
|
|||
}
|
||||
},
|
||||
editFor (data, key) {
|
||||
data.forEach(val => {
|
||||
data.forEach((val) => {
|
||||
if (val.key === key) {
|
||||
this.editData = val
|
||||
} else {
|
||||
|
|
@ -515,7 +539,7 @@ export default {
|
|||
})
|
||||
} else {
|
||||
this.flag = false
|
||||
this.$http.post('/category/update', this.editData).then(res => {
|
||||
this.$http.post('/category/update', this.editData).then((res) => {
|
||||
console.log(res)
|
||||
this.editingKey = ''
|
||||
this.init()
|
||||
|
|
@ -586,12 +610,12 @@ export default {
|
|||
// }
|
||||
// })
|
||||
}
|
||||
this.$http.post('/category/deleteById', { ids: arr }).then(res => {
|
||||
this.$http.post('/category/deleteById', { ids: arr }).then((res) => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
delFor (data, arr) {
|
||||
data.forEach(val => {
|
||||
data.forEach((val) => {
|
||||
arr.push(val.id)
|
||||
if (val.children) {
|
||||
this.delFor(val.children, arr)
|
||||
|
|
@ -601,7 +625,7 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,9 @@
|
|||
<div
|
||||
class="resource-detail-wrap"
|
||||
:style="{
|
||||
backgroundImage: `url(${topicCardBgImg(slotProps.item.positionNum)})`,
|
||||
backgroundImage: `url(${topicCardBgImg(
|
||||
slotProps.item.positionNum
|
||||
)})`
|
||||
}"
|
||||
>
|
||||
<!-- 企业标题 -->
|
||||
|
|
@ -36,11 +38,17 @@
|
|||
<input
|
||||
v-model="slotProps.item.name"
|
||||
class="edit-enterprise-input"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<!-- 专题资源列表 -->
|
||||
<div class="resource-detail-resource">
|
||||
<div class="num" v-for="item2 in slotProps.item.children" :key="item2.id">{{ item2.name }}</div>
|
||||
<div
|
||||
class="num"
|
||||
v-for="item2 in slotProps.item.children"
|
||||
:key="item2.id"
|
||||
>
|
||||
{{ item2.name }}
|
||||
</div>
|
||||
<!-- <span class="unit">个</span> -->
|
||||
</div>
|
||||
<!-- 删除资源按钮 -->
|
||||
|
|
@ -48,7 +56,9 @@
|
|||
<i
|
||||
v-if="isRemoveCard"
|
||||
class="resource-detail-remove"
|
||||
@click.stop="removeEnterpriseCard(slotProps.item,slotProps.index)"
|
||||
@click.stop="
|
||||
removeEnterpriseCard(slotProps.item, slotProps.index)
|
||||
"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
|
|
@ -61,7 +71,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<span @click.stop="editTopicCard">{{
|
||||
isRemoveCard ? "完成" : "编辑"
|
||||
isRemoveCard ? '完成' : '编辑'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -75,7 +85,7 @@
|
|||
:style="{
|
||||
top: cardAddTop,
|
||||
left: cardAddLeft,
|
||||
backgroundImage: `url(${addCardBgImg})`,
|
||||
backgroundImage: `url(${addCardBgImg})`
|
||||
}"
|
||||
>
|
||||
<div v-if="!isAddCard">
|
||||
|
|
@ -88,7 +98,7 @@
|
|||
v-model="addEnterpriseName"
|
||||
class="add-enterprise-input"
|
||||
placeholder="请输入目录名称"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<div class="add-enterprise-button-wrap">
|
||||
<el-button
|
||||
|
|
@ -109,24 +119,26 @@
|
|||
</div>
|
||||
</transition>
|
||||
<!-- 卡片覆盖层-->
|
||||
<div class="enterprise-card-cover" :style="{ zIndex: topicCoverZIndex||1000 }">
|
||||
<div
|
||||
class="enterprise-card-cover"
|
||||
:style="{ zIndex: topicCoverZIndex || 1000 }"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in topicList"
|
||||
:key="index"
|
||||
@click="test(item,index)"
|
||||
>
|
||||
</div>
|
||||
@click="test(item, index)"
|
||||
></div>
|
||||
</div>
|
||||
<a-modal
|
||||
:visible="show"
|
||||
title="编目配置"
|
||||
@ok.stop="handleOk"
|
||||
@cancel.stop="handleCancel"
|
||||
:footer='null'
|
||||
:footer="null"
|
||||
:key="showKey"
|
||||
width="1200px"
|
||||
>
|
||||
<ManagementPop :showItem="showItem" :index='index'></ManagementPop>
|
||||
<ManagementPop :showItem="showItem" :index="index"></ManagementPop>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -147,7 +159,8 @@ export default {
|
|||
ManagementPop
|
||||
},
|
||||
props: {
|
||||
enterpriseTypeOption: { // 企业类型字典值
|
||||
enterpriseTypeOption: {
|
||||
// 企业类型字典值
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
|
|
@ -161,6 +174,7 @@ export default {
|
|||
index: -1,
|
||||
pid: '',
|
||||
showKey: 0,
|
||||
showItem: {},
|
||||
oldId: -1,
|
||||
isShowEdit: true,
|
||||
oldIdList: [],
|
||||
|
|
@ -169,8 +183,7 @@ export default {
|
|||
cardInsideWidth: 360, // 卡片的宽度
|
||||
cardOutsideHeight: 198, // 卡片组件的高度
|
||||
cardInsideHeight: 176, // 卡片的高度
|
||||
topicList: [
|
||||
],
|
||||
topicList: [],
|
||||
newGroupName: {
|
||||
// 修改后的企业新名称
|
||||
cur: []
|
||||
|
|
@ -271,44 +284,47 @@ export default {
|
|||
},
|
||||
// 初始化卡片列表
|
||||
async initTopicCardList () {
|
||||
this.$http.get('/category/getCategoryTree').then(({ data: res }) => {
|
||||
// 首先对后端返回的数据进行排序，这是为了方便进行卡片排序
|
||||
this.oldIdList = res.data
|
||||
res.data.sort((a, b) => a.sortIndex - b.sortIndex)
|
||||
this.topicList = res.data
|
||||
res.data.map((resource, index) => {
|
||||
this.topicList[index].id = `card_${this.topicList[index].id}`
|
||||
const indexson = index
|
||||
this.$set(this.topicList[index], 'positionNum', indexson + 1)
|
||||
})
|
||||
console.log('this.topicList', res.data)
|
||||
if (this.selectIndex !== -1) {
|
||||
console.log('showItem=============>', res.data[this.selectIndex])
|
||||
if (res.data[this.selectIndex].children) {
|
||||
res.data[this.selectIndex].children.forEach(val => {
|
||||
val.key = val.id
|
||||
if (val.isAttr === 'true') {
|
||||
val.isAttr = true
|
||||
} else if (val.isAttr === 'false') {
|
||||
val.isAttr = false
|
||||
}
|
||||
if (val.isFilterCriteria === 'true') {
|
||||
val.isFilterCriteria = true
|
||||
} else if (val.isFilterCriteria === 'false') {
|
||||
val.isFilterCriteria = false
|
||||
}
|
||||
if (val.isLinkToDic === 'true') {
|
||||
val.isLinkToDic = true
|
||||
} else if (val.isLinkToDic === 'false') {
|
||||
val.isLinkToDic = false
|
||||
}
|
||||
})
|
||||
this.$http
|
||||
.get('/category/getCategoryTree')
|
||||
.then(({ data: res }) => {
|
||||
// 首先对后端返回的数据进行排序，这是为了方便进行卡片排序
|
||||
this.oldIdList = res.data
|
||||
res.data.sort((a, b) => a.sortIndex - b.sortIndex)
|
||||
this.topicList = res.data
|
||||
res.data.map((resource, index) => {
|
||||
this.topicList[index].id = `card_${this.topicList[index].id}`
|
||||
const indexson = index
|
||||
this.$set(this.topicList[index], 'positionNum', indexson + 1)
|
||||
})
|
||||
console.log('this.topicList', res.data)
|
||||
if (this.selectIndex !== -1) {
|
||||
console.log('showItem=============>', res.data[this.selectIndex])
|
||||
if (res.data[this.selectIndex].children) {
|
||||
res.data[this.selectIndex].children.forEach((val) => {
|
||||
val.key = val.id
|
||||
if (val.isAttr === 'true') {
|
||||
val.isAttr = true
|
||||
} else if (val.isAttr === 'false') {
|
||||
val.isAttr = false
|
||||
}
|
||||
if (val.isFilterCriteria === 'true') {
|
||||
val.isFilterCriteria = true
|
||||
} else if (val.isFilterCriteria === 'false') {
|
||||
val.isFilterCriteria = false
|
||||
}
|
||||
if (val.isLinkToDic === 'true') {
|
||||
val.isLinkToDic = true
|
||||
} else if (val.isLinkToDic === 'false') {
|
||||
val.isLinkToDic = false
|
||||
}
|
||||
})
|
||||
}
|
||||
console.log('showItem=============>', res.data[this.selectIndex])
|
||||
this.showItem = res.data[this.selectIndex]
|
||||
}
|
||||
console.log('showItem=============>', res.data[this.selectIndex])
|
||||
this.showItem = res.data[this.selectIndex]
|
||||
}
|
||||
this.cardNum = this.topicList.length
|
||||
}).catch(() => {})
|
||||
this.cardNum = this.topicList.length
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
// 卡片开始拖拽前的方法
|
||||
startDrag () {},
|
||||
|
|
@ -348,40 +364,42 @@ export default {
|
|||
const params = {
|
||||
ids: letid
|
||||
}
|
||||
this.$http.post('/category/deleteById', params).then(({ data: res }) => {
|
||||
let removeIndex = 0
|
||||
this.topicList.forEach((enterprise, index) => {
|
||||
if (
|
||||
enterprise.positionNum &&
|
||||
this.$http
|
||||
.post('/category/deleteById', params)
|
||||
.then(({ data: res }) => {
|
||||
let removeIndex = 0
|
||||
this.topicList.forEach((enterprise, index) => {
|
||||
if (
|
||||
enterprise.positionNum &&
|
||||
enterprise.positionNum > item.positionNum
|
||||
) {
|
||||
enterprise.positionNum = enterprise.positionNum - 1
|
||||
}
|
||||
if (item.resourceGroupId === enterprise.resourceGroupId) {
|
||||
enterprise.position = this.topicList.length
|
||||
removeIndex = index
|
||||
}
|
||||
) {
|
||||
enterprise.positionNum = enterprise.positionNum - 1
|
||||
}
|
||||
if (item.resourceGroupId === enterprise.resourceGroupId) {
|
||||
enterprise.position = this.topicList.length
|
||||
removeIndex = index
|
||||
}
|
||||
})
|
||||
this.topicList.splice(removeIndex, 1)
|
||||
// 此处需要把删除的对象的id添加回来，否则缺失的id将导致卡片不能再拖动
|
||||
this.topicList.push({ id: item.id })
|
||||
this.cardNum -= 1
|
||||
// 调整编辑框的企业名称顺序
|
||||
this.resortEditGroupName()
|
||||
// 隐藏已经删除的卡片 -> 变更为移除已经删除的卡片
|
||||
this.$refs.cardDragger.$vnode.elm.childNodes.forEach((node) => {
|
||||
if (node.id === item.id) {
|
||||
node.style.display = 'none'
|
||||
this.oldId = item.id
|
||||
}
|
||||
})
|
||||
this.$message.success('删除企业成功！')
|
||||
// 删除完退出编辑模式
|
||||
this.initTopicCardList()
|
||||
this.isRemoveCard = !this.isRemoveCard
|
||||
this.isEditGroupName = !this.isEditGroupName
|
||||
this.topicCoverZIndex = this.isEditGroupName ? -999 : 1000
|
||||
})
|
||||
this.topicList.splice(removeIndex, 1)
|
||||
// 此处需要把删除的对象的id添加回来，否则缺失的id将导致卡片不能再拖动
|
||||
this.topicList.push({ id: item.id })
|
||||
this.cardNum -= 1
|
||||
// 调整编辑框的企业名称顺序
|
||||
this.resortEditGroupName()
|
||||
// 隐藏已经删除的卡片 -> 变更为移除已经删除的卡片
|
||||
this.$refs.cardDragger.$vnode.elm.childNodes.forEach((node) => {
|
||||
if (node.id === item.id) {
|
||||
node.style.display = 'none'
|
||||
this.oldId = item.id
|
||||
}
|
||||
})
|
||||
this.$message.success('删除企业成功！')
|
||||
// 删除完退出编辑模式
|
||||
this.initTopicCardList()
|
||||
this.isRemoveCard = !this.isRemoveCard
|
||||
this.isEditGroupName = !this.isEditGroupName
|
||||
this.topicCoverZIndex = this.isEditGroupName ? -999 : 1000
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log('删除企业失败！%o', e)
|
||||
this.$message.error('删除企业失败！')
|
||||
|
|
@ -395,9 +413,11 @@ export default {
|
|||
id: item.id.slice(5),
|
||||
name: item.name
|
||||
}
|
||||
this.$http.post('/category/update', params).then(({ data: res }) => {
|
||||
item.name = newGroupName
|
||||
})
|
||||
this.$http
|
||||
.post('/category/update', params)
|
||||
.then(({ data: res }) => {
|
||||
item.name = newGroupName
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log('更新企业名称失败！%o', e)
|
||||
this.$message.warning('更新企业名称失败！')
|
||||
|
|
@ -437,35 +457,37 @@ export default {
|
|||
linkValue: '',
|
||||
xh: this.topicList.length + 1
|
||||
}
|
||||
const response = this.$http.post('/category/insert', params).then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log('response.code', res)
|
||||
this.$message.error('新增目录失败，请联系管理员！')
|
||||
} else {
|
||||
this.$message.success('新增目录成功！')
|
||||
const enterprise = {
|
||||
// id: `id${this.topicList.length + 1}`,
|
||||
name: this.addEnterpriseName,
|
||||
positionNum: this.cardNum + 1
|
||||
const response = this.$http
|
||||
.post('/category/insert', params)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log('response.code', res)
|
||||
this.$message.error('新增目录失败，请联系管理员！')
|
||||
} else {
|
||||
this.$message.success('新增目录成功！')
|
||||
const enterprise = {
|
||||
// id: `id${this.topicList.length + 1}`,
|
||||
name: this.addEnterpriseName,
|
||||
positionNum: this.cardNum + 1
|
||||
}
|
||||
this.topicList.push(enterprise)
|
||||
this.cardNum += 1
|
||||
this.newGroupName.cur.push(enterprise.name)
|
||||
this.addEnterpriseName = ''
|
||||
if (this.oldId !== -1) {
|
||||
this.$refs.cardDragger.$vnode.elm.childNodes.forEach((node) => {
|
||||
if (node.id === this.oldId) {
|
||||
node.style.display = 'flex'
|
||||
}
|
||||
})
|
||||
}
|
||||
// 创建完退出编辑模式
|
||||
this.isRemoveCard = !this.isRemoveCard
|
||||
this.isEditGroupName = !this.isEditGroupName
|
||||
this.topicCoverZIndex = this.isEditGroupName ? -999 : 1000
|
||||
this.initTopicCardList()
|
||||
}
|
||||
this.topicList.push(enterprise)
|
||||
this.cardNum += 1
|
||||
this.newGroupName.cur.push(enterprise.name)
|
||||
this.addEnterpriseName = ''
|
||||
if (this.oldId !== -1) {
|
||||
this.$refs.cardDragger.$vnode.elm.childNodes.forEach((node) => {
|
||||
if (node.id === this.oldId) {
|
||||
node.style.display = 'flex'
|
||||
}
|
||||
})
|
||||
}
|
||||
// 创建完退出编辑模式
|
||||
this.isRemoveCard = !this.isRemoveCard
|
||||
this.isEditGroupName = !this.isEditGroupName
|
||||
this.topicCoverZIndex = this.isEditGroupName ? -999 : 1000
|
||||
this.initTopicCardList()
|
||||
}
|
||||
})
|
||||
})
|
||||
// const response = await resourceGroup({
|
||||
// method: 'post',
|
||||
// data: {
|
||||
|
|
@ -823,6 +845,7 @@ export default {
|
|||
padding-top: 10px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
span {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -832,6 +855,7 @@ export default {
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-07-08 14:55:19
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-11 16:34:10
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<el-upload
|
||||
ref='my-upload'
|
||||
:action="apiURL"
|
||||
:accept='accept'
|
||||
:on-change='handleChange'
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:limit="maxCount"
|
||||
:file-list="fileList">
|
||||
<el-button>上传{{type}}</el-button>
|
||||
<div slot="tip" class="el-upload__tip">{{tip}}</div>
|
||||
</el-upload>
|
||||
</template>
|
||||
<script>
|
||||
import Cookies from 'js-cookie'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
title: String,
|
||||
accept: String,
|
||||
btnName: String,
|
||||
type: String,
|
||||
tip: String,
|
||||
maxCount: Number,
|
||||
data: Array,
|
||||
list: Array,
|
||||
emitFlag: String,
|
||||
busType: Number
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
apiURL: window.SITE_CONFIG.apiURL + '/upload?token=' + Cookies.get('ucsToken'),
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleExceed (file) {
|
||||
console.log(file)
|
||||
},
|
||||
handError (err, file, fileList) {
|
||||
console.log(err, file, fileList)
|
||||
},
|
||||
handlePreview (file) {
|
||||
console.log(file)
|
||||
if (file.response) {
|
||||
window.open(
|
||||
window.SITE_CONFIG.previewUrl +
|
||||
'hisense_office/onlinePreview?url=' +
|
||||
btoa(encodeURI(file.response.data))
|
||||
)
|
||||
} else {
|
||||
window.open(
|
||||
window.SITE_CONFIG.previewUrl +
|
||||
'hisense_office/onlinePreview?url=' +
|
||||
btoa(encodeURI(file.url))
|
||||
)
|
||||
}
|
||||
},
|
||||
handleChange (file, fileList) {
|
||||
if (file.status === 'success') {
|
||||
if (file.response.msg === 'success') {
|
||||
this.$message({
|
||||
message: file.name + '上传成功',
|
||||
type: 'success'
|
||||
})
|
||||
console.log(file, fileList)
|
||||
this.$emit('changeInfoList', {
|
||||
attrType: this.title,
|
||||
attrValue: file.response.data,
|
||||
delFlag: 0,
|
||||
note2: file.name
|
||||
})
|
||||
} else {
|
||||
this.$message.error(file.name + '上传失败')
|
||||
this.$refs['my-upload'].clearFiles()
|
||||
}
|
||||
} else if (file.status === 'error') {
|
||||
this.$message.error(file.name + '上传失败')
|
||||
this.$refs['my-upload'].clearFiles()
|
||||
}
|
||||
},
|
||||
handleRemove (file) {
|
||||
console.log(file, '删除', this.title)
|
||||
this.$emit('changeInfoList', {
|
||||
attrType: this.title,
|
||||
attrValue: '',
|
||||
delFlag: 0,
|
||||
note2: null
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.list.note1) {
|
||||
this.fileList.push({ name: this.list.note2 || '--', url: this.list.note1 })
|
||||
}
|
||||
console.log('上传组件===================>', this.list, this.fileList)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<!-- 已办任务-能力资源上架 -->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-activiti__process">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="dataForm.processDefinitionId"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t('query')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
border
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
@sort-change="dataListSortChangeHandle"
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
|
||||
<el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="startUserName"
|
||||
:label="$t('process.user')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column :label="$t('process.system')" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row && scope.row.resourceName||scope.row.params && scope.row.params.undercarriageReason}}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="resourceName"
|
||||
:label="$t('process.system')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processInstanceId"
|
||||
:label="$t('running.id')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processDefinitionName"
|
||||
:label="$t('process.processDefinitionName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processDefinitionVersion"
|
||||
:label="$t('process.processDefinitionVersion')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
:label="$t('process.startTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="endTime"
|
||||
:label="$t('process.endTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="showDetail(scope.row)"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import processModule from '@/mixins/process-module'
|
||||
import qs from 'qs'
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/his/getMyHandledInstancePage',
|
||||
getDataListIsPage: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
},
|
||||
dataForm: {
|
||||
processDefinitionId: '',
|
||||
processDefinitionKey: 'resourcemountapply'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
showDetail (row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardDetail)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<!-- 已办任务-能力资源下架 -->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-activiti__process">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="dataForm.processDefinitionId"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t('query')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
border
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
@sort-change="dataListSortChangeHandle"
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
|
||||
<el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="startUserName"
|
||||
:label="$t('process.user')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column :label="$t('process.system')" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row && scope.row.resourceName||scope.row.params && scope.row.params.undercarriageReason}}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="resourceName"
|
||||
:label="$t('process.system')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processInstanceId"
|
||||
:label="$t('running.id')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processDefinitionName"
|
||||
:label="$t('process.processDefinitionName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processDefinitionVersion"
|
||||
:label="$t('process.processDefinitionVersion')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
:label="$t('process.startTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="endTime"
|
||||
:label="$t('process.endTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="showDetail(scope.row)"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import processModule from '@/mixins/process-module'
|
||||
import qs from 'qs'
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/his/getMyHandledInstancePage',
|
||||
getDataListIsPage: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
},
|
||||
dataForm: {
|
||||
processDefinitionId: '',
|
||||
processDefinitionKey: 'resourcundercarriageapply'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
showDetail (row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardDetail)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<!-- 已办任务-能力需求申请 -->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-activiti__process">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="dataForm.processDefinitionId"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t('query')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
border
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
@sort-change="dataListSortChangeHandle"
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
|
||||
<el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="startUserName"
|
||||
:label="$t('process.user')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column :label="$t('process.system')" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row && scope.row.resourceName||scope.row.params && scope.row.params.undercarriageReason}}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="resourceName"
|
||||
:label="$t('process.system')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processInstanceId"
|
||||
:label="$t('running.id')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processDefinitionName"
|
||||
:label="$t('process.processDefinitionName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processDefinitionVersion"
|
||||
:label="$t('process.processDefinitionVersion')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
:label="$t('process.startTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="endTime"
|
||||
:label="$t('process.endTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="showDetail(scope.row)"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import processModule from '@/mixins/process-module'
|
||||
import qs from 'qs'
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/his/getMyHandledInstancePage',
|
||||
getDataListIsPage: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
},
|
||||
dataForm: {
|
||||
processDefinitionId: '',
|
||||
processDefinitionKey: 'abilitydemandapply'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
showDetail (row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardDetail)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<!-- 已办任务-评论审核 -->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-activiti__process">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="dataForm.processDefinitionId"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t('query')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
border
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
@sort-change="dataListSortChangeHandle"
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
|
||||
<el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="startUserName"
|
||||
:label="$t('process.user')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column :label="$t('process.system')" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row && scope.row.resourceName||scope.row.params && scope.row.params.undercarriageReason}}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="resourceName"
|
||||
:label="$t('process.system')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processInstanceId"
|
||||
:label="$t('running.id')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processDefinitionName"
|
||||
:label="$t('process.processDefinitionName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processDefinitionVersion"
|
||||
:label="$t('process.processDefinitionVersion')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
:label="$t('process.startTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="endTime"
|
||||
:label="$t('process.endTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="showDetail(scope.row)"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import processModule from '@/mixins/process-module'
|
||||
import qs from 'qs'
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/his/getMyHandledInstancePage',
|
||||
getDataListIsPage: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
},
|
||||
dataForm: {
|
||||
processDefinitionId: '',
|
||||
processDefinitionKey: 'comment_review'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
showDetail (row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardDetail)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
<!-- 已办任务-能力申请 -->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-activiti__process">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="dataForm.processDefinitionId"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t('query')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
border
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
@sort-change="dataListSortChangeHandle"
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
|
||||
<el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="startUserName"
|
||||
:label="$t('process.user')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column :label="$t('process.system')" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row && scope.row.resourceName||scope.row.params && scope.row.params.undercarriageReason}}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="resourceName"
|
||||
:label="$t('process.system')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processInstanceId"
|
||||
:label="$t('running.id')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processDefinitionName"
|
||||
:label="$t('process.processDefinitionName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="processDefinitionVersion"
|
||||
:label="$t('process.processDefinitionVersion')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
:label="$t('process.startTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="endTime"
|
||||
:label="$t('process.endTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="showDetail(scope.row)"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import processModule from '@/mixins/process-module'
|
||||
import returnLocationStr from '@/utils/location'
|
||||
import qs from 'qs'
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/his/getMyHandledInstancePage',
|
||||
getDataListIsPage: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
},
|
||||
dataForm: {
|
||||
processDefinitionId: '',
|
||||
processDefinitionKey: returnLocationStr() == 'qingdao' ? 'abilityprocess_v3' : 'abilityprocess_v2'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
showDetail (row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardDetail)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-27 11:27:22
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-25 09:45:35
|
||||
* @Description: "能力资源上架"
|
||||
-->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-activiti__process">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="dataForm.taskName"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t('query')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
border
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
@sort-change="dataListSortChangeHandle"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
></el-table-column>
|
||||
<el-table-column label="申请人" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
(scope.row.params && scope.row.params.user) ||
|
||||
(scope.row.params && scope.row.params.applyUserName) ||
|
||||
(scope.row.params && scope.row.params.userName) ||
|
||||
(scope.row.params && scope.row.params.undercarriageUserName) ||
|
||||
(scope.row.params && scope.row.params.name)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('process.system')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
(scope.row.params && scope.row.params.system) ||
|
||||
(scope.row.params && scope.row.params.demandSubject) ||
|
||||
(scope.row.params &&
|
||||
scope.row.params.resourceDTO &&
|
||||
scope.row.params.resourceDTO.name) ||
|
||||
(scope.row.params && scope.row.params.undercarriageReason) ||
|
||||
(scope.row.params && scope.row.params.comment)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="processDefinitionName"
|
||||
:label="$t('process.processDefinitionName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="taskName"
|
||||
:label="$t('process.taskName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
:label="$t('process.createTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
:processInstanceId="processInstanceId"
|
||||
@click="taskHandle(scope.row)"
|
||||
>{{ $t('manage') }}</el-button
|
||||
>
|
||||
<!-- <el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="taskDetail(scope.row)"
|
||||
>{{ $t('process.viewFlowImage') }}</el-button
|
||||
> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '@/views/bus.js'
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import processModule from '@/mixins/process-module'
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/task/myToDoTaskPage',
|
||||
getDataListIsPage: true,
|
||||
activatedIsNeed: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
},
|
||||
dataForm: {
|
||||
taskName: '',
|
||||
taskId: '',
|
||||
processDefinitionKey: 'resourcemountapply'
|
||||
},
|
||||
processInstanceId: ''
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
// 处理
|
||||
taskHandle (row) {
|
||||
console.log('row======================>', row, this.forwardHandleUrl)
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.businessKeyError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardHandleUrl)
|
||||
},
|
||||
taskDetail (row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardTaskDetail)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
bus.$off('abilityResourceShelfInit')
|
||||
bus.$on('abilityResourceShelfInit', () => {
|
||||
this.getDataList()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-27 11:27:22
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-25 09:48:46
|
||||
* @Description: "能力资源下架"
|
||||
-->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-activiti__process">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="dataForm.taskName"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t('query')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
border
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
@sort-change="dataListSortChangeHandle"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
></el-table-column>
|
||||
<el-table-column label="申请人" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
(scope.row.params && scope.row.params.user) ||
|
||||
(scope.row.params && scope.row.params.applyUserName) ||
|
||||
(scope.row.params && scope.row.params.userName) ||
|
||||
(scope.row.params && scope.row.params.undercarriageUserName) ||
|
||||
(scope.row.params && scope.row.params.name)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('process.system')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
(scope.row.params && scope.row.params.system) ||
|
||||
(scope.row.params && scope.row.params.demandSubject) ||
|
||||
(scope.row.params &&
|
||||
scope.row.params.resourceDTO &&
|
||||
scope.row.params.resourceDTO.name) ||
|
||||
(scope.row.params && scope.row.params.undercarriageReason) ||
|
||||
(scope.row.params && scope.row.params.comment)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="processDefinitionName"
|
||||
:label="$t('process.processDefinitionName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="taskName"
|
||||
:label="$t('process.taskName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
:label="$t('process.createTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
:processInstanceId="processInstanceId"
|
||||
@click="taskHandle(scope.row)"
|
||||
>{{ $t('manage') }}</el-button
|
||||
>
|
||||
<!-- <el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="taskDetail(scope.row)"
|
||||
>{{ $t('process.viewFlowImage') }}</el-button
|
||||
> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '@/views/bus.js'
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import processModule from '@/mixins/process-module'
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/task/myToDoTaskPage',
|
||||
getDataListIsPage: true,
|
||||
activatedIsNeed: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
},
|
||||
dataForm: {
|
||||
taskName: '',
|
||||
taskId: '',
|
||||
processDefinitionKey: 'resourcundercarriageapply'
|
||||
},
|
||||
processInstanceId: ''
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
// 处理
|
||||
taskHandle (row) {
|
||||
console.log('row======================>', row, this.forwardHandleUrl)
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.businessKeyError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardHandleUrl)
|
||||
},
|
||||
taskDetail (row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardTaskDetail)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
bus.$off('AbilityResourcesRemovedInit')
|
||||
bus.$on('AbilityResourcesRemovedInit', () => {
|
||||
this.getDataList()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-27 11:27:22
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-29 16:31:26
|
||||
* @Description: "能力需求申请"
|
||||
-->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-activiti__process">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="dataForm.taskName"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t('query')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
border
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
@sort-change="dataListSortChangeHandle"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
></el-table-column>
|
||||
<el-table-column label="申请人" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
(scope.row.params && scope.row.params.user) ||
|
||||
(scope.row.params && scope.row.params.applyUserName) ||
|
||||
(scope.row.params && scope.row.params.userName) ||
|
||||
(scope.row.params && scope.row.params.undercarriageUserName) ||
|
||||
(scope.row.params && scope.row.params.name)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('process.system')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
(scope.row.params && scope.row.params.system) ||
|
||||
(scope.row.params && scope.row.params.demandSubject) ||
|
||||
(scope.row.params &&
|
||||
scope.row.params.resourceDTO &&
|
||||
scope.row.params.resourceDTO.name) ||
|
||||
(scope.row.params && scope.row.params.undercarriageReason) ||
|
||||
(scope.row.params && scope.row.params.comment)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="processDefinitionName"
|
||||
:label="$t('process.processDefinitionName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="taskName"
|
||||
:label="$t('process.taskName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
:label="$t('process.createTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
:processInstanceId="processInstanceId"
|
||||
@click="taskHandle(scope.row)"
|
||||
>{{ $t('manage') }}</el-button
|
||||
>
|
||||
<!-- <el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="taskDetail(scope.row)"
|
||||
>{{ $t('process.viewFlowImage') }}</el-button
|
||||
> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import processModule from '@/mixins/process-module'
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/task/myToDoTaskPage',
|
||||
getDataListIsPage: true,
|
||||
activatedIsNeed: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
},
|
||||
dataForm: {
|
||||
taskName: '',
|
||||
taskId: '',
|
||||
processDefinitionKey: 'abilitydemandapply'
|
||||
},
|
||||
processInstanceId: ''
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
// 处理
|
||||
taskHandle (row) {
|
||||
console.log('row======================>', row, this.forwardHandleUrl)
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.businessKeyError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardHandleUrl)
|
||||
},
|
||||
taskDetail (row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardTaskDetail)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-27 11:27:22
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-29 16:31:26
|
||||
* @Description: "评论审核"
|
||||
-->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-activiti__process">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="dataForm.taskName"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t('query')
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
border
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
@sort-change="dataListSortChangeHandle"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
></el-table-column>
|
||||
<el-table-column label="申请人" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
(scope.row.params && scope.row.params.user) ||
|
||||
(scope.row.params && scope.row.params.applyUserName) ||
|
||||
(scope.row.params && scope.row.params.userName) ||
|
||||
(scope.row.params && scope.row.params.undercarriageUserName) ||
|
||||
(scope.row.params && scope.row.params.name)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('process.system')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
(scope.row.params && scope.row.params.system) ||
|
||||
(scope.row.params && scope.row.params.demandSubject) ||
|
||||
(scope.row.params &&
|
||||
scope.row.params.resourceDTO &&
|
||||
scope.row.params.resourceDTO.name) ||
|
||||
(scope.row.params && scope.row.params.undercarriageReason) ||
|
||||
(scope.row.params && scope.row.params.comment)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="processDefinitionName"
|
||||
:label="$t('process.processDefinitionName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="taskName"
|
||||
:label="$t('process.taskName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
:label="$t('process.createTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
:processInstanceId="processInstanceId"
|
||||
@click="taskHandle(scope.row)"
|
||||
>{{ $t('manage') }}</el-button
|
||||
>
|
||||
<!-- <el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="taskDetail(scope.row)"
|
||||
>{{ $t('process.viewFlowImage') }}</el-button
|
||||
> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import processModule from '@/mixins/process-module'
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/task/myToDoTaskPage',
|
||||
getDataListIsPage: true,
|
||||
activatedIsNeed: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
},
|
||||
dataForm: {
|
||||
taskName: '',
|
||||
taskId: '',
|
||||
processDefinitionKey: 'comment_review'
|
||||
},
|
||||
processInstanceId: ''
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
// 处理
|
||||
taskHandle (row) {
|
||||
console.log('row======================>', row, this.forwardHandleUrl)
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.businessKeyError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardHandleUrl)
|
||||
},
|
||||
taskDetail (row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardTaskDetail)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-27 11:27:22
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-08-23 10:37:29
|
||||
* @Description: 能力申请
|
||||
-->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-activiti__process">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="dataForm.taskName"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t("query")
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
border
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
@sort-change="dataListSortChangeHandle"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
></el-table-column>
|
||||
<el-table-column label="申请人" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
(scope.row.params && scope.row.params.tAbilityApplicationDTOList[0].user)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('process.system')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
(scope.row.params && scope.row.params.tAbilityApplicationDTOList[0].title)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="processDefinitionName"
|
||||
:label="$t('process.processDefinitionName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="taskName"
|
||||
:label="$t('process.taskName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
:label="$t('process.createTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
:processInstanceId="processInstanceId"
|
||||
@click="taskHandle(scope.row)"
|
||||
>{{ $t("manage") }}</el-button
|
||||
>
|
||||
<!-- <el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="taskDetail(scope.row)"
|
||||
>{{ $t("process.viewFlowImage") }}</el-button
|
||||
> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '@/views/bus.js'
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import processModule from '@/mixins/process-module'
|
||||
import returnLocationStr from '@/utils/location'
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/task/myToDoTaskPage',
|
||||
getDataListIsPage: true,
|
||||
activatedIsNeed: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
},
|
||||
dataForm: {
|
||||
taskName: '',
|
||||
taskId: '',
|
||||
processDefinitionKey: returnLocationStr() == 'qingdao' ? 'abilityprocess_v3' : 'abilityprocess_v2'
|
||||
},
|
||||
processInstanceId: ''
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
// 处理
|
||||
taskHandle (row) {
|
||||
console.log('row======================>', row, this.forwardHandleUrl, this.dataForm.processDefinitionKey)
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.businessKeyError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardHandleUrl)
|
||||
},
|
||||
taskDetail (row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardTaskDetail)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
bus.$off('competencyApplicationInit')
|
||||
bus.$on('competencyApplicationInit', () => {
|
||||
this.getDataList()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,424 @@
|
|||
<template>
|
||||
<el-card shadow="never" class="roomBox">
|
||||
<div>
|
||||
<div slot="header" class="roomHeadSpan">
|
||||
<span>会议室管理</span>
|
||||
<el-button
|
||||
style="float: right; padding: 5px 5px"
|
||||
type="primary"
|
||||
icon="el-icon-circle-plus-outline"
|
||||
@click="addRooom"
|
||||
>新增</el-button
|
||||
>
|
||||
</div>
|
||||
<el-table border style="width: 100%" :data="tableData">
|
||||
<el-table-column
|
||||
label="会议室名称"
|
||||
prop="name"
|
||||
header-align="center"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="房间号"
|
||||
prop="num"
|
||||
header-align="center"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="面积（m²）"
|
||||
prop="area"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="可容纳人数（人）"
|
||||
prop="capacity"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="taskDetails(scope.row)"
|
||||
>详情</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="taskUpdate(scope.row)"
|
||||
>{{ $t('update') }}</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="taskDelete(scope.row)"
|
||||
>{{ $t('delete') }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
@close="outDialog"
|
||||
:title="
|
||||
flge === 'add'
|
||||
? '会议室新增'
|
||||
: flge === 'look'
|
||||
? '会议室详情'
|
||||
: '会议室修改'
|
||||
"
|
||||
:visible.sync="dialogFormVisible"
|
||||
>
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:label-position="labelPosition"
|
||||
size="small"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
:disabled="flge === 'look' ? true : flge === 'edit' ? false : false"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="会议室名称"
|
||||
prop="name"
|
||||
:label-width="formLabelWidth"
|
||||
>
|
||||
<el-input v-model="ruleForm.name" style="width: 90%"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="房间号"
|
||||
prop="num"
|
||||
:label-width="formLabelWidth"
|
||||
>
|
||||
<el-input v-model="ruleForm.num" style="width: 90%"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="会议室面积(m²)"
|
||||
prop="area"
|
||||
:label-width="formLabelWidth"
|
||||
>
|
||||
<el-input
|
||||
v-model.number="ruleForm.area"
|
||||
style="width: 90%"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="可容纳人数(人)"
|
||||
prop="capacity"
|
||||
:label-width="formLabelWidth"
|
||||
>
|
||||
<el-input
|
||||
v-model.number="ruleForm.capacity"
|
||||
style="width: 90%"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item
|
||||
label="描述"
|
||||
prop="description"
|
||||
:label-width="formLabelWidth"
|
||||
>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="ruleForm.description"
|
||||
style="width: 96%"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item
|
||||
label="会议室图片"
|
||||
prop="pic"
|
||||
:label-width="formLabelWidth"
|
||||
>
|
||||
<div v-if="flge != 'look'">
|
||||
<span slot="tip" class="el-upload__tip">
|
||||
支持图片jpg、jpeg、png类型，只能上传一张图片且不超过100MB
|
||||
</span>
|
||||
</div>
|
||||
<!-- :file-list="fileList" -->
|
||||
<el-upload
|
||||
v-if="flge != 'look'"
|
||||
class="upload-demo"
|
||||
accept=".jpg, .jpeg, .png"
|
||||
:action="apiURL"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-success="onSuccess"
|
||||
:on-remove="onRemove"
|
||||
:on-exceed="beforeUpload"
|
||||
:file-list="fileList"
|
||||
list-type="picture-card"
|
||||
:limit="1"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="picImg" alt="" />
|
||||
</el-dialog>
|
||||
<div
|
||||
class="block"
|
||||
style="width: 15rem; height: 10rem"
|
||||
v-if="flge == 'look' && picImg != ''"
|
||||
>
|
||||
<el-image :src="picImg"></el-image>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
|
||||
<el-button
|
||||
type="primary"
|
||||
v-if="flge != 'look'"
|
||||
@click="submitForm('ruleForm', flge)"
|
||||
>保 存</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
import Cookies from 'js-cookie'
|
||||
export default {
|
||||
data() {
|
||||
// let validatorImg = (rule, value, callback) => {
|
||||
// console.log(value, 11111111)
|
||||
// //验证器
|
||||
// if (!this.checkImgSuccess) {
|
||||
// //为true代表图片在 false报错
|
||||
// callback(new Error('请上传图片'))
|
||||
// } else {
|
||||
// callback()
|
||||
// }
|
||||
// }
|
||||
return {
|
||||
apiURL:
|
||||
window.SITE_CONFIG.apiURL + '/upload?token=' + Cookies.get('ucsToken'),
|
||||
labelPosition: 'left',
|
||||
dialogFormVisible: false,
|
||||
// dialogImageUrl: '',
|
||||
ruleForm: {
|
||||
name: '',
|
||||
num: '',
|
||||
area: '',
|
||||
capacity: '',
|
||||
pic: '',
|
||||
id: '',
|
||||
},
|
||||
limit: 10,
|
||||
page: 1,
|
||||
total: 0,
|
||||
picImg: '',
|
||||
tableData: [],
|
||||
fileList: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入会议室名称', trigger: 'blur' },
|
||||
{ min: 1, trigger: 'blur' },
|
||||
],
|
||||
area: [
|
||||
{ required: true, message: '请输入会议室面积', trigger: 'blur' },
|
||||
{ min: 1, type: 'number', trigger: 'blur' },
|
||||
],
|
||||
description: [
|
||||
{ required: true, message: '请填写描述内容', trigger: 'blur' },
|
||||
{
|
||||
min: 1,
|
||||
max: 500,
|
||||
message: '长度在 1 到 500 个字符',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
formLabelWidth: '120px',
|
||||
checkImgSuccess: true,
|
||||
dialogVisible: false,
|
||||
flge: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.queryData()
|
||||
},
|
||||
methods: {
|
||||
// 页面查询接口
|
||||
queryData() {
|
||||
this.$http
|
||||
.get(`/meeting/page?limit=${this.limit}&page=${this.page}`)
|
||||
.then(({ data: res }) => {
|
||||
this.total = res.data.total
|
||||
this.tableData = res.data.list
|
||||
})
|
||||
},
|
||||
// 分页
|
||||
handleSizeChange(val) {
|
||||
this.limit = val
|
||||
this.queryData()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.page = val
|
||||
this.queryData()
|
||||
},
|
||||
// 新增
|
||||
addRooom() {
|
||||
this.dialogFormVisible = true
|
||||
this.flge = 'add'
|
||||
this.ruleForm = {}
|
||||
this.fileList = []
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
//上传个数限制
|
||||
beforeUpload(file, fileList) {
|
||||
this.$message.error('最多只能上传一张图片！')
|
||||
},
|
||||
//图片上传成功时钩子
|
||||
onSuccess(response, file, fileList) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 100
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过100MB！')
|
||||
this.fileList = []
|
||||
} else {
|
||||
this.ruleForm.pic = response.data
|
||||
// this.$refs.ruleForm.clearValidate() //上传成功清除校验
|
||||
this.checkImgSuccess = true
|
||||
}
|
||||
},
|
||||
//图片删除时钩子
|
||||
onRemove(file, fileList) {
|
||||
this.$nextTick(() => {
|
||||
if (fileList.length == 0) {
|
||||
this.checkImgSuccess = false //检查图片是否加载成功
|
||||
// this.$refs.ruleForm.validate() //删除图片,重新触发校验
|
||||
}
|
||||
})
|
||||
},
|
||||
// 保存
|
||||
submitForm(formName, i) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (i === 'add') {
|
||||
this.dialogFormVisible = false
|
||||
this.$http.post('/meeting', this.ruleForm).then(({ data: res }) => {
|
||||
if (res.msg === 'success') {
|
||||
this.queryData()
|
||||
} else {
|
||||
this.$message.error('保存接口调用失败')
|
||||
}
|
||||
})
|
||||
} else if (i === 'edit') {
|
||||
this.dialogFormVisible = false
|
||||
this.$http.put(`/meeting`, this.ruleForm).then(({ data: res }) => {
|
||||
this.ruleForm = res.data
|
||||
let imgUrl = { name: res.data.name, url: res.data.pic }
|
||||
this.fileList.push(imgUrl)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 详情
|
||||
taskDetails(row) {
|
||||
this.ruleForm = {}
|
||||
this.fileList = []
|
||||
this.flge = 'look'
|
||||
this.$http.get(`/meeting/${row.id}`).then(({ data: res }) => {
|
||||
this.dialogFormVisible = true
|
||||
this.ruleForm = res.data
|
||||
if (res.data.pic != null) {
|
||||
// let imgUrl = { name: res.data.name, url: res.data.pic }
|
||||
// this.fileList.push(imgUrl)
|
||||
this.picImg = res.data.pic
|
||||
} else {
|
||||
this.picImg = ''
|
||||
}
|
||||
})
|
||||
},
|
||||
//修改
|
||||
taskUpdate(row) {
|
||||
this.dialogFormVisible = true
|
||||
this.fileList = []
|
||||
this.flge = 'edit'
|
||||
this.ruleForm = row
|
||||
if (row.pic != null) {
|
||||
let imgUrl = { name: row.name, url: row.pic }
|
||||
this.fileList.push(imgUrl)
|
||||
} else {
|
||||
this.fileList = []
|
||||
}
|
||||
},
|
||||
//删除图片
|
||||
taskDelete(row) {
|
||||
this.$confirm('此操作将永久删除该会议室, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
this.$http.put(`/meeting`, { delFlag: 1, id: row.id }).then(() => {
|
||||
this.queryData()
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!',
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除',
|
||||
})
|
||||
})
|
||||
},
|
||||
//监听关闭按钮时间
|
||||
outDialog() {},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.roomBox {
|
||||
min-height: calc(calc(100vh - 50px - 38px - 30px));
|
||||
.roomHeadSpan {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
::v-deep .el-dialog__footer {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,616 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<el-form :model="dataView">
|
||||
<div v-for="(item, index) in dataView.children" :key="item">
|
||||
<!-- <div class="dataTitle">{{ item.name }}</div> -->
|
||||
<div v-for="itemson in item.children" :key="itemson.name">
|
||||
<div class="dataTitleSon">
|
||||
{{ itemson.name }}
|
||||
</div>
|
||||
<div
|
||||
class="dataContent"
|
||||
v-if="
|
||||
itemson.name !== '算法优势' &&
|
||||
itemson.name !== '应用场景' &&
|
||||
itemson.name !== '功能介绍'
|
||||
"
|
||||
>
|
||||
<el-form-item
|
||||
v-for="itemsonson in itemson.children"
|
||||
:key="itemsonson.name"
|
||||
:label="
|
||||
itemsonson.type != ' multipleAdditions' ? itemsonson.name : ''
|
||||
"
|
||||
v-show="
|
||||
!(
|
||||
itemsonson.name === '平台地址' ||
|
||||
itemsonson.name === 'SDK安装包' ||
|
||||
itemsonson.name === '接口请求方式' ||
|
||||
itemsonson.name === '服务接口'
|
||||
)
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="videoAndImgCss"
|
||||
v-if="
|
||||
itemsonson.type === 'video' || itemsonson.type === 'image'
|
||||
"
|
||||
@click="videoAndImg(itemsonson.note1)"
|
||||
>
|
||||
浏览
|
||||
</div>
|
||||
<div
|
||||
v-else-if="itemsonson.type === ' multipleAdditions'"
|
||||
class="multipleAdditionsClass"
|
||||
>
|
||||
<div
|
||||
v-for="multipleAdditionsItem in itemsonson.note1"
|
||||
:key="multipleAdditionsItem"
|
||||
>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{
|
||||
multipleAdditionsItem.question ||
|
||||
multipleAdditionsItem.type ||
|
||||
multipleAdditionsItem.name
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
{{
|
||||
multipleAdditionsItem.question ||
|
||||
multipleAdditionsItem.type ||
|
||||
multipleAdditionsItem.name
|
||||
}}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{
|
||||
multipleAdditionsItem.answer ||
|
||||
multipleAdditionsItem.price ||
|
||||
multipleAdditionsItem.img
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
{{
|
||||
multipleAdditionsItem.answer ||
|
||||
multipleAdditionsItem.price ||
|
||||
multipleAdditionsItem.img
|
||||
}}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">{{ multipleAdditionsItem.desc }}</div>
|
||||
<div>{{ multipleAdditionsItem.desc }}</div>
|
||||
</el-tooltip>
|
||||
<!-- <div>{{ multipleAdditionsItem }}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<el-tooltip v-else placement="top" :disabled="itemsonson.note1 !== null?false:true" :content="itemsonson.note1">
|
||||
<!-- <div slot="content" v-show="itemsonson.note1">{{ itemsonson.note1 }}</div> -->
|
||||
<el-input
|
||||
v-model="itemsonson.note1"
|
||||
disabled="disabled"
|
||||
></el-input>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-for="itemsonson in itemson.children"
|
||||
:key="itemsonson.name"
|
||||
:label="
|
||||
itemsonson.type != ' multipleAdditions' ? itemsonson.name : ''
|
||||
"
|
||||
v-show="
|
||||
(itemsonson.name === '平台地址' && showDocking) ||
|
||||
(itemsonson.name === 'SDK安装包' && showSDK) ||
|
||||
(itemsonson.name === '接口请求方式' && showInterface) ||
|
||||
(itemsonson.name === '服务接口' && showInterface)
|
||||
"
|
||||
>
|
||||
<el-tooltip placement="top" :disabled="itemsonson.note1 !== null?false:true" :content="itemsonson.note1">
|
||||
<el-input
|
||||
v-model="itemsonson.note1"
|
||||
disabled="disabled"
|
||||
></el-input>
|
||||
</el-tooltip>
|
||||
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="itemson.name === '算法优势'"
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<div
|
||||
v-for="itemDataForm in dataForm.infoList"
|
||||
:key="itemDataForm.attrType"
|
||||
>
|
||||
<div
|
||||
v-if="itemDataForm.attrType === '算法优势'"
|
||||
class="textAndImg"
|
||||
>
|
||||
<div
|
||||
v-for="itemDataFormValue in itemDataForm.attrValue"
|
||||
:key="itemDataFormValue.name + 'value'"
|
||||
class="textAndImgSon"
|
||||
style="border: 1px solid #3c9bcd;margin"
|
||||
>
|
||||
<div>{{ itemDataFormValue.name }}</div>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">{{ itemDataFormValue.desc }}</div>
|
||||
<div>{{ itemDataFormValue.desc }}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="itemson.name === '应用场景'"
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<div
|
||||
v-for="itemDataForm in dataForm.infoList"
|
||||
:key="itemDataForm.attrType"
|
||||
>
|
||||
<div
|
||||
v-if="itemDataForm.attrType === '应用场景'"
|
||||
class="textAndImg"
|
||||
>
|
||||
<div
|
||||
v-for="itemDataFormValue in itemDataForm.attrValue"
|
||||
:key="itemDataFormValue.name + 'value'"
|
||||
class="textAndImgSon"
|
||||
style="border: 1px solid #3c9bcd;margin"
|
||||
>
|
||||
<div>{{ itemDataFormValue.name }}</div>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">{{ itemDataFormValue.desc }}</div>
|
||||
<div>{{ itemDataFormValue.desc }}</div>
|
||||
</el-tooltip>
|
||||
<div @click="videoAndImg(itemDataFormValue.img)">浏览</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="itemson.name === '功能介绍'"
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<div
|
||||
v-for="itemDataForm in dataForm.infoList"
|
||||
:key="itemDataForm.attrType"
|
||||
>
|
||||
<div
|
||||
v-if="itemDataForm.attrType === '功能介绍'"
|
||||
class="textAndImg"
|
||||
>
|
||||
<div
|
||||
v-for="itemDataFormValue in itemDataForm.attrValue"
|
||||
:key="itemDataFormValue.name + 'value'"
|
||||
class="textAndImgSon"
|
||||
style="border: 1px solid #3c9bcd;margin"
|
||||
>
|
||||
<div>{{ itemDataFormValue.name }}</div>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">{{ itemDataFormValue.desc }}</div>
|
||||
<div>{{ itemDataFormValue.desc }}</div>
|
||||
</el-tooltip>
|
||||
<div @click="videoAndImg(itemDataFormValue.img)">浏览</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import qs from 'qs'
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
dataForm: {
|
||||
type: Object
|
||||
},
|
||||
insertList: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dataList: [],
|
||||
dataView: [],
|
||||
// 归属部门
|
||||
unit: '',
|
||||
// 平台对接
|
||||
showDocking: false,
|
||||
// SDK
|
||||
showSDK: false,
|
||||
// 调用接口
|
||||
showInterface: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataList (item) {
|
||||
if (item) {
|
||||
this.dataList = item
|
||||
}
|
||||
},
|
||||
insertList (val) {
|
||||
if (val) {
|
||||
if (this.dataForm.type === '应用资源') {
|
||||
this.dataView = val.filter(
|
||||
(item) => item.name === this.dataForm.type + '一'
|
||||
)[0]
|
||||
this.dataForm.infoList.map((item, index) => {
|
||||
this.dataView.children.map((itemView, indexView) => {
|
||||
// console.log('itemView', itemView)
|
||||
itemView.children.map((itemViewSon, indexViewSon) => {
|
||||
// console.log('itemViewSon', itemViewSon)
|
||||
itemViewSon.children.map((itemSon, indexSon) => {
|
||||
// console.log('itemSon', itemSon)
|
||||
if (itemSon.name.indexOf('描述') != -1) {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.description
|
||||
} else if (itemSon.name.indexOf('名称') != -1) {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.name
|
||||
} else if (itemSon.name.indexOf('能力类型') != -1) {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.type
|
||||
} else if (itemSon.name.indexOf('共享条件') != -1) {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.shareCondition
|
||||
} else if (itemSon.name === '部门联系人') {
|
||||
console.log('itemSon.name', itemSon.name)
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.deptContacts
|
||||
} else if (itemSon.name.indexOf('属部门') != -1) {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.unit
|
||||
} else if (itemSon.name === '部门联系人电话') {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.deptPhone
|
||||
} else if (
|
||||
itemSon.name === '关联组件信息' &&
|
||||
item.attrType === '关联组件信息'
|
||||
) {
|
||||
this.queryPartAppByKeyIdFunction(
|
||||
indexView,
|
||||
indexViewSon,
|
||||
indexSon
|
||||
)
|
||||
} else if (itemSon.name === item.attrType) {
|
||||
if (itemSon.type !== ' multipleAdditions') {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = item.attrValue
|
||||
} else {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = JSON.parse(item.attrValue)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
if (item.attrType === '功能介绍') {
|
||||
this.dataForm.infoList[index].attrValue = JSON.parse(
|
||||
item.attrValue
|
||||
)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const componentType = this.dataForm.infoList.filter(
|
||||
(item) => item.attrType === '组件类型'
|
||||
)
|
||||
this.dataView = val.filter(
|
||||
(item) => item.name === this.dataForm.type + '一'
|
||||
)[0]
|
||||
this.dataView = this.dataView.children.filter(
|
||||
(item) => item.name === componentType[0].attrValue
|
||||
)[0]
|
||||
this.dataForm.infoList.map((item, index) => {
|
||||
this.dataView.children.map((itemView, indexView) => {
|
||||
console.log('itemView', itemView)
|
||||
itemView.children.map((itemViewSon, indexViewSon) => {
|
||||
console.log('itemViewSon', itemViewSon)
|
||||
itemViewSon.children.map((itemSon, indexSon) => {
|
||||
console.log('itemSon', itemSon)
|
||||
if (itemSon.name.indexOf('描述') != -1) {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.description
|
||||
} else if (itemSon.name.indexOf('名称') != -1) {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.name
|
||||
} else if (itemSon.name.indexOf('共享条件') != -1) {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.shareCondition
|
||||
} else if (itemSon.name.indexOf('共享方式') != -1) {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.shareMode
|
||||
} else if (itemSon.name.indexOf('共享类型') != -1) {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.shareType
|
||||
} else if (itemSon.name === '部门联系人') {
|
||||
console.log('itemSon.name', itemSon.name)
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.deptContacts
|
||||
} else if (itemSon.name.indexOf('属部门') != -1) {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.unit
|
||||
} else if (itemSon.name === '部门联系人电话') {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.deptPhone
|
||||
} else if (itemSon.name.indexOf('接口请求方式') != -1) {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = this.dataForm.apiMethodType
|
||||
} else if (
|
||||
itemSon.name === '来源应用' &&
|
||||
item.attrType === '来源应用'
|
||||
) {
|
||||
this.queryPartAppByKeyIdFunction(
|
||||
indexView,
|
||||
indexViewSon,
|
||||
indexSon
|
||||
)
|
||||
} else if (itemSon.name === item.attrType) {
|
||||
if (itemSon.type !== ' multipleAdditions') {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = item.attrValue
|
||||
} else if (itemSon.type === ' multipleAdditions') {
|
||||
this.dataView.children[indexView].children[
|
||||
indexViewSon
|
||||
].children[indexSon].note1 = JSON.parse(item.attrValue)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
if (
|
||||
item.attrType === '算法优势' ||
|
||||
item.attrType === '应用场景' ||
|
||||
item.attrType === '功能介绍'
|
||||
) {
|
||||
this.dataForm.infoList[index].attrValue = JSON.parse(
|
||||
item.attrValue
|
||||
)
|
||||
}
|
||||
})
|
||||
console.log(
|
||||
'valvalvalvalvalvalvalvalvalvalval',
|
||||
this.dataForm,
|
||||
this.dataView
|
||||
)
|
||||
// 智能算法-使用方式-3种方式联动
|
||||
this.dataView.children.map((val) => {
|
||||
if (val.name === '部署与使用') {
|
||||
val.children.map((val) => {
|
||||
if (val.name === '使用方式') {
|
||||
val.children.map((val) => {
|
||||
if (val.name === '使用方式') {
|
||||
if (val.note1 === 'SDK') {
|
||||
this.showSDK = true
|
||||
} else if (val.note1 === '平台对接') {
|
||||
this.showDocking = true
|
||||
} else if (val.note1 === '调用接口') {
|
||||
this.showInterface = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
videoAndImg (link) {
|
||||
if (link) {
|
||||
window.open(link)
|
||||
} else {
|
||||
this.$message({
|
||||
message: '未上传',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
},
|
||||
deptName () {
|
||||
console.log(this.dataForm.deptId)
|
||||
this.$http
|
||||
.get(`/sys/dept/${this.dataForm.deptId}`)
|
||||
.then(({ data: res }) => {
|
||||
console.log(res.data.name, 'res')
|
||||
this.unit = res.data.name
|
||||
})
|
||||
},
|
||||
queryPartAppByKeyIdFunction (index, indexSon, indexSonSon) {
|
||||
if (this.dataForm.type === '组件服务') {
|
||||
this.$http
|
||||
.get(
|
||||
'/dataResourceRel/queryApp4PartByKeyId' +
|
||||
'?keyId=' +
|
||||
this.dataForm.id
|
||||
)
|
||||
.then(({ data: res }) => {
|
||||
this.dataView.children[index].children[indexSon].children[
|
||||
indexSonSon
|
||||
].note1 = ''
|
||||
res.data.map((item) => {
|
||||
this.dataView.children[index].children[indexSon].children[
|
||||
indexSonSon
|
||||
].note1 += item.name + ';'
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$http
|
||||
.get(
|
||||
'/dataResourceRel/queryPart4AppByKeyId?keyId=' +
|
||||
this.dataForm.id +
|
||||
'&type=' +
|
||||
'组件服务'
|
||||
)
|
||||
.then(({ data: res }) => {
|
||||
this.dataView.children[index].children[indexSon].children[
|
||||
indexSonSon
|
||||
].note1 = ''
|
||||
res.data.map((item) => {
|
||||
this.dataView.children[index].children[indexSon].children[
|
||||
indexSonSon
|
||||
].note1 += item.name + ';'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {},
|
||||
mounted () {
|
||||
this.deptName()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.el-tooltip__popper {
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
.dataTitle {
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.dataTitleSon {
|
||||
padding-left: 30px;
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
margin-bottom: 20px;
|
||||
background: url('~@/assets/img/sj-jx.png') no-repeat;
|
||||
background-position-x: 15px;
|
||||
}
|
||||
.multipleAdditionsClass {
|
||||
display: flex;
|
||||
& > div {
|
||||
margin-right: 30px;
|
||||
border: 1px solid #3c9bcd;
|
||||
width: 212px;
|
||||
height: 182px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
& > div:first-child {
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
line-height: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 6;
|
||||
line-height: initial;
|
||||
}
|
||||
& > div:nth-child(3) {
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 6;
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
.videoAndImgCss {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
border: 1px solid #3c9bcd;
|
||||
line-height: 12px;
|
||||
padding: 5px;
|
||||
margin-top: 10px;
|
||||
background: rgba(60, 155, 205, 0.1);
|
||||
}
|
||||
.textAndImg {
|
||||
display: flex;
|
||||
padding-left: 30px;
|
||||
.textAndImgSon {
|
||||
width: 212px;
|
||||
height: 182px;
|
||||
margin-right: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
& > div {
|
||||
-webkit-line-clamp: 5;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
& > div:first-child {
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
& > div:nth-child(3) {
|
||||
margin-top: 10px;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
border: 1px solid #3c9bcd;
|
||||
line-height: 12px;
|
||||
padding: 5px;
|
||||
margin-top: 10px;
|
||||
background: rgba(60, 155, 205, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataContent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 33%);
|
||||
padding-left: 30px;
|
||||
}
|
||||
::v-deep .el-form-item__content {
|
||||
display: inline-block;
|
||||
input {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,374 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmitHandle()"
|
||||
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
|
||||
>
|
||||
<div v-if="flagShow">
|
||||
<ResourcesAndServices
|
||||
:dataForm="dataForm"
|
||||
:insertList="insertList"
|
||||
></ResourcesAndServices>
|
||||
</div>
|
||||
<el-form-item
|
||||
v-if="dataForm.enclosure"
|
||||
label="申请附件"
|
||||
prop="enclosure"
|
||||
>
|
||||
<el-button @click="downloadFile(dataForm.enclosure, '申请附件')"
|
||||
>附件下载</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 流程综合组件 -->
|
||||
<!-- <ren-process-multiple
|
||||
v-if="processVisible"
|
||||
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
|
||||
saveFormUrl="/processForm/tabilityapplication"
|
||||
dataFormName="dataForm"
|
||||
ref="renProcessMultiple"
|
||||
></ren-process-multiple> -->
|
||||
<!-- 审批 -->
|
||||
<div class="agreeOr" v-if="taskId">
|
||||
<h3>审批</h3>
|
||||
<div>
|
||||
<el-button type="primary" @click="showDialog('同意')">同意</el-button>
|
||||
<el-button type="danger" plain @click="showDialog('驳回')"
|
||||
>驳回</el-button
|
||||
>
|
||||
<!-- <el-radio-group v-model="agreeOrList" style="width: 230px">
|
||||
<el-radio-button label="同意" class="blueAll">同意</el-radio-button>
|
||||
<el-radio-button label="退回" class="redAll">退回</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-input
|
||||
v-if="agreeOrList === '同意'"
|
||||
v-model="inputAgree"
|
||||
placeholder="请输入同意意见"
|
||||
></el-input>
|
||||
<el-input
|
||||
v-if="agreeOrList === '退回'"
|
||||
v-model="inputNo"
|
||||
placeholder="请输入退回意见"
|
||||
></el-input>
|
||||
<el-button
|
||||
class="inputBule"
|
||||
@click.native="agreeOrNot($store.state.contentTabsActiveName)"
|
||||
>提交</el-button
|
||||
> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 流程详情 -->
|
||||
<ren-process-detail></ren-process-detail>
|
||||
<el-dialog
|
||||
title="审批意见"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-input v-model="input" placeholder="请输入审批意见"></el-input>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose2">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click.native="agreeOrNot($store.state.contentTabsActiveName)"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '@/views/bus.js'
|
||||
import ResourcesAndServices from './ResourcesAndServices.vue'
|
||||
import debounce from 'lodash/debounce'
|
||||
import qs from 'qs'
|
||||
|
||||
export default {
|
||||
// 注入公共方法
|
||||
// mixins: [processModule],
|
||||
components: {
|
||||
ResourcesAndServices
|
||||
},
|
||||
props: {
|
||||
// fromList: {
|
||||
// // type: Array,
|
||||
// // default: () => {
|
||||
// // return []
|
||||
// // }
|
||||
// }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dialogType: '',
|
||||
input: '',
|
||||
flagShow: false,
|
||||
// processVisible: true,
|
||||
visible: false,
|
||||
// 表单属性是否可编辑
|
||||
fieldDisabled: false,
|
||||
dataForm: {},
|
||||
id: '',
|
||||
shifoushizujian: true,
|
||||
coverageNotShow: true,
|
||||
nameNotShow: false,
|
||||
algorithmShow: true,
|
||||
insertList: [],
|
||||
inputAgree: '',
|
||||
inputNo: '',
|
||||
agreeOrList: '同意',
|
||||
taskId: ''
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
created () {
|
||||
// 将业务KEY赋值给表单
|
||||
console.log('params=================>', this.$route, this.$route.params)
|
||||
this.taskId = this.$route.params.taskId
|
||||
this.dataForm.taskId = this.$route.params.taskId
|
||||
this.init()
|
||||
console.log('fromList', this.$router.currentRoute.params.businessKey)
|
||||
// this.dataForm = this.$router.currentRoute.params.params.params.resourceDTO
|
||||
var callbacks = {
|
||||
startProcessSuccessCallback: this.closeCurrentTab,
|
||||
startProcessErrorCallback: this.startProcessErrorCallback,
|
||||
taskHandleSuccessCallback: this.closeCurrentTab,
|
||||
taskHandleErrorCallback: this.taskHandleErrorCallback,
|
||||
formSaveSuccessCallback: null,
|
||||
formSaveErrorCallback: null
|
||||
}
|
||||
// 初始化综合组件
|
||||
this.initProcessMultiple(callbacks)
|
||||
},
|
||||
mounted () {
|
||||
const businessKey = this.$router.currentRoute.params.businessKey
|
||||
this.getInfo(businessKey)
|
||||
this.methodsThree()
|
||||
console.log(this.taskId, 'this.dataForm.taskId')
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
getInfo (id) {
|
||||
this.$http.get('/resourceMountApply/' + id).then(({ data: res }) => {
|
||||
this.dataForm = res.data.resourceDTO
|
||||
if (this.dataForm) {
|
||||
console.log('this.dataForm', this.dataForm)
|
||||
this.flagShow = true
|
||||
}
|
||||
})
|
||||
},
|
||||
showDialog (title) {
|
||||
this.dialogVisible = true
|
||||
this.dialogType = title
|
||||
},
|
||||
handleClose (done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then((_) => {
|
||||
this.input = ''
|
||||
done()
|
||||
})
|
||||
.catch((_) => {})
|
||||
},
|
||||
handleClose2 () {
|
||||
this.dialogVisible = false
|
||||
this.input = ''
|
||||
},
|
||||
methodsThree () {
|
||||
this.$http.get('/category/getCategoryTree').then((res) => {
|
||||
this.insertList = res.data.data
|
||||
})
|
||||
},
|
||||
init () {
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataForm.resetFields()
|
||||
// if (this.dataForm.id) {
|
||||
// 如业务KEY已存在，不允许编辑
|
||||
this.fieldDisabled = true
|
||||
// this.id = this.$router.currentRoute.businessKey
|
||||
console.log('id', this.$router.currentRoute.params.businessKey)
|
||||
// }
|
||||
})
|
||||
},
|
||||
// 同意与退回
|
||||
agreeOrNot: debounce(
|
||||
function (data) {
|
||||
if (this.dialogType === '同意') {
|
||||
if (this.input !== '') {
|
||||
console.log('this.dataForm', this.dataForm)
|
||||
const params = qs.stringify({
|
||||
taskId: this.taskId,
|
||||
comment: this.input
|
||||
})
|
||||
console.log(params)
|
||||
this.$http
|
||||
.post('/act/task/complete?' + params)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error(res.msg)
|
||||
if (this.callbacks.taskHandleErrorCallback) {
|
||||
this.callbacks.taskHandleErrorCallback(res)
|
||||
}
|
||||
return
|
||||
}
|
||||
bus.$emit('abilityResourceShelfInit')
|
||||
this.$message({
|
||||
message: this.$t('prompt.success'),
|
||||
type: 'success',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.dialogVisible = false
|
||||
this.input = ''
|
||||
if (this.callbacks.taskHandleSuccessCallback) {
|
||||
this.callbacks.taskHandleSuccessCallback(res)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
this.tabRemoveHandle(data)
|
||||
} else {
|
||||
this.$message.error('请输入审批意见！')
|
||||
}
|
||||
} else if (this.dialogType === '驳回') {
|
||||
if (this.input !== '') {
|
||||
const params = qs.stringify({
|
||||
taskId: this.taskId,
|
||||
comment: this.input
|
||||
})
|
||||
this.$http
|
||||
// .post('/act/task/endProcess?', params)
|
||||
.post('/act/task/backToFirst?', params)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error(res.msg)
|
||||
if (this.callbacks.taskHandleErrorCallback) {
|
||||
this.callbacks.taskHandleErrorCallback(res)
|
||||
}
|
||||
return
|
||||
}
|
||||
bus.$emit('abilityResourceShelfInit')
|
||||
this.$message({
|
||||
message: this.$t('prompt.success'),
|
||||
type: 'success',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
if (this.callbacks.taskHandleSuccessCallback) {
|
||||
this.callbacks.taskHandleSuccessCallback(res)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.tabRemoveHandle(data)
|
||||
} else {
|
||||
this.$message.error('请输入审批意见！')
|
||||
}
|
||||
}
|
||||
},
|
||||
1000,
|
||||
{ leading: true, trailing: false }
|
||||
),
|
||||
tabRemoveHandle (tabName) {
|
||||
console.log(tabName, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
|
||||
if (tabName === 'home') {
|
||||
return false
|
||||
}
|
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
|
||||
(item) => item.name !== tabName
|
||||
)
|
||||
if (this.$store.state.contentTabs.length <= 0) {
|
||||
this.$store.state.sidebarMenuActiveName =
|
||||
this.$store.state.contentTabsActiveName = 'home'
|
||||
return false
|
||||
}
|
||||
// 当前选中tab被删除
|
||||
if (tabName === this.$store.state.contentTabsActiveName) {
|
||||
const tab =
|
||||
this.$store.state.contentTabs[
|
||||
this.$store.state.contentTabs.length - 1
|
||||
]
|
||||
this.$router.push({
|
||||
name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
|
||||
params: { ...tab.params },
|
||||
query: { ...tab.query }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.kuandukuandukuandu {
|
||||
max-width: 1500px;
|
||||
}
|
||||
.wrapper {
|
||||
}
|
||||
::v-deep .agreeOr > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.el-input {
|
||||
margin-right: 10px;
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
::v-deep .agreeOr > div:last-of-type {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.blueAll {
|
||||
::v-deep .el-radio-button__inner {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
background: #ffffff;
|
||||
color: #0558e1;
|
||||
border: 1px solid #0558e1;
|
||||
}
|
||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
box-shadow: unset !important;
|
||||
background: #0558e1;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.inputBule {
|
||||
width: 55px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
background: #0558e1;
|
||||
color: #ffffff;
|
||||
border: 1px solid #0558e1;
|
||||
}
|
||||
.redAll {
|
||||
margin-left: 10px;
|
||||
::v-deep .el-radio-button__inner {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #e83a48;
|
||||
background: #ffffff;
|
||||
color: #e83a48;
|
||||
margin-left: 10px;
|
||||
}
|
||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
box-shadow: unset !important;
|
||||
color: #ffffff;
|
||||
background: #e83a48;
|
||||
}
|
||||
}
|
||||
.blueInput {
|
||||
width: 55px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,673 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-29 15:59:51
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-08-04 14:34:45
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<!-- 流程业务表单 -->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill" :key="showKey">
|
||||
<!-- 申请人详情 -->
|
||||
<div>
|
||||
<h3>申请人信息</h3>
|
||||
<div class="big-BOX">
|
||||
<p>
|
||||
<span class="text"
|
||||
>申请人：<span> {{ dataForm.content.user || '--' }}</span></span
|
||||
>
|
||||
<span class="text"
|
||||
>电话：<span>{{ dataForm.content.phone || '--' }}</span></span
|
||||
>
|
||||
<span class="text"
|
||||
>单位：<span>{{ dataForm.content.unit || '--' }}</span></span
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<span class="text">
|
||||
能力申请标题：<span>
|
||||
{{ dataForm.content.title || '--' }}</span
|
||||
></span
|
||||
>
|
||||
<span class="text" v-if="dataForm.content.applicationSystem"
|
||||
>应用系统：<span>{{
|
||||
dataForm.content.applicationSystem || '--'
|
||||
}}</span></span
|
||||
>
|
||||
<span class="text" ></span>
|
||||
</p>
|
||||
<p>
|
||||
<span v-if="dataForm.content.applicationSceneStr"
|
||||
>应用场景：<span>
|
||||
{{ dataForm.content.applicationSceneStr || '--' }}</span
|
||||
></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>
|
||||
需求依据：<span>
|
||||
{{ dataForm.content.applicationBackground || '--' }}</span
|
||||
></span>
|
||||
</p>
|
||||
<!-- <p>
|
||||
<span>
|
||||
能力应用期望效果：<span>
|
||||
{{ dataForm.content.effectWish || '--' }}</span
|
||||
></span
|
||||
>
|
||||
</p> -->
|
||||
<!-- <p v-if="dataForm.content.enclosure" class="lastP">
|
||||
<span>
|
||||
申请附件：<span>
|
||||
{{ dataForm.content.enclosure || '--'
|
||||
}}<button @click="downloadFile2(dataForm.content.enclosure)">
|
||||
预览
|
||||
</button></span
|
||||
></span
|
||||
>
|
||||
</p> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 申请能力 -->
|
||||
<div class="AbilityApply">
|
||||
<h3>申请能力</h3>
|
||||
<ul v-for="item in dataList" :key="item.id">
|
||||
<!-- <li class="title">{{item.address}}</li> -->
|
||||
<li class="clearfix">
|
||||
<img src="~@/assets/img/imgLeft.png" />
|
||||
<div>
|
||||
<h2>
|
||||
{{ item.name }}<span>{{ item.type }}</span>
|
||||
</h2>
|
||||
<p>{{ item.describe }}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 流程综合组件 -->
|
||||
<!-- <ren-process-multiple
|
||||
v-if="processVisible"
|
||||
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
|
||||
saveFormUrl="/processForm/tabilityapplication"
|
||||
dataFormName="dataForm"
|
||||
ref="renProcessMultiple"
|
||||
></ren-process-multiple> -->
|
||||
|
||||
<!-- 审批 -->
|
||||
<div class="agreeOr" v-if="dataForm.taskId">
|
||||
<h3>审批</h3>
|
||||
<div>
|
||||
<!-- <el-radio-group v-model="agreeOrList" style="width:230px;">
|
||||
<el-radio-button label="同意" class="blueAll" @click="showDialog('同意')">同意</el-radio-button>
|
||||
<el-radio-button label="退回" class="redAll" @click="showDialog('退回')">退回</el-radio-button>
|
||||
</el-radio-group> -->
|
||||
<el-button type="primary" @click="showDialog('同意')">同意</el-button>
|
||||
<el-button type="danger" plain @click="showDialog('驳回')"
|
||||
>驳回</el-button
|
||||
>
|
||||
<!-- <el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意意见"></el-input>
|
||||
<el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回意见"></el-input>
|
||||
<el-button class="inputBule" @click="agreeOrNot">提交</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流程详情 -->
|
||||
<ren-process-detail></ren-process-detail>
|
||||
<el-dialog
|
||||
title="审批意见"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-input v-model="input" placeholder="请输入审批意见"></el-input>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose2">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click.native="agreeOrNot($store.state.contentTabsActiveName)"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入工作流公共方法
|
||||
import processModule from '@/mixins/process-module'
|
||||
// import mixinViewModule from '@/mixins/view-module'
|
||||
import debounce from 'lodash/debounce'
|
||||
import qs from 'qs'
|
||||
import RenProcessDetail from '@/components/ren-process-detail/src/ren-process-detail'
|
||||
import bus from '@/views/bus.js'
|
||||
export default {
|
||||
// 注入公共方法
|
||||
mixins: [processModule],
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dialogType: '',
|
||||
input: '',
|
||||
visible: true,
|
||||
showKey: 0,
|
||||
// 表单属性是否可编辑
|
||||
// fieldDisabled: false,
|
||||
// dataForm: {
|
||||
// id: '',
|
||||
// user: '',
|
||||
// phone: '',
|
||||
// unit: '',
|
||||
// area: '',
|
||||
// system: '',
|
||||
// scene: '',
|
||||
// basis: ''
|
||||
// }
|
||||
dataForm: {
|
||||
id: '',
|
||||
content: {}
|
||||
},
|
||||
dataList: [],
|
||||
inputAgree: '',
|
||||
inputNo: '',
|
||||
agreeOrList: '同意'
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 将业务KEY赋值给表单
|
||||
console.log('params=================>', this.$route, this.$route.params)
|
||||
this.dataForm.taskId = this.$route.params.taskId
|
||||
this.dataForm.instanceId = this.$route.params.processInstanceId
|
||||
this.init()
|
||||
// // 流程回调
|
||||
var callbacks = {
|
||||
startProcessSuccessCallback: this.closeCurrentTab,
|
||||
startProcessErrorCallback: this.startProcessErrorCallback,
|
||||
taskHandleSuccessCallback: this.closeCurrentTab,
|
||||
taskHandleErrorCallback: this.taskHandleErrorCallback,
|
||||
formSaveSuccessCallback: null,
|
||||
formSaveErrorCallback: null
|
||||
}
|
||||
// 初始化综合组件
|
||||
this.initProcessMultiple(callbacks)
|
||||
},
|
||||
computed: {
|
||||
// dataRule () {
|
||||
// return {
|
||||
// inputAgree: [
|
||||
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
// ],
|
||||
// inputNo: [
|
||||
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
},
|
||||
components: {
|
||||
RenProcessDetail
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
// this.visible = true
|
||||
this.$nextTick(() => {
|
||||
// this.$refs.dataForm.resetFields()
|
||||
this.getInfo()
|
||||
if (this.dataForm.taskId) {
|
||||
// 如业务KEY已存在，不允许编辑
|
||||
// this.fieldDisabled = true
|
||||
console.log(this.dataForm, 'init')
|
||||
}
|
||||
})
|
||||
},
|
||||
showDialog (title) {
|
||||
this.dialogVisible = true
|
||||
this.dialogType = title
|
||||
},
|
||||
handleClose (done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then((_) => {
|
||||
this.input = ''
|
||||
done()
|
||||
})
|
||||
.catch((_) => {})
|
||||
},
|
||||
handleClose2 () {
|
||||
this.dialogVisible = false
|
||||
this.input = ''
|
||||
},
|
||||
downloadFile2 (url) {
|
||||
console.log(window.SITE_CONFIG.previewUrl)
|
||||
window.open(
|
||||
window.SITE_CONFIG.previewUrl +
|
||||
'hisense_office/onlinePreview?url=' +
|
||||
btoa(encodeURI(url))
|
||||
)
|
||||
},
|
||||
// 获取信息
|
||||
getInfo () {
|
||||
let params = ''
|
||||
if (this.dataForm.taskId) {
|
||||
params = `taskId=${this.dataForm.taskId}`
|
||||
this.$http
|
||||
.get(
|
||||
`/act/task/getTaskVariables?${params}&variableName=tAbilityApplicationDTOList`
|
||||
)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log(res.data)
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
console.log(
|
||||
res.data,
|
||||
this.dataForm,
|
||||
'elas============================'
|
||||
)
|
||||
if (res.data.tAbilityApplicationDTOList[0].applicationScene) {
|
||||
res.data.tAbilityApplicationDTOList[0].applicationSceneStr = ''
|
||||
res.data.tAbilityApplicationDTOList[0].applicationScene.map(
|
||||
(val, index) => {
|
||||
res.data.tAbilityApplicationDTOList[0].applicationSceneStr +=
|
||||
val
|
||||
if (
|
||||
index <
|
||||
res.data.tAbilityApplicationDTOList[0].applicationScene
|
||||
.length -
|
||||
1
|
||||
) {
|
||||
res.data.tAbilityApplicationDTOList[0].applicationSceneStr +=
|
||||
'、'
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
this.dataForm.content = res.data.tAbilityApplicationDTOList[0]
|
||||
const obj = {
|
||||
name: '申请摄像头列表',
|
||||
type: '基础设施',
|
||||
describe: ''
|
||||
}
|
||||
let flag = false
|
||||
res.data.tAbilityApplicationDTOList.map((val) => {
|
||||
if (val.cameraList) {
|
||||
flag = true
|
||||
obj.describe += val.system
|
||||
obj.describe += '；'
|
||||
} else {
|
||||
this.$http.get('/resource/' + val.resourceId).then((res1) => {
|
||||
// console.log(res1.data.data, '1111111111111111111111111111111111')
|
||||
this.dataList.push({
|
||||
name: res1.data.data.name,
|
||||
type: res1.data.data.type,
|
||||
describe: res1.data.data.description
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
if (flag) {
|
||||
this.dataList.push(obj)
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
params = `instanceId=${this.dataForm.instanceId}`
|
||||
this.$http
|
||||
.get(
|
||||
`/act/his/getVariablesByInstanceId?${params}&variableName=tAbilityApplicationDTOList`
|
||||
)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log(res.data)
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
console.log(
|
||||
res.data,
|
||||
this.dataForm,
|
||||
'elas============================'
|
||||
)
|
||||
if (res.data[0].applicationScene) {
|
||||
res.data[0].applicationSceneStr = ''
|
||||
res.data[0].applicationScene.map((val, index) => {
|
||||
res.data[0].applicationSceneStr += val
|
||||
if (index < res.data[0].applicationScene.length - 1) {
|
||||
res.data[0].applicationSceneStr += '、'
|
||||
}
|
||||
})
|
||||
}
|
||||
this.dataForm.content = res.data[0]
|
||||
const obj = {
|
||||
name: '申请摄像头列表',
|
||||
type: '基础设施',
|
||||
describe: ''
|
||||
}
|
||||
let flag = false
|
||||
res.data.tAbilityApplicationDTOList.map((val) => {
|
||||
if (val.cameraList) {
|
||||
flag = true
|
||||
obj.describe += val.system
|
||||
} else {
|
||||
this.$http.get('/resource/' + val.resourceId).then((res1) => {
|
||||
// console.log(res1.data.data, '1111111111111111111111111111111111')
|
||||
this.dataList.push({
|
||||
name: res1.data.data.name,
|
||||
type: res1.data.data.type,
|
||||
describe: res1.data.data.description
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
if (flag) {
|
||||
this.dataList.push(obj)
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
},
|
||||
// 申请能力
|
||||
applyData () {
|
||||
this.$http
|
||||
.get(`/resource/select/${this.dataForm.instanceId}`)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log(res.data, 'hhhhh')
|
||||
// return this.$message.error(res.msg)
|
||||
}
|
||||
// console.log(res.data, 'elas')
|
||||
// this.dataForm.content = res.data
|
||||
// console.log(this.dataForm, 'ela')
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
// 同意与退回
|
||||
agreeOrNot: debounce(
|
||||
function (data) {
|
||||
if (this.dialogType === '同意') {
|
||||
if (this.input !== '') {
|
||||
console.log('this.dataForm', this.dataForm)
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.taskId,
|
||||
comment: this.input
|
||||
})
|
||||
console.log(params)
|
||||
this.$http
|
||||
.post('/act/task/complete?' + params)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error(res.msg)
|
||||
if (this.callbacks.taskHandleErrorCallback) {
|
||||
this.callbacks.taskHandleErrorCallback(res)
|
||||
}
|
||||
return
|
||||
}
|
||||
bus.$emit('competencyApplicationInit')
|
||||
this.$message({
|
||||
message: this.$t('prompt.success'),
|
||||
type: 'success',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.dialogVisible = false
|
||||
if (this.callbacks.taskHandleSuccessCallback) {
|
||||
this.callbacks.taskHandleSuccessCallback(res)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
this.tabRemoveHandle(data)
|
||||
} else {
|
||||
this.$message.error('请输入审批意见！')
|
||||
}
|
||||
} else if (this.dialogType === '驳回') {
|
||||
if (this.input !== '') {
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.taskId,
|
||||
comment: this.input
|
||||
})
|
||||
this.$http
|
||||
.post('/act/task/backToFirst?', params)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error(res.msg)
|
||||
if (this.callbacks.taskHandleErrorCallback) {
|
||||
this.callbacks.taskHandleErrorCallback(res)
|
||||
}
|
||||
return
|
||||
}
|
||||
bus.$emit('competencyApplicationInit')
|
||||
this.$message({
|
||||
message: this.$t('prompt.success'),
|
||||
type: 'success',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
if (this.callbacks.taskHandleSuccessCallback) {
|
||||
this.callbacks.taskHandleSuccessCallback(res)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.tabRemoveHandle(data)
|
||||
} else {
|
||||
this.$message.error('请输入审批意见！')
|
||||
}
|
||||
}
|
||||
},
|
||||
1000,
|
||||
{ leading: true, trailing: false }
|
||||
),
|
||||
tabRemoveHandle (tabName) {
|
||||
console.log(tabName, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
|
||||
if (tabName === 'home') {
|
||||
return false
|
||||
}
|
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
|
||||
(item) => item.name !== tabName
|
||||
)
|
||||
if (this.$store.state.contentTabs.length <= 0) {
|
||||
this.$store.state.sidebarMenuActiveName =
|
||||
this.$store.state.contentTabsActiveName = 'home'
|
||||
return false
|
||||
}
|
||||
// 当前选中tab被删除
|
||||
if (tabName === this.$store.state.contentTabsActiveName) {
|
||||
const tab =
|
||||
this.$store.state.contentTabs[
|
||||
this.$store.state.contentTabs.length - 1
|
||||
]
|
||||
this.$router.push({
|
||||
name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
|
||||
params: { ...tab.params },
|
||||
query: { ...tab.query }
|
||||
})
|
||||
}
|
||||
},
|
||||
// 启动流程出错回调
|
||||
startProcessErrorCallback (data) {
|
||||
console.log(data)
|
||||
},
|
||||
// 任务处理出错回调
|
||||
taskHandleErrorCallback (data) {}
|
||||
},
|
||||
mounted () {
|
||||
// this.applyData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .big-BOX {
|
||||
background: rgba(244, 245, 248, 0.8);
|
||||
padding: 24px;
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
}
|
||||
p {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #212121;
|
||||
font-size: 14px;
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
line-height: 32px;
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
.lastP {
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
span {
|
||||
display: flex;
|
||||
span {
|
||||
padding: 0 12px;
|
||||
height: 32px;
|
||||
background: rgba(232, 234, 239, 1);
|
||||
border-radius: 2px;
|
||||
button {
|
||||
background: unset;
|
||||
border: 0;
|
||||
color: #0558e1;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .AbilityApply {
|
||||
margin-top: 32px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
border-bottom: 1px solid #dddee1;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
ul {
|
||||
padding-left: 0px;
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 30px 0;
|
||||
border-bottom: 1px solid #dddee1;
|
||||
display: flex;
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
div {
|
||||
margin-left: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
h2 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
display: flex;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
background: rgba(0, 184, 230, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clearfix:after {
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
.title {
|
||||
color: #0558e1;
|
||||
font-size: 18px;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.title:before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
background: #0558e1;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .agreeOr > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.el-input {
|
||||
margin-right: 10px;
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
::v-deep .agreeOr > div:last-of-type {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.blueAll {
|
||||
::v-deep .el-radio-button__inner {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
background: #ffffff;
|
||||
color: #0558e1;
|
||||
border: 1px solid #0558e1;
|
||||
}
|
||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
box-shadow: unset !important;
|
||||
background: #0558e1;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.inputBule {
|
||||
width: 55px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
background: #0558e1;
|
||||
color: #ffffff;
|
||||
border: 1px solid #0558e1;
|
||||
}
|
||||
.redAll {
|
||||
margin-left: 10px;
|
||||
::v-deep .el-radio-button__inner {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #e83a48;
|
||||
background: #ffffff;
|
||||
color: #e83a48;
|
||||
margin-left: 10px;
|
||||
}
|
||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
box-shadow: unset !important;
|
||||
color: #ffffff;
|
||||
background: #e83a48;
|
||||
}
|
||||
}
|
||||
.blueInput {
|
||||
width: 55px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,284 @@
|
|||
<!--
|
||||
*传参示例
|
||||
html:
|
||||
<input-select-checkbox
|
||||
:type="typeSon"
|
||||
:name="nameSon"
|
||||
:value="valueSon"
|
||||
:options="optionSon">
|
||||
</input-select-checkbox>
|
||||
js:
|
||||
this.typeSon = 'select'//类型
|
||||
this.nameSon = '算法描述'//名称
|
||||
this.valueSon = '这是一个描述'//内容
|
||||
this.optionSon = ['1', '2', '3']//选项
|
||||
-->
|
||||
<template>
|
||||
<div id="inputSelectCheckbox">
|
||||
<!-- input框 -->
|
||||
<a-input v-if="type == 'input'" v-model:value="data.note1" :placeholder="'请输入' + name" @change="changeIiem(name,data.note1)"/>
|
||||
<!-- 下拉框 -->
|
||||
<el-select
|
||||
v-else-if="(type === 'select' && name !== '归属部门' && name !== '使用方式') || type == 'radio'"
|
||||
style="width: 240px"
|
||||
v-model:value="data.note1"
|
||||
@change="changeIiem(name,data.note1)"
|
||||
:placeholder="'请选择' + name">
|
||||
<el-option
|
||||
:value="itemSelect.dictLabel"
|
||||
v-for="(itemSelect, indexSelect) in options"
|
||||
:key="indexSelect">
|
||||
{{ itemSelect.dictLabel }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-else-if="(type === 'select' && name === '归属部门')"
|
||||
style="width: 240px"
|
||||
v-model:value="data.note1"
|
||||
filterable
|
||||
placeholder="请输入关键词"
|
||||
@change="changeIiem(name,data.note1)"
|
||||
:loading="loading">
|
||||
<el-option
|
||||
v-for="(itemSelect) in options"
|
||||
:key="itemSelect.id"
|
||||
:label="itemSelect.name"
|
||||
:value="itemSelect.id">
|
||||
{{ itemSelect.name }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-else-if="(type === 'select' && name === '使用方式')"
|
||||
style="width: 240px"
|
||||
v-model:value="data.note1"
|
||||
:placeholder="'请选择' + name"
|
||||
@change="showTypeClick"
|
||||
>
|
||||
<el-option
|
||||
:value="itemSelect.dictLabel"
|
||||
v-for="(itemSelect, indexSelect) in options"
|
||||
:key="indexSelect">
|
||||
{{ itemSelect.dictLabel }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
<!-- 多选 -->
|
||||
<div
|
||||
v-else-if="type === 'checkBox'"
|
||||
>
|
||||
<el-checkbox-group v-model="valueCheckBox" @change='chekBoxChange'>
|
||||
<el-checkbox-button v-for="val in options" :label="val.dictLabel" :key="val.dictLabel">{{val.dictLabel}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<!-- 不可点的input框 -->
|
||||
<el-input
|
||||
v-else-if="type === 'disabled'"
|
||||
v-model="value"
|
||||
:placeholder="'请输入' + name"
|
||||
:disabled="true"
|
||||
@change="changeIiem(name,data.note1)"
|
||||
/>
|
||||
<!-- 单选 -->
|
||||
<!-- <el-radio-group v-model:value="data.note1" v-else-if="type == 'radio'">
|
||||
<el-radio v-for="item in options" :label="item.dictLabel" :key="item.dictLabel">{{item.dictLabel}}</el-radio>
|
||||
</el-radio-group> -->
|
||||
<a-textarea v-else-if="type == 'textArea'" @change="changeIiem(name,data.note1)" v-model:value="data.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + name" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'inputSelectCheckbox',
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
type: String,
|
||||
data: Array,
|
||||
name: String,
|
||||
value: String,
|
||||
changeField: Array,
|
||||
options: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 多选放数据的数组
|
||||
valueCheckBox: [],
|
||||
// 单选数据
|
||||
regionSelect: '',
|
||||
showKey: 0,
|
||||
showType: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeIiem (name, value) {
|
||||
if (value && value !== '' && this.changeField.indexOf(name) == -1) {
|
||||
this.changeField.push(name)
|
||||
} else if (!value || value == '') {
|
||||
if (this.changeField.indexOf(name) > -1) {
|
||||
this.changeField.splice(this.changeField.indexOf(name), 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
selectOptions () {
|
||||
if (this.data.isLinkToDic === 'true' && this.data.linkValue) {
|
||||
this.$http
|
||||
.get(`/sys/dict/data/page?page=1&limit=20&dictTypeId=${this.data.linkValue}&deFlage=0`).then(({ data: res }) => {
|
||||
const dataList = []
|
||||
res.data.list.forEach((element) => {
|
||||
dataList.push(element)
|
||||
})
|
||||
this.options = dataList
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (this.data.name === '归属部门') {
|
||||
this.$http.get('/sys/dept/all').then(res => {
|
||||
const dataList = []
|
||||
res.data.data.forEach((element) => {
|
||||
dataList.push(element)
|
||||
})
|
||||
this.options = dataList
|
||||
if (!this.data.note1) {
|
||||
this.$http.get('/sys/user/info').then(({ data: res }) => {
|
||||
console.log(res.data)
|
||||
this.data.note1 = res.data.deptId
|
||||
})
|
||||
}
|
||||
})
|
||||
} else if (this.data.name === '部门联系人') {
|
||||
// this.$http.get('/sys/dept/all').then(res => {
|
||||
// const dataList = []
|
||||
// res.data.data.forEach((element) => {
|
||||
// dataList.push(element)
|
||||
// })
|
||||
// this.options = dataList
|
||||
if (this.data.note1 == null) {
|
||||
this.$http.get('/sys/user/info').then(({ data: res }) => {
|
||||
console.log(res.data)
|
||||
this.data.note1 = res.data.realName || ''
|
||||
})
|
||||
}
|
||||
// })
|
||||
} else if (this.data.name === '部门联系人电话') {
|
||||
// this.$http.get('/sys/dept/all').then(res => {
|
||||
// const dataList = []
|
||||
// res.data.data.forEach((element) => {
|
||||
// dataList.push(element)
|
||||
// })
|
||||
// this.options = dataList
|
||||
if (this.data.note1 == null) {
|
||||
this.$http.get('/sys/user/info').then(({ data: res }) => {
|
||||
console.log(res.data)
|
||||
this.data.note1 = res.data.mobile || ''
|
||||
})
|
||||
}
|
||||
// })
|
||||
}
|
||||
},
|
||||
chekBoxChange (list) {
|
||||
let str = ''
|
||||
list.map((val, index) => {
|
||||
str += val
|
||||
if (index < list.length - 1) {
|
||||
str += ';'
|
||||
}
|
||||
})
|
||||
this.data.note1 = str
|
||||
if (str !== '' && this.changeField.indexOf('应用领域') == -1) {
|
||||
this.changeField.push('应用领域')
|
||||
} else if (str == '') {
|
||||
if (this.changeField.indexOf('应用领域') > -1) {
|
||||
this.changeField.splice(this.changeField.indexOf('应用领域'), 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
showTypeClick (e) {
|
||||
this.showType = e
|
||||
console.log(e)
|
||||
this.$emit('show-type', this.showType)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.data.name === '应用领域') {
|
||||
if (this.data.note1) {
|
||||
this.valueCheckBox = this.data.note1.split(';')
|
||||
}
|
||||
} else if (this.data.name === '发布端') {
|
||||
if (this.data.note1) {
|
||||
this.valueCheckBox = this.data.note1.split(';')
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.selectOptions()
|
||||
this.showTypeClick('调用接口')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
#inputSelectCheckbox {
|
||||
// margin-top: 20px;
|
||||
width: calc(100% - 105px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
span:first-child {
|
||||
display: block;
|
||||
width: 120px;
|
||||
}
|
||||
::v-deep .el-select {
|
||||
.el-input__inner {
|
||||
resize: none;
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
::v-deep .ant-input {
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
resize: none;
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .el-textarea {
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .el-textarea__inner {
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
min-height: 32px;
|
||||
resize: none;
|
||||
}
|
||||
::v-deep .el-input__count {
|
||||
bottom: -20px;
|
||||
right: 5px;
|
||||
}
|
||||
::v-deep .el-checkbox-group {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
margin-top: -5px;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
::v-deep .el-checkbox-button__inner {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
width: 90px;
|
||||
height: 26px;
|
||||
border-radius: 13px;
|
||||
color: #333333;
|
||||
background: #f5f5f5;
|
||||
border: 1px #cccccc solid;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 10px 5px 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner {
|
||||
background: #0087ff;
|
||||
color: #fff;
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,388 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-07-08 09:54:50
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-28 20:09:53
|
||||
* @Description: 多条数据特殊处理
|
||||
-->
|
||||
<template>
|
||||
<div class="special">
|
||||
<div class="top">{{configure.name}}</div>
|
||||
<div class="bottom">
|
||||
<div class="items" v-show="data.length > 0">
|
||||
<div class="item" v-for="(val, index) in data" :key="'key1' + val.name + index">
|
||||
<p>
|
||||
<span>{{ configure.name }}-{{ index + 1 }}</span>
|
||||
<span></span>
|
||||
</p>
|
||||
<p v-for="(attr,index2) in configure.list" :key="'key2' + attr.name + index2">
|
||||
<span>{{ attr.name }}</span>
|
||||
<span v-if="attr.type === 'image'">
|
||||
<!-- <a-image :width="85" :height="60" :src="val.img" /> -->
|
||||
<el-image
|
||||
style="width: 85px; height: 60px"
|
||||
:src="val.img"
|
||||
:preview-src-list="[val.img]">
|
||||
</el-image>
|
||||
</span>
|
||||
<span v-else>{{ val[attr.field] + (attr.company || '') }}</span>
|
||||
</p>
|
||||
<div class="del">
|
||||
<i class="delImg" @click="del( index)"></i>
|
||||
<div @click="del(configure.name, index)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="add">添加更多{{ configure.name }}</div> -->
|
||||
<div class="form" v-for="(val, index) in configure.list" :key="'key3' + val.name + index">
|
||||
<span>{{ val.name }}</span>
|
||||
<a-input v-model:value="val.note1" ::maxlength="24" :placeholder="'请填写' + val.name + ',不超过24个字符'"
|
||||
v-if="val.type == 'input'"/>
|
||||
<template v-if="val.type == 'input2'">
|
||||
<a-input
|
||||
v-model:value="val.note1"
|
||||
:placeholder="'请填写' + val.name"
|
||||
style="width: 570px;"
|
||||
/>
|
||||
<span style="width: 2.5rem; padding-left: 0.1rem">
|
||||
{{
|
||||
numType == '一次性买断'
|
||||
? '元'
|
||||
: numType == '按调用次数'
|
||||
? '元/次'
|
||||
: numType == '按并发路数'
|
||||
? '元/路'
|
||||
: numType == '按年计费'
|
||||
? '元/年'
|
||||
: ''
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
<a-textarea v-model:value="val.note1" :showCount="true" :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'" @change="radioChange"/>
|
||||
<!-- <upload :key="showKey" type="图片" btnName="上传图片" :maxCount="1" :data="val" :list="[]" tip="支持图片类型，大小不超过100M"
|
||||
v-else-if="val.type == 'image'"></upload> -->
|
||||
<upload :key="showKey" :child='val' limit='1' accept='.jpg,.png' v-else-if="val.type == 'image'"></upload>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<a-button type="primary" @click="add(configure.name)">添加更多</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import upload from '@/views/modules/ability/upload.vue'
|
||||
// import upload from '@/views/modules/components/upload'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
upload
|
||||
},
|
||||
props: {
|
||||
configure: Object,
|
||||
showData: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: [],
|
||||
showKey: 0,
|
||||
numType: '一次性买断'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add (title, addFlag, submitFlag) {
|
||||
console.log(title, addFlag, submitFlag)
|
||||
const list = this.configure.list
|
||||
let flag = true
|
||||
list.forEach((item) => {
|
||||
if (item.type !== 'number' && !item.note1.length > 0) {
|
||||
flag = false
|
||||
} else if (item.type === 'number' && !item.note1 > 0) {
|
||||
flag = false
|
||||
}
|
||||
})
|
||||
if (flag) {
|
||||
const obj = {}
|
||||
let sfFlag = false
|
||||
|
||||
list.forEach((item) => {
|
||||
if (item.type === 'input2') {
|
||||
sfFlag = this.data.filter(
|
||||
(val) => val.type === this.numType
|
||||
)[0]
|
||||
if (sfFlag) {
|
||||
this.$message.warning('已添加过该类型！')
|
||||
return
|
||||
}
|
||||
obj[item.field] =
|
||||
item.note1 +
|
||||
(this.numType === '一次性买断'
|
||||
? '元'
|
||||
: this.numType === '按调用次数'
|
||||
? '元/次'
|
||||
: this.numType === '按并发路数'
|
||||
? '元/路'
|
||||
: this.numType === '按年计费'
|
||||
? '元/年'
|
||||
: '')
|
||||
} else {
|
||||
obj[item.field] = item.note1
|
||||
}
|
||||
})
|
||||
if (!sfFlag) {
|
||||
this.data.push(obj)
|
||||
}
|
||||
// this.data.push(obj)
|
||||
this.$emit('changeInfoList', {
|
||||
attrType: title,
|
||||
attrValue: JSON.stringify(this.data),
|
||||
delFlag: 0
|
||||
})
|
||||
list.forEach((item) => {
|
||||
item.note1 = ''
|
||||
this.showKey++
|
||||
})
|
||||
if (addFlag && submitFlag) {
|
||||
this.$emit('submitData')
|
||||
}
|
||||
} else {
|
||||
if (!addFlag) {
|
||||
this.$message.warning('请填写完整')
|
||||
} else {
|
||||
list.forEach((item) => {
|
||||
item.note1 = ''
|
||||
this.showKey++
|
||||
})
|
||||
if (submitFlag) {
|
||||
this.$emit('submitData')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
del (title, index) {
|
||||
this.data.splice(index, 1)
|
||||
const str = this.data.length > 0 ? JSON.stringify(this.data) : ''
|
||||
this.$emit('changeInfoList', {
|
||||
attrType: title,
|
||||
attrValue: str,
|
||||
delFlag: 0
|
||||
})
|
||||
},
|
||||
radioChange (e) {
|
||||
console.log(e, 'wewewe')
|
||||
this.numType = e.target.value
|
||||
}
|
||||
},
|
||||
created () {
|
||||
console.log('特殊处理=============>', this.showData)
|
||||
if (this.configure.name === '计费标准信息' || this.configure.name === '常见问题') {
|
||||
if (this.showData.children[0].note1) {
|
||||
this.data = JSON.parse(this.showData.children[0].note1)
|
||||
}
|
||||
} else {
|
||||
if (this.showData.note1) {
|
||||
this.data = JSON.parse(this.showData.note1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.top {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
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;
|
||||
margin-bottom: 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;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background: url(~@/assets/img/putOnTheShelf/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;
|
||||
align-items: center;
|
||||
|
||||
span:first-child {
|
||||
width: 105px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-textarea) {
|
||||
width: 570px;
|
||||
}
|
||||
|
||||
:deep(.ant-radio-group) {
|
||||
width: 570px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-number) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
::v-deep .ant-input {
|
||||
resize: none;
|
||||
width: 570px;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
width: 160px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
background: #edf4fc;
|
||||
color: #0087ff;
|
||||
border: 1px solid #bbd3ef;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.ant-btn {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-image__preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
::v-deep .ant-modal {
|
||||
width: 960px;
|
||||
}
|
||||
|
||||
::v-deep .ant-transfer-list {
|
||||
width: 39.5%;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
::v-deep .ant-transfer-operation {
|
||||
flex-direction: row-reverse;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
::v-deep .ant-btn {
|
||||
// width: 56px;
|
||||
// height: 40px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::v-deep .ant-btn:first-child {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
::v-deep .ant-modal-footer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
::v-deep .ant-modal-header {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
::v-deep .ant-modal-title {
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
::v-deep .ant-transfer-list-header {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
::v-deep .ant-transfer-list-header-selected {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
::v-deep .ant-input-number {
|
||||
width: 200px;
|
||||
}
|
||||
::v-deep .ant-transfer-list-header-title {
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
}
|
||||
textarea {
|
||||
height: 100px;
|
||||
resize: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,292 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-07-08 09:48:52
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-25 15:57:25
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<div class="put-on-the-shelf">
|
||||
<div v-for="parent in putOnTheShelfList" :key='parent.id'>
|
||||
<div v-for='child in parent.children' :key='child.id'>
|
||||
<template v-if='judgmentType.filter(item => item.name==child.name).length === 0'>
|
||||
<div class="top">{{child.name}}</div>
|
||||
<div v-for="item in child.children" :key="item.id" class='item' v-show="(item.name != '来源应用' && item.name != '关联组件信息' && item.name != '技术文档') && !(
|
||||
(showTypeName == '调用接口' && item.name == '平台地址') ||
|
||||
(showTypeName == '调用接口' && item.name == 'SDK安装包') ||
|
||||
(showTypeName == '平台对接' && item.name == 'SDK安装包') ||
|
||||
(showTypeName == '平台对接' && item.name == '接口请求方式') ||
|
||||
(showTypeName == '平台对接' && item.name == '服务接口') ||
|
||||
(showTypeName == 'SDK' && item.name == '平台地址') ||
|
||||
(showTypeName == 'SDK' && item.name == '接口请求方式') ||
|
||||
(showTypeName == 'SDK' && item.name == '服务接口')
|
||||
)">
|
||||
<div class="box">
|
||||
<div>
|
||||
<span class="required" v-if="required.indexOf(item.name) > -1">*</span>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<!-- <upload :list="[]" v-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
|
||||
tip="支持图片类型，大小不超过100M"></upload> -->
|
||||
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.jpg,.jpeg,.png' :list="item" v-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1"
|
||||
:dataList="item" tip="支持文件类型，大小不超过100M"></upload>
|
||||
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.pdf,.ppt,.xlsx,.doc,.docx' :list="item" v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
|
||||
:dataList="item" tip="支持文件类型，大小不超过100M"></upload>
|
||||
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.pdf,.ppt,.xlsx,.doc,.docx' :list="item" v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :dataList="item" :busType="2"
|
||||
tip="支持文件类型，大小不超过100M"></upload>
|
||||
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.mp4' :list="item" v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :dataList="item"
|
||||
tip="支持视频类型，大小不超过100M"></upload>
|
||||
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.zip' :list="item" v-else-if="item.type == 'package'" type="安装包" btnName="上传安装包" :maxCount="1" :dataList="item"
|
||||
tip="支持.zip类型，大小不超过100M"></upload>
|
||||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'AbilityType'" type="disabled" :data="item" :name="item.name" :value="typeInput"></input-select-checkbox>
|
||||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'ComponentType'" type="disabled" :data="item" :name="item.name" :value="type"></input-select-checkbox>
|
||||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'input'" type="input" :data="item" :name="item.name"></input-select-checkbox>
|
||||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'select'" type="select" :data="item" :name="item.name" :options="item.options" @show-type="showType"></input-select-checkbox>
|
||||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'checkBox'" type="checkBox" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
|
||||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'radio'" type="radio" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
|
||||
<input-select-checkbox :changeField='changeField' :list="[]" v-else-if="item.type == 'textArea'" type="textArea" :data="item" :name="item.name"></input-select-checkbox>
|
||||
</div>
|
||||
<div class="requiredTips" v-show="notFilled.indexOf(item.name) > -1 && (item.type=='input' || item.type=='textArea') && changeField.indexOf(item.name) == -1">请填写{{item.name}}！</div>
|
||||
<div class="requiredTips" v-show="notFilled.indexOf(item.name) > -1 && (item.type=='select' || item.type=='checkBox' || item.type=='radio') && changeField.indexOf(item.name) == -1">请选择{{item.name}}！</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<special @submitData="submitData" ref="specialRef" :configure='judgmentType.filter(item => item.name==child.name)[0]' :showData='child' @changeInfoList='changeInfoList'></special>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import inputSelectCheckbox from './components/inputSelectCheckbox'
|
||||
import special from './components/special'
|
||||
import upload from '@/views/modules/components/upload'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
special,
|
||||
upload,
|
||||
inputSelectCheckbox
|
||||
},
|
||||
props: {
|
||||
type: String,
|
||||
putOnTheShelfList: Array,
|
||||
typeInput: String,
|
||||
required: Array,
|
||||
notFilled: Array
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
changeField: [],
|
||||
judgmentType: [
|
||||
{
|
||||
name: '算法优势',
|
||||
list: [
|
||||
{
|
||||
name: '算法优势名称',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
note1: ''
|
||||
},
|
||||
{
|
||||
name: '算法优势描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '应用场景',
|
||||
list: [
|
||||
{
|
||||
name: '应用场景名称',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
note1: ''
|
||||
},
|
||||
{
|
||||
name: '应用场景描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: ''
|
||||
},
|
||||
{
|
||||
name: '应用场景图片',
|
||||
field: 'img',
|
||||
type: 'image',
|
||||
note1: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '计费标准信息',
|
||||
list: [
|
||||
{
|
||||
name: '计费方式',
|
||||
field: 'type',
|
||||
type: 'radio',
|
||||
options: ['一次性买断', '按调用次数', '按并发路数', '按年计费'],
|
||||
note1: '一次性买断'
|
||||
},
|
||||
{
|
||||
name: '计费标准',
|
||||
field: 'price',
|
||||
type: 'input2',
|
||||
// company: '元',
|
||||
note1: ''
|
||||
},
|
||||
{
|
||||
name: '计费标准描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '常见问题',
|
||||
list: [
|
||||
{
|
||||
name: '问题',
|
||||
field: 'question',
|
||||
type: 'textArea',
|
||||
note1: ''
|
||||
},
|
||||
{
|
||||
name: '答复',
|
||||
field: 'answer',
|
||||
type: 'textArea',
|
||||
note1: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '功能介绍',
|
||||
list: [
|
||||
{
|
||||
name: '功能名称',
|
||||
field: 'name',
|
||||
type: 'input',
|
||||
note1: ''
|
||||
},
|
||||
{
|
||||
name: '功能描述',
|
||||
field: 'desc',
|
||||
type: 'textArea',
|
||||
note1: ''
|
||||
},
|
||||
{
|
||||
name: '功能图片',
|
||||
field: 'img',
|
||||
type: 'image',
|
||||
note1: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
showTypeName: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.defaultContent()
|
||||
},
|
||||
methods: {
|
||||
// 提交
|
||||
submit (arr) {
|
||||
console.log('提交', arr.length, this.$refs.specialRef)
|
||||
arr.map((val, index) => {
|
||||
if (index === arr.length - 1) {
|
||||
this.$refs.specialRef[index].add(val, true, true)
|
||||
} else {
|
||||
this.$refs.specialRef[index].add(val, true, false)
|
||||
}
|
||||
})
|
||||
},
|
||||
submitData () {
|
||||
// console.log('触发提交')
|
||||
this.$emit('submitData')
|
||||
},
|
||||
changeInfoList (obj) {
|
||||
this.$emit('changeInfoList', obj)
|
||||
},
|
||||
goToRichText () {
|
||||
|
||||
},
|
||||
// 默认显示--调用接口
|
||||
defaultContent () {
|
||||
this.putOnTheShelfList.forEach((item) => {
|
||||
if (item.name === '部署与使用') {
|
||||
item.children.forEach((itemChild) => {
|
||||
if (itemChild.name === '使用方式') {
|
||||
itemChild.children.forEach((itemChilds) => {
|
||||
if (itemChilds.name === '使用方式') {
|
||||
itemChilds.note1 = '调用接口'
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
showType (data) {
|
||||
this.showTypeName = data
|
||||
console.log(data, this.showTypeName, '传过来的showType')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.put-on-the-shelf {
|
||||
height: 500px;
|
||||
padding: 0 50px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.put-on-the-shelf::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.top {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
.box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 25px 0;
|
||||
& > div:nth-of-type(1) {
|
||||
width: 105px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.required{
|
||||
color: #f56c6c;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
.requiredTips{
|
||||
font-size: 14px;
|
||||
color: #f56c6c;
|
||||
position: absolute;
|
||||
bottom:-20px;
|
||||
left:110px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,740 @@
|
|||
<template>
|
||||
<div class="contentBox">
|
||||
<div class="generalizeBox">
|
||||
<h3>API概括</h3>
|
||||
<div class="ApiBox">
|
||||
<img src="~@/assets/img/CapabilityOperationMonitoring/API-allNum.png" />
|
||||
<div>
|
||||
<h4>API总数</h4>
|
||||
<p>{{ Apisnum }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ApiBox">
|
||||
<img src="~@/assets/img/CapabilityOperationMonitoring/API-badNum.png" />
|
||||
<div>
|
||||
<h4>异常API总数</h4>
|
||||
<p>{{ ApisnumShiBai }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="abnormalBox">
|
||||
<h3>API异常分析</h3>
|
||||
<div class="abnormalBoxBottom">
|
||||
<!-- API异常次数排行TOP10 -->
|
||||
<div class="RankingList">
|
||||
<h4 class="title">API异常次数排行TOP10</h4>
|
||||
<ul>
|
||||
<li
|
||||
class="RankingListData"
|
||||
v-for="(item, index) in RankingData"
|
||||
:key="index"
|
||||
>
|
||||
<i
|
||||
><b>{{ index + 1 }}</b></i
|
||||
>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="item.name"
|
||||
placement="top"
|
||||
>
|
||||
<h6>{{ item.name }}</h6>
|
||||
</el-tooltip>
|
||||
<span>{{ item.count }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- API异常分布 -->
|
||||
<div class="AbnormalDistribution">
|
||||
<h4 class="title">API异常分布</h4>
|
||||
<div class="container-body1">
|
||||
<div id="main" style="width: 120px; height: 260px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- API异常次数统计 -->
|
||||
<div class="AnomalyStatistics">
|
||||
<h4 class="title">API异常次数统计</h4>
|
||||
<div class="AnomalyStatisticsTable">
|
||||
<el-table :data="AnomalyStatisticsTable" border style="width: 100%">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="接口名称"
|
||||
width="80"
|
||||
:resizable="false"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="接口地址"
|
||||
width="200"
|
||||
:resizable="false"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="method"
|
||||
label="调用方法"
|
||||
:resizable="false"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="组件类型"
|
||||
:resizable="false"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="provider"
|
||||
label="提供商"
|
||||
:resizable="false"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="state"
|
||||
label="监控状态"
|
||||
:resizable="false"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="tablePagination">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage4"
|
||||
:page-size="5"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import * as moment from 'moment'
|
||||
export default {
|
||||
// components: {},
|
||||
props: {
|
||||
callTheTrendData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
timeSwitchindex: {
|
||||
type: String,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
endAndstartTime: {},
|
||||
ApisnumShiBai: '',
|
||||
Apisnum: '',
|
||||
// 排行榜
|
||||
RankingData: [],
|
||||
// 表格
|
||||
AnomalyStatisticsTable: [
|
||||
{
|
||||
name: '接口名称',
|
||||
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||
method: '调用方法',
|
||||
type: '组件类型',
|
||||
provider: '提供商名称',
|
||||
state: '监控状态'
|
||||
},
|
||||
{
|
||||
name: '接口名称',
|
||||
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||
method: '调用方法',
|
||||
type: '组件类型',
|
||||
provider: '提供商名称',
|
||||
state: '监控状态'
|
||||
},
|
||||
{
|
||||
name: '接口名称',
|
||||
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||
method: '调用方法',
|
||||
type: '组件类型',
|
||||
provider: '提供商名称',
|
||||
state: '监控状态'
|
||||
},
|
||||
{
|
||||
name: '接口名称',
|
||||
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||
method: '调用方法',
|
||||
type: '组件类型',
|
||||
provider: '提供商名称',
|
||||
state: '监控状态'
|
||||
},
|
||||
{
|
||||
name: '接口名称',
|
||||
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||
method: '调用方法',
|
||||
type: '组件类型',
|
||||
provider: '提供商名称',
|
||||
state: '监控状态'
|
||||
}
|
||||
],
|
||||
// 分页
|
||||
currentPage4: 1,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.myEchars()
|
||||
// 分页
|
||||
this.total = this.AnomalyStatisticsTable.length
|
||||
},
|
||||
watch: {
|
||||
callTheTrendData: {
|
||||
deep: true,
|
||||
handler () {
|
||||
this.endAndstartTime = this.callTheTrendData
|
||||
if (this.endAndstartTime.end !== this.endAndstartTime.start) {
|
||||
if (this.timeSwitchindex === '周') {
|
||||
// API总数（周）
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[7d]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.Apisnum = parseInt(res.data.data.result[0].value[1])
|
||||
// API异常总数(周)
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[7d]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((resSon) => {
|
||||
this.ApisnumShiBai = parseInt(
|
||||
this.Apisnum - resSon.data.data.result[0].value[1]
|
||||
)
|
||||
})
|
||||
})
|
||||
// API异常分析(周)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[7d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.RankingData = res.data.data
|
||||
})
|
||||
// // API异常次数统计(周)
|
||||
// this.$http
|
||||
// .get(
|
||||
// `/metrics/api/v1/query?query=topk(10, sum(increase(apigateway_http_status{code != "200"}[7d])) by (matched_uri))&time=${this.callTheTrendData.end}`
|
||||
// )
|
||||
// .then((res) => {
|
||||
// debugger
|
||||
// })
|
||||
} else if (this.timeSwitchindex === '月') {
|
||||
// API总数（月）
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[30d]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.Apisnum = parseInt(res.data.data.result[0].value[1])
|
||||
// API异常总数(月)
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[30d]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((resSon) => {
|
||||
this.ApisnumShiBai = parseInt(
|
||||
this.Apisnum - resSon.data.data.result[0].value[1]
|
||||
)
|
||||
})
|
||||
})
|
||||
// API异常分析(月)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[30d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.RankingData = res.data.data
|
||||
})
|
||||
} else if (this.timeSwitchindex === '时间段') {
|
||||
// API总数（时间段）
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.Apisnum = parseInt(res.data.data.result[0].value[1])
|
||||
// API异常总数(时间段)
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((resSon) => {
|
||||
this.ApisnumShiBai = parseInt(
|
||||
this.Apisnum - resSon.data.data.result[0].value[1]
|
||||
)
|
||||
})
|
||||
})
|
||||
// API异常分析(时间段)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${
|
||||
this.callTheTrendData.end
|
||||
}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.RankingData = res.data.data
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// API总数（日）
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[1d]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.Apisnum = parseInt(res.data.data.result[0].value[1])
|
||||
// API异常总数(日)
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[1d]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((resSon) => {
|
||||
this.ApisnumShiBai = parseInt(
|
||||
this.Apisnum - resSon.data.data.result[0].value[1]
|
||||
)
|
||||
})
|
||||
})
|
||||
// API异常分析(日)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[1d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.RankingData = res.data.data
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
timeSwitchindex: {
|
||||
handler () {
|
||||
if (this.timeSwitchindex === '时间段') {
|
||||
// API总数（时间段）
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.Apisnum = parseInt(res.data.data.result[0].value[1])
|
||||
// API异常总数(时间段)
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((resSon) => {
|
||||
this.ApisnumShiBai = parseInt(
|
||||
this.Apisnum - resSon.data.data.result[0].value[1]
|
||||
)
|
||||
})
|
||||
})
|
||||
// API异常分析(时间段)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${
|
||||
this.callTheTrendData.end
|
||||
}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.RankingData = res.data.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 分页
|
||||
handleSizeChange (val) {
|
||||
console.log(`每页 ${val} 条`)
|
||||
},
|
||||
handleCurrentChange (val) {
|
||||
console.log(`当前页: ${val}`)
|
||||
},
|
||||
myEchars () {
|
||||
var chartDom = document.getElementById('main')
|
||||
var myChart = echarts.init(chartDom)
|
||||
var option
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
itemHeight: 10,
|
||||
itemWidth: 10,
|
||||
itemGap: 15,
|
||||
textStyle: {
|
||||
fontSize: 12, // 图例文字字体大小
|
||||
color: '#666666' // 图例文字颜色
|
||||
},
|
||||
bottom: '13%',
|
||||
formatter: function (name) {
|
||||
var index = 0
|
||||
var clientlabels = ['智能算法', '图层服务', '开发组件', '业务组件']
|
||||
var clientcounts = ['25%', '25%', '25%', '25%']
|
||||
clientlabels.forEach(function (value, i) {
|
||||
if (value == name) {
|
||||
index = i
|
||||
}
|
||||
})
|
||||
return name + ' ' + clientcounts[index]
|
||||
}
|
||||
},
|
||||
color: ['#0087ff', '#ff8a00', '#fcc549', '#49c988'],
|
||||
series: [
|
||||
{
|
||||
center: ['50%', '23%'],
|
||||
name: 'api异常分布',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 100, name: '智能算法' },
|
||||
{ value: 100, name: '图层服务' },
|
||||
{ value: 100, name: '开发组件' },
|
||||
{ value: 100, name: '业务组件' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.contentBox {
|
||||
display: flex;
|
||||
margin: 1.25rem 0;
|
||||
|
||||
.generalizeBox {
|
||||
height: 21.875rem;
|
||||
margin-right: 1.25rem;
|
||||
padding: 1.25rem;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0.3125rem 0.3125rem 0.9375rem 0 #eef4fa;
|
||||
background: #ffffff;
|
||||
|
||||
h3 {
|
||||
font-size: 1.125rem;
|
||||
color: #333333;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 1.875rem;
|
||||
}
|
||||
|
||||
.ApiBox {
|
||||
background: url('~@/assets/img/CapabilityOperationMonitoring/bg-blue.png')
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
width: 22.5rem;
|
||||
height: 6.875rem;
|
||||
display: flex;
|
||||
margin-bottom: 1.25rem;
|
||||
|
||||
img {
|
||||
width: 1.25rem;
|
||||
height: 1.375rem;
|
||||
margin: 1.5rem 1.25rem 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
h4 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: 1rem;
|
||||
color: #5f6770;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #1182fb;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ApiBox:last-of-type {
|
||||
background: url('~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png')
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
|
||||
div {
|
||||
h4 {
|
||||
color: #726b5b;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fcc549;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.abnormalBox {
|
||||
height: 21.875rem;
|
||||
padding: 1.25rem;
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0.3125rem 0.3125rem 0.9375rem 0 #eef4fa;
|
||||
background: #ffffff;
|
||||
|
||||
h3 {
|
||||
font-size: 1.125rem;
|
||||
color: #333333;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 1.25rem 0 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
color: #5a83ae;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.abnormalBoxBottom {
|
||||
display: flex;
|
||||
|
||||
.RankingList {
|
||||
margin-right: 5.625rem;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.RankingListData {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 0.25rem;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
display: block;
|
||||
width: 3.75rem;
|
||||
line-height: 1.25rem;
|
||||
font-size: 0.8125rem;
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
|
||||
b {
|
||||
padding-left: 0.75rem;
|
||||
display: block;
|
||||
height: 1.25rem;
|
||||
width: 2.25rem;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(204, 204, 204, 0.6),
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
width: 11.25rem;
|
||||
height: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
font-size: 0.8125rem;
|
||||
color: #333333;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.9375rem;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(1) i b {
|
||||
width: 3.75rem;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(251, 59, 5, 0.6),
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(1) span {
|
||||
color: #fc5656;
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(2) i b {
|
||||
width: 3.125rem;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(251, 123, 5, 0.6),
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(2) span {
|
||||
color: #ff8a00;
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(3) i b {
|
||||
width: 2.75rem;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(250, 179, 2, 0.6),
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(3) span {
|
||||
color: #f9af0a;
|
||||
}
|
||||
}
|
||||
|
||||
.AbnormalDistribution {
|
||||
margin-right: 3.75rem;
|
||||
|
||||
.container-body1 {
|
||||
}
|
||||
}
|
||||
|
||||
.AnomalyStatistics {
|
||||
h4 {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.AnomalyStatisticsTable {
|
||||
width: 38.2rem;
|
||||
|
||||
::v-deep .el-table th {
|
||||
padding: 0;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
::v-deep .el-table td {
|
||||
padding: 0;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
::v-deep .el-table .cell {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
::v-deep .el-table tbody tr:hover > td {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.tablePagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
::v-deep .el-pager li {
|
||||
min-width: 1.75rem;
|
||||
padding: 0;
|
||||
border: 0.0625rem solid #b2b2b2;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: #b2b2b2;
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .btn-prev {
|
||||
padding: 0;
|
||||
min-width: 1.75rem;
|
||||
margin-right: 0.375rem;
|
||||
border: 0.0625rem solid #1182fb;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 12px;
|
||||
color: #1182fb;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .btn-next {
|
||||
padding: 0;
|
||||
min-width: 1.75rem;
|
||||
margin-left: 0.375rem;
|
||||
border: 0.0625rem solid #1182fb;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: #1182fb;
|
||||
}
|
||||
|
||||
::v-deep .el-pager li.active {
|
||||
border: 0.0625rem solid #1182fb;
|
||||
background: #1182fb;
|
||||
color: #ffffff;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue