lshcomment 1.0.0

package/src/components/iris-suitscope/govt..vue

@@ -0,0 +1,215 @@
+<template lang="html">
+  <div class="">
+    <div v-if="!salesTable" class="card">
+      <div class="card-header">
+        经销商店
+      </div>
+      <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 :check-strictly="true" :highlight-current=true :props="props" :load="loadNodeSales" lazy empty-text="暂无数据" node-key='value' @current-change="currentchange">
+                </Tree>
+              </div>
+            </div>
+          </div>
+          <div class="col-6">
+            <div class="card">
+              <div class="card-header">经销商店</div>
+              <div class="card-block">
+                <div class="text-center" v-if="!salesShop.length">
+                  暂无数据
+                </div>
+                <div v-for="(value , index) in salesShop">
+                  <label class=""><input :checked="value.checked" type="checkbox" @click="checked(value)"><span class="ml-2">{{value.storeName}}</span></label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-12 text-center mb-3 mt-3">
+        <b-button @click="close" type="button" variant="default">取消</b-button>
+        <b-button @click="preserve" type="button" variant="primary">保存</b-button>
+      </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
+  } from 'element-ui'
+  import {
+    mapState,
+    mapGetters,
+    mapActions
+  } from 'vuex'
+  export default {
+    props: {
+      tabData: {
+        type: Array,
+        default: function() {
+          return []
+        }
+      }
+    },
+    data() {
+      return {
+        //树形结构模拟数据
+        props: {
+          label: 'name',
+          children: 'zones'
+        },
+        salesTable: false, //销售区域的显示
+        salesShop: [], //选中的销售区域下的商店
+        salesName: "", //销售区域的名字
+        shopDataArr: [], //选中的经销商店
+        shopDataServe: [], //查出来的已选中经销商店
+        shopDataServeRemove: [] //删除的已经保存在后台的数据
+      }
+    },
+    methods: {
+      getTareaTree(type, code, sc) {
+        if (type == 'sales') {
+          //获取销售区域
+          API.area.getSalesAreaInfoByAreaCode({
+            areaCode: code
+          }, sc)
+        } else if (type == 'shop') {
+          // 获取经销商店
+          API.suitScope.queryShopInfo({
+            salesAreaCodes: [code],
+            needPageFlag: "0"
+          }, sc)
+        }
+      },
+      loadNodeSales(node, resolve) {
+        // =========================================
+        if (node.level === 0) {
+          //这里是0级目录 也就是说整个树形结构还没有东西
+          this.getTareaTree('sales', config.financePro.treeArea, (msg) => {
+            return resolve([{
+              name: msg.data.obj.areaName,
+              value: msg.data.obj.areaCode
+            }]);
+          })
+          return;
+        }
+        this.getTareaTree('sales', node.data.value, (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,
+                value: data[i].areaCode
+              }
+            }
+            return resolve(arr);
+          }
+          return resolve([])
+        })
+        // =========================================
+      },
+      currentchange(a, b) {
+        // 获取经销商店
+        this.salesShop = []; //把经销商店先清空一遍（因为vue的缓存机制不清空checkbox会有缓存问题）
+        this.getTareaTree('shop', a.value, (msg) => {
+          if (msg.data.message == "success") {
+            this.salesShop = msg.data.obj; //经销商店
+            for (var i = 0; i < this.salesShop.length; i++) {
+              for (var j = 0; j < this.shopDataServe.length; j++) {
+                if (this.salesShop[i].storeCode === this.shopDataServe[j].storeCode) {
+                  this.salesShop[i].checked = true;
+                }
+              }
+              for (var h = 0; h < this.shopDataArr.length; h++) {
+                if (this.salesShop[i].storeCode === this.shopDataArr[h].storeCode) {
+                  this.salesShop[i].checked = true;
+                }
+              }
+            }
+            this.salesName = a.name //销售区域的名字
+          }
+        })
+      },
+      removeTree(value) {
+        //删除相应的经销商店
+        for (var i = 0; i < this.shopDataArr.length; i++) {
+          if (this.shopDataArr[i].storeCode == value.storeCode) {
+            this.shopDataArr.splice(i, 1);
+            return true;
+          }
+        }
+        for (var i = 0; i < this.shopDataServe.length; i++) {
+          if (this.shopDataServe[i].storeCode == value.storeCode) {
+            this.shopDataServeRemove.push(this.shopDataServe[i])
+            this.shopDataServe.splice(i, 1);
+            return true;
+          }
+        }
+        return false;
+      },
+      checked(value) {
+        this.$emit('data-change', ['shop'])
+        //判断选中没有，有就删除，没有就添加进去（选中它）
+        if ((this.shopDataArr.length != 0 || this.shopDataServe.length != 0) && this.removeTree(value)) {
+          return;
+        }
+        API.ordinalInfo.getSequence({
+          serviceCode: config.addFinanceCode.salesCode
+        }, (msg) => {
+          this.shopDataArr.push({
+            rangeCode: msg.data.obj,
+            storeCode: value.storeCode,
+            remark: value.storeName,
+            salesName: this.salesName,
+            rangeType: '0'
+          })
+        })
+      },
+      preserve() {
+        // 点击保存的时候
+        this.$emit('remove-tr', this.shopDataServeRemove)
+        this.$emit('shop-preserve', this.shopDataArr) //触发保存事件把数据传送给使用者
+        this.$store.dispatch('suitscope/preserveShop', {
+          tabType: 'istabType', //切换到列表页面
+        });
+      },
+      close() {
+        //点击取消的时候切换到选择页
+        this.$store.dispatch('suitscope/preserveShop', {
+          tabType: 'home',
+        });
+      }
+    },
+    components: {
+      Tree
+    },
+    mounted() {
+      var index = 0;
+      for (var i = 0; i < this.tabData.length; i++) {
+        //经销商店的sales是null ，所以我们用sales来筛选出经销商店
+        if (!this.tabData[i].sales) {
+          this.$set(this.shopDataServe, index++, this.tabData[i])
+        }
+      }
+    }
+  }
+</script>
+<style lang="css">
+  .tabBodyScroll {
+    height: 250px;
+    overflow: auto;
+    overflow-x: hidden;
+  }
+  .border {
+    border: 2px solid #ccc;
+  }
+</style>

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

