apply-clients 3.3.78 → 3.3.83

package/src/components/product/AreaSelect/MyAreaSelect.vue

@@ -0,0 +1,423 @@
+<template>
+  <div v-el:group class="btn-group" v-bind:class="{open: show, dropup: direction === 'up'}" :style="{width:width}">
+    <button v-el:btn type="button" class="btn btn-default dropdown-toggle select-style" style="min-width: 100%;"
+            :id="'vc-select-button-'+attach"
+            @click="toggleDropdown"
+            @blur="show = (search ? show : false)"
+            v-bind="{disabled: disabled}"
+    >
+      <span class="btn-placeholder" v-show="showPlaceholder">{{ placeholder }}</span>
+      <span class="btn-content" :style="{textOverflow:'ellipsis',overflow: 'hidden'}">{{ selectedItems }}</span>
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu" v-bind:class="{'menu-align-right': align=== 'right'}"
+        :style="{overflow:'scroll',maxHeight: maxHeight + 'px',width:'auto',minWidth:minWidth,left:left+'px' }"
+        v-el:dropdown>
+      <template v-if="options.length">
+        <li v-if="search" class="bs-searchbox" style="white-space: nowrap">
+          <input type="text" placeholder="Search"
+                 style="width: 80%;display: inline"
+                 v-model="searchText"
+                 class="form-control" autocomplete="off"
+                 @keyup.enter="putOptions(searchText)">
+
+          <span style="width: 20%;display: inline"
+                v-if="search&&multiple&&show&&!isSelectAll"
+                @mousedown.prevent="selectAll(options)">全选</span>
+          <span style="width: 20%;display: inline"
+                v-if="search&&multiple&&show&&isSelectAll"
+                @mousedown.prevent="selectAll(options)">取消</span>
+        </li>
+        <li v-for="option in options | findBy searchText " style="position:relative">
+          <a @mousedown.prevent="select(option.value,null)" style="cursor:pointer"
+             :id="'vc-select-a-'+attach+'-'+$index">
+            {{ option.label }}
+            <span class="glyphicon glyphicon-ok check-mark" v-show="isSelected(option.value)"></span>
+          </a>
+        </li>
+      </template>
+      <slot v-else></slot>
+      <div class="notify" v-show="showNotify" transition="fadein">Limit reached ({{ limit }} items max).
+      </div>
+    </ul>
+  </div>
+</template>
+
+<script>
+import EventListener from './utils/EventListener.js'
+import coerceBoolean from './utils/coerceBoolean.js'
+
+export default {
+  props: {
+    options: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    value: {
+      twoWay: true
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    multiple: {
+      type: Boolean,
+      coerce: coerceBoolean,
+      default: false
+    },
+    search: { // Allow searching (only works when options are provided)
+      type: Boolean,
+      coerce: coerceBoolean,
+      default: true
+    },
+    limit: {
+      type: Number,
+      default: 1024
+    },
+    closeOnSelect: { // only works when multiple==false
+      type: Boolean,
+      coerce: coerceBoolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      coerce: coerceBoolean,
+      default: false
+    },
+    attach: {
+      type: String,
+      default: 'vuestrap'
+    },
+    enterPush: {
+      type: Boolean,
+      dafault: false
+    },
+    maxHeight: {
+      type: [Number, String],
+      default: 300
+    },
+    minWidth: {
+      type: [Number, String],
+      default: '100%'
+    },
+    valueSingle: {
+      type: Boolean,
+      default: false
+    },
+    //全选标志位
+    isSelectAll: {
+      type: Boolean,
+      default: false
+    },
+    filerKey: {
+      default: 'id'
+    },
+    direction: { // 展开方向，默认为向下，可以向上up
+      type: String,
+      default: 'down'
+    },
+    align: {
+      type: String,
+      default: 'left' // 内内容框对齐方式，默认是左对齐，也可以right，右对齐
+    },
+    width: {
+      type: String,
+      default: '60%'
+    },
+    timeout: {
+      type: Number,
+      default: 300
+    }
+  },
+  ready() {
+    if (this.search && this.multiple) {
+      this.minWidth = '190px'
+    }
+    // 如果this.value不存在或正length不等于0
+    if ((this.value === false ? false : !this.value) || this.value.length === 0) {
+      if (this.valueSingle) {
+        this.value = ''
+      } else {
+        this.value = []
+      }
+    } else {
+      // 如果this.value不是数组
+      if (this.value.constructor !== Array) {
+        if (!this.valueSingle) {
+          this.value = [this.value]
+        }
+      } else {
+        // this.value不是数组并且不是多选
+        if (!this.multiple && this.value.length > 1) {
+          this.value = this.value.slice(0, 1)
+        } else if (this.multiple && this.value.length > this.limit) {
+          this.value = this.value.slice(0, this.limit)
+        }
+      }
+    }
+    let el = this.$els.dropdown
+    let elbtn = this.$els.btn
+    this._closeEvent = EventListener.listen(window, 'mouseup', (e) => {
+      if (!el.contains(e.target) && this.show && !elbtn.contains(e.target)) {
+        this.show = false
+      }
+    })
+  },
+  data() {
+    return {
+      left: '0',
+
+      searchText: null,
+      show: false,
+      showNotify: false,
+      paramsData: [],
+      // isShowModify: false
+      timer: null
+    }
+  },
+  computed: {
+    // 返回显示的选择内容
+    selectedItems() {
+      // 值为空，返回空串
+      if (this.value === false ? false : !this.value) {
+        return ''
+      }
+      if (this.value == null || this.value.length === 0) {
+        return ''
+      }
+      // 把单选变成数组
+      let value
+      if (this.valueSingle) {
+        value = [this.value]
+      } else {
+        value = this.value
+      }
+
+      // 根据value值，找到label
+      let foundItems = []
+      if (value === false ? true : value && value.length) {
+        for (var item of value) {
+          // 如果没有可选项，直接value内容
+          // 改动 没有可选项 直接为空
+          if (this.options.length === 0) {
+            // foundItems = value;
+            foundItems = [];
+          }
+          // 有可选项
+          else {
+            // 如果是对象，显示对象给定的列
+            if (typeof item === "object") {
+              for (let o of this.options) {
+                // 选中对象鱼可选项value值相同，取选项的label
+                if ((o.value === false ? true : o.value) && o.value[this.filerKey] === item[this.filerKey]) {
+                  foundItems.push(o.label)
+                  break
+                }
+              }
+            } else {
+              // 否则，显示值本身
+              let option
+              this.options.some(o => {
+                if (o.value === item) {
+                  option = o
+                  return true
+                }
+              })
+              option && foundItems.push(option.label)
+            }
+          }
+        }
+        if (foundItems.length === 0 || foundItems[0].constructor === Object) {
+          return ''
+        }
+        //选中的
+        let str = foundItems.join(', ')
+        // if(str.length > 4)
+        //   return str.substring(0,4)+'...'
+        // else
+        return str
+      }
+    },
+    showPlaceholder() {
+      if (this.value === false ? true : this.value) {
+        return this.value.length === 0 || this.selectedItems === ''
+      }
+      return true
+    }
+  },
+  watch: {
+    value(val) {
+      this.$emit('change', val)
+      this.$emit('selected', this.selected)
+      if (val && val.length > this.limit) {
+        this.showNotify = true
+        this.value.pop()
+        setTimeout(() => this.showNotify = false, 1000)
+      }
+    },
+    show() {
+      this.judgBoundary();
+    },
+    searchText() {
+      // 防抖
+      if (this.timer) {
+        clearTimeout(this.timer)
+      }
+      this.timer = setTimeout(() => {
+        this.$emit('select-search', this.searchText)
+      }, this.timeout)
+    }
+  },
+  methods: {
+    //全选
+    selectAll(v) {
+      this.isSelectAll = !this.isSelectAll
+      if (this.searchText === null) {
+        v.forEach((item) => {
+          this.select(item.value, this.isSelectAll)
+        })
+      } else {
+        let result = v.filter((item) => {
+          return item.label.includes(this.searchText)
+        }).forEach((item) => {
+          this.select(item.value, this.isSelectAll)
+        })
+      }
+    },
+    select(v, flag) {
+      if (flag == true) {
+        if (this.multiple) {
+          this.value.$remove(v)
+          this.value.push(v)
+        }
+        if (this.closeOnSelect) {
+          this.toggleDropdown()
+        }
+      } else if (flag == false) {
+        if (this.multiple) {
+          this.value.$remove(v)
+        }
+        if (this.closeOnSelect) {
+          this.toggleDropdown()
+        }
+      } else if (flag == null) {
+        if (this.valueSingle || !this.value || this.value.indexOf(v) === -1) {
+          if (this.multiple) {
+            this.value.push(v)
+          } else {
+            if (this.valueSingle) {
+              this.value = v
+            } else {
+              this.value = [v]
+            }
+          }
+        } else {
+          if (this.multiple || this.value) {
+            this.value.$remove(v)
+          }
+        }
+        if (this.closeOnSelect) {
+          this.toggleDropdown()
+        }
+      }
+      this.judgBoundary();
+    },
+    isSelected(v) {
+      if (this.value === false ? false : !this.value) {
+        return false
+      }
+      if (this.value.constructor !== Array) {
+        return this.value == v
+      } else {
+        return this.value.indexOf(v) !== -1
+      }
+
+    },
+    toggleDropdown() {
+      this.width = this.$els.group.clientWidth * this.width + 'px'
+      this.show = !this.show
+    },
+    putOptions(val) {
+      if (this.enterPush) {
+        let sign = false
+        this.options.forEach((item) => {
+          if (val === item.label) {
+            sign = true
+          }
+        })
+        if (!sign) {
+          let tmp = {label: val, value: val}
+          this.options.push(tmp)
+        }
+        this.select(val, null)
+      }
+      this.judgBoundary();
+    },
+    judgBoundary() {
+      //判断是否超出边界，超出移动
+      if (document.documentElement.offsetWidth < this.$els.dropdown.getBoundingClientRect().right) {
+        this.left = document.documentElement.offsetWidth - this.$els.dropdown.getBoundingClientRect().right - 25
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this._closeEvent) this._closeEvent.remove()
+  }
+}
+</script>
+
+<style scoped>
+.bs-searchbox {
+  padding: 4px 8px;
+}
+
+.menu-align-right {
+  left: unset;
+  right: 0;
+}
+
+.btn-group .dropdown-menu .notify {
+  position: absolute;
+  bottom: 5px;
+  width: 96%;
+  margin: 0 2%;
+  min-height: 26px;
+  padding: 3px 5px;
+  background: #f5f5f5;
+  /*border: 1px solid #e3e3e3;*/
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+  pointer-events: none;
+  opacity: .9;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.select-style {
+  border: 0px;
+  /*border-bottom: 2px solid #C9CCCF;*/
+  border: 1px solid #93B2D3;
+  border-radius: 0px;
+  color: #555;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 为新产品增加修改菜单选项 */
+.vselect-self-style {
+  text-align: center;
+  border: 2px dashed #ccc;
+  margin: 5px 10px;
+  border-radius: 5px;
+}
+
+/* 当内容超过最大时，显示省略，长度不能超过最大值 */
+.btn-group > button {
+  max-width: 100%;
+}
+
+.btn-group > button .btn-content {
+  max-width: 100%;
+}
+</style>

package/src/components/product/AreaSelect/ResAreaSelect.vue

@@ -0,0 +1,106 @@
+<template>
+  <!--<v-select :options='options' placeholder='请选择'-->
+  <!--          :value.sync="selectres"-->
+  <!--          :multiple="!isMul"-->
+  <!--          :search="issearch"-->
+  <!--          :close-on-select="isMul"-->
+  <!--          @change="resChange"-->
+  <!--&gt;-->
+  <!--</v-select>-->
+  <area-select :options='options' placeholder='请选择'
+            :value.sync="selectres"
+            :multiple="!isMul"
+            :search="issearch"
+            :close-on-select="isMul"
+            @change="resChange"
+            :value-single="true"
+  >
+  </area-select>
+</template>
+<script>
+import {HttpResetClass} from 'vue-client'
+
+export default {
+  title: '资源管理',
+  props: {
+    //资源类型
+    restype:'',
+    //资源数据
+    resObj:{},
+    options:[],
+    isMul: {
+      type: Boolean,
+      default: true
+    },
+    issearch: {
+      type: Boolean,
+      default: true
+    },
+    //资源初始化数据 默认选中值
+    initresid: {
+      type: Array,
+      default() { return [] },
+    },
+    //父层id
+    parentresid: {
+      type: Array,
+      default() { return [] },
+    },
+  },
+  data () {
+    return {
+      //资源数据
+      resObj:{},
+      //资源数据列表
+      resoptions:[],
+      //选中资源数据
+      selectres: []
+    }
+  },
+  ready () {
+    //获取资源列表
+    this.getResList()
+  },
+  methods:{
+    //资源改变
+    resChange(val){
+      let orgnames=[]
+      Object.keys(this.options).forEach((key) => {
+        if(this.selectres.includes(this.options[key].value))
+          orgnames.push(this.options[key].label)
+      })
+      // console.log("资源变化:",this.selectres, orgnames,this.options)
+      this.$dispatch('res-select', this.selectres, orgnames,this.options)
+    },
+    //获取资源数据
+    async getResList() {
+      this.dealdata()
+    },
+    async dealdata(){
+      //赋值资源数据选中初始值
+      let arryselect=[]
+      this.options.forEach((item) => {
+        if(this.initresid.length>0){
+          this.initresid.forEach((init) => {
+            if(item.value==init){
+              arryselect.push(item.value)
+            }
+          })
+        }
+      })
+      //赋值资源选中初始值
+      this.selectres=arryselect
+    }
+  },
+  watch: {
+    //监听初始化资源id
+    'initresid.length'(){
+      this.dealdata()
+    },
+    //监听初始化资源id
+    'parentresid'(){
+      this.dealdata()
+    },
+  },
+}
+</script>

package/src/components/product/AreaSelect/ResAreaSelectGroup.vue

@@ -0,0 +1,150 @@
+<template>
+  <div :class="style">
+    <label :class="labelstyle" :style="shijifontColors">市&emsp;&emsp;县</label>
+    <res-area-select
+      :options=options
+      @res-select="getXian"
+      :issearch="false"
+      :initresid="initres"
+    >
+    </res-area-select>
+  </div>
+  <div :class="style">
+    <label :class="labelstyle" :style="xianfontColors">街道/乡镇</label>
+    <res-area-select
+      :options=xian_options
+      @res-select="getjdao"
+      :issearch="false"
+      :initresid="xianginitres"
+    >
+    </res-area-select>
+  </div>
+  <div :class="style">
+    <label :class="labelstyle" :style="shequfontColors">社&emsp;&emsp;区</label>
+    <res-area-select
+      :options=jdao_options
+      @res-select="getshequ"
+      :issearch="false"
+      :initresid="jdaoinitres"
+    >
+    </res-area-select>
+    </div>
+</template>
+<script>
+
+import {HttpResetClass} from 'vue-client'
+
+export default {
+  title: '区域选择分组',
+  props: {
+    style: {
+      type: String,
+      default: 'col-sm-3 form-group'
+    },
+    labelstyle: {
+      type: String,
+      default: 'font_normal_title'
+    },
+    mul: {
+      type: Boolean,
+      default: true
+    }
+    //初始值 默认选中值
+    // initres: {
+    //   type: Object,
+    //   default: null,
+    // }
+  },
+  data() {
+    return {
+      orgresid: [this.$login.f.orgid],
+      options: [],
+      initres: [],
+      xianginitres: [],
+      jdaoinitres: [],
+      xian_options: [],
+      jdao_options: [],
+      shijifontColors:"color: #cd5c5c",//红色
+      xianfontColors:"color: #cd5c5c",//红色
+      shequfontColors:"color: #cd5c5c",//红色
+      pubColors:"color: #0c2e4d",// 黑色
+      pub2Colors:"color: #cd5c5c"// 红色
+    }
+  },
+  ready() {
+    this.getResList();
+  },
+  methods: {
+    //获取区域地址
+    async getResList() {
+      let http = new HttpResetClass()
+      let req = await http.load('POST', '/rs/logic/resAreaSelect', {
+        userid: this.$login.f.id,
+        orgid: this.$login.f.orgid
+      }, {resolveMsg: null, rejectMsg: '获取区域地址失败'})
+      this.options = []
+      this.options = req.data
+      //设置市区默认值
+      // if (this.options.length > 0) {
+      //   this.initres = []
+      //   this.initres.push(this.options[0].value)
+      // }
+    },
+    async getXian(value, lable, obj) {
+      this.xian_options = []
+      this.jdao_options = []
+      let newFilArr = obj.filter((item, i) => {
+        if (item.value == value) {
+          return item
+        }
+      })
+      if (newFilArr.length > 0) {
+        this.xian_options = newFilArr[0].children
+        // if (this.xian_options.length > 0) {
+        //   this.xianginitres = []
+        //   this.xianginitres.push(this.xian_options[0].value)
+        // }
+      }
+      if (value !=null && value.length!=0){
+        this.shijifontColors = this.pubColors
+      }else {
+        this.shijifontColors = this.pub2Colors
+        this.xianfontColors = this.pub2Colors
+        this.shequfontColors = this.pub2Colors
+      }
+      this.$dispatch('shiji-select', value, lable)
+    },
+    async getjdao(value, lable, obj) {
+      this.jdao_options = []
+      let newFilArr = obj.filter((item, i) => {
+        if (item.value == value) {
+          return item
+        }
+      })
+      if (newFilArr.length > 0) {
+        this.jdao_options = newFilArr[0].children
+        // this.jdaoinitres = []
+        // if (this.jdao_options.length > 0) {
+        //   this.jdaoinitres.push(this.jdao_options[0].value)
+        // }
+      }
+      if (value !=null && value.length!=0){
+        this.xianfontColors = this.pubColors
+      }else {
+        this.xianfontColors = this.pub2Colors
+        this.shequfontColors = this.pub2Colors
+      }
+      this.$dispatch('xian-select',value, lable)
+    },
+    async getshequ(value, lable, obj) {
+      if (value !=null && value.length!=0){
+        this.shequfontColors = this.pubColors
+      }else {
+        this.shequfontColors = this.pub2Colors
+      }
+      this.$dispatch('shequ-select',value, lable)
+    }
+  },
+  watch: {}
+}
+</script>

package/src/components/product/AreaSelect/utils/EventListener.js

@@ -0,0 +1,29 @@
+const EventListener = {
+  /**
+   * Listen to DOM events during the bubble phase.
+   *
+   * @param {DOMEventTarget} target DOM element to register listener on.
+   * @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
+   * @param {function} callback Callback function.
+   * @return {object} Object with a `remove` method.
+   */
+  listen(target, eventType, callback) {
+    if (target.addEventListener) {
+      target.addEventListener(eventType, callback, false)
+      return {
+        remove() {
+          target.removeEventListener(eventType, callback, false)
+        }
+      }
+    } else if (target.attachEvent) {
+      target.attachEvent('on' + eventType, callback)
+      return {
+        remove() {
+          target.detachEvent('on' + eventType, callback)
+        }
+      }
+    }
+  }
+}
+
+export default EventListener

package/src/components/product/AreaSelect/utils/coerceBoolean.js

@@ -0,0 +1,7 @@
+// Attempt to convert a string value to a Boolean. Otherwise, return the value
+// without modification so Vue can throw a warning.
+export default (val) => (typeof val !== "string" ? val :
+  val === "true" ? true :
+  val === "false" ? false :
+  val === "null" ? false :
+  val === "undefined" ? false : val)