|
|
@@ -0,0 +1,331 @@
|
|
|
+<script>
|
|
|
+import Function from "@/components/dashboard/commonFuncManage/function.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ commonFunctions: [
|
|
|
+ {
|
|
|
+ name: '智慧餐厅',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ type: 'route'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '智慧餐厅2',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ type: 'route'
|
|
|
+ },{
|
|
|
+ name: '智慧餐厅3',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ type: 'route'
|
|
|
+ },{
|
|
|
+ name: '智慧餐厅4',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ type: 'route'
|
|
|
+ },{
|
|
|
+ name: '智慧餐厅5',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ type: 'route'
|
|
|
+ },{
|
|
|
+ name: '智慧餐厅6',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ type: 'route'
|
|
|
+ },{
|
|
|
+ name: '智慧餐厅7',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ type: 'route'
|
|
|
+ },{
|
|
|
+ name: '智慧餐厅8',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ type: 'route'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ functions: [
|
|
|
+ {
|
|
|
+ name: '智慧停车',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ type: 'route'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '智慧停车2',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ type: 'route'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '智慧停车3',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ type: 'route'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '智慧停车4',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ type: 'route'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '智慧停车5',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ type: 'route'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ssoList: [
|
|
|
+ {
|
|
|
+ name: '系统1',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ isSSO: true,
|
|
|
+ type: 'url'
|
|
|
+ },{
|
|
|
+ name: '系统2',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ isSSO: true,
|
|
|
+ type: 'url'
|
|
|
+ },{
|
|
|
+ name: '系统3',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ isSSO: true,
|
|
|
+ type: 'url'
|
|
|
+ },{
|
|
|
+ name: '系统4',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ isSSO: true,
|
|
|
+ type: 'url'
|
|
|
+ },{
|
|
|
+ name: '系统5',
|
|
|
+ icon: '@/assets/images/function/iocRestaurant.png',
|
|
|
+ url: '',
|
|
|
+ isSSO: true,
|
|
|
+ type: 'url'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ show: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ visible: Boolean,
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Function
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ "show": function (val) {
|
|
|
+ this.toggleVisible(val)
|
|
|
+ },
|
|
|
+ "visible": function (val) {
|
|
|
+ this.show = val
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emits: ['update:visible'],
|
|
|
+ setup(props, context) {
|
|
|
+ const methods = {
|
|
|
+ toggleVisible(flag) {
|
|
|
+ context.emit('update:visible', flag)
|
|
|
+ },
|
|
|
+ }
|
|
|
+ return methods
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.show = this.visible;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleOk() {
|
|
|
+ this.show = false;
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.show = false
|
|
|
+ },
|
|
|
+ plusFunction(item, isSSO) {
|
|
|
+ if (!item || item == '') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.commonFunctions.length>=8) {
|
|
|
+ this.$message.warning('功能位已满，请先移除功能后重试')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let obj;
|
|
|
+ let index = this.functions.findIndex(i=>i.name==item)
|
|
|
+ if (!index || index>=0) {
|
|
|
+ index = this.ssoList.findIndex(i=>i.name==item)
|
|
|
+ if (index && index>=0) {
|
|
|
+ obj = this.ssoList[index];
|
|
|
+ this.ssoList.splice(index, 1)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ obj = this.functions[index];
|
|
|
+ this.functions.splice(index, 1)
|
|
|
+ }
|
|
|
+ if (obj) {
|
|
|
+ this.commonFunctions.push(obj)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ minusFunction(item, isSSO) {
|
|
|
+ if (!item || item == '') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let obj;
|
|
|
+ let index = this.commonFunctions.findIndex(i=>i.name==item)
|
|
|
+ if (index && index>=0) {
|
|
|
+ obj = this.commonFunctions[index]
|
|
|
+ this.commonFunctions.splice(index, 1)
|
|
|
+ }
|
|
|
+ if (isSSO) {
|
|
|
+ this.ssoList.push(obj)
|
|
|
+ } else {
|
|
|
+ this.functions.push(obj)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <a-modal class="dashboard-funcManage"
|
|
|
+ :visible="show"
|
|
|
+ :width="1020"
|
|
|
+ @ok="handleOk"
|
|
|
+ @cancel="handleCancel"
|
|
|
+ >
|
|
|
+ <template #footer>
|
|
|
+ <a-button size="small" class="footer-btn" key="back" @click="handleCancel">
|
|
|
+ 取消
|
|
|
+ </a-button>
|
|
|
+ <a-button size="small" class="footer-btn" key="submit" type="primary" @click="handleOk">
|
|
|
+ 确定
|
|
|
+ </a-button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="funcManage-custom">
|
|
|
+ <div class="funcManage-title">自定义快捷入口</div>
|
|
|
+ <div class="funcManage-body">
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <transition-group name="common-function">
|
|
|
+ <a-col :span="6" v-for="(item,index) in commonFunctions" :key="item.name" style="margin-bottom: 12px">
|
|
|
+ <Function :minus-function="minusFunction" :title="item.name" :type="-1" :icon="require('@/assets/images/function/iocRestaurant.png')"></Function>
|
|
|
+ </a-col>
|
|
|
+ </transition-group>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="max-height: 400px;overflow-y: auto">
|
|
|
+ <div class="funcManage-function">
|
|
|
+ <div class="funcManage-title funcManage-title-border">运营管理中心</div>
|
|
|
+ <div class="funcManage-body">
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <transition-group name="common-function">
|
|
|
+ <a-col :span="6" v-for="(item,index) in functions" :key="item.name" style="margin-bottom: 12px">
|
|
|
+ <Function :plus-function="plusFunction" :title="item.name" :type="1"></Function>
|
|
|
+ </a-col>
|
|
|
+ </transition-group>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="funcManage-sso">
|
|
|
+ <div class="funcManage-title funcManage-title-border">单点登录</div>
|
|
|
+ <div class="funcManage-body">
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <transition-group name="common-function">
|
|
|
+ <a-col :span="6" v-for="(item, index) in ssoList" :key="item.name" style="margin-bottom: 12px">
|
|
|
+ <Function :plus-function="plusFunction" :title="item.name" :type="1"></Function>
|
|
|
+ </a-col>
|
|
|
+ </transition-group>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.dashboard-funcManage {
|
|
|
+ .footer-btn {
|
|
|
+ width: 80px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-btn {
|
|
|
+ margin: 0 10px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .funcManage-body {
|
|
|
+ margin: 10px;
|
|
|
+ height: auto;
|
|
|
+ min-height: 200px;
|
|
|
+ border: 1px solid #E3E4E6;
|
|
|
+ padding: 2% 3%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .funcManage-custom {
|
|
|
+ .funcManage-body {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .funcManage-function {
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ .funcManage-body {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .funcManage-sso {
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ .funcManage-body {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .funcManage-title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .funcManage-title-border {
|
|
|
+ padding-left: 5px;
|
|
|
+ border-left: 3px solid #2EA8E6;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.common-function-move, /* 对移动中的元素应用的过渡 */
|
|
|
+.common-function-enter-active,
|
|
|
+.common-function-leave-active {
|
|
|
+ transition: all 0.5s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.common-function-enter-from,
|
|
|
+.common-function-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateX(30px);
|
|
|
+}
|
|
|
+
|
|
|
+.common-function-leave-active {
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
tianyabing