@@ -0,0 +1,178 @@
+<template>
+  <div class="">
+    <b-row>
+      <div class=" col-12">
+        <div class="row col-12" v-if="tabType == 'home'" >
+          <div class="col-6">
+            <b-form-fieldset horizontal label="适用范围类型" :label-cols="4" class="text-right">
+              <b-form-select value="home" @input="changeType" :options="scopeType" class="mb-3"></b-form-select>
+            </b-form-fieldset>
+          </div>
+          <div class="col-6 text-right">
+            <b-button @click="close" type="button" variant="default">取消</b-button>
+          </div>
+        </div>
+        <div class="col-12 float-right">
+          <sales :tab-data="tabData" @remove-tr="removetr" @showTable="showTablee" v-if="tabType=='sales'" @data-change="datachange" @sales-preserve="salesPreserve"></sales>
+          <div v-else-if="tabType=='shop'">
+            <shop :tab-data="tabData" @remove-tr="removetr" @shop-preserve="shopPreserve" @data-change="datachange"></shop>
+          </div>
+          <div v-else-if="tabType=='government'">
+            行政区域
+          </div>
+          <div v-if="tabType == 'istabType'">
+            <b-button size="sm" variant="primary" @click="fuSave" class="save-fu" v-show='saveBtn'>保存</b-button>
+            <tableShow :tab-data="tabData" @remove-tr="removetr" @showHome="showHomee" ></tableShow>
+          </div>
+        </div>
+      </div>
+    </b-row>
+  </div>
+</template>
+<script>
+  import Vue from 'vue'
+  import sales from './sales'
+  import shop from './shop'
+  import tableShow from './tableShow'
+  import common from '../../common/common'
+  import config from '../../common/config'
+  import api from '../../common/api'
+  import {
+    mapState,
+    mapGetters,
+    mapActions
+  } from 'vuex'
+  export default {
+    props: {
+      tabData: {
+        type: Array,
+        default: function() {
+          return []
+        }
+      },
+      saveBtn:{
+         type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+      	showTabel:true,
+      	showHome:false,
+        rangeType: "1", //适用范围类型值
+        // 适用范围类型
+        scopeType: [{
+          value: "home",
+          text: "请选择",
+        }],
+        availableType: null
+      }
+    },
+    methods: {
+      fuSave() {
+        this.$emit('saveDataClick');
+      },
+      showHomee(){
+      	this.showHome = true
+      	this.showTabel= false
+      },
+      showTablee(){
+      	this.showTabel= true
+      },
+      changeType(value) {
+        this.$store.dispatch('suitscope/preserveShop', {
+          tabType: value,
+          istabType: false
+        });
+      },
+      close() {
+        this.$store.dispatch('suitscope/preserveShop', { //切换到列表页
+          tabType: 'istabType',
+          istabType: true
+        });
+      },
+      //当销售区域保存的时候触发
+      salesPreserve(data) {
+        this.$emit('sales-preserve', data)
+      },
+      //当tab删除的时候触发
+      removetr(data) {
+        this.$emit('remove-tr', data)
+      },
+      //当经销商店保存的时候触发
+      shopPreserve(data) {
+        this.$emit('shop-preserve', data)
+      },
+      //当数据发生变化的时候触发的事件
+      datachange(data) {
+        this.$emit('data-change', data)
+      }
+    },
+    components: {
+      sales,
+      shop,
+      tableShow,
+    },
+    computed: {
+      // mapState是vuex的辅助函数 https://vuex.vuejs.org/zh-cn/state.html#the-mapstate-helper
+      // 创建组件的计算属性返回 Vuex store 中的状态
+      ...mapState('suitscope', [
+        'financeCode',
+        'tabType',
+        'istabType',
+        'shopData',
+        'salesShop',
+        'governmentData',
+        'tabsscope',
+        'updataFinanceId'
+      ])
+    },
+    created() {
+      api.getUserAvailableInfo((msg) => {
+        if (msg.data.message === 'success') {
+          this.availableType = msg.data.obj.availableType
+        }
+      })
+      if (this.$route.params.id) {
+        this.$store.dispatch('suitscope/preserveShop', {
+          tabType: 'istabType',
+        });
+      } else {
+        this.$store.dispatch('suitscope/preserveShop', {
+          tabType: 'istabType',
+        });
+      }
+      //获取适用范围类型
+      api.menu.getReferenceInfo({
+        refCode: config.scope
+      }, (msg) => {
+        let list = msg.data.obj.referenceDetailInfos
+        if (this.availableType == 0) {
+          for (var i = 0; i < list.length; i++) {
+            if ((list[i].refDetailCode == config.scopeType.sales)) {
+              list.splice(i, 1)
+            }
+          }
+        }
+        for (var j = 0; j < list.length; j++) {
+          let obj = {
+            [config.scopeType.government]: "government", //行政区域
+            [config.scopeType.sales]: "sales", //销售区域
+            [config.scopeType.shop]: "shop", //经销商店
+          }
+          this.$set(this.scopeType, j + 1, {
+            value: obj[list[j].refDetailCode],
+            text: list[j].refDetailName
+          })
+        }
+      })
+    },
+  }
+</script>
+
+<style lang="css">
+.save-fu{
+  position: absolute;
+  right:1em;;
+}
+</style>

