lshcomment 1.0.0

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

@@ -0,0 +1,485 @@
+<template>
+    <div class="row warp">
+        <div class="col-md-6" @click="inputshow" ref="select1">
+          <el-tooltip class="item" effect="dark" :content="setSalesValue" placement="top-start">
+              <b-form-input type="text" :state="error ? 'invalid' : null" v-model="salesValue" placeholder="请选择销售区域" readonly></b-form-input>
+          </el-tooltip>
+        </div>
+        <div class="col-md-6">
+          <search 
+            ref="area"
+            :tooltip="true"
+            :hasCheck="error"
+            :dataList="options"  
+            option="text" 
+            @itemValue="brandItemValue"
+            :disabled="disabled"
+            @clearValue="brandClearValue"
+            @dataChange="brandQuerySelect"
+          >
+          </search>
+        </div>
+        <div class="treepick-warp-container" v-if="show" ref="select2">
+          <div class="treepick-warp-in-container">
+            <div id="treepick-areashop" class="treepick-warp text-left" >
+                <Tree ref="tree" :data="treeData" style="border: none;" :show-checkbox="true" :check-strictly="false" :highlight-current='true' :props="propOption" :load="loadNodeSales" lazy empty-text="暂无数据" @check-change="handleCheckChange">
+                </Tree>
+            </div>
+            <div class="button-control">
+                <button type="button" class="btn btn-primary btn-sm pull-right mt-3 mr-3 mb-3 br-50%" @click="confirm('0')">确定</button>
+            </div> 
+          </div>
+            
+        </div>
+    </div>
+</template>
+<script>
+import vue from "vue";
+import treepicker from "../treepicker/treepicker.vue";
+import api from "../../common/api";
+import config from "../../common/config";
+import { Tree , Tooltip} from "element-ui";
+import search from "components/iris-search/search.vue";
+vue.use(Tooltip)
+
+import { mapGetters } from "vuex"
+
+export default {
+  data() {
+    return {
+      options: [],
+      selectValue: 0,
+      selectData: {},
+      treeData: [],
+      availableType: "",
+      selesNanme: "",
+      disabled: false,
+      propOption: {
+        label: "name",
+        children: "zones"
+      },
+      show: false,
+      salesValue: "请选择销售区域",
+      defaultValue: "",
+      // 空值容错处理
+      nullValue: "",
+      storeList:[],
+      paramsSales:[],
+      selectText:''
+    };
+  },
+  props: {
+    area: {
+      type: String,
+      default: ''
+    },
+    store: {
+      type: String,
+      default: ''
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    storeAll: {
+      type: Boolean,
+      default: false
+    },
+    error:{
+      type: Boolean,
+      default: false
+    },
+    rightControl: {
+      type: Boolean,
+      default: true
+    },
+    controlFlag:{
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    brandQuerySelect(data){
+        const _this = this;
+        api.suitScope.queryShopInfo(
+          {
+            salesAreaCodes: _this.paramsSales,
+            storeName:data,
+            needPageFlag: "0"
+          },
+          msg => {
+            if (msg.data.message == "success") {
+              this.defaultValue = ""
+              this.options = [];
+              let obj = msg.data.obj;
+              for (var i = 0; i < obj.length; i++) {
+                this.$set(this.options, i, {
+                  text: obj[i].storeName,
+                  value: obj[i].storeCode,
+                  orgCode: obj[i].orgCode,
+                });
+              }
+            }
+          })
+    },
+    brandClearValue(){
+        const _this = this;
+        _this.selectValue = 0
+        // this.$emit("select-change", this.treeData, this.options);
+    },
+    brandItemValue(item){
+      const _this = this;
+      _this.selectValue = item.value
+      _this.selectText = item.text
+      // this.$emit("select-change", this.treeData, item);
+    },
+    // 控制隐藏
+    hideFrame() {
+      this.show = false
+    },
+    stopBubble(e) {
+      // if (e && e.stopPropagation) {
+      //   e.stopPropagation(); //w3c
+      // } else {
+      //   window.event.cancelBubble = true; //IE
+      // }
+    },
+    loadNodeSales(node, resolve) {
+      if (node.level === 0) {
+        if(this.rightControl) {
+          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 || ""
+                  }
+                ]);
+              }
+            });
+          }
+        }else {
+          // 手动设置顶层区域-----全国
+          return resolve([
+            {
+              name: '全国',
+              code: config.rootArea
+            }
+          ])
+        }
+        return;
+      }
+      api.area.getSalesAreaInfoByAreaCode(
+        {
+          areaCode: node.data.code
+        },
+        msg => {
+          //获取子集
+          let data = msg.data.obj.salesAreaSubInfo || 0;
+          let 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([]);
+        }
+      );
+    },
+    handleCheckChange() {},
+    confirm() {
+      let data 
+      if(this.defaultValue) {
+        data = this.defaultValue
+      }else {
+        data = this.$refs.tree.getCheckedNodes(); //选择的树形结构
+      }
+      this.show = false;
+      this.salesValue = this.renovateValue(data);
+      console.log('test:>salesValue', this.salesValue)
+      if (data.length !== 0) {
+        this.$emit("sales-data", data);
+        this.paramsSales = [];
+        //在这里查询经销商店
+        for (var i = 0; i < data.length; i++) {
+          this.paramsSales.push(data[i].code);
+        }
+        this.$refs.area.setValue()
+        const option = {
+            salesAreaCodes: this.paramsSales,
+            needPageFlag: "0"
+        }
+        if(this.controlFlag){
+          api.area.queryAllStoreInfoBySalesCode(option,
+            msg => {
+              this.queryStoreCallback(msg, data)
+            }
+          );
+
+        }else{
+          api.suitScope.queryShopInfo(option,
+            msg => {
+              this.queryStoreCallback(msg, data)
+            }
+          );
+        }
+        
+        this.treeData = data;
+      }else if(data.length === 0){
+        this.salesValue = ''
+        if(this.availableType === "1") {
+          this.defaultValue = this.nullValue
+          this.confirm()
+        }else {
+          // this.$emit("select-change", "空值", "空值")
+          this.getUserRights() 
+        }
+      }
+    },
+    queryStoreCallback(msg, data){
+      let noStores = []
+      if (msg.data.message == "success") {
+        this.defaultValue = ""
+        this.options = [];
+        let obj = msg.data.obj;
+        for (var i = 0; i < obj.length; i++) {
+          this.$set(this.options, i, {
+            text: obj[i].storeName,
+            value: obj[i].storeCode,
+            orgCode: obj[i].orgCode
+          });
+        }
+        if(obj == null || !obj.length) {
+          noStores = [{value: -1, text: '该销售区域下没有门店'}]
+        }
+        } else if (msg.data.message == "销售区域为空") {
+          this.options = [];
+        }
+        this.selectData = {};
+        if (this.storeAll) {
+          this.$emit("select-change", data, noStores.length ? noStores : this.options);
+        } else {
+          this.$emit("select-change", data, "");
+        }
+    },
+
+    inputshow() {
+      this.stopBubble();
+      if (this.disabled) {
+        this.show = false;
+        return;
+      }
+      this.show = true;
+      this.$emit("control-frame")
+    },
+    renovateValue(data) {
+      //因为唯一标识符是code name可能会出现重复所以value需要在datas变化的时候重新计算一遍
+      var value = "";
+      for (var i = 0; i < data.length; i++) {
+        value += data[i].name + " ";
+      }
+      return value;
+    },
+    // 清空值方法
+    reset() {
+      this.selectValue = 0;
+      this.options = [];
+      this.salesValue = "";
+      this.treeData = [];
+      this.$refs.area.setValue('')                    
+      // this.getUserRights()
+    },
+    // 回到原始状态方法
+    resetToStart() {
+      this.reset()
+      this.getUserRights()
+    },
+    setselect(sotreData) {
+      if(typeof sotreData == 'object'){
+        api.storeInfo.queryShopInfo({
+          storeCode:sotreData.value
+        },(msg)=>{
+          if(msg.data.message == 'success'){
+              this.options = [sotreData]
+              this.selectValue = sotreData.value;
+              this.salesValue = msg.data.obj.salesName
+              this.$refs.area.setValue(sotreData.text)              
+          }
+        })
+      }
+    },
+    // 获取用户权限信息
+    getUserRights() {
+      // 通过传入组件的布尔值来判断是否需要权限判断
+      if(this.rightControl) {
+        api.getUserAvailableInfo(msg => {
+          if (msg.data.message === "success") {
+            this.availableType = msg.data.obj.availableType;
+            if (this.availableType === "0") {
+              this.$set(this.options, 0, {
+                value: msg.data.obj.storeInfoVo.storeCode,
+                text: msg.data.obj.storeInfoVo.storeName,
+                orgCode: msg.data.obj.storeInfoVo.orgCode,
+              });
+              this.salesValue = msg.data.obj.storeInfoVo.salesName;
+              this.selectValue = msg.data.obj.storeInfoVo.storeCode;
+              this.$refs.area.setValue(msg.data.obj.storeInfoVo.storeName)
+              this.treeData = { 
+                code: msg.data.obj.storeInfoVo.salesCode,
+                name: this.salesValue
+              };
+              this.disabled = true;
+              this.$emit("select-change", this.treeData, this.selectData);                    
+            }else if(this.availableType === "1") {
+              let needData = msg.data.obj.storeInfoVo
+              let tempArr = []
+              let obj = {
+                name: needData.salesName,
+                code: needData.salesCode
+              }
+              tempArr.push(obj)
+              this.defaultValue = tempArr
+              this.nullValue = JSON.parse(JSON.stringify(tempArr))
+              this.salesValue = obj.name
+              this.confirm()
+            }else if(this.availableType === "2") {
+              this.$emit("select-change", [{code: '000001', name: '全国'}], []);
+            }
+          }
+        })
+      }else {
+        return
+      }
+    }
+  },
+  computed: {
+    ...mapGetters('finance', [
+      'changedOrg'
+    ])
+  },
+  watch: {
+    selectValue: function() {
+      for (var i = 0; i < this.options.length; i++) {
+        if(this.selectValue == 0){
+            this.$emit("select-change", this.treeData, this.options);
+            return
+        }else{
+            if (this.options[i].value == this.selectValue) {
+              this.selectData = this.options[i];
+              this.$emit("select-change", this.treeData, this.selectData);
+              return;
+            }
+        }
+      }
+    },
+    readonly:function(){
+      if(this.readonly){
+        this.disabled = true
+      }else{
+        this.disabled = false
+      }
+    },
+    area: function(val) {
+      this.salesValue = val
+    },
+    store: function(val) {
+      this.$refs.area.setValue(val)
+    },
+    changedOrg(val) {
+      this.resetToStart()
+    }
+  },
+  computed: {
+    setSalesValue() {
+      let _salesValue = this.salesValue
+      if(_salesValue && _salesValue.length > 50) {
+        _salesValue = _salesValue.substring(0, 50) + '...'
+      }
+      return _salesValue
+    }
+  },
+  components: {
+    treepicker,
+    Tree,
+    search
+  },
+  created() {
+    if(this.readonly){
+      this.disabled = true
+    }else{
+      this.disabled = false
+    }
+    this.$nextTick(function() { 
+      document.addEventListener("click", event => {
+        let _select1 = this.$refs.select1;
+        let _select2 = this.$refs.select2;
+
+        //  || _select2 && !_select2.contains(event.target)
+        // _select1 && !_select1.contains(event.target)
+        
+        if(_select2 && !_select2.contains(event.target)){
+          this.show = false
+        }
+      }, true);
+    });
+    this.getUserRights()
+  }
+};
+</script>
+
+<style lang="css" scoped>
+.treepick-warp {
+  width: 100%;
+}
+#treepick-areashop>.el-tree{
+  max-height: 250px !important;
+  overflow: auto;
+}
+.treepick-warp-container {
+  position: absolute;
+  width: 100%;
+  /* height: 250px; */
+  top: 100%;
+  padding-left: 15px;
+  padding-right: 15px;
+  /* background-color: #fff; */
+  z-index: 999;  
+  /* box-shadow: 0 6px 8px 0 rgba(155, 155, 155, 0.5); */
+  box-sizing: border-box;  
+  /* overflow: auto; */
+}
+.treepick-warp-in-container {
+    width: 100%;
+    height: 250px;
+    background-color: #fff;
+    box-shadow: 0 6px 8px 0 rgba(155, 155, 155, 0.5);
+    box-sizing: border-box;
+  }
+.button-control {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  z-index: 999999999999999;
+}
+/* .treepick-warp-container .controlStyle-button {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  z-index: 9999999;
+} */
+.warp {
+  position: relative;
+}
+.treepicker-inner {
+  width: 100% !important;
+  height: 200px !important;
+}
+.treepicker-popup {
+  width: 200% !important;
+}
+</style>

