lshcomment 1.0.0

package/src/components/iris-scope/chinaarea.vue

@@ -0,0 +1,254 @@
+<template lang="html">
+    <div>
+        <div class="card card-inverse">
+            <div class="card-block">
+                <div class="row mt-3">
+                    <div class="col-6">
+                        <div class="border">
+                            <div class="tabBodyScroll">
+                                <Tree :expand-on-click-node=false :highlight-current=true :props="props" :load="loadNodeSales" lazy empty-text="暂无数据" node-key='value' @current-change="currentchange">
+                                </Tree>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-6 pb-3">
+                        <div class="border pt-3">
+                            <div class="col-md-12 col-lg-12">
+                                <b-form-fieldset horizontal label="行政区域" :label-cols="4" class="text-right">
+                                    <div class="text-left mt-2">
+                                        <el-tag
+                                            class="ml-2 mb-2"                                        
+                                            type="primary"
+                                            v-for="tag in options"
+                                            :key="tag.code"
+                                            :closable="true"
+                                            @close="handleClose(tag)"
+                                        >
+                                            {{tag.name}}
+                                        </el-tag>
+                                    </div>
+                                    <b-form-input v-if="!multipleSelection" :state="status.checkTree" v-model="checkTree.name" disabled></b-form-input>                        
+                                </b-form-fieldset> 
+                            </div>
+                            <div class="col-md-12 col-lg-12" v-for="(item , index) in COMadditionalSelect">
+                                <b-form-fieldset horizontal :label="item.name" :label-cols="4" class="text-right">
+                                     <b-form-select v-model="item.value" @change="selectClick(item)" :options="item.option" class="mb-3"></b-form-select>                                                                           
+                                </b-form-fieldset> 
+                            </div>
+                            <div class="col-md-12 col-lg-12" v-for="(item , index) in COMadditionalInput">
+                                <b-form-fieldset horizontal :label="item.name" :label-cols="4" class="text-right">
+                                    <b-form-input :type="item.code == 'workHours' ? 'number' : 'text'" v-model="item.value" @keyup.native="checkNum(item.code == 'workHours', $event, item)"></b-form-input>                                                            
+                                </b-form-fieldset> 
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row mt-4">
+                    <div class="col-md-12 col-lg-12">
+                        <div class="pull-right">
+                            <b-button size="sm"  variant="default" @click="cancel">取消</b-button>                                                    
+                            <b-button size="sm"  variant="primary" @click="addScope">添加适用范围</b-button>                        
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import Vue from 'vue'
+import api from 'common/api'
+import common from 'common/common'
+import config from 'common/config'
+import { Tree ,Tag, Message} from 'element-ui'
+Vue.use(Tag);
+export default {
+    components:{
+        Tree
+    },
+    props: {
+        availableType:{
+            type: String,
+            default: null
+        },
+        additionalSelect:{
+            type:Object,
+            default:function(){
+              return {}
+            }
+        },
+        additionalInput:{
+          type:Object,
+          default:function(){
+              return {}
+          }
+        },
+        multipleSelection:{
+            type:Boolean,
+            default: false
+        }
+    },
+    computed:{
+        COMadditionalSelect:function(){
+            const _this = this;
+            return _this.additionalSelect
+        },
+        COMadditionalInput:function(){
+            const _this = this;
+            return _this.additionalInput
+        },
+    },
+    data() {
+        return {
+            props: {
+                label: 'name',
+                children: 'zones',
+            },
+            checkTree:{},//选中点销售区域
+            status:{
+                checkTree:null,
+            },
+            checkTreeList:[],//选中点销售区域            
+            options:[],//多选框的数据
+        }
+    },
+    methods: {
+        checkNum(flag, e, item){
+            if(flag){
+                item.value = e.target.value.match(/^\d*(\.?\d{0,5})/g)[0]
+            }
+        },
+        handleClose(value){
+            const _this = this;
+            for (let index = 0; index < _this.options.length; index++) {
+                const element = _this.options[index];
+                if(element.code == value.code){
+                    _this.options.splice(index,1)
+                }
+            }
+        },
+        //加载子树节点的函数
+        loadNodeSales(node, resolve) {
+            if (node.level === 0) {
+                this.getTareaTree({
+                    levels:1
+                },(msg)=>{
+                    if(msg.data.message == 'success'){
+                        let data = msg.data.obj
+                        let arr = []
+                        for (let i = 0; i < data.length; i++) {
+                            const element = data[i];
+                            arr[i] = {
+                                name: data[i].areaName,
+                                code: data[i].areaCode,
+                                level:data[i].levels
+                            }
+                        }
+                        return resolve(arr);
+                    }
+                })
+            }else{
+                this.getTareaTree({
+                    levels:parseInt(node.data.level)+1,
+                    fatherAreaCode:node.data.code
+                },(msg)=>{
+                    if(msg.data.message == 'success'){
+                        let data = msg.data.obj
+                        let arr = []
+                        for (let i = 0; i < data.length; i++) {
+                            const element = data[i];
+                            arr[i] = {
+                                name: data[i].areaName,
+                                code: data[i].areaCode,
+                                level:data[i].levels
+                            }
+                        }
+                        return resolve(arr);
+                    }
+                })
+            }
+        },
+        selectClick(item){
+            const _this = this;
+            let value = item.value;
+            let option = item.option;
+            for (var i = 0; i < option.length; i++) {
+                if(option[i].value == value){
+                    _this.$set(item, 'checkItem', option[i])
+                }
+            }
+        },
+        currentchange(a) {
+            const _this = this;
+            if(_this.multipleSelection){
+                for (let index = 0; index < _this.options.length; index++) {
+                    const element = _this.options[index];
+                    if(element.code == a.code){
+                        return;
+                    }
+                }
+                _this.$set(_this.options,_this.options.length,a)                
+                // _this.$set(_this.checkTreeList,_this.checkTreeList.length,a.code)                
+            }else{
+                _this.checkTree = a
+            }
+        },
+        getTareaTree(obj, sc) {
+           api.chinaarea.querychinaarea(obj, sc)
+        },
+        addScope(){
+            const _this = this;
+            if(_this.multipleSelection){
+                if(_this.options.length == 0){
+                    _this.status.checkTree = 'invalid' 
+                    Message({
+                        type: 'warning',
+                        message: "请选择行政区域！"
+                    });
+                    return;   
+                }
+                let checkTreeList = []
+                for (let j = 0; j < _this.options.length; j++) {
+                    let element1 = _this.options[j];
+                    element1.additionalInput = _this.COMadditionalInput                               
+                    element1.additionalSelect = _this.COMadditionalSelect 
+                    checkTreeList[j] = element1
+                }
+                _this.$emit("chinaarea-ok",checkTreeList)                                
+            }else{
+                if(JSON.stringify(_this.checkTree) == '{}'){
+                    _this.status.checkTree = 'invalid'
+                }else{
+                    _this.checkTree.additionalInput = _this.COMadditionalInput                               
+                    _this.checkTree.additionalSelect = _this.COMadditionalSelect 
+                    _this.$emit("chinaarea-ok",_this.checkTree)                
+                }
+            }
+        },
+        cancel(){
+            const _this = this;
+            _this.$emit('cancel')
+        }
+    },
+    created(){
+        const _this = this;
+    }
+}
+</script>
+
+<style lang="css">
+    .tabBodyScroll {
+        height: 250px;
+        overflow: auto;
+        overflow-x: hidden;
+    }
+    .white {
+        color: #fff;
+    }
+    .border {
+        border: 2px solid #ccc;
+    }
+    .allot-error input{
+        border-color: #f86c6b !important;
+    }
+</style>