package/src/components/iris-suitscope/sales.vue

@@ -0,0 +1,224 @@
+<template lang="html">
+  <div class="">
+    <div v-if="!salesTable" class="card card-accent-info card-inverse">
+      <div class="card-header">
+        销售区域
+      </div>
+      <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  mb-3 clearfix">
+            <div class="card">
+              <div class="card-header">已选中销售区域</div>
+              <div class="card-block">
+                <div class="text-center" v-if="!salesDataArr.length && !salesDataArrServe.length ">
+                  暂无数据
+                </div>
+                <div class="card m-0 float-left ml-2" v-for="value in salesDataArr">
+                  <div class="card-body p-0 clearfix ml-1">
+                    {{value.sales}}
+                    <i @click="removeTree(value.salesAreaCode)" class="fa fa-remove bg-danger p-1  ml-3 float-right white"></i>
+                  </div>
+                </div>
+                <div class="card m-0 float-left ml-2" v-for="value in salesDataArrServe">
+                  <div class="card-body p-0 clearfix ml-1">
+                    {{value.sales}}
+                    <i @click="removeTree(value.id)" class="fa fa-remove bg-danger p-1  ml-3 float-right white"></i>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-12 text-center mb-3">
+        <b-button @click="close" type="button" variant="default">取消</b-button>
+        <b-button @click="preserve" type="button" variant="primary">保存</b-button>
+      </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
+  } from 'element-ui'
+  import {
+    mapState,
+    mapGetters,
+    mapActions
+  } from 'vuex'
+  export default {
+    props: {
+      tabData: {
+        type: Array,
+        default: function() {
+          return []
+        }
+      }
+    },
+    data() {
+      return {
+        //树形结构模拟数据
+        props: {
+          label: 'name',
+          children: 'zones',
+        },
+        salesTable: false, //销售显示否
+        salesDataArr: [], //存储被选中的数据
+        salesDataArrServe: [], //存储后台已选中的数据
+        salesDataArrRemove: [], //存储后台的需要删除的数据
+        availableType: "",
+      }
+    },
+    methods: {
+      //  获取销售区域的api
+      getTareaTree(code, sc) {
+        API.area.getSalesAreaInfoByAreaCode({
+          areaCode: code
+        }, sc)
+      },
+      //加载子树节点的函数
+      loadNodeSales(node, resolve) {
+        if (node.level === 0) {
+          API.getUserAvailableInfo((msg) => {
+            if (msg.data.message === 'success') {
+              this.availableType = msg.data.obj.availableType
+              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 || "",
+                      disabled: true,
+                    }]);
+                  }
+                })
+              }
+            }
+          })
+          return;
+        }
+        this.getTareaTree(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([])
+        })
+      },
+      //当树节点被点击的时候的函数
+      currentchange(a) {
+        this.$emit('data-change', ['sales'])
+        //当某一行被点击的时候我先判断有没有保存过数据再判断这一行数据有没有保存过
+        if ((this.salesDataArr.length != 0 || this.salesDataArrServe.length != 0) && this.removeTree(a.code)) {
+          //说明当前这一行数据被保存过了，我就删除他
+          return;
+        }
+        API.ordinalInfo.getSequence({
+          serviceCode: config.addFinanceCode.salesCode
+        }, (msg) => {
+          this.salesDataArr.push({
+            rangeCode: msg.data.obj, //适用范围编码
+            salesAreaCode: a.code, //销售区域
+            sales: a.name, //销售区名字
+            rangeType: '1' //适用范围类型 1 销售区域
+          })
+        })
+      },
+      //删除某一个已存储的数据
+      removeTree(value) {
+        console.log(value)
+        for (var i = 0; i < this.salesDataArrServe.length; i++) {
+          if (this.salesDataArrServe[i].id == value) {
+            this.salesDataArrRemove.push(this.salesDataArrServe[i])
+            this.salesDataArrServe.splice(i, 1);
+            return true;
+          }
+          if (this.salesDataArrServe[i].salesAreaCode === value) {
+            this.salesDataArrRemove.push(this.salesDataArrServe[i])
+            //说明当前这一行数据被保存过了，我就删除他
+            this.salesDataArrServe.splice(i, 1);
+            return true;
+          }
+        }
+        for (var i = 0; i < this.salesDataArr.length; i++) {
+          if (this.salesDataArr[i].salesAreaCode === value) {
+            //说明当前这一行数据被保存过了，我就删除他
+            this.salesDataArr.splice(i, 1);
+            return true;
+          }
+        }
+        return false;
+      },
+      //点击保存的时候触发
+      preserve() {
+        this.$store.dispatch('suitscope/preserveShop', { //切换到列表页
+          tabType: 'istabType',
+          istabType: true
+        });
+        this.$emit('remove-tr', this.salesDataArrRemove) //触发事件把删除掉的对象发给他        
+        this.$emit('sales-preserve', this.salesDataArr) //触发事件把数据给使用者
+        this.$emit('showTable')
+      },
+      //取消按钮
+      close() {
+        this.$store.dispatch('suitscope/preserveShop', {
+          tabType: 'home',
+        }); //切换到选择页
+      }
+    },
+    components: {
+      Tree
+    },
+    computed: {
+      // mapState是vuex的辅助函数 https://vuex.vuejs.org/zh-cn/state.html#the-mapstate-helper
+      // 创建组件的计算属性返回 Vuex store 中的状态
+      ...mapState('suitscope', [
+        'financeCode',
+      ]),
+    },
+    created() {
+      var index = 0;
+      for (var i = 0; i < this.tabData.length; i++) {
+        //经销商店的sales是null ，所以我们用sales来筛选出销售区域
+        if (this.tabData[i].sales) {
+          var idx = index++
+            this.$set(this.salesDataArrServe, idx, this.tabData[i])
+        }
+      }
+    }
+  }
+</script>
+<style lang="css">
+  .tabBodyScroll {
+    height: 250px;
+    overflow: auto;
+    overflow-x: hidden;
+  }
+  .white {
+    color: #fff;
+  }
+  .border {
+    border: 2px solid #ccc;
+  }
+</style>