123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- <template>
- <view class="organization-wrap">
- <u-sticky>
- <!-- 组织结构根节点 -->
- <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" 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>
- </u-sticky>
- <!-- 门店列表 -->
- <view class="list-con">
- <view class="list-tit">门店列表</view>
- <!-- 列表数据 -->
- <view class="listData-con">
- <view class="listData-item" v-for="(item, index) in list" :key="index">
- <view class="listData-item-l">
- <u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
- <text class="listData-item-l-name">{{item.name}}</text>
- </view>
- <view class="listData-item-r">
- <u-icon class="listData-item-r-icon" name="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default{
- data(){
- return{
- list: [ // 门店列表
- { name: '常青二路店' },
- { name: '常青二路店常青青二路店常路店' },
- { name: '常青二路店' },
- { name: '常青二路店' },
- { name: '常青二路店' },
- { name: '常青二路店' },
- { name: '常青二路店' },
- { name: '常青二路店常青青二路店常路店' },
- { name: '常青二路店' },
- { name: '常青二路店' },
- { name: '常青二路店' },
- { name: '常青二路店' },
- { name: '常青二路店' },
- { name: '常青二路店常青青二路店常路店' },
- { name: '常青二路店' },
- { 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)
- }
- }
- },
- watch: {
- nowStructure(val){
- if(val.length == 1){
- this.nowStructure[0] = '西安车领主网络科技有限公司'
- }else{
- this.nowStructure[0] = '车领主'
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- page {
- background-color: #f8f8f8;
- height: calc(100vh - 44px);
- }
- .organization-wrap{
- .organization-root-tit{
- 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;
- background-color: #fff;
- .organization-node-item{
- display: flex;
- padding: 20upx 0;
- border-bottom: 1upx dashed #f8f8f8;
- &-name{
- flex-grow: 1;
- }
- &-icon{
- flex-shrink: 0;
- }
- }
- }
- // 门店列表
- .list-con{
- background-color: #fff;
- margin-top: 20upx;
- .list-tit{
- padding: 20upx 30upx;
- border-bottom: 1upx solid #f8f8f8;
- }
- .listData-con{
- padding: 0 30upx;
- .listData-item{
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 20upx 0;
- border-bottom: 1upx dashed #f8f8f8;
- &-l{
- flex-grow: 1;
- padding-right: 10upx;
- position: relative;
- padding-left: 50upx;
- &-icon{
- vertical-align: sub;
- padding-right: 8upx;
- position: absolute;
- left: 0;
- top: -4upx;
- }
- }
- &-r{
- flex-shrink: 0;
- }
- }
- }
- }
- }
- </style>
|