package/src/components/iris-scope/index.vue

@@ -0,0 +1,285 @@
+<template lang="html">
+  <div class="scope">
+    <div>
+        <button v-if="!disabled && addBtn" @click="addScopeBtn" type="button" class="btn btn-success btn-sm mb-2">新增</button>
+        <button v-if="!disabled && addBtn" @click="deletScopeBtn" type="button" class="btn btn-danger btn-sm mb-2">删除</button>
+        <table  class="table table-striped table-bordered">
+        <thead>
+            <tr class="text-left">
+                <th>选择</th>                
+                <th v-for="(item, index) in fields" :key="index" >{{item.label}}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(val, i) in tablist" @click="rowClick(val)">
+                <td>
+                    <input type="radio" :value="val" name="radio"  v-model='index'>
+                </td>                
+                <td v-for="(item, index) in fields" :key="index">{{val[item.name]}}</td>
+            </tr>
+        <tr v-if="tablist.length==0">
+            <td colspan='13'>暂无数据</td>
+        </tr>
+        </tbody>
+        </table>
+    </div>
+    <b-modal 
+        id="modalPrevent"
+        ref="modal"
+        :hide-footer="true"
+    >
+        <div v-if="!tableShow" style="min-height:530px;">
+            <b-card class="mt-0 mb-0" header="新增范围">
+                <div class="row">
+                    <div class="col-md-6 col-lg-6">
+                        <b-form-fieldset horizontal label="适用范围类型" :label-cols="4" class="text-right">
+                            <b-form-select @input="affirm" v-model="scopeTypeValue" :options="scopeType" class="mb-3"></b-form-select>                       
+                        </b-form-fieldset> 
+                    </div>
+                </div>    
+            </b-card>
+            <!-- 销售区域 -->
+            <div v-if="scopeTypeShow == 1"> 
+                <salesArea  
+                    :multipleSelection="multipleSelection" 
+                    :availableType="availableType" 
+                    :additionalInput="additionalInput" 
+                    :additionalSelect="additionalSelect" 
+                    @cancel="cancel" 
+                    @area-ok="areaOk"
+                />
+            </div>
+            <!-- 经销商店 -->
+            <div v-if="scopeTypeShow == 2">
+                <store 
+                    :storeInfoVo="storeInfoVo" 
+                    :multipleSelection="multipleSelection" 
+                    :availableType="availableType" 
+                    :additionalInput="additionalInput" 
+                    :additionalSelect="additionalSelect" 
+                    @cancel="cancel" 
+                    @store-ok="storeOk"
+                />            
+            </div>
+            <!-- 行政区域 -->
+            <div v-if="scopeTypeShow == 3">
+                <chinaarea 
+                    :multipleSelection="multipleSelection" 
+                    :availableType="availableType" 
+                    :additionalInput="additionalInput" 
+                    :additionalSelect="additionalSelect" 
+                    @cancel="cancel" 
+                    @chinaarea-ok="chinaareaOk"
+                />             
+            </div>
+        </div>
+    </b-modal>
+  </div>
+</template>
+<script>
+   
+import Vue from 'vue'
+import api from 'common/api'
+import common from 'common/common'
+import config from 'common/config'
+import salesArea from './area'
+import chinaarea from './chinaarea'
+import store from './store'
+import { Message, Tree , Select, Option } from 'element-ui'
+Vue.use(Select);
+Vue.use(Option);
+export default {
+    components:{
+        salesArea,
+        chinaarea,
+        store,
+    },
+    props: {
+        addBtn: {
+            type: Boolean,
+            default: true
+        },
+        fields:{
+            type: Array,
+            default: function() {
+                return []
+            }
+        },
+        tablist:{
+            type: Array,
+            default: function() {
+                return []
+            }
+        },
+        additionalSelect:{
+            type:Object,
+            default:function(){
+                return {}
+            }
+        },
+        addscope:{
+            type:Function,
+            default:function(){
+                return function(){}
+            }
+        },
+        disabled:{
+            type: Boolean,
+            default: false
+        },
+        additionalInput:{
+            type:Object,
+            default:function(){
+                return {}
+            }
+        },
+        multipleSelection:{
+            type:Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            tableShow:true,//控制列表页显示与隐藏
+            scopeType:[],//使用范围类型
+            availableType:null,//权限控制
+            scopeTypeValue:null,//适用范围类型值
+            scopeTypeShow:null,//显示下面适用范围类型
+            index:null,//列表选中的下标
+            storeInfoVo:{},
+        }
+    },
+    methods: {
+        rowClick(item) {
+            this.index = item
+        },
+        //分页
+        scopePageChange(value) {
+            this.$emit('page-change',value)
+        },
+
+        //新增适用范围
+        addScopeBtn(){
+            this.tableShow = false
+            this.$refs.modal.show()
+        },
+
+        //选好使用范围类型
+        affirm() {
+            if (this.scopeTypeValue == config.scopeType.sales) {
+                this.scopeTypeShow = 1
+            }
+            if (this.scopeTypeValue == config.scopeType.shop) {
+                this.scopeTypeShow = 2
+            }
+            if (this.scopeTypeValue == config.scopeType.government) {
+                this.scopeTypeShow = 3
+            }
+        },
+
+        //销售区域选择完成
+        areaOk(data) {
+            this.addscope(config.scopeType.sales, data)
+        },
+
+        //行政区域选择完成
+        chinaareaOk(data) {
+            this.addscope(config.scopeType.government, data)
+        },
+
+        //门店数据选择完成
+        storeOk(data) {
+            this.addscope(config.scopeType.shop, data)
+        },
+
+        //返回列表页
+        cancel() {
+            this.tableShow = true
+            this.scopeTypeShow = null   
+            this.scopeTypeValue = null  
+            this.$refs.modal.hide()           
+        },
+
+        //切换页面
+        activePage(value) {
+            if(value) {
+                if (value == config.scopeType.sales) {
+                    this.scopeTypeShow = 1
+                }
+                if (value== config.scopeType.shop) {
+                    this.scopeTypeShow = 2
+                }
+                if (value == config.scopeType.government) {
+                    this.scopeTypeShow = 3
+                }
+            } else{
+                this.tableShow = true
+                this.$refs.modal.hide()    
+                this.scopeTypeValue = null                                 
+                this.scopeTypeShow = null     
+            }
+        },
+
+        //记录列表选中的下标
+        checkData(index){
+            this.index = index
+        },
+
+        //删除
+        deletScopeBtn(){
+            if(this.index==null){
+                Message({
+                    type: 'warning',
+                    message: '请选择数据',
+                    showClose: true
+                })
+                return
+            }
+            this.$emit('deletScopeBtn', this.index)
+            this.index = null
+        }
+    }, 
+
+    created() {
+
+        const userInfo = sessionStorage.getItem('userInfo') && JSON.parse(sessionStorage.getItem('userInfo'))
+        const userAvailableInfo = userInfo.userAvailableInfo || {}
+        const params = { refCode: config.scope }
+
+        this.availableType = userAvailableInfo.availableType
+
+        if(this.availableType == 0) {
+            const { storeCode, storeName, salesCode, salesName } = userAvailableInfo.storeInfoVo
+            this.storeInfoVo = { storeCode, storeName, salesCode, salesName }
+        }
+
+        api.menu.getReferenceInfo(params, msg => {
+            const list = msg.data.obj.referenceDetailInfos
+            for (let j=0; j<list.length; j++) {
+                if (this.availableType == 0 && list[j].refDetailCode == config.scopeType.sales) list.splice(j, 1)
+                this.$set(this.scopeType, j+1, {
+                    value: list[j].refDetailCode,
+                    text: list[j].refDetailName
+                })
+            }
+        })
+    }
+}
+</script>
+
+<style lang="css">
+    .scope{
+        position: relative;
+    }
+    .scope .modal-dialog {
+        max-width: 1100px !important;
+    }
+    .scope-disabled {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    .scope .col-form-legend {
+        align-self: auto;
+    }
+</style>