package/src/components/iris-areaqueryshop/lsh-bank-index.vue

@@ -0,0 +1,233 @@
+<template>
+    <div class="row warp pma">
+        <div class="col-md-4" ref="select1">
+          <el-tooltip class="item" effect="dark" :content="currentLabels" placement="top-start">
+          <el-cascader
+          ref="area"
+          style="width:100%"
+          :disabled="casFlag"
+          :options="options"
+          v-model="selectedOptions"
+          @change="handleChange">
+        </el-cascader>
+       </el-tooltip>
+        </div>
+        <div class="col-md-8" style="padding-left:0">
+          <el-select v-model="storeCodes" :multiple="checkFlag"  :filterable="!storeFlag"  placeholder="请选择门店" @change="changeValue" style="width:100%"  :disabled="storeFlag">
+            <el-option
+              v-for="item in values"
+              :key="item.value"
+              :label="item.label"
+              :disabled="item.disabled"
+              :value="item.value"
+              :orgCode="item.orgCode">
+            </el-option>
+          </el-select>
+        </div>
+    </div>
+</template>
+<script>
+import vue from "vue";
+import treepicker from "../treepicker/treepicker.vue";
+import api from "../../common/api";
+import config from "../../common/config";
+import { Tree , Tooltip,Cascader} from "element-ui";
+vue.use(Tooltip)
+
+import { mapGetters } from "vuex"
+
+export default {
+  data() {
+    return {
+      selectText:'',
+      options: [],
+      selectedOptions: [],
+      values: [],
+      storeCodes: [],
+      storeMap:{},
+      currentLabels:'',
+    };
+  },
+  props: {
+    area: {
+      type: String,
+      default: ''
+    },
+    store: {
+      type: String,
+      default: ''
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    checkFlag: {
+      type: Boolean,
+      default: true
+    },
+    showStoreName:{
+      type: Boolean,
+      default: false
+    },
+    storeFlag: {
+      type: Boolean,
+      default: false
+    },
+    casFlag: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    //查询当前的组织
+    queryOrganization(){
+      this.userInfo.inCharegOrgVo.orgCode = this.userInfo.inCharegOrgVo.orgCode == '000001' ? '00000001':this.userInfo.inCharegOrgVo.orgCode
+      
+      const option = {orgCodes:[this.userInfo.inCharegOrgVo.orgCode]}
+      api.liApi.org.queryOrgSetByOrg({orgCodes:[this.userInfo.inCharegOrgVo.orgCode],},res =>{
+        if(res.data.code == 'success'){
+          let obj = res.data.obj ||[]
+           this.options = obj.map(({orgName:label,orgCode:value,subOrgList:children,}) => {
+             children = children.map(({orgName:label,orgCode:value}) => ({label,value}))
+             if(children.length > 1){
+                children.unshift({
+                  label:'全部PMA',
+                  value:"",
+                })
+             }
+             if(!children.length){
+                children.push({
+                  label:'暂无PMA',
+                  value:"",
+                })
+             }
+             return {label,value,children}
+           })
+          if(this.options.length > 1){
+              this.options.unshift({
+                label:'全部大区',
+                value:"",
+                children:[{
+                  label:'全部PMA',
+                  value:"",
+                }]
+              })
+            }
+        }
+
+        // 设置当前组织的默认属性
+        this.selectedOptions = [this.options[0].value,this.options[0].children[0].value]
+        this.currentLabels = `${this.options[0].label} / ${this.options[0].children[0].label}`
+        //默认查门店
+        let storeInfo = this.userInfo.userAvailableInfo
+        if(storeInfo.availableType == '0'){ //如果是门店账号无需在查门店，直接取
+            this.values = [{
+              label:storeInfo.storeInfoVo.storeName,
+              value:storeInfo.storeInfoVo.storeCode,
+              orgCode: storeInfo.storeInfoVo.orgCode
+            }]
+            //默认设置门店选中
+            this.storeCodes = this.checkFlag ? [this.values[0].value] : this.values[0].value
+        }else{//不是门店账号的话，再去查
+            this.queryStores(this.options[0].value == "" ? "00000001" : this.options[0].children[0].value || this.options[0].value)
+        }
+      })
+
+      
+    },
+    handleChange(val){
+      //获取当前选中的文字值
+      console.log(val[1] || val[0])
+      this.currentLabels = this.$refs.area.currentLabels.join(' / ')
+      let storeInfo = this.userInfo.userAvailableInfo || {}
+      if(storeInfo.availableType == '0') return //门店账号选中大区的时候，锁定门店
+      let org = val[1] || val[0] || '00000001'//val两个值都是空，说明是集团
+      this.queryStores(org)
+    },
+
+    // 默认查询门店
+    queryStores(val){
+      const option = {
+        orgCodes:[val]
+      }
+      api.liApi.org.queryStoreSetByOrg(option,res =>{
+        if(res.data.code == 'success'){
+            this.values = res.data.obj.map(({storeName:label,storeCode:value,orgCode: orgCode}) =>({label,value,disabled:false,orgCode}))
+            // 多选添加全部
+            if(this.checkFlag){
+              this.values.unshift({
+                label:'全部门店',
+                value:"",
+                disabled:false,
+                orgCode: ''
+              })
+            }
+            this.values.forEach(({label,value})=>{
+              this.storeMap.value = label
+            })
+           //默认设置门店
+           this.storeCodes = this.checkFlag ? [this.values[0].value] : this.values[0].value
+            let arr = []
+            arr = this.values.map(item => item.value).filter(item => item && item.trim())
+            // this.$emit('select-change',arr,this.values.filter(item => item.value !=='' ))
+            this.changeValue(this.checkFlag ? arr : this.values[0].value )
+        }
+      })
+    },
+
+    changeValue(val){
+       let arr = []
+       if(val.includes('') && Array.isArray(val)) {
+         arr = this.values.map(item => {
+            this.$set(item,'disabled',true)
+            return item.value
+         }).filter(item => item && item.trim())
+       }
+       else {
+          this.values.forEach(item => {
+            if(item.value == '' && val.length) item.disabled = true
+            else item.disabled = false
+          })
+          arr = val
+       }
+      this.$emit('select-change',arr,this.values.filter(item => item.value !=='' ))
+    },
+    // 清空值方法
+    reset() {
+      this.queryOrganization()
+    },
+  },
+  computed: {
+    userInfo(){
+      return JSON.parse(sessionStorage.getItem('userInfo'))
+    }
+  },
+  watch: {
+  },
+  components: {
+  },
+  created() {
+    //获取组织
+    this.queryOrganization()
+  }
+};
+</script>
+
+<style lang="scss">
+  .pma {
+    .el-select__tags {
+      text-align: left !important;
+    }
+    .el-tag {
+      max-width: 100%;
+      text-align: left;
+    }
+    .el-select__tags-text {
+      display: inline-block;
+    //   max-width: 90%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1;
+    }
+  }
+</style>