Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev
This commit is contained in:
wangwei
commit
5514577c3f
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -5,25 +5,52 @@
|
|||
<el-dropdown class="aui-content--tabs-tools">
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
<el-dropdown-menu slot="dropdown" :show-timeout="0">
|
||||
<el-dropdown-item @click.native="tabRemoveHandle($store.state.contentTabsActiveName)">{{ $t('contentTabs.closeCurrent') }}</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="tabsCloseOtherHandle()">{{ $t('contentTabs.closeOther') }}</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="tabsCloseAllHandle()">{{ $t('contentTabs.closeAll') }}</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
@click.native="tabRemoveHandle($store.state.contentTabsActiveName)"
|
||||
>{{ $t("contentTabs.closeCurrent") }}</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click.native="tabsCloseOtherHandle()">{{
|
||||
$t("contentTabs.closeOther")
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="tabsCloseAllHandle()">{{
|
||||
$t("contentTabs.closeAll")
|
||||
}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-tabs v-model="$store.state.contentTabsActiveName" @tab-click="tabSelectedHandle" @tab-remove="tabRemoveHandle">
|
||||
<el-tabs
|
||||
v-model="$store.state.contentTabsActiveName"
|
||||
@tab-click="tabSelectedHandle"
|
||||
@tab-remove="tabRemoveHandle"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="item in $store.state.contentTabs"
|
||||
:key="item.name"
|
||||
:name="item.name"
|
||||
:label="item.title"
|
||||
:closable="item.name !== 'home'"
|
||||
:class="{ 'is-iframe': tabIsIframe(item.iframeURL) }">
|
||||
:class="{ 'is-iframe': tabIsIframe(item.iframeURL) }"
|
||||
>
|
||||
<template v-if="item.name === 'home'">
|
||||
<svg slot="label" class="icon-svg aui-content--tabs-icon-nav" aria-hidden="true"><use xlink:href="#icon-home"></use></svg>
|
||||
<svg
|
||||
slot="label"
|
||||
class="icon-svg aui-content--tabs-icon-nav"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#icon-home"></use>
|
||||
</svg>
|
||||
</template>
|
||||
<iframe v-if="tabIsIframe(item.iframeURL)" :src="item.iframeURL" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
|
||||
<iframe
|
||||
v-if="tabIsIframe(item.iframeURL)"
|
||||
:src="item.iframeURL"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
scrolling="yes"
|
||||
></iframe>
|
||||
<keep-alive v-else>
|
||||
<router-view v-if="item.name === $store.state.contentTabsActiveName" />
|
||||
<router-view
|
||||
v-if="item.name === $store.state.contentTabsActiveName"
|
||||
/>
|
||||
</keep-alive>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
|
@ -38,59 +65,91 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { isURL } from '@/utils/validate'
|
||||
import { isURL } from "@/utils/validate";
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// tabs, 是否通过iframe展示
|
||||
tabIsIframe (url) {
|
||||
return isURL(url)
|
||||
tabIsIframe(url) {
|
||||
return isURL(url);
|
||||
},
|
||||
// tabs, 选中tab
|
||||
tabSelectedHandle (tab) {
|
||||
tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)[0]
|
||||
tabSelectedHandle(tab) {
|
||||
tab = this.$store.state.contentTabs.filter(
|
||||
(item) => item.name === tab.name
|
||||
)[0];
|
||||
if (tab) {
|
||||
this.$router.push({
|
||||
'name': /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
|
||||
'params': { ...tab.params },
|
||||
'query': { ...tab.query }
|
||||
})
|
||||
name: /^iframe_.+/.test(tab.name) ? "iframe" : tab.name,
|
||||
params: { ...tab.params },
|
||||
query: { ...tab.query },
|
||||
});
|
||||
}
|
||||
},
|
||||
// tabs, 删除tab
|
||||
tabRemoveHandle (tabName) {
|
||||
if (tabName === 'home') {
|
||||
return false
|
||||
tabRemoveHandle(tabName) {
|
||||
if (tabName === "home") {
|
||||
return false;
|
||||
}
|
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
|
||||
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
|
||||
this.$store.state.sidebarMenuActiveName =
|
||||
this.$store.state.contentTabsActiveName = "home";
|
||||
return false;
|
||||
}
|
||||
// 当前选中tab被删除
|
||||
if (tabName === this.$store.state.contentTabsActiveName) {
|
||||
let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]
|
||||
let tab =
|
||||
this.$store.state.contentTabs[
|
||||
this.$store.state.contentTabs.length - 1
|
||||
];
|
||||
this.$router.push({
|
||||
name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
|
||||
name: /^iframe_.+/.test(tab.name) ? "iframe" : tab.name,
|
||||
params: { ...tab.params },
|
||||
query: { ...tab.query }
|
||||
})
|
||||
query: { ...tab.query },
|
||||
});
|
||||
}
|
||||
},
|
||||
// tabs, 关闭其它
|
||||
tabsCloseOtherHandle () {
|
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => {
|
||||
return item.name === 'home' || item.name === this.$store.state.contentTabsActiveName
|
||||
})
|
||||
tabsCloseOtherHandle() {
|
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
|
||||
(item) => {
|
||||
return (
|
||||
item.name === "home" ||
|
||||
item.name === this.$store.state.contentTabsActiveName
|
||||
);
|
||||
}
|
||||
);
|
||||
},
|
||||
// tabs, 关闭全部
|
||||
tabsCloseAllHandle () {
|
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'home')
|
||||
this.$router.push({ name: 'home' })
|
||||
tabsCloseAllHandle() {
|
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
|
||||
(item) => item.name === "home"
|
||||
);
|
||||
this.$router.push({ name: "home" });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.aui-content {
|
||||
.el-tabs {
|
||||
::v-deep .el-tabs__header {
|
||||
left: 266px;
|
||||
.el-tabs__nav-wrap {
|
||||
.el-tabs__nav-scroll {
|
||||
.el-tabs__nav {
|
||||
.el-tabs__item ::after {
|
||||
background-color: #0058e1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</style>
|
||||
|
|
@ -117,6 +117,11 @@ export default {
|
|||
font-weight: bold;
|
||||
}
|
||||
.el-menu-item {
|
||||
&.is-active {
|
||||
color: #ffffff;
|
||||
background-color: #0058e1;
|
||||
border: none;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
|
|
@ -126,10 +131,5 @@ export default {
|
|||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.is-active {
|
||||
color: #ffffff;
|
||||
background-color: #0058e1;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,56 @@
|
|||
<!--
|
||||
* @Author: kongjun qdkongjun@gmail.com
|
||||
* @Date: 2022-06-20 09:29:59
|
||||
* @LastEditors: kongjun qdkongjun@gmail.com
|
||||
* @LastEditTime: 2022-06-21 10:37:47
|
||||
* @FilePath: \back\src\views\main-sidebar.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<template>
|
||||
<aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
|
||||
<aside
|
||||
:class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]"
|
||||
>
|
||||
<div class="aui-sidebar__inner">
|
||||
<el-menu
|
||||
:default-active="$store.state.sidebarMenuActiveName"
|
||||
:collapse="$store.state.sidebarFold"
|
||||
:unique-opened="true"
|
||||
:collapseTransition="false"
|
||||
class="aui-sidebar__menu">
|
||||
<sub-menu v-for="menu in $store.state.sidebarMenuList" :key="menu.id" :menu="menu" />
|
||||
class="aui-sidebar__menu"
|
||||
>
|
||||
<sub-menu
|
||||
v-for="menu in $store.state.sidebarMenuList"
|
||||
:key="menu.id"
|
||||
:menu="menu"
|
||||
/>
|
||||
</el-menu>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SubMenu from './main-sidebar-sub-menu'
|
||||
import SubMenu from "./main-sidebar-sub-menu";
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
SubMenu
|
||||
SubMenu,
|
||||
},
|
||||
created () {
|
||||
this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
|
||||
created() {
|
||||
this.$store.state.sidebarMenuList = window.SITE_CONFIG["menuList"];
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.aui-sidebar {
|
||||
width: 266px;
|
||||
.aui-sidebar__inner {
|
||||
width: 260px;
|
||||
overflow-y: hidden;
|
||||
.aui-sidebar__menu {
|
||||
width: 266px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,11 @@
|
|||
<!--
|
||||
* @Author: kongjun qdkongjun@gmail.com
|
||||
* @Date: 2022-06-20 09:29:59
|
||||
* @LastEditors: kongjun qdkongjun@gmail.com
|
||||
* @LastEditTime: 2022-06-21 11:36:51
|
||||
* @FilePath: \back\src\views\main-theme-tools.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<template>
|
||||
<div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }">
|
||||
<div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
|
||||
|
|
@ -41,9 +49,12 @@ export default {
|
|||
return {
|
||||
isOpen: false,
|
||||
themeList: require("@/element-ui/config.js"),
|
||||
themeColor: "turquoise",
|
||||
themeColor: "blue",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.themeColorChangeHandle("blue");
|
||||
},
|
||||
methods: {
|
||||
themeColorChangeHandle(val) {
|
||||
var styleList = [
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]">
|
||||
<div
|
||||
v-loading.fullscreen.lock="loading"
|
||||
:element-loading-text="$t('loading')"
|
||||
:class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]"
|
||||
>
|
||||
<template v-if="!loading">
|
||||
<main-navbar />
|
||||
<main-sidebar />
|
||||
|
|
@ -12,109 +16,128 @@
|
|||
</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)
|
||||
Promise.all([
|
||||
this.getUserInfo(),
|
||||
this.getPermissions()
|
||||
]).then(() => {
|
||||
this.loading = false
|
||||
})
|
||||
created() {
|
||||
this.windowResizeHandle();
|
||||
this.routeHandle(this.$route);
|
||||
Promise.all([this.getUserInfo(), this.getPermissions()]).then(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 窗口改变大小
|
||||
windowResizeHandle () {
|
||||
this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
|
||||
window.addEventListener('resize', debounce(() => {
|
||||
this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
|
||||
}, 150))
|
||||
windowResizeHandle() {
|
||||
this.$store.state.sidebarFold =
|
||||
document.documentElement["clientWidth"] <= 992 || false;
|
||||
window.addEventListener(
|
||||
"resize",
|
||||
debounce(() => {
|
||||
this.$store.state.sidebarFold =
|
||||
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;
|
||||
let routeMeta = route.meta;
|
||||
if (route.name === "iframe") {
|
||||
let 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
|
||||
let 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]
|
||||
tab = this.$store.state.contentTabs.filter(
|
||||
(item) => item.name === routeName
|
||||
)[0];
|
||||
if (!tab) {
|
||||
tab = {
|
||||
...window.SITE_CONFIG['contentTabDefault'],
|
||||
...window.SITE_CONFIG["contentTabDefault"],
|
||||
...routeMeta,
|
||||
'name': routeName,
|
||||
'params': { ...route.params },
|
||||
'query': { ...route.query }
|
||||
}
|
||||
this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab)
|
||||
name: routeName,
|
||||
params: { ...route.params },
|
||||
query: { ...route.query },
|
||||
};
|
||||
this.$store.state.contentTabs =
|
||||
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 () {
|
||||
return this.$http.get('/sys/user/info').then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
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
|
||||
}).catch(() => {})
|
||||
getUserInfo() {
|
||||
return this.$http
|
||||
.get("/sys/user/info")
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
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;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 获取权限
|
||||
getPermissions () {
|
||||
return this.$http.get('/sys/menu/permissions').then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
window.SITE_CONFIG['permissions'] = res.data
|
||||
}).catch(() => {})
|
||||
}
|
||||
getPermissions() {
|
||||
return this.$http
|
||||
.get("/sys/menu/permissions")
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
window.SITE_CONFIG["permissions"] = res.data;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.aui-content__wrapper {
|
||||
margin-left: 266px;
|
||||
.aui-content > .el-tabs > .el-tabs__header {
|
||||
left: 230px;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,78 +1,117 @@
|
|||
<template>
|
||||
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
|
||||
<el-dialog
|
||||
:visible.sync="visible"
|
||||
:title="!dataForm.id ? $t('add') : $t('update')"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmitHandle()"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item prop="name" :label="$t('model.name')">
|
||||
<el-input v-model="dataForm.name" :placeholder="$t('model.name')"></el-input>
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="$t('model.name')"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="key" :label="$t('model.key')">
|
||||
<el-input v-model="dataForm.key" :placeholder="$t('model.key')"></el-input>
|
||||
<el-input
|
||||
v-model="dataForm.key"
|
||||
:placeholder="$t('model.key')"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="description" :label="$t('model.description')">
|
||||
<el-input v-model="dataForm.description" :placeholder="$t('model.description')"></el-input>
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
:placeholder="$t('model.description')"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
|
||||
<el-button @click="visible = false">{{ $t("cancel") }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmitHandle()">{{
|
||||
$t("confirm")
|
||||
}}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import debounce from 'lodash/debounce'
|
||||
import debounce from "lodash/debounce";
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: '',
|
||||
name: '',
|
||||
key: '',
|
||||
description: ''
|
||||
}
|
||||
}
|
||||
id: "",
|
||||
name: "",
|
||||
key: "",
|
||||
description: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
dataRule () {
|
||||
dataRule() {
|
||||
return {
|
||||
name: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
key: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("validate.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
this.visible = true
|
||||
init() {
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
})
|
||||
this.$refs["dataForm"].resetFields();
|
||||
});
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmitHandle: debounce(function () {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
this.$http[!this.dataForm.id ? 'post' : 'put']('/act/model', this.dataForm).then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
dataFormSubmitHandle: debounce(
|
||||
function () {
|
||||
this.$refs["dataForm"].validate((valid) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
this.$message({
|
||||
message: this.$t('prompt.success'),
|
||||
type: 'success',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
}).catch(() => {})
|
||||
})
|
||||
}, 1000, { 'leading': true, 'trailing': false })
|
||||
}
|
||||
}
|
||||
this.$http[!this.dataForm.id ? "post" : "put"](
|
||||
"/act/model",
|
||||
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.visible = false;
|
||||
this.$emit("refreshDataList");
|
||||
},
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
});
|
||||
},
|
||||
1000,
|
||||
{ leading: true, trailing: false }
|
||||
),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,39 @@
|
|||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-activiti__model">
|
||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.name" :placeholder="$t('model.name')" clearable></el-input>
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="$t('model.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.key" :placeholder="$t('model.key')" clearable></el-input>
|
||||
<el-input
|
||||
v-model="dataForm.key"
|
||||
:placeholder="$t('model.key')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t("query")
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
|
||||
<el-button type="primary" @click="addOrUpdateHandle()">{{
|
||||
$t("add")
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
|
||||
<el-button type="danger" @click="deleteHandle()">{{
|
||||
$t("deleteBatch")
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
|
|
@ -24,19 +42,78 @@
|
|||
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="name" :label="$t('model.name')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="key" :label="$t('model.key')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="version" :label="$t('model.version')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="createTime" :label="$t('model.createTime')" header-align="center" align="center" width="180"></el-table-column>
|
||||
<el-table-column prop="lastUpdateTime" :label="$t('model.lastUpdateTime')" header-align="center" align="center" width="180"></el-table-column>
|
||||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:label="$t('model.name')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="key"
|
||||
:label="$t('model.key')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="version"
|
||||
:label="$t('model.version')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
:label="$t('model.createTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="180"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="lastUpdateTime"
|
||||
:label="$t('model.lastUpdateTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="180"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('handle')"
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<a :href="getModelerURL(scope.row.id)" target="_blank" class="el-button el-button--text el-button--small">{{ $t('model.design') }}</a>
|
||||
<el-button type="text" size="small" @click="deployHandle(scope.row.id)">{{ $t('model.deploy') }}</el-button>
|
||||
<a :href="getExportURL(scope.row.id)" target="_blank" class="el-button el-button--text el-button--small">{{ $t('export') }}</a>
|
||||
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
|
||||
<a
|
||||
:href="getModelerURL(scope.row.id)"
|
||||
target="_blank"
|
||||
class="el-button el-button--text el-button--small"
|
||||
>{{ $t("model.design") }}</a
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="deployHandle(scope.row.id)"
|
||||
>{{ $t("model.deploy") }}</el-button
|
||||
>
|
||||
<a
|
||||
:href="getExportURL(scope.row.id)"
|
||||
target="_blank"
|
||||
class="el-button el-button--text el-button--small"
|
||||
>{{ $t("export") }}</a
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="deleteHandle(scope.row.id)"
|
||||
>{{ $t("delete") }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -47,76 +124,90 @@
|
|||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle">
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
|
||||
<add-or-update
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
@refreshDataList="getDataList"
|
||||
></add-or-update>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import AddOrUpdate from './model-add-or-update'
|
||||
import Cookies from 'js-cookie'
|
||||
import qs from 'qs'
|
||||
import mixinViewModule from "@/mixins/view-module";
|
||||
import AddOrUpdate from "./model-add-or-update";
|
||||
import Cookies from "js-cookie";
|
||||
import qs from "qs";
|
||||
export default {
|
||||
mixins: [mixinViewModule],
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/model/page',
|
||||
getDataListURL: "/act/model/page",
|
||||
getDataListIsPage: true,
|
||||
deleteURL: '/act/model',
|
||||
deleteIsBatch: true
|
||||
deleteURL: "/act/model",
|
||||
deleteIsBatch: true,
|
||||
},
|
||||
dataForm: {
|
||||
name: '',
|
||||
key: ''
|
||||
}
|
||||
}
|
||||
name: "",
|
||||
key: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate
|
||||
AddOrUpdate,
|
||||
},
|
||||
methods: {
|
||||
// 获取在线设计url地址
|
||||
getModelerURL (id) {
|
||||
getModelerURL(id) {
|
||||
var params = qs.stringify({
|
||||
'token': Cookies.get('ucsToken'),
|
||||
'modelId': id
|
||||
})
|
||||
return `${window.SITE_CONFIG['apiURL']}/modeler.html?${params}`
|
||||
token: Cookies.get("ucsToken"),
|
||||
modelId: id,
|
||||
});
|
||||
return `${window.SITE_CONFIG["apiURL"]}/modeler.html?${params}`;
|
||||
},
|
||||
// 获取导出url地址
|
||||
getExportURL (id) {
|
||||
getExportURL(id) {
|
||||
var params = qs.stringify({
|
||||
'token': Cookies.get('ucsToken')
|
||||
})
|
||||
return `${window.SITE_CONFIG['apiURL']}/act/model/export/${id}?${params}`
|
||||
token: Cookies.get("ucsToken"),
|
||||
});
|
||||
return `${window.SITE_CONFIG["apiURL"]}/act/model/export/${id}?${params}`;
|
||||
},
|
||||
// 部署
|
||||
deployHandle (id) {
|
||||
this.$confirm(this.$t('prompt.info', { 'handle': this.$t('model.deploy') }), this.$t('prompt.title'), {
|
||||
confirmButtonText: this.$t('confirm'),
|
||||
cancelButtonText: this.$t('cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$http.post(`/act/model/deploy/${id}`).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.getDataList()
|
||||
}
|
||||
})
|
||||
}).catch(() => {})
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
deployHandle(id) {
|
||||
this.$confirm(
|
||||
this.$t("prompt.info", { handle: this.$t("model.deploy") }),
|
||||
this.$t("prompt.title"),
|
||||
{
|
||||
confirmButtonText: this.$t("confirm"),
|
||||
cancelButtonText: this.$t("cancel"),
|
||||
type: "warning",
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
this.$http
|
||||
.post(`/act/model/deploy/${id}`)
|
||||
.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.getDataList();
|
||||
},
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,22 @@
|
|||
<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
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.processDefinitionName" :placeholder="$t('process.name')" clearable></el-input>
|
||||
<el-input
|
||||
v-model="dataForm.processDefinitionName"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t("query")
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
|
|
@ -15,25 +25,86 @@
|
|||
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="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="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="ended" :label="$t('process.ended')" header-align="center" align="center">
|
||||
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="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="startTime"
|
||||
:label="$t('process.startTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="ended"
|
||||
:label="$t('process.ended')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.ended" size="small" type="success">{{ $t('process.ended0') }}</el-tag>
|
||||
<el-tag v-else size="small" type="danger">{{ $t('process.ended1') }}</el-tag>
|
||||
<el-tag v-if="scope.row.ended" size="small" type="success">{{
|
||||
$t("process.ended0")
|
||||
}}</el-tag>
|
||||
<el-tag v-else size="small" type="danger">{{
|
||||
$t("process.ended1")
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="currentTaskList[0].taskName" :label="$t('process.taskName')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column
|
||||
prop="currentTaskList[0].taskName"
|
||||
:label="$t('process.taskName')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column prop="currentTaskList[0].createTime" :label="$t('process.createTime')" header-align="center" align="center"></el-table-column> -->
|
||||
<el-table-column prop="startTime" :label="$t('process.createTime')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="currentTaskList[0].assigneeName" :label="$t('process.assignee')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
:label="$t('process.createTime')"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="currentTaskList[0].assigneeName"
|
||||
:label="$t('process.assignee')"
|
||||
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)">{{ $t('process.viewFlowImage') }}</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="showDetail(scope.row)"
|
||||
>{{ $t("process.viewFlowImage") }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -44,39 +115,39 @@
|
|||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle">
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import processModule from '@/mixins/process-module'
|
||||
import mixinViewModule from "@/mixins/view-module";
|
||||
import processModule from "@/mixins/process-module";
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/his/getMyProcessInstancePage',
|
||||
getDataListURL: "/act/his/getMyProcessInstancePage",
|
||||
getDataListIsPage: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
deleteIsBatchKey: "deploymentId",
|
||||
},
|
||||
dataForm: {
|
||||
processDefinitionName: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
processDefinitionName: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
showDetail (row) {
|
||||
showDetail(row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
return this.$message.error(this.$t("task.detailError"));
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardDetail)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardDetail);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,22 @@
|
|||
<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
|
||||
: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-input
|
||||
v-model="dataForm.processDefinitionId"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t("query")
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
|
|
@ -15,24 +25,72 @@
|
|||
border
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
@sort-change="dataListSortChangeHandle"
|
||||
style="width: 100%;">
|
||||
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
|
||||
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">
|
||||
<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)">{{ $t('process.viewFlowImage') }}</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="showDetail(scope.row)"
|
||||
>{{ $t("process.viewFlowImage") }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -43,39 +101,39 @@
|
|||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle">
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import processModule from '@/mixins/process-module'
|
||||
import mixinViewModule from "@/mixins/view-module";
|
||||
import processModule from "@/mixins/process-module";
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/his/getMyHandledInstancePage',
|
||||
getDataListURL: "/act/his/getMyHandledInstancePage",
|
||||
getDataListIsPage: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
deleteIsBatchKey: "deploymentId",
|
||||
},
|
||||
dataForm: {
|
||||
processDefinitionId: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
processDefinitionId: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
showDetail (row) {
|
||||
showDetail(row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
return this.$message.error(this.$t("task.detailError"));
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardDetail)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardDetail);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,22 @@
|
|||
<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
|
||||
: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-input
|
||||
v-model="dataForm.taskName"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t("query")
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
|
|
@ -15,18 +25,76 @@
|
|||
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="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="startTime" :label="$t('process.startTime')" 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="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">
|
||||
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="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="startTime"
|
||||
:label="$t('process.startTime')"
|
||||
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="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" @click="claimTask(scope.row.taskId, scope.row.processDefinitionKey, scope.row.businessKey)">{{ $t('process.claim') }}</el-button>
|
||||
<el-button type="text" size="small" @click="showDetail(scope.row)">{{ $t('process.viewFlowImage') }}</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="
|
||||
claimTask(
|
||||
scope.row.taskId,
|
||||
scope.row.processDefinitionKey,
|
||||
scope.row.businessKey
|
||||
)
|
||||
"
|
||||
>{{ $t("process.claim") }}</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="showDetail(scope.row)"
|
||||
>{{ $t("process.viewFlowImage") }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -37,59 +105,62 @@
|
|||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle">
|
||||
@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'
|
||||
import mixinViewModule from "@/mixins/view-module";
|
||||
import processModule from "@/mixins/process-module";
|
||||
import qs from "qs";
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/task/page',
|
||||
getDataListURL: "/act/task/page",
|
||||
getDataListIsPage: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
deleteIsBatchKey: "deploymentId",
|
||||
},
|
||||
dataForm: {
|
||||
isRoleGroup: '1',
|
||||
taskName: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
isRoleGroup: "1",
|
||||
taskName: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
claimTask (taskId, processDefinitionKey, businessKey) {
|
||||
claimTask(taskId, processDefinitionKey, businessKey) {
|
||||
var params = qs.stringify({
|
||||
'taskId': taskId
|
||||
})
|
||||
this.$http.post(`/act/task/claim`, params).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.getDataList()
|
||||
taskId: taskId,
|
||||
});
|
||||
this.$http
|
||||
.post(`/act/task/claim`, params)
|
||||
.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.getDataList();
|
||||
},
|
||||
});
|
||||
})
|
||||
}).catch(() => {})
|
||||
.catch(() => {});
|
||||
},
|
||||
showDetail (row) {
|
||||
showDetail(row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
return this.$message.error(this.$t("task.detailError"));
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardDetail)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardDetail);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,22 @@
|
|||
<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
|
||||
: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-input
|
||||
v-model="dataForm.taskName"
|
||||
:placeholder="$t('process.name')"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
|
||||
<el-button type="primary" @click="getDataList()">{{
|
||||
$t("query")
|
||||
}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
|
|
@ -22,28 +32,82 @@
|
|||
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>
|
||||
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}}</span>
|
||||
<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)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('process.system')" header-align="center" align="center">
|
||||
<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}}</span>
|
||||
<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)
|
||||
}}</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="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">
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -54,49 +118,49 @@
|
|||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle">
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import processModule from '@/mixins/process-module'
|
||||
import mixinViewModule from "@/mixins/view-module";
|
||||
import processModule from "@/mixins/process-module";
|
||||
export default {
|
||||
mixins: [mixinViewModule, processModule],
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/act/task/myToDoTaskPage',
|
||||
getDataListURL: "/act/task/myToDoTaskPage",
|
||||
getDataListIsPage: true,
|
||||
activatedIsNeed: true,
|
||||
deleteIsBatch: true,
|
||||
deleteIsBatchKey: 'deploymentId'
|
||||
deleteIsBatchKey: "deploymentId",
|
||||
},
|
||||
dataForm: {
|
||||
taskName: '',
|
||||
taskId: ''
|
||||
taskName: "",
|
||||
taskId: "",
|
||||
},
|
||||
processInstanceId: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
processInstanceId: "",
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
// 处理
|
||||
taskHandle (row) {
|
||||
taskHandle(row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.businessKeyError'))
|
||||
return this.$message.error(this.$t("task.businessKeyError"));
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardHandleUrl)
|
||||
this.getProcDefRouteSet(row, this.forwardHandleUrl);
|
||||
},
|
||||
taskDetail (row) {
|
||||
taskDetail(row) {
|
||||
if (!row.businessKey) {
|
||||
return this.$message.error(this.$t('task.detailError'))
|
||||
return this.$message.error(this.$t("task.detailError"));
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardTaskDetail)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.getProcDefRouteSet(row, this.forwardTaskDetail);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -664,6 +664,11 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: #0058e1; //#3E8EF7
|
||||
border-color: #0058e1;
|
||||
}
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
|
|
@ -707,25 +712,25 @@ export default {
|
|||
}
|
||||
.preview-dialog {
|
||||
width: 100%;
|
||||
height: 723px;
|
||||
height: 700px;
|
||||
overflow: auto;
|
||||
/* 滚动条凹槽的颜色，还可以设置边框属性 */
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #f8f8f8;
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius: 2em;
|
||||
padding: 10px 10px;
|
||||
/*滚动条样式*/
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
/* 滚动条的宽度 */
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 5;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 0;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
height: 90px;
|
||||
//margin-top: -40px;
|
||||
border-bottom: solid #c6c6c6 1px;
|
||||
.title-text {
|
||||
|
|
@ -743,7 +748,7 @@ export default {
|
|||
line-height: 30px;
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -753,11 +758,20 @@ export default {
|
|||
text-align: left;
|
||||
margin-top: 24px;
|
||||
text-indent: 2em;
|
||||
span:first-child {
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
}
|
||||
span:last-child {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.preview-image {
|
||||
width: 900px;
|
||||
//height: 100%;
|
||||
margin-top: 16px;
|
||||
//margin-top: 16px;
|
||||
padding-top: 5px;
|
||||
text-align: center;
|
||||
padding-left: 300px;
|
||||
|
|
@ -769,10 +783,6 @@ export default {
|
|||
span {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,25 +7,26 @@
|
|||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<meta
|
||||
content="vab,vab官网,后台管理框架,vue后台管理框架,vue-admin-beautiful,vue-admin-beautiful-pro,vue-admin-beautiful官网,vue-admin-beautiful文档,vue-element-admin,vue-element-admin官网,vue-element-admin文档,vue-admin,vue-admin官网,vue-admin文档"
|
||||
name="keywords"
|
||||
/>
|
||||
<meta
|
||||
content="<%= VUE_APP_TITLE %>官网与文档基于vue-admin-beautiful-pro构建，简称vab（是一款超棒的vue+element中后台前端快速开发框架），QQ群972435319，作者：<%= VUE_APP_AUTHOR %>"
|
||||
name="description"
|
||||
/>
|
||||
<meta content="<%= VUE_APP_AUTHOR %>" name="author" />
|
||||
<link href="<%= BASE_URL %>static/css/loading.css" rel="stylesheet" />
|
||||
<script>
|
||||
</script>
|
||||
<!-- 站点配置 -->
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title>
|
||||
<%= htmlWebpackPlugin.options.title %>
|
||||
</title>
|
||||
<meta
|
||||
content="vab,vab官网,后台管理框架,vue后台管理框架,vue-admin-beautiful,vue-admin-beautiful-pro,vue-admin-beautiful官网,vue-admin-beautiful文档,vue-element-admin,vue-element-admin官网,vue-element-admin文档,vue-admin,vue-admin官网,vue-admin文档"
|
||||
name="keywords" />
|
||||
<meta
|
||||
content="<%= VUE_APP_TITLE %>官网与文档基于vue-admin-beautiful-pro构建，简称vab（是一款超棒的vue+element中后台前端快速开发框架），QQ群972435319，作者：<%= VUE_APP_AUTHOR %>"
|
||||
name="description" />
|
||||
<meta content="<%= VUE_APP_AUTHOR %>" name="author" />
|
||||
<link href="<%= BASE_URL %>static/css/loading.css" rel="stylesheet" />
|
||||
<script>
|
||||
</script>
|
||||
<!-- 站点配置 -->
|
||||
<script>
|
||||
window.SITE_CONFIG = {};
|
||||
// window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001';
|
||||
|
|
@ -54,67 +55,73 @@
|
|||
// window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
|
||||
</script>
|
||||
|
||||
<link href="./leaflet/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet">
|
||||
<link href="./leaflet/dist/leaflet/iclient-leaflet.css" rel="stylesheet">
|
||||
<link href="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.css" rel="stylesheet">
|
||||
<link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.css" rel="stylesheet">
|
||||
<link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.Default.css" rel="stylesheet">
|
||||
<link href="./supermap/css/supermap.css" rel="stylesheet">
|
||||
<link href="./static/css/widgets.css" rel="stylesheet">
|
||||
<link href="./leaflet/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet">
|
||||
<link href="./leaflet/dist/leaflet/iclient-leaflet.css" rel="stylesheet">
|
||||
<link href="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.css" rel="stylesheet">
|
||||
<link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.css" rel="stylesheet">
|
||||
<link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.Default.css" rel="stylesheet">
|
||||
<link href="./supermap/css/supermap.css" rel="stylesheet">
|
||||
<link href="./static/css/widgets.css" rel="stylesheet">
|
||||
|
||||
<script type="text/javascript" src="./static/config/basicConfig.js"></script>
|
||||
<script type="text/javascript" src="./static/config/mapConfig.js"></script>
|
||||
<script type="text/javascript" src="./static/config/footerData.js"></script>
|
||||
<!-- ==========地图相关配置========== -->
|
||||
<script type="text/javascript" src="./leaflet/libs/leaflet/1.3.1/leaflet.js"></script>
|
||||
<script type="text/javascript" src="./static/js/jquery-3.6.0.min.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/dist/leaflet/iclient-leaflet.min.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.js"></script>
|
||||
<!-- <script type="text/javascript" src="./leaflet/libs/leaflet.markercluster/dist/leaflet.markercluster.js"></script> -->
|
||||
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet-ant-path.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.textpath.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.polylineoffset.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.polylineDecorator.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/ersi-leaflet.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/libs/proj4/proj4.js"></script>
|
||||
<script type="text/javascript" src="./static/js/proj4leaflet.js"></script>
|
||||
<script type="text/javascript" src="./supermap/atmosphere.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/MovingMarker.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/leaflet.motion.min.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/leaflet.polylineDecorator.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/leaflet-tooltip-layout.dist.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/leaflet.canvas-markers.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/leaflet.markercluster.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/TextIconOverlay_min.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/MarkerClusterer_min.js"></script>
|
||||
<!-- 热力图 -->
|
||||
<script type="text/javascript" src="./leaflet/leaflet-heat.js"></script>
|
||||
<script type="text/javascript" src="./static/config/basicConfig.js"></script>
|
||||
<script type="text/javascript" src="./static/config/mapConfig.js"></script>
|
||||
<script type="text/javascript" src="./static/config/footerData.js"></script>
|
||||
<!-- 数据资源参数引用 -->
|
||||
<script type="text/javascript" src="./static/config/location.js"></script>
|
||||
<!-- ==========地图相关配置========== -->
|
||||
<script type="text/javascript" src="./leaflet/libs/leaflet/1.3.1/leaflet.js"></script>
|
||||
<script type="text/javascript" src="./static/js/jquery-3.6.0.min.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/dist/leaflet/iclient-leaflet.min.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.js"></script>
|
||||
<!-- <script type="text/javascript" src="./leaflet/libs/leaflet.markercluster/dist/leaflet.markercluster.js"></script> -->
|
||||
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet-ant-path.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.textpath.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.polylineoffset.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.polylineDecorator.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/ersi-leaflet.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/libs/proj4/proj4.js"></script>
|
||||
<script type="text/javascript" src="./static/js/proj4leaflet.js"></script>
|
||||
<script type="text/javascript" src="./supermap/atmosphere.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/MovingMarker.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/leaflet.motion.min.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/leaflet.polylineDecorator.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/leaflet-tooltip-layout.dist.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/leaflet.canvas-markers.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/leaflet.markercluster.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/TextIconOverlay_min.js"></script>
|
||||
<script type="text/javascript" src="./leaflet/MarkerClusterer_min.js"></script>
|
||||
<!-- 热力图 -->
|
||||
<script type="text/javascript" src="./leaflet/leaflet-heat.js"></script>
|
||||
|
||||
<!-- 大华平台相关包 -->
|
||||
<script type="text/javascript" src="./static/js/encrypt.js"></script>
|
||||
<script type="text/javascript" src="./static/js/DHWs.js"></script>
|
||||
<!-- 大华平台相关包 -->
|
||||
<script type="text/javascript" src="./static/js/encrypt.js"></script>
|
||||
<script type="text/javascript" src="./static/js/DHWs.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>
|
||||
We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>
|
||||
We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
|
||||
properly without JavaScript enabled. Please enable it to continue.
|
||||
</strong>
|
||||
</noscript>
|
||||
<div id="app">
|
||||
<div class="first-loading-wrp">
|
||||
<div class="loading-wrp">
|
||||
<span class="dot dot-spin">
|
||||
<i></i>
|
||||
<i></i>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</span>
|
||||
</div>
|
||||
<h1><%= VUE_APP_TITLE %></h1>
|
||||
</strong>
|
||||
</noscript>
|
||||
<div id="app">
|
||||
<div class="first-loading-wrp">
|
||||
<div class="loading-wrp">
|
||||
<span class="dot dot-spin">
|
||||
<i></i>
|
||||
<i></i>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</span>
|
||||
</div>
|
||||
<h1>
|
||||
<%= VUE_APP_TITLE %>
|
||||
</h1>
|
||||
</div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/*
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2020-07-07 16:03:23
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-04-01 10:51:45
|
||||
* @Description: 数据资源参数配置
|
||||
*/
|
||||
const launchedDataNum = [
|
||||
{
|
||||
num: 10373,
|
||||
},
|
||||
{
|
||||
num: 1080,
|
||||
},
|
||||
{
|
||||
num: 976,
|
||||
},
|
||||
]
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -4,7 +4,7 @@
|
|||
<div class="details-pageconetent-left">
|
||||
<detailsPageconetentTree />
|
||||
</div>
|
||||
<div class="top" v-if="Cardsname != '知识库'">
|
||||
<div class="top" v-if="Cardsname != '知识库' && Cardsname != '数据资源'">
|
||||
<div class="top-title">
|
||||
<div
|
||||
v-for="item in titleName"
|
||||
|
|
@ -257,7 +257,7 @@
|
|||
</div> -->
|
||||
<VideoSurveillance></VideoSurveillance>
|
||||
</div>
|
||||
<div class="shujuziyuan" v-if="Cardsname == '数据资源'">
|
||||
<!-- <div class="shujuziyuan" v-if="Cardsname == '数据资源'">
|
||||
<div class="yunziyuan">
|
||||
<div class="yunziyuan-title">
|
||||
<div class="tupian"></div>
|
||||
|
|
@ -279,13 +279,33 @@
|
|||
说明：数据资源目前通过青岛市政务信息网进行申请
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div v-if="resourceList.data?.length <= 0" style="margin-top: 2rem">
|
||||
<a-empty
|
||||
v-if="!(Cardsname == '基础设施') && !(Cardsname == '数据资源')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" v-else-if="Cardsname == '数据资源'">
|
||||
<div class="top-title">
|
||||
<div
|
||||
v-for="item in titleName"
|
||||
:key="item.name"
|
||||
:class="item.name === Cardsname ? 'sel' : ''"
|
||||
@click="changeCards(item.name)"
|
||||
>
|
||||
<span
|
||||
class="photo"
|
||||
:style="{
|
||||
backgroundImage: `url(${item.photo}) `,
|
||||
backgroundSize: 'cover',
|
||||
}"
|
||||
></span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<details-page-resource></details-page-resource>
|
||||
</div>
|
||||
<div class="top" v-else>
|
||||
<div class="top-title">
|
||||
<div
|
||||
|
|
@ -359,6 +379,8 @@
|
|||
import searchResultList from '@/views/home/components/searchResultList.vue'
|
||||
import KnowledgeBase from '@/views/home/components/KnowledgeBase.vue'
|
||||
import VideoSurveillance from '@/views/home/videoSurveillance'
|
||||
// 数据资源引用
|
||||
import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
// const store = useStore()
|
||||
|
|
@ -950,6 +972,7 @@
|
|||
KnowledgeBase,
|
||||
// VideoCameraOutlined,
|
||||
VideoSurveillance,
|
||||
DetailsPageResource,
|
||||
},
|
||||
beforeUnmount() {
|
||||
mybus.off('selectCardsitem')
|
||||
|
|
|
|||
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<div class="pageResource">
|
||||
<div class="left">
|
||||
<img :src="leftImg" alt="" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="launchedList">
|
||||
<div v-for="(item, index) in launchedData" :key="index">
|
||||
<img :src="item.img" alt="" />
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>
|
||||
{{ item.num }}
|
||||
<span>条</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
政府机构内不同部门间系统的数据存在“信息孤岛”、“数据烟囱”等现象，以数据应用为抓手，通过政务数据共享交换平台，进一步打通数据流，实现信息资源跨部门、跨层级、跨区域互联互通、业务协同和综合应用，满足政府企业部门多方位、多层次的数据需求。
|
||||
</p>
|
||||
<div class="application" @click="OnApplication">
|
||||
<span>在线申请</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
// import { useRouter } from 'vue-router'
|
||||
// import { useStore } from 'vuex'
|
||||
const leftImg = require('@/assets/home/pageResource/left.png')
|
||||
const launchedData = ref([
|
||||
{
|
||||
title: '已上线目录',
|
||||
num: launchedDataNum[0].num,
|
||||
img: require('@/assets/home/pageResource/catalogue-icon.png'),
|
||||
},
|
||||
{
|
||||
title: '已发布服务',
|
||||
num: launchedDataNum[1].num,
|
||||
img: require('@/assets/home/pageResource/service-icon.png'),
|
||||
},
|
||||
{
|
||||
title: '已发布接口',
|
||||
num: launchedDataNum[2].num,
|
||||
img: require('@/assets/home/pageResource/port-icon.png'),
|
||||
},
|
||||
])
|
||||
const OnApplication = () => {
|
||||
window.open('https://10.110.205.1:18199/portal/#/home')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@font-face {
|
||||
font-family: 'Medium';
|
||||
src: url('~@/assets/home/font/Alibaba-PuHuiTi-Medium.otf');
|
||||
}
|
||||
// @font-face {
|
||||
// font-family: 'text-typeface';
|
||||
// src: url('~@/assets/home/font/text-typeface.otf');
|
||||
// }
|
||||
.pageResource {
|
||||
position: absolute;
|
||||
top: 0.68rem;
|
||||
left: -5.37rem;
|
||||
width: 176%;
|
||||
height: 90.5%;
|
||||
background: url(../../../assets/home/pageResource/bg.png) no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
.left {
|
||||
position: absolute;
|
||||
top: 1.16rem;
|
||||
left: 1.25rem;
|
||||
width: 4.7rem;
|
||||
height: 3rem;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 7.6rem;
|
||||
width: 60%;
|
||||
.launchedList {
|
||||
display: flex;
|
||||
div {
|
||||
width: 2.6rem;
|
||||
height: 2.7rem;
|
||||
margin-right: 0.4rem;
|
||||
background: url(../../../assets/home/pageResource/catalogue-bg.png)
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.22rem;
|
||||
color: #213162;
|
||||
opacity: 0.8;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
margin-top: 0.1rem;
|
||||
font-size: 0.35rem;
|
||||
font-weight: bold;
|
||||
color: #0d165b;
|
||||
span {
|
||||
font-size: 0.2rem;
|
||||
color: #213162;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
div:nth-of-type(2) {
|
||||
background: url(../../../assets/home/pageResource/service-bg.png)
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
div:nth-of-type(3) {
|
||||
background: url(../../../assets/home/pageResource/port-bg.png)
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.application {
|
||||
width: 14%;
|
||||
height: 0.6rem;
|
||||
line-height: 0.6rem;
|
||||
text-align: center;
|
||||
border-radius: 0.1rem;
|
||||
margin-top: 0.5rem;
|
||||
background-image: linear-gradient(to right, #336cf6, #1cadfd);
|
||||
box-shadow: 0.08rem 0.08rem 0.2rem 0 rgba(40, 140, 249, 0.4);
|
||||
cursor: pointer;
|
||||
span {
|
||||
font-size: 0.22rem;
|
||||
color: #ffffff;
|
||||
font-family: 'Medium';
|
||||
}
|
||||
}
|
||||
}
|
||||
.right > p {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.18rem;
|
||||
width: 75%;
|
||||
color: #4e586b;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -125,7 +125,6 @@
|
|||
.total-num-content {
|
||||
font-size: 14px;
|
||||
color: #212121;
|
||||
margin: 18px 0 10px;
|
||||
border-bottom: 1px solid #dddee1;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
|
|
@ -141,16 +140,11 @@
|
|||
}
|
||||
:deep(.ant-list-item) {
|
||||
width: 1300px;
|
||||
padding: 16px 0;
|
||||
padding: 30px 0;
|
||||
position: relative;
|
||||
border-bottom: #dddee1 solid 1px;
|
||||
.ant-list-item-main {
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
.ant-list-item-meta {
|
||||
margin: 0;
|
||||
}
|
||||
.ant-list-item-meta-title {
|
||||
white-space: nowrap;
|
||||
|
|
@ -167,17 +161,18 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.pulish-time {
|
||||
position: absolute;
|
||||
left: 196px;
|
||||
bottom: 50px;
|
||||
bottom: 35px;
|
||||
color: #212121;
|
||||
}
|
||||
.ant-image-img {
|
||||
width: 180px;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
Loading…
Reference in New Issue