|
@@ -2,15 +2,17 @@
|
|
|
<view class="organization-wrap">
|
|
|
<u-sticky>
|
|
|
<!-- 组织结构根节点 -->
|
|
|
- <view class="organization-root-tit">车领主</view>
|
|
|
+ <view class="organization-root-tit">
|
|
|
+ <view class="structure-con" v-for="(item,index) in nowStructure" :key="index">
|
|
|
+ <text class="structure-name" @click="checkedStructure(index)">{{item}}</text>
|
|
|
+ <u-icon class="structure-icon" name="arrow-right" color="#999" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
<!-- 组织结构子节点 -->
|
|
|
<view class="organization-node-con">
|
|
|
- <view class="organization-node-item">
|
|
|
- <text class="organization-node-item-name">贷安抚记卡的</text>
|
|
|
- <u-icon class="organization-node-item-icon" name="arrow-right" color="#999" size="28"></u-icon>
|
|
|
- </view>
|
|
|
- <view class="organization-node-item">
|
|
|
- <text class="organization-node-item-name">贷安抚记卡的</text>
|
|
|
+ <view class="organization-node-item" v-for="(item, index) in organizationNowList" :key="index" @click="clickOrganization(item)">
|
|
|
+ <text class="organization-node-item-name">{{item.name}}</text>
|
|
|
<u-icon class="organization-node-item-icon" name="arrow-right" color="#999" size="28"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -38,7 +40,7 @@
|
|
|
export default{
|
|
|
data(){
|
|
|
return{
|
|
|
- list: [
|
|
|
+ list: [ // 门店列表
|
|
|
{ name: '常青二路店' },
|
|
|
{ name: '常青二路店常青青二路店常路店' },
|
|
|
{ name: '常青二路店' },
|
|
@@ -57,10 +59,53 @@
|
|
|
{ name: '常青二路店' },
|
|
|
{ name: '常青二路店' },
|
|
|
{ name: '常青二路店' },
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ organizationNowList: [ // 组织机构 当前显示 列表数据
|
|
|
+ { name: '陕西区域', id: 1, children: [{name: '西安', id: 11},{name: '咸阳', id: 111},{name: '宝鸡', id: 1111},{name: '渭南', id: 11111},] },
|
|
|
+ { name: '宁夏区域', id: 2, children: [{name: '银川', id: 21},{name: '中卫', id: 211},{name: '固原', id: 2111},] },
|
|
|
+ { name: '甘肃区域', id: 3, children: [{name: '兰州', id: 31},{name: '金昌', id: 311},{name: '白银', id: 3111},{name: '天水', id: 31111},] },
|
|
|
+ ],
|
|
|
+ organizationList: [ // 组织机构 总列表数据
|
|
|
+ { name: '陕西区域', id: 1, children: [{name: '西安', id: 11},{name: '咸阳', id: 111},{name: '宝鸡', id: 1111},{name: '渭南', id: 11111},] },
|
|
|
+ { name: '宁夏区域', id: 2, children: [{name: '银川', id: 21},{name: '中卫', id: 211},{name: '固原', id: 2111},] },
|
|
|
+ { name: '甘肃区域', id: 3, children: [{name: '兰州', id: 31},{name: '金昌', id: 311},{name: '白银', id: 3111},{name: '天水', id: 31111},] },
|
|
|
+ ],
|
|
|
+ nowStructure: [ // 面包屑
|
|
|
+ '西安车领主网络科技有限公司'
|
|
|
+ ],
|
|
|
+ nowInd: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 组织机构 click
|
|
|
+ clickOrganization(item){
|
|
|
+ if(item.children){
|
|
|
+ this.organizationNowList = item.children
|
|
|
+ }else{
|
|
|
+ this.organizationNowList = []
|
|
|
+ }
|
|
|
+ this.nowStructure.push(item.name)
|
|
|
+ },
|
|
|
+ // 切换至当前所选的组织结构
|
|
|
+ checkedStructure(ind){
|
|
|
+
|
|
|
+ if(ind == 0){
|
|
|
+ this.nowStructure = ['西安车领主网络科技有限公司']
|
|
|
+ }else{
|
|
|
+ this.organizationNowList = this.organizationList[ind - 1].children
|
|
|
+ this.nowStructure = this.nowStructure.slice(0,ind+1)
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
- methods: {}
|
|
|
+ watch: {
|
|
|
+ nowStructure(val){
|
|
|
+ if(val.length == 1){
|
|
|
+ this.nowStructure[0] = '西安车领主网络科技有限公司'
|
|
|
+ }else{
|
|
|
+ this.nowStructure[0] = '车领主'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -74,6 +119,15 @@
|
|
|
padding: 20upx 30upx;
|
|
|
background-color: #fff;
|
|
|
border-bottom: 20upx solid #f8f8f8;
|
|
|
+ .structure-con{
|
|
|
+ display: inline-block;
|
|
|
+ .structure-name{
|
|
|
+ color: #2979ff;
|
|
|
+ }
|
|
|
+ .structure-icon{
|
|
|
+ padding: 0 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.organization-node-con{
|
|
|
padding: 0 30upx;
|