|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-pay__order">
|
||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.orderId" :placeholder="$t('order.orderId')" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.userId" :placeholder="$t('order.userId')" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<ren-select v-model="dataForm.status" dict-type="order_status" :placeholder="$t('order.status')"></ren-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
|
||||
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
|
||||
<el-table-column prop="orderId" :label="$t('order.orderId')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="productName" :label="$t('order.productName')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="payAmount" :label="$t('order.payAmount')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="status" :label="$t('order.status')" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ $getDictLabel("order_status", scope.row.status) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="payAt" :label="$t('order.payAt')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="createDate" :label="$t('order.createDate')" 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 v-if="scope.row.status === 0" type="text" size="small" @click="payHandle(scope.row.orderId)">{{ $t('order.pay') }}</el-button>
|
||||
<el-button v-if="scope.row.status === 0" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</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>
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<!-- <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 './order-add-or-update'
|
||||
import {addDynamicRoute} from "@/router";
|
||||
export default {
|
||||
mixins: [mixinViewModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/pay/order/page',
|
||||
getDataListIsPage: true,
|
||||
deleteURL: '/pay/order',
|
||||
deleteIsBatch: true
|
||||
},
|
||||
dataForm: {
|
||||
orderId: '',
|
||||
status: '',
|
||||
userId: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
// AddOrUpdate
|
||||
},
|
||||
methods: {
|
||||
payHandle (orderId) {
|
||||
window.open(`${window.SITE_CONFIG['apiURL']}/pay/alipay/webPay?orderId=` + orderId);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-pay__order">
|
||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.orderId" :placeholder="$t('order.orderId')" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.userId" :placeholder="$t('order.userId')" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<ren-select v-model="dataForm.status" dict-type="order_status" :placeholder="$t('order.status')"></ren-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
|
||||
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
|
||||
<el-table-column prop="orderId" :label="$t('order.orderId')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="productName" :label="$t('order.productName')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="payAmount" :label="$t('order.payAmount')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="status" :label="$t('order.status')" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ $getDictLabel("order_status", scope.row.status) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="payAt" :label="$t('order.payAt')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="createDate" :label="$t('order.createDate')" 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 v-if="scope.row.status === 0" type="text" size="small" @click="payHandle(scope.row.orderId)">{{ $t('order.pay') }}</el-button>
|
||||
<el-button v-if="scope.row.status === 0" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</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>
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<!-- <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 './order-add-or-update'
|
||||
import {addDynamicRoute} from "@/router";
|
||||
export default {
|
||||
mixins: [mixinViewModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/pay/order/page',
|
||||
getDataListIsPage: true,
|
||||
deleteURL: '/pay/order',
|
||||
deleteIsBatch: true
|
||||
},
|
||||
dataForm: {
|
||||
orderId: '',
|
||||
status: '',
|
||||
userId: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
// AddOrUpdate
|
||||
},
|
||||
methods: {
|
||||
payHandle (orderId) {
|
||||
window.open(`${window.SITE_CONFIG['apiURL']}/pay/alipay/webPay?orderId=` + orderId);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<div class="mod-pay__order">
|
||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.orderId" :placeholder="$t('order.orderId')" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.userId" :placeholder="$t('order.userId')" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<ren-select v-model="dataForm.status" dict-type="order_status" :placeholder="$t('order.status')"></ren-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
|
||||
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
|
||||
<el-table-column prop="orderId" :label="$t('order.orderId')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="productName" :label="$t('order.productName')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="payAmount" :label="$t('order.payAmount')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="status" :label="$t('order.status')" header-align="center" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ $getDictLabel("order_status", scope.row.status) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="payAt" :label="$t('order.payAt')" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="createDate" :label="$t('order.createDate')" 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 v-if="scope.row.status === 0" type="text" size="small" @click="payHandle(scope.row.orderId)">{{ $t('order.pay') }}</el-button>
|
||||
<el-button v-if="scope.row.status === 0" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</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>
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<!-- <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 './order-add-or-update'
|
||||
import {addDynamicRoute} from "@/router";
|
||||
export default {
|
||||
mixins: [mixinViewModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: '/pay/order/page',
|
||||
getDataListIsPage: true,
|
||||
deleteURL: '/pay/order',
|
||||
deleteIsBatch: true
|
||||
},
|
||||
dataForm: {
|
||||
orderId: '',
|
||||
status: '',
|
||||
userId: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
// AddOrUpdate
|
||||
},
|
||||
methods: {
|
||||
payHandle (orderId) {
|
||||
window.open(`${window.SITE_CONFIG['apiURL']}/pay/alipay/webPay?orderId=` + orderId);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,99 @@
|
|||
/*
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2020-07-07 16:03:23
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-04-01 10:51:45
|
||||
* @Description: 数据资源参数配置
|
||||
*/
|
||||
// const newLocation = 'qingdao'
|
||||
const newLocation = 'baotou'
|
||||
// const newLocation = 'xihaian'
|
||||
|
||||
// 数据资源数据
|
||||
const launchedDataNumObject = {}
|
||||
// 导航数据
|
||||
const navListManagement = {}
|
||||
// qingdao
|
||||
if (newLocation === 'qingdao') {
|
||||
// 数据资源数据
|
||||
launchedDataNumObject.launchedDataNum = [
|
||||
{
|
||||
num: 10374,
|
||||
},
|
||||
{
|
||||
num: 1080,
|
||||
},
|
||||
{
|
||||
num: 976,
|
||||
},
|
||||
]
|
||||
// 导航数据
|
||||
navListManagement.navList = [
|
||||
{ name: '共享门户', key: 'home' },
|
||||
{ name: '能力集市', key: 'DetailsPageconetent' },
|
||||
{ name: '能力云图', key: 'capabilityCloud' },
|
||||
{ name: '能力统计', key: 'abilityStatistics' },
|
||||
{ name: '开发指南', key: 'developmentGuide' },
|
||||
{ name: '需求中心', key: 'demandCenter' },
|
||||
// { name: '个人中心', key: 'personalCenter' },
|
||||
{ name: '区市站点', key: 'mapTest' },
|
||||
// { name: '后台管理', key: 'houtaiguanli' },
|
||||
{ name: '赋能案例', key: 'assignCase' },
|
||||
]
|
||||
}
|
||||
// baotou
|
||||
else if (newLocation === 'baotou') {
|
||||
// 数据资源数据
|
||||
launchedDataNumObject.launchedDataNum = [
|
||||
{
|
||||
num: 10373,
|
||||
},
|
||||
{
|
||||
num: 1080,
|
||||
},
|
||||
{
|
||||
num: 976,
|
||||
},
|
||||
]
|
||||
// 导航数据
|
||||
navListManagement.navList = [
|
||||
{ name: '共享门户', key: 'home' },
|
||||
{ name: '能力集市', key: 'DetailsPageconetent' },
|
||||
{ name: '能力云图', key: 'capabilityCloud' },
|
||||
{ name: '能力统计', key: 'abilityStatistics' },
|
||||
{ name: '开发指南', key: 'developmentGuide' },
|
||||
{ name: '需求中心', key: 'demandCenter' },
|
||||
// { name: '个人中心', key: 'personalCenter' },
|
||||
// { name: '区市站点', key: 'mapTest' },
|
||||
// { name: '后台管理', key: 'houtaiguanli' },
|
||||
{ name: '赋能案例', key: 'assignCase' },
|
||||
]
|
||||
}
|
||||
// xihaian
|
||||
else if (newLocation === 'xihaian') {
|
||||
// 数据资源数据
|
||||
launchedDataNumObject.launchedDataNum = [
|
||||
{
|
||||
num: 10372,
|
||||
},
|
||||
{
|
||||
num: 1080,
|
||||
},
|
||||
{
|
||||
num: 976,
|
||||
},
|
||||
]
|
||||
// 导航数据
|
||||
navListManagement.navList = [
|
||||
{ name: '共享门户', key: 'home' },
|
||||
{ name: '能力集市', key: 'DetailsPageconetent' },
|
||||
{ name: '能力云图', key: 'capabilityCloud' },
|
||||
{ name: '能力统计', key: 'abilityStatistics' },
|
||||
{ name: '开发指南', key: 'developmentGuide' },
|
||||
{ name: '需求中心', key: 'demandCenter' },
|
||||
// { name: '个人中心', key: 'personalCenter' },
|
||||
// { name: '区市站点', key: 'mapTest' },
|
||||
// { name: '后台管理', key: 'houtaiguanli' },
|
||||
{ name: '赋能案例', key: 'assignCase' },
|
||||
]
|
||||
}
|
After Width: | Height: | Size: 160 KiB |
After Width: | Height: | Size: 42 KiB |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 159 KiB |
After Width: | Height: | Size: 45 KiB |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 45 KiB |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.9 KiB |
|
@ -138,6 +138,16 @@ export const constantRoutes = [
|
|||
icon: 'error-warning-line',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/mynoticeView',
|
||||
name: 'mynoticeView',
|
||||
hidden: true,
|
||||
component: () => import('@/views/mynoticeView'),
|
||||
meta: {
|
||||
title: '我的消息',
|
||||
icon: 'error-warning-line',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/WorkDynDetails',
|
||||
name: 'WorkDynDetails',
|
||||
|
|
|
@ -143,7 +143,7 @@
|
|||
//
|
||||
assignRankings.value[i - 1].name =
|
||||
contentData.value.resourceTop5[i - 1].service_name || ''
|
||||
assignRankings.value[i - 1].opacity =
|
||||
assignRankings.value[i - 1].operation =
|
||||
contentData.value.resourceTop5[i - 1].count || ' '
|
||||
}
|
||||
})
|
||||
|
|
|
@ -215,6 +215,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
text-align: center;
|
||||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
font-size: 0.24rem;
|
||||
|
|
|
@ -145,6 +145,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
|
|
|
@ -146,6 +146,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
text-align: center;
|
||||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
font-size: 0.24rem;
|
||||
|
|
|
@ -121,7 +121,7 @@
|
|||
// 排序
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.dataList.infoList.sort((a, b) => {
|
||||
console.log('排序==============>', a, b)
|
||||
// console.log('排序==============>', a, b)
|
||||
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
|
||||
})
|
||||
val.infoList.map((item) => {
|
||||
|
|
|
@ -3,15 +3,17 @@
|
|||
* @Date: 2022-06-08 15:25:33
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-14 11:30:52
|
||||
* @Description: 组件展示 视频播放
|
||||
* @Description: 应用展示 视频播放
|
||||
-->
|
||||
<template>
|
||||
<div class="business-presentation" v-if="flag">
|
||||
<div class="application-presentation" v-if="flag">
|
||||
<detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
|
||||
<div class="main">
|
||||
<img :src="leftImg" />
|
||||
<div
|
||||
class="main"
|
||||
:style="`${img}background-position:center;background-size:cover;`"
|
||||
>
|
||||
<!-- <a-image :src="img"></a-image> -->
|
||||
<div class="play" @click="showModal"></div>
|
||||
<img :src="rightImg" />
|
||||
</div>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
|
@ -31,8 +33,6 @@
|
|||
<script setup>
|
||||
import { ref, reactive, defineProps, watch } from 'vue'
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const leftImg = require('@/assets/detailsAll/business/business_previous.png')
|
||||
const rightImg = require('@/assets/detailsAll/business/business_next.png')
|
||||
const visible = ref(false)
|
||||
const options = reactive({
|
||||
width: '7.00rem', //播放器宽度
|
||||
|
@ -67,6 +67,7 @@
|
|||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const flag = ref(true)
|
||||
const img = ref({})
|
||||
console.log('111111111111111111111,', props.dataList)
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
|
@ -76,7 +77,13 @@
|
|||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '组件图片'
|
||||
)[0]
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(
|
||||
|
@ -90,29 +97,31 @@
|
|||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '组件图片'
|
||||
)[0]
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value =
|
||||
'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.business-presentation {
|
||||
padding: 0.8rem 3rem 0.8rem;
|
||||
background: url('~@/assets/detailsAll/business/business_module_bg.png')
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.application-presentation {
|
||||
padding: 0.8rem 3rem 0;
|
||||
.main {
|
||||
height: 3.4rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/detailsAll/business/business_element_content.png')
|
||||
no-repeat center;
|
||||
background-size: 50% 100%;
|
||||
background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
margin-top: 0.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.play {
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
|
@ -120,18 +129,6 @@
|
|||
background-size: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
top: 1.3rem;
|
||||
left: 0.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
img:last-of-type {
|
||||
position: absolute;
|
||||
top: 1.3rem;
|
||||
left: unset;
|
||||
right: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,22 +12,17 @@
|
|||
<div class="left">
|
||||
<div class="content-left-title">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.titleSon }}</span>
|
||||
</div>
|
||||
<div class="content-left-content">
|
||||
<p>
|
||||
<span>{{ item.link.name }}</span>
|
||||
<span>{{ item.link.value }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>{{ item.postMethod.name }}</span>
|
||||
<span>{{ item.postMethod.value }}</span>
|
||||
<span>{{ item.linkValue }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div @click="technical()">技术文档</div>
|
||||
<div>新手指引</div>
|
||||
<div @click="technicalNew()">新手指引</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
|
@ -51,20 +46,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="content-right-right">
|
||||
<div class="content-right-title">{{ item.contact }}</div>
|
||||
<div class="content-right-title">{{ item.contact2 }}</div>
|
||||
<div class="content-right-content">
|
||||
<p>
|
||||
<span>{{ item.people.name }}</span>
|
||||
<span>{{ item.people2.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.people.value }}</template>
|
||||
<span>{{ item.people.value }}</span>
|
||||
<template #title>{{ item.people2.value }}</template>
|
||||
<span>{{ item.people2.value }}</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
<p>
|
||||
<span>{{ item.phone.name }}</span>
|
||||
<span>{{ item.phone2.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.phone.value }}</template>
|
||||
<span>{{ item.phone.value }}</span>
|
||||
<template #title>{{ item.phone2.value }}</template>
|
||||
<span>{{ item.phone2.value }}</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
|
@ -83,26 +78,27 @@
|
|||
englishTitle: 'USAGE',
|
||||
content: [
|
||||
{
|
||||
title: '技术对接',
|
||||
titleSon: '调用接口',
|
||||
title: '组件地址',
|
||||
link: {
|
||||
name: '接口地址:',
|
||||
value: 'http://localhost:9999/#/details?id=1532278256619307010',
|
||||
},
|
||||
postMethod: {
|
||||
name: '请求方式:',
|
||||
value: 'POST',
|
||||
},
|
||||
contact: '联系厂商:',
|
||||
facilitator: { name: '服务商:', value: '科大讯飞' },
|
||||
people: { name: '联系人:', value: '李四' },
|
||||
linkValue: '',
|
||||
contact: '归属部门',
|
||||
facilitator: { name: '归属部门:', value: '讯飞科大' },
|
||||
people: { name: '部门联系人:', value: '李四' },
|
||||
phone: {
|
||||
name: '联系电话:',
|
||||
name: '联系人电话:',
|
||||
value: '12345678901',
|
||||
},
|
||||
contact2: '服务商',
|
||||
facilitator2: { name: '服务商:', value: '科大讯飞' },
|
||||
people2: { name: '服务商联系人:', value: '李四' },
|
||||
phone2: {
|
||||
name: '联系人电话:',
|
||||
value: '1234567890',
|
||||
},
|
||||
},
|
||||
],
|
||||
link: '',
|
||||
})
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
|
@ -118,20 +114,17 @@
|
|||
} else {
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
dataFrom.value.content[0].link.value = props.dataList.apiUrl
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
dataFrom.value.content[0].postMethod.value = props.dataList.apiMethodType
|
||||
dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
|
||||
console.log('dataList', props.dataList)
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (item.attrType === '使用方式') {
|
||||
dataFrom.value.content[0].titleSon = item.attrValue
|
||||
if (item.attrType === '组件地址') {
|
||||
dataFrom.value.content[0].linkValue = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商') {
|
||||
dataFrom.value.content[0].facilitator.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商联系人') {
|
||||
dataFrom.value.content[0].people.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商联系电话') {
|
||||
dataFrom.value.content[0].phone.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '技术文档') {
|
||||
dataFrom.value.link = item.attrValue || '--'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
@ -145,11 +138,11 @@
|
|||
flag.value = false
|
||||
} else {
|
||||
dataFrom.value.content[0].link.value = val.apiUrl
|
||||
dataFrom.value.content[0].postMethod.value = val.apiMethodType
|
||||
dataFrom.value.content[0].facilitator.value = val.deptContacts
|
||||
console.log('dataList', val)
|
||||
val.infoList.map((item) => {
|
||||
if (item.attrType === '使用方式') {
|
||||
dataFrom.value.content[0].titleSon = item.attrValue
|
||||
if (item.attrType === '组件地址') {
|
||||
dataFrom.value.content[0].linkValue = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商') {
|
||||
dataFrom.value.content[0].facilitator.value =
|
||||
item.attrValue || '--'
|
||||
|
@ -157,8 +150,6 @@
|
|||
dataFrom.value.content[0].people.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商联系电话') {
|
||||
dataFrom.value.content[0].phone.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '技术文档') {
|
||||
dataFrom.value.link = item.attrValue || '--'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
@ -180,6 +171,21 @@
|
|||
// btoa(encodeURI(dataFrom.value.link))
|
||||
// )
|
||||
}
|
||||
function technicalNew() {
|
||||
// 拼接路径
|
||||
// const type = pinyin(props.dataList.type, {
|
||||
// pattern: 'initial',
|
||||
// }).replace(/\s*/g, '')
|
||||
// // 打开文档
|
||||
// const id = props.dataList.id
|
||||
// window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
|
||||
console.log('dataFrom.value.link', dataFrom.value.link)
|
||||
window.open(
|
||||
window.SITE_CONFIG.previewUrl +
|
||||
'hisense_office/onlinePreview?url=' +
|
||||
btoa(encodeURI(dataFrom.value.link))
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -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: launchedDataNumObject.launchedDataNum[0].num,
|
||||
img: require('@/assets/home/pageResource/catalogue-icon.png'),
|
||||
},
|
||||
{
|
||||
title: '已发布服务',
|
||||
num: launchedDataNumObject.launchedDataNum[1].num,
|
||||
img: require('@/assets/home/pageResource/service-icon.png'),
|
||||
},
|
||||
{
|
||||
title: '已发布接口',
|
||||
num: launchedDataNumObject.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>
|
|
@ -59,20 +59,15 @@
|
|||
<a-list item-layout="horizontal" :data-source="mynoticeData">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-list-item-meta description="">
|
||||
<a-list-item-meta :description="item.senderDate">
|
||||
<template #title>
|
||||
<a-tooltip placement="left">
|
||||
<template #title>{{ item.content }}</template>
|
||||
<a>{{ item.title }}</a>
|
||||
</a-tooltip>
|
||||
<a-button type="primary" ghost @click="read(item)">
|
||||
设为已读
|
||||
</a-button>
|
||||
<a>{{ item.content }}</a>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<div class="bottom" @click="goToView()">查看更多</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<i class="img"></i>
|
||||
|
@ -113,29 +108,30 @@
|
|||
import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue'
|
||||
import { recordRoute } from '@/config'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { getUser, mynotice, mynoticeRead } from '@/api/home'
|
||||
import { getUser, mynotice } from '@/api/home'
|
||||
import { useStore } from 'vuex'
|
||||
import { getSgcTotal } from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const navList = ref([
|
||||
{ name: '共享门户', key: 'home' },
|
||||
{ name: '能力集市', key: 'DetailsPageconetent' },
|
||||
{ name: '能力云图', key: 'capabilityCloud' },
|
||||
{ name: '能力统计', key: 'abilityStatistics' },
|
||||
{ name: '开发指南', key: 'developmentGuide' },
|
||||
{ name: '需求中心', key: 'demandCenter' },
|
||||
// { name: '个人中心', key: 'personalCenter' },
|
||||
{ name: '区市站点', key: 'mapTest' },
|
||||
// { name: '后台管理', key: 'houtaiguanli' },
|
||||
{ name: '赋能案例', key: 'assignCase' },
|
||||
])
|
||||
// const navListManagement = ref([
|
||||
// { name: '共享门户', key: 'home' },
|
||||
// { name: '能力集市', key: 'DetailsPageconetent' },
|
||||
// { name: '能力云图', key: 'capabilityCloud' },
|
||||
// { name: '能力统计', key: 'abilityStatistics' },
|
||||
// { name: '开发指南', key: 'developmentGuide' },
|
||||
// { name: '需求中心', key: 'demandCenter' },
|
||||
// // { name: '个人中心', key: 'personalCenter' },
|
||||
// { name: '区市站点', key: 'mapTest' },
|
||||
// // { name: '后台管理', key: 'houtaiguanli' },
|
||||
// { name: '赋能案例', key: 'assignCase' },
|
||||
// ])
|
||||
const user = ref({})
|
||||
const select = ref(router.currentRoute.value.name)
|
||||
const mynoticeFlag = ref(false)
|
||||
const mynoticeData = ref([])
|
||||
const navList = ref(navListManagement.navList)
|
||||
const props = defineProps({
|
||||
showView: { type: String, default: '' },
|
||||
})
|
||||
|
@ -243,15 +239,20 @@
|
|||
mynotice({ page: 1, limit: 999, readStatus: 0 }).then((res) => {
|
||||
console.log('我的消息', res.data.data)
|
||||
mynoticeNum.value = res.data.data.total
|
||||
mynoticeData.value = res.data.data.list
|
||||
mynoticeData.value = res.data.data.list.splice(0, 3)
|
||||
})
|
||||
}
|
||||
const read = (item) => {
|
||||
mynoticeRead(item.id).then((res) => {
|
||||
console.log('已读', res)
|
||||
getMynotice()
|
||||
const goToView = () => {
|
||||
router.push({
|
||||
path: '/mynoticeView',
|
||||
})
|
||||
}
|
||||
// const read = (item) => {
|
||||
// mynoticeRead(item.id).then((res) => {
|
||||
// console.log('已读', res)
|
||||
// getMynotice()
|
||||
// })
|
||||
// }
|
||||
onMounted(() => {
|
||||
getSgcTotal().then((res) => {
|
||||
console.log('初始化========================>', res.data.data.count)
|
||||
|
@ -397,7 +398,7 @@
|
|||
}
|
||||
}
|
||||
.mynotice {
|
||||
width: 2.5rem;
|
||||
width: 4rem;
|
||||
height: 3rem;
|
||||
background: #eee;
|
||||
border-radius: 0.05rem;
|
||||
|
@ -405,24 +406,33 @@
|
|||
top: 0.45rem;
|
||||
right: 3.1rem;
|
||||
overflow-y: scroll;
|
||||
.bottom {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
}
|
||||
.mynotice::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
:deep(.ant-list-item) {
|
||||
border-bottom: 0.01rem solid #ccc;
|
||||
padding: 0.1rem;
|
||||
}
|
||||
:deep(.ant-list-item-meta-title) {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 0 0.05rem;
|
||||
// display: flex;
|
||||
// justify-content: space-around;
|
||||
// align-items: center;
|
||||
// padding: 0 0.05rem;
|
||||
a {
|
||||
width: 1.5rem;
|
||||
// 超出显示...
|
||||
width: 3.8rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
button {
|
||||
width: 0.7rem;
|
||||
|
|
|
@ -0,0 +1,260 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-21 11:55:07
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-21 16:52:02
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<div class="notice-list">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<div
|
||||
class="item"
|
||||
:class="{ select: selectNav == nav.key }"
|
||||
v-for="nav in navList"
|
||||
:key="nav.key"
|
||||
>
|
||||
<i :class="nav.key" @click="changeNav(nav)"></i>
|
||||
<div>{{ nav.title + '(' + nav.num + ')' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div style="margin-right: 0.1rem">搜索</div>
|
||||
<a-input
|
||||
v-model:value="userName"
|
||||
placeholder="请输入关键字"
|
||||
style="margin-right: 0.1rem"
|
||||
>
|
||||
<template #suffix>
|
||||
<search-outlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button type="primary" style="margin-right: 0.1rem">搜索</a-button>
|
||||
<div class="reset">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div class="left">
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="value1"
|
||||
style="width: 120px"
|
||||
@focus="focus"
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-select-option value="全部消息">全部消息</a-select-option>
|
||||
<a-select-option value="已读消息">已读消息</a-select-option>
|
||||
<a-select-option value="未读消息">未读消息</a-select-option>
|
||||
</a-select>
|
||||
<div class="check">
|
||||
<a-checkbox
|
||||
v-model:checked="checked"
|
||||
stlye="margin-right:0.3rem;"
|
||||
></a-checkbox>
|
||||
<div>全选</div>
|
||||
<div>
|
||||
共
|
||||
<span>2</span>
|
||||
条消息
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">标记为已读</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<a-list item-layout="horizontal" :data-source="data">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-list-item-meta description="">
|
||||
<template #title>
|
||||
<div class="left">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="right">{{ '发布时间:' + item.time }}</div>
|
||||
</template>
|
||||
<template #avatar>
|
||||
<a-checkbox v-model:checked="checked"></a-checkbox>
|
||||
<a-badge dot :offset="[-30, 5]">
|
||||
<a-avatar :src="item.src" />
|
||||
</a-badge>
|
||||
<!-- <a-avatar :src="item.src" /> -->
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</div>
|
||||
<a-pagination v-model:current="current" :total="50" show-less-items />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { SearchOutlined } from '@ant-design/icons-vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
const navList = reactive([
|
||||
{
|
||||
title: '全部',
|
||||
key: 'all',
|
||||
num: 0,
|
||||
},
|
||||
{
|
||||
title: '通知',
|
||||
key: 'notice',
|
||||
num: 0,
|
||||
},
|
||||
{
|
||||
title: '评论',
|
||||
key: 'comment',
|
||||
num: 0,
|
||||
},
|
||||
])
|
||||
const selectNav = ref('all')
|
||||
const data = ref([
|
||||
{
|
||||
title: 'Ant Design Title 1',
|
||||
src: require('@/assets/mynoticeView/notice.png'),
|
||||
time: '2020-06-21',
|
||||
},
|
||||
{
|
||||
title: 'Ant Design Title 2',
|
||||
src: require('@/assets/mynoticeView/notice.png'),
|
||||
time: '2020-06-21',
|
||||
},
|
||||
{
|
||||
title: 'Ant Design Title 3',
|
||||
src: require('@/assets/mynoticeView/notice.png'),
|
||||
time: '2020-06-21',
|
||||
},
|
||||
{
|
||||
title: 'Ant Design Title 4',
|
||||
src: require('@/assets/mynoticeView/notice.png'),
|
||||
time: '2020-06-21',
|
||||
},
|
||||
])
|
||||
const changeNav = (nav) => {
|
||||
selectNav.value = nav.key
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.notice-list {
|
||||
padding: 0.64rem 3.1rem 0.2rem;
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left {
|
||||
display: flex;
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 1.28rem;
|
||||
margin-bottom: 0.16rem;
|
||||
border-bottom: 3px solid #fff;
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
margin-bottom: 0.15rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.all {
|
||||
background: url('~@/assets/mynoticeView/all.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.notice {
|
||||
background: url('~@/assets/mynoticeView/notice.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.comment {
|
||||
background: url('~@/assets/mynoticeView/comment.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
.select {
|
||||
border-bottom: 3px solid #0058e1;
|
||||
color: #0058e1;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 0.32rem;
|
||||
div {
|
||||
width: 0.5rem;
|
||||
}
|
||||
.reset {
|
||||
color: #0058e1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ant-select {
|
||||
margin-right: 0.24rem;
|
||||
}
|
||||
.check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
div {
|
||||
margin-left: 0.24rem;
|
||||
span {
|
||||
font-size: 18px;
|
||||
color: #0058e1;
|
||||
}
|
||||
}
|
||||
div:nth-of-type(1) {
|
||||
margin-left: 0.12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
cursor: pointer;
|
||||
color: #0058e1;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
padding: 0.05rem 0.1rem;
|
||||
}
|
||||
.right:hover {
|
||||
background: rgba(0, 88, 225, 0.1);
|
||||
}
|
||||
}
|
||||
.main {
|
||||
height: 5.67rem;
|
||||
:deep(.ant-list-item-meta) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ant-checkbox-wrapper {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
.ant-list-item-meta-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left {
|
||||
cursor: pointer;
|
||||
width: 9.2rem;
|
||||
max-height: 0.43rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.left:hover {
|
||||
color: #0058e1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,18 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-21 11:50:28
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-21 11:56:37
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<new-home-header></new-home-header>
|
||||
<notice-list></notice-list>
|
||||
<home-footer></home-footer>
|
||||
</template>
|
||||
<script setup>
|
||||
import NewHomeHeader from '@/views/home/components/header'
|
||||
import NoticeList from '@/views/mynoticeView/components/NoticeList'
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
</script>
|
||||
<style lang="less" scoped></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 {
|
||||
|
|