|
@@ -0,0 +1,235 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="box-head"><uni-mall-head ref="refUniMallHead" @change="tabChange"></uni-mall-head></view>
|
|
|
+ <view class="box-list">
|
|
|
+ <mescroll-empty :option="{tip:'暂无部门或成员'}" v-if="currentData.length === 0 && userData.length === 0">
|
|
|
+ </mescroll-empty>
|
|
|
+ <view>
|
|
|
+ <view class="box-list-item"
|
|
|
+ :class="[item.children && item.children.length ? 'box-list-item-department-icon' : '','box-list-item-department']"
|
|
|
+ :key="item.id" @click="handelClickItem('depart',item)" v-for="item in currentData">
|
|
|
+ <view class="box-list-item-department-pic">
|
|
|
+ <uv-icon name="grid-fill" color="#3c9cff" size="48"></uv-icon>
|
|
|
+ </view>
|
|
|
+ <view class="box-list-item-right">
|
|
|
+ <view class="box-list-item-text">{{ item.name }}</view>
|
|
|
+ <uv-icon class="inherit-icons" name="arrow-right" color="#8c8c8c" size="32"></uv-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box-list-item box-list-item-user" :key="item.id" @click="handelClickItem('user',item)"
|
|
|
+ v-for="item in userData">
|
|
|
+ <view class="box-list-item-user-pic">
|
|
|
+ <image v-if="item.pic" :src="item.portrait"></image>
|
|
|
+ <text v-else>{{getUserName(item.name)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="box-list-item-right">
|
|
|
+ <view class="box-list-item-text">{{ item.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uniMallHead from '../uni-mall-head/uni-mall-head.vue';
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ dataList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ defaultHeadList: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ uniMallHead
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentData: [],
|
|
|
+ userData: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ dataList() {
|
|
|
+ this.currentData = this.dataList;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ if (Object.keys(this.defaultHeadList).length > 0) {
|
|
|
+ this.$refs.refUniMallHead.addTab(this.defaultHeadList);
|
|
|
+ }
|
|
|
+ this.currentData = this.dataList;
|
|
|
+ this.userData = [];
|
|
|
+ },
|
|
|
+ tabChange(obj) {
|
|
|
+ this.getCurrentData(obj.id, this.dataList);
|
|
|
+ },
|
|
|
+ handelClickItem(type, item) {
|
|
|
+ if (type === 'depart') {
|
|
|
+ if (item.children) {
|
|
|
+ this.$refs.refUniMallHead.addTab({
|
|
|
+ name: item.name,
|
|
|
+ id: item.id
|
|
|
+ });
|
|
|
+ this.currentData = item.children;
|
|
|
+ this.userData = item.users || [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$emit('change', type, item);
|
|
|
+ },
|
|
|
+ getUserName(name) {
|
|
|
+ if (name.length === 0) {
|
|
|
+ return '';
|
|
|
+ } else if (name.length <= 2) {
|
|
|
+ return name;
|
|
|
+ } else if (name.length >= 3) {
|
|
|
+ return name.substring(name.length - 2);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCurrentData(id, data) {
|
|
|
+ if (id === this.defaultHeadList.id) {
|
|
|
+ this.currentData = this.dataList;
|
|
|
+ this.userData = [];
|
|
|
+ } else {
|
|
|
+ if (data.length > 0) {
|
|
|
+ data.map(item => {
|
|
|
+ if (item.id === id) {
|
|
|
+ this.currentData = item.children || [];
|
|
|
+ this.userData = item.users || [];
|
|
|
+ }
|
|
|
+ if (item.children && item.children.length > 0) {
|
|
|
+ this.getCurrentData(id, item.children);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .box-head {
|
|
|
+ position: fixed;
|
|
|
+ left: 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: 96rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ padding-left: 34rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: hidden;
|
|
|
+ z-index: 999;
|
|
|
+ border-top: 1px solid $uv-border-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-list {
|
|
|
+ padding-top: 52px;
|
|
|
+
|
|
|
+ .box-list-item {
|
|
|
+ position: relative;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #ffffff;
|
|
|
+ margin-bottom: 1px;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: #f2f3f4;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-list-item-department-pic {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: rgba(60, 156, 255, 0.1);
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 14px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-icon {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-list-item-user-pic {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: $uv-primary;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 14px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-list-item-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-list-item-user-tag {
|
|
|
+ text {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 4px 8px;
|
|
|
+ font-size: 10px;
|
|
|
+ margin-left: 5px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ background: rgba(49, 210, 144, 0.05);
|
|
|
+ border: 1px solid #31d290;
|
|
|
+ color: #31d290;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ background: rgba(55, 127, 255, 0.05);
|
|
|
+ border: 1px solid #377fff;
|
|
|
+ color: #377fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-list-item-department+.box-list-item-user {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|