Skip to content

H
haoban-3
Commit 1771d0f4 by fairyly
Options

feat: 增加树形demo

parent fc19c41c
Showing with 362 additions and 13 deletions
index.html
...@@ -8,12 +8,14 @@ ...@@ -8,12 +8,14 @@
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" href="./favicon.ico"/> <link rel="shortcut icon" href="./favicon.ico" />
<title>好办管理平台</title> <title>好办管理平台</title>
</head> </head>
<body style="min-width: 1400px;">
<body style="min-width: 1400px;">
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<!-- 公共库引用 cdn --> <!-- 公共库引用 cdn -->
...@@ -26,5 +28,6 @@ ...@@ -26,5 +28,6 @@
<script> <script>
// Raven.config('https://3715a345910d4c768e7a1ec14619c2d5@sentry.io/1413672').install(); // Raven.config('https://3715a345910d4c768e7a1ec14619c2d5@sentry.io/1413672').install();
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
package.json
...@@ -31,9 +31,11 @@ ...@@ -31,9 +31,11 @@
"qrcodejs2": "0.0.2", "qrcodejs2": "0.0.2",
"script-loader": "^0.7.2", "script-loader": "^0.7.2",
"tinymce": "^4.8.3", "tinymce": "^4.8.3",
"v-contextmenu": "^2.9.0",
"vue-amap": "^0.5.10", "vue-amap": "^0.5.10",
"vue-awesome-swiper": "^3.1.3", "vue-awesome-swiper": "^3.1.3",
"vue-clipboard2": "^0.2.0", "vue-clipboard2": "^0.2.0",
"vue-runtime-helpers": "^1.1.2",
"xlsx": "^0.13.5" "xlsx": "^0.13.5"
}, },
"devDependencies": { "devDependencies": {
......
src/components/common/app-auth-set.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-08-14 16:51:07
* @LastEditors : 无尘
* @LastEditTime : 2020-01-14 14:44:57
-->
<!--
<wx-tree v-model="itemData" ></wx-tree>
import wxTree from './wx-tree.vue';
-->
<template>
<div class="m-l-10">
</div>
</template>
<script>
import draggable from 'vuedraggable';
import showMsg from '@/common/js/showmsg';
export default {
name: 'li-row',
components: {
draggable
},
props: {
value: {
type: [Object, Array],
default() {
return [];
}
},
itemData: {
type: [Object, Array],
default() {
return [];
}
}
},
data() {
return {
};
},
computed: {},
methods: {
/**
*
*/
},
watch: {
value: function(newData, oldData) {
const that = this;
that.trData = JSON.parse(JSON.stringify(newData));
}
},
mounted() {
const that = this;
that.trData = JSON.parse(JSON.stringify(that.value));
},
beforeDestroy() {
}
};
</script>
<style lang="less" scoped>
</style>
src/main.js
...@@ -31,7 +31,10 @@ import vueGicImgPreview from '@gic-test/vue-gic-img-preview'; ...@@ -31,7 +31,10 @@ import vueGicImgPreview from '@gic-test/vue-gic-img-preview';
import vueOfficeUploadImage from '@gic-test/vue-office-upload-image'; import vueOfficeUploadImage from '@gic-test/vue-office-upload-image';
import htmlToPdf from '@/components/utils/htmlToPdf'; import htmlToPdf from '@/components/utils/htmlToPdf';
import VueAMap from 'vue-amap'; import VueAMap from 'vue-amap';
import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'
Vue.use(contentmenu);
Vue.use(VueAMap); Vue.use(VueAMap);
VueAMap.initAMapApiLoader({ VueAMap.initAMapApiLoader({
key: 'd53a58848be368a7398dc56d5670fe9c', key: 'd53a58848be368a7398dc56d5670fe9c',
......
src/router/index.js
...@@ -44,6 +44,11 @@ export const constantRouterMap = [ ...@@ -44,6 +44,11 @@ export const constantRouterMap = [
redirect: 'login' redirect: 'login'
}, },
{ {
path: '/tree',
name: '登录',
component: _import('login', 'tree')
},
{
path: '/login', path: '/login',
name: '登录', name: '登录',
component: _import('login', 'index') component: _import('login', 'index')
......
src/views/login/index.vue
...@@ -47,14 +47,6 @@ ...@@ -47,14 +47,6 @@
</div> </div>
</template> </template>
<script> <script>
/* import 'swiper/dist/css/swiper.css';
import {
swiper,
swiperSlide
} from 'vue-awesome-swiper';
import countryMobile from '@/components/common/country-mobile.vue';
import verifyCode from '@/components/common/verify-code.vue';
import PhoneNumber from 'awesome-phonenumber'; */
import { _debounce } from '@/common/js/public'; import { _debounce } from '@/common/js/public';
import QRCode from 'qrcodejs2'; import QRCode from 'qrcodejs2';
import errMsg from '@/common/js/error'; import errMsg from '@/common/js/error';
......
src/views/login/org-tree.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-08-14 16:51:07
* @LastEditors : 无尘
* @LastEditTime : 2020-01-14 14:44:57
-->
<!--
<org-tree v-if="item.children.length" :itemData="item.children" ></org-tree>
import orgTree from './org-tree.vue';
-->
<template>
<ul class="m-l-10">
<draggable :list="itemData" class="org-component" :options="leftOption" :move="onMove" @start="isDragging = true" @end="itemMoveEnd">
<li v-for="(item, index) in itemData" :key="index + 'gic'">
<div class="li-cell cursor-pointer" @click="toggleExpand(item)">{{ item.label }}</div>
<li-row v-show="!!item.children.length && item.expand" :itemData="item.children"></li-row>
</li>
</draggable>
</ul>
</template>
<script>
import draggable from 'vuedraggable';
export default {
name: 'li-row',
components: {
draggable
},
props: {
itemData: {
type: [Object, Array],
default() {
return [];
}
}
},
data() {
return {
// leftOption
leftOption: {
group: {
name: 'people',
pull: true,
put: false
},
sort: false,
disabled: false
}
};
},
methods: {
/**
* 展开或者关闭下级
*/
toggleExpand(item) {
console.log(item);
item.expand = item.expand ? false : true;
},
/**
* move{relatedContext, draggedContext}
*/
onMove(evt) {
// const that = this;
// 判断中间是否存在父级
const draggedElement = evt.draggedContext.element;
console.log(evt, !draggedElement.fixed);
return !draggedElement.fixed;
},
/**
* move end
*/
itemMoveEnd(evt) {
const that = this;
// 判断中间是否已经添加
console.log(that.itemData);
that.$forceUpdate();
}
},
watch: {
itemData: function(newData, oldData) {
const that = this;
that.trData = JSON.parse(JSON.stringify(newData));
}
},
mounted() {
const that = this;
that.trData = JSON.parse(JSON.stringify(that.itemData));
},
beforeDestroy() {
this.tempArr = [];
}
};
</script>
<style lang="less" scoped>
.li-cell {
line-height: 26px;
}
.w-110 {
width: 110px;
}
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
.child-row {
padding-left: 10px;
}
</style>
src/views/login/wx-tree.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-08-14 16:51:07
* @LastEditors : 无尘
* @LastEditTime : 2020-01-14 14:44:57
-->
<!--
<wx-tree v-model="itemData" ></wx-tree>
import wxTree from './wx-tree.vue';
-->
<template>
<ul class="m-l-10">
<draggable :list="itemData" class="wx-component" :options="rightOption" @input="emitter" @change="changeData">
<li v-for="(item, index) in itemData" :key="index + 'gic'">
<div class="li-cell cursor-pointer" v-contextmenu:contextmenu @click="toggleExpand(item)">{{ item.label }}</div>
<v-contextmenu ref="contextmenu">
<v-contextmenu-item @click="addChild(item)">添加子部门</v-contextmenu-item>
<v-contextmenu-item @click="modChild(item)">修改名称</v-contextmenu-item>
<v-contextmenu-item @click="delChild(item)">删除</v-contextmenu-item>
<v-contextmenu-item>部门ID: {{ item.id }}</v-contextmenu-item>
</v-contextmenu>
<li-row v-if="item.expand" :itemData="item.children"></li-row
><!-- v-show="!!item.children.length && item.expand" -->
</li>
</draggable>
</ul>
</template>
<script>
import draggable from 'vuedraggable';
import showMsg from '@/common/js/showmsg';
export default {
name: 'li-row',
components: {
draggable
},
props: {
value: {
type: [Object, Array],
default() {
return [];
}
},
itemData: {
type: [Object, Array],
default() {
return [];
}
}
},
data() {
return {
rightOption: { group: { name: 'people', pull: true, put: true }, sort: true }
};
},
computed: {},
methods: {
/**
* 改变数组数据
*/
emitter(value) {
console.log(value);
this.$emit('input', value);
},
changeData(value) {
console.log(value);
},
/**
* 展开或者关闭下级
*/
toggleExpand(item) {
const that = this;
console.log(item);
item.expand = item.expand ? false : true;
if (!item.children.length) {
item.expand = true;
}
that.$forceUpdate();
},
/**
* 添加子部门
*/
addChild(item) {
const that = this;
console.log('添加：', item);
item.children.push({
id: 225,
expand: true,
label: '总部225',
children: []
});
that.$forceUpdate();
},
/**
* 修改名称
*/
modChild(item) {
const that = this;
console.log('修改：', item);
item.label = 2222;
that.$forceUpdate();
},
/**
* 删除
*/
delChild(item) {
const that = this;
console.log('删除:', item, that.itemData);
if (!!item.children.length) {
showMsg.showmsg('当前节点下有子节点，不可删除', 'warning');
return false;
}
let key = '';
that.itemData.forEach((ele, index) => {
if (ele.id == item.id) {
key = index;
}
});
that.itemData.splice(key, 1);
that.$forceUpdate();
}
},
watch: {
value: function(newData, oldData) {
const that = this;
that.trData = JSON.parse(JSON.stringify(newData));
}
},
mounted() {
const that = this;
that.trData = JSON.parse(JSON.stringify(that.value));
}
/* beforeDestroy() {} */
};
</script>
<style lang="less" scoped>
.li-cell {
min-height: 26px;
line-height: 26px;
}
.w-110 {
width: 110px;
}
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
.child-row {
padding-left: 10px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment