lshcomment 1.0.0

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

@@ -0,0 +1,227 @@
+<template>
+    <div class="iris-plate-component" ref="areaSelect">
+        <!-- <b-form-select :disabled="disabledState" :state="proviceState ? null : proviceState" :options="provincesAbbr" v-model="provinceCode"/> -->
+        <!-- <span class="iris-plate-component-delete">x</span> -->
+        <b-form-input readonly @focus.native="showSelect" @blur="hideSelect" :value="provinceCode"/><div class="iris-plate-component-delete"><span v-if="!disabledState" @click="reset">x</span><b-form-input :readonly="disabledState" :state="plateState ? null : plateState" v-model="plateCode"  @input="inputFun" @blur.native="losefocus" :maxLength="8"/></div>
+        <div v-if="isShowFrame&&!disabledState" class="area-plate-choose">
+            <span v-for="(item, index) in provincesAbbr" v-if="item.text" :key="index" @click="chooseArea(item)">{{ item.text ? item.text: ' ' }}</span>
+        </div>
+    </div>
+</template>
+<script>
+    import config from 'common/config'
+    export default {
+        model: {
+            prop: 'plateNumber',
+            event: 'giveData'
+        },
+        props: {
+            // 禁用状态
+            disabledState: {
+                type: Boolean,
+                default: false
+            },
+            // 控制车牌输入框的颜色
+            plateState: {
+                type: Boolean,
+                default: true
+            },
+            // 控制区域选择框的颜色
+            proviceState: {
+                type: Boolean,
+                default: true
+            },
+            // 是否需要监控区域的改变
+            isWatchProvince: {
+                type: Boolean,
+                default: false
+            },
+            // 车牌号小于6位是否更新数据
+            isUpdatePlate: {
+                type: Boolean,
+                default: true
+            },
+            plateNumber: {
+                type: String,
+                default: ''
+            }
+        },
+        data() {
+            return {
+                plateCode: '',
+                provinceCode: '',
+                provincesAbbr: config.provincesAbbr,
+                isShowFrame: false
+            }
+        },
+        methods: {
+            chooseArea(value) {
+                this.provinceCode = value.text
+                this.isShowFrame = false
+            },
+            inputFun(){
+                if(this.isUpdatePlate && this.plateCode.length >= 6) {
+                    this.$emit('giveData', this.provinceCode + this.plateCode.toUpperCase() )
+                }else if(!this.isUpdatePlate){
+                    this.$emit('giveData', this.provinceCode + this.plateCode.toUpperCase() )
+                }
+            },
+            losefocus() {
+                if(!this.disabledState){
+                    this.plateCode = this.plateCode.toUpperCase()
+                    if(this.plateCode.length<6) {
+
+                    }else {
+                        this.$emit('losefocus', this.provinceCode+this.plateCode.toUpperCase() )
+                    }
+                }
+            },
+            setValue(arg1, arg2) {
+                this.plateCode = arg1.toUpperCase()
+                this.provinceCode = arg2
+            },
+            showSelect() {
+                this.isShowFrame = true
+            },
+            hideSelect() {
+                this.isShowFrame = false
+            },
+            reset() {
+                this.provinceCode = ''
+                this.plateCode = ''
+                this.isShowFrame = false
+                this.$emit('giveData', this.provinceCode + this.plateCode.toUpperCase())
+                this.$emit('losefocus', this.provinceCode+this.plateCode.toUpperCase() )
+            }
+        },
+        watch: {
+            provinceCode: function(value) {
+                if(this.isWatchProvince) {
+                    this.plateCode = ''
+                }
+                if(this.isUpdatePlate && this.plateCode.length >= 6) {
+                    this.$emit('giveData', this.provinceCode + this.plateCode.toUpperCase() )
+                }else if(!this.isUpdatePlate){
+                    this.$emit('giveData', this.provinceCode + this.plateCode.toUpperCase() )
+                }
+                // this.$emit('losefocus', this.provinceCode , this.plateCode )
+            },
+            plateNumber: function(value) {
+                if(value == this.provinceCode + this.plateCode){
+                    return
+                }else{
+                    for (let index = 0; index < config.provincesAbbr.length; index++) {
+                        const element = config.provincesAbbr[index];
+                        if(element.value == value.substring(0,1)){
+                            this.provinceCode = value.substring(0,1)
+                            this.plateCode = value.substring(1).toUpperCase()
+                            return;
+                        }
+                    }
+                    this.plateCode = value.substring(0).toUpperCase()
+                }
+            },
+            isShowFrame: function(value) {
+                const _this = this
+                document.addEventListener('click', (e) => {
+                    let areaSelect = _this.$refs.areaSelect
+                    if(areaSelect && !areaSelect.contains(e.target))  this.isShowFrame = false    
+                })
+            }
+        },
+    }
+</script>
+<style>
+    .iris-plate-component {
+        position: relative;
+    }
+    .iris-plate-component .form-control{
+    	padding: 0.5rem 0rem;
+    }
+    /* .iris-plate-component::after {
+        position: absolute;
+        content: 'x';
+        width: 10px;
+        height: 10px;
+        line-height: 10px;
+        text-align: center;
+        color: #ccc;
+        right: 5px;
+        top: 50%;
+        transform: translate(0, -50%);
+        font-size: 10px;
+    } */
+    .iris-plate-component>.area-plate-choose {
+        position: absolute;
+        top: 110%;
+        left: 0px;
+        width: 100%;
+        border: 1px solid rgb(214, 209, 209);
+        border-radius: 5px;
+        z-index: 9999;
+        background-color: #fff;
+    }
+    .iris-plate-component>.area-plate-choose>span {
+        display: inline-block;
+        border-radius: 3px;
+        margin-right: 5px;
+        margin-left: 5px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        padding: 3px;
+        cursor: pointer;
+    }
+    .iris-plate-component>.area-plate-choose>span:hover {
+        background-color: rgb(128, 128, 243);
+        color: #fff;
+    }
+    .iris-plate-component>input:first-child{
+        width: 22%;
+        margin-right: 3%;
+        text-align: center;
+        /* vertical-align: middle; */
+    }
+    .iris-plate-component>input {
+        width: 75%;
+        height: 100%;
+        display: inline-block;
+        /* vertical-align: middle; */
+    }
+    .iris-plate-component>.iris-plate-component-delete {
+        display: inline-block;
+        width: 75%;
+        height: 37px;
+        position: relative;
+    }
+    .iris-plate-component>.iris-plate-component-delete>span {
+        position: absolute;
+        content: '';
+        width: 10px;
+        height: 10px;
+        line-height: 10px;
+        text-align: center;
+        right: 3px;
+        top: 50%;
+        transform: translate(0, -50%);
+        color: #ccc;
+        cursor: pointer;
+    }
+    .iris-plate-component>.iris-plate-component-delete>input {
+        height: 37px;
+    }
+    /* .iris-plate-component>input:last-child {
+        padding-right: 10px;
+    } */
+    /* .iris-plate-component-delete {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        line-height: 10px;
+        text-align: center;
+        color: #ccc;
+        right: 0px;
+        top: 50%;
+        transform: translate(0, -50%);
+    } */
+</style>
+

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

@@ -0,0 +1,254 @@
+<template>
+    <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"
+                                />
+                            </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="2" class="text-right">
+                                    <div class="text-left mt-2">
+                                        <el-tag
+                                            class="ml-2 mb-2"
+                                            v-for="tag in options"
+                                            :key="tag.code"
+                                            :closable="true"
+                                            type="primary"
+                                            @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" :key="index">
+                                <b-form-fieldset horizontal :label="item.name" :label-cols="2" class="text-right">
+                                    <b-form-select v-model="item.value" @input="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" :key="index">
+                                <b-form-fieldset horizontal :label="item.name" :label-cols="2" class="text-right">
+                                    <b-form-input :type="item.code == 'workHours' ? 'number' : 'text'" v-model.trim="item.value" autocomplete="off" @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 , Select, Option , Tag, Message} from 'element-ui'
+Vue.use(Select)
+Vue.use(Option)
+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(){
+            return this.additionalSelect
+        },
+        COMadditionalInput:function(){
+            return this.additionalInput
+        },
+    },
+    data() {
+        return {
+            props: {
+                label: 'name',
+                children: 'zones',
+            },
+            checkTree:{},//选中点销售区域
+            checkTreeList:[],//选中点销售区域            
+            status:{
+                checkTree:null,
+            },
+            options:[],//多选框的数据
+        }
+    },
+    methods: {
+        checkNum(flag, e, item){
+            if(flag){
+                item.value = e.target.value.match(/^\d*(\.?\d{0,5})/g)[0]
+            }
+        },
+        handleClose(value){
+            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) {
+                if (this.availableType === '1' || this.availableType === '2') {
+                    api.getSalesAreaInfoByUserAvailableAllLevel((msg) => {
+                        if (msg.data.message == "success" && msg.data.obj.length != 0) {
+                            return resolve([{
+                                name: msg.data.obj[0].areaName || "",
+                                code: msg.data.obj[0].areaCode || ""
+                            }])
+                        }
+                    })
+                }
+                return
+            }
+
+            this.getTareaTree(node.data.code, (msg) => {
+                
+                const data = msg.data.obj.salesAreaSubInfo || 0
+                const arr = []
+                
+                if (data) {
+                    for (var i=0; i<data.length; i++) {
+                        arr[i] = {
+                            name: data[i].areaName,
+                            code: data[i].areaCode
+                        }
+                    }
+                    return resolve(arr)
+                }
+                return resolve([])
+            })
+        },
+
+        selectClick(item){
+            const value = item.value
+            const option = item.option
+            for (let i=0; i<option.length; i++) {
+                if(option[i].value == value){
+                    this.$set(item, 'checkItem', option[i])
+                }
+            }
+        },
+
+        currentchange(a) {
+            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)                
+            }else{
+                this.checkTree = a
+            }
+        },
+
+        getTareaTree(code, sc) {
+            api.area.getSalesAreaInfoByAreaCode({
+                areaCode: code
+            }, sc)
+        },
+
+        addScope(){
+            if(this.multipleSelection){
+                if(this.options.length == 0){
+                    this.status.checkTree = 'invalid' 
+                    Message({
+                        type: 'warning',
+                        message: "请选择销售区域",
+                        showClose: true
+                    })
+                    return   
+                }
+                let checkTreeList = []
+                for (let j=0; j<this.options.length; j++) {
+                    let element1 = this.options[j];
+                    element1.additionalSelect = this.COMadditionalSelect 
+                    element1.additionalInput = this.COMadditionalInput                                                                       
+                    checkTreeList[j] = element1
+                }
+                this.$emit("area-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("area-ok",this.checkTree)                
+                }
+            }
+        },
+
+        cancel(){
+            this.$emit('cancel')
+        }
+    },
+}
+</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>