system-clients 3.2.1-ycapply-1 → 3.2.2-aodeToV4

package/src/components/server/ImageViewer.vue

@@ -1,350 +0,0 @@
-<!--父组件调用时需要写一个按钮和两个方法  一个方法用来显示组件和传图片  另一个方法用来关闭此组件
-  具体用法参照 ImageVieweTest.vue
--->
-<template>
-  <div class="full-img" v-show="show">
-    <div class="bor">
-      <div class="magnify">
-      <!-- 左边产品图片区域 -->
-      <div class="left_contaner">
-        <div class="middle_img" @mouseover="boxMouseOver" @mouseleave="boxMouseLeave">
-          <!-- 产品图片 -->
-          <img :src="middleImg" alt="">
-          <!-- 阴影盒子 -->
-          <div class="shade" @mouseover="shadeMouseOver" @mousemove="shadeMouseMove" ref="shade" v-show="isShade"></div>
-        </div>
-        <div>
-          <!-- 缩略图容器 -->
-          <div class="carousel">
-            <!-- 缩略图展示盒子 -->
-            <div class="show_box">
-              <ul class="picture_container" ref="middlePicture">
-                <li class="picture_item" @mouseover="tabPicture(item)" v-for="(index , item) in src" :key="index">
-                  <img :src="item.url" class="small_ima" alt="">
-                </li>
-              </ul>
-            </div>
-          </div>
-          <button class="btn_" @click="clone">关闭</button>
-        </div>
-      </div>
-      <!-- 右边放大区域 -->
-        <div class="right_contanier" v-show="isBig">
-          <img :src="middleImg" ref="bigImg" class="big_img" alt="">
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import $ from 'jquery'
-  export default {
-    title: '图片查看器',
-    props: {
-      src: {
-        type: Array
-      },
-      show: {
-        type: Boolean,
-        default: false,
-      },
-      middleImgWidth: {
-        default: 400,
-        type: Number
-      }, // 产品图片宽
-      middleImgHeight: {
-        default: 300,
-        type: Number
-      }, // 产品图片高
-      thumbnailHeight: {
-        default: 80,
-        type: Number
-      }, // 缩略图容器高度
-      zoom: {
-        default: 2, // 缩略比例,放大比例
-        type: Number
-      },
-      width: {
-        default: 80
-      },
-      height: {
-        default: 60
-      },
-      alt: {
-        default: '图片加载失败'
-      },
-      attach: {
-        type: String,
-        default: 'name'
-      }
-    },
-    data () {
-      return {
-        middleImg: '', // 中图图片地址
-        bigImg: '', // 大图图片地址
-        isShade: false, // 控制阴影显示与否
-        isBig: false, // 控制放大图显示与否
-        initX: 0, // 初始clientX值
-        initY: 0, // 初始clientY值
-        leftX: 0, // 初始定位left
-        topY: 0, // 初始定位top
-        middleLeft: 0, // 当前放置小图盒子的定位left值,
-        itemWidth: 80 // 缩略图每张的宽度
-      }
-    },
-    ready () {
-      this.$nextTick(() => {
-        // 容器的高
-        const imgWidth = this.middleImgHeight + this.thumbnailHeight + 120
-        // const imgWidth = 400
-        // 设置容器宽高
-        $('.magnify').css({
-          width: this.middleImgWidth,
-          height: imgWidth
-        })
-        // 设置产品图宽高
-        $('.middle_img').css({
-          width: this.middleImgWidth,
-          height: this.middleImgHeight
-        })
-        // 设置移动阴影图宽高
-        $('.middle_img .shade').css({
-          width: this.middleImgWidth/this.zoom,
-          height: this.middleImgHeight/this.zoom
-        })
-        // 设置缩略图容器高
-        $('.carousel').css({
-          height: this.thumbnailHeight
-        })
-        // 设置每个缩略图宽
-        $('.picture_item').css({
-          width: this.itemWidth
-        })
-        // 设置放大后图片容器的宽高,left
-        $('.right_contanier').css({
-          left: this.middleImgWidth,
-          width: imgWidth,
-          height: imgWidth
-        })
-        // 设置放大图片的宽高(图片的放大倍数)
-        $('.right_contanier .big_img').css({
-          width: imgWidth * this.zoom,
-          height: imgWidth * this.zoom
-        })
-      })
-    },
-    methods: {
-      clone () {
-        console.log('关闭')
-        this.$emit('clone_f')
-      },
-      // 产品图片鼠标移入事件,显示阴影,显示大图
-      boxMouseOver (e) {
-        console.log(9999, e)
-        e.preventDefault();
-        e.stopPropagation();
-        this.isShade = true
-        this.isBig = true
-        // 计算阴影的位置
-        let x = e.offsetX - $('.shade').width()/2
-        let y = e.offsetY - $('.shade').height()/2
-        let maxLeft = $('.middle_img').width() - $('.shade').width()
-        let maxTop = $('.middle_img').height() - $('.shade').height()
-        x = x <= 0 ? 0 : x
-        x = x >= maxLeft ? maxLeft : x
-        y = y <= 0 ? 0 : y
-        y = y >= maxTop ? maxTop : y
-
-        $('.shade').css({
-          left: x,
-          top: y
-        })
-
-      },
-      // 鼠标在阴影移动
-      shadeMouseMove (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        // console.log($('.middle_img')[0].offsetParent.clientLeft)
-        // console.log($('.middle_img')[0].offsetParent.offsetLeft)
-        // 用页面x - 父盒子的offsetLeft - 父盒子的左边框宽度
-        var x = this.getEventPage(e).pageX - $('.middle_img')[0].offsetParent.offsetLeft - $('.middle_img')[0].offsetParent.clientLeft;
-        // var x = this.getEventPage(e).pageX - 312;
-        // 用页面y - 父盒子的offsetTop - 父盒子的上边框宽度
-        // console.log($('.middle_img')[0].offsetParent.offsetTop)
-        var y = this.getEventPage(e).pageY - $('.middle_img')[0].offsetParent.offsetTop - $('.middle_img')[0].offsetParent.clientTop;
-        // var y = this.getEventPage(e).pageY - 109 ;
-
-        // 让阴影的坐标居中
-        x -= $('.shade').width() / 2;
-        y -= $('.shade').height() / 2;
-
-        // 移动边界限制
-        let maxLeft = $('.middle_img').width() - $('.shade').width()
-        let maxTop = $('.middle_img').height() - $('.shade').height()
-        x = x <= 0 ? 0 : x
-        x = x >= maxLeft ? maxLeft : x
-        y = y <= 0 ? 0 : y
-        y = y >= maxTop ? maxTop : y
-        // 重新赋值当前的定位值
-        $('.shade').css({
-          left: x,
-          top: y
-        })
-        // 计算出实时的大图的定位,首先计算出比例
-        // 比例为x:大图宽度/小图宽度 y: 大图高度/小图高度,将小图的定位乘以比例就是大图的定位
-        const xRate = $('.big_img').width() / $('.middle_img').width()
-        const yRate = $('.big_img').height() / $('.middle_img').height()
-        $('.big_img').css({
-          left: -x*xRate,
-          top: -y*yRate
-        })
-        // console.log(e, x, y, xRate, yRate, 66677)
-      },
-      // 鼠标移入阴影,去除自定义事件
-      shadeMouseOver (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        // console.log(88888, e)
-      },
-      // 图片移出隐藏阴影和大图
-      boxMouseLeave (e) {
-        this.isShade = false
-        this.isBig = false
-      },
-      // 切换图片
-      tabPicture (item) {
-        this.middleImg = item.url
-      },
-      /**
-       * 获取网页滚出去的距离（包括上面滚出去的部分和左边滚出去的部分）
-       * @returns {{scrollTop: (Number|number), scrollLeft: (Number|number)}}
-       */
-      getPageScroll() {
-        return {
-          scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
-          scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
-        }
-      },
-      /**
-       * 获取事件对象点击的点，相对于文档左上角的坐标
-       * @param e
-       * @returns {{pageX: *, pageY: *}}
-       */
-      getEventPage(e) {
-        return {
-          pageX: e.clientX + this.getPageScroll().scrollLeft,
-          pageY: e.clientY + this.getPageScroll().scrollTop
-        }
-      }
-    },
-    // 监听图片查看器是否打开 给产品图设默认值
-    watch: {
-      'show'(val) {
-        if (val) {
-          this.middleImg = this.src[0].url
-        }
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .full-img {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 20;
-    background: rgba(0,0,0,0.6);
-    display: flex;
-    overflow: auto;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-  }
-  .bor {
-    /*border: 2px solid #18D797;*/
-    width: 904px;
-    height: 504px;
-  }
-  .magnify {
-    position: relative;
-  }
-  .small_ima {
-    width: 100px;
-    height: 80px;
-    display: inline-block;
-  }
-  .left_contaner {
-    width: 100%;
-    height: 100%;
-  }
-  .left_contaner .middle_img {
-    border: 1px solid #ccc;
-    box-sizing: border-box;
-    position: relative;
-  }
-  .left_contaner .shade {
-    background-color: rgba(    135,206,235, .5);
-    position: absolute;
-    top: 0;
-    left: 0;　cursor: move;}
-  .left_contaner .middle_img img {
-    width: 100%;
-    height: 100%;
-  }
-  .left_contaner .carousel {
-    width: 100%;
-    margin-top: 20px;
-    display: -webkit-flex;
-  }
-  .left_contaner .carousel .show_box {
-    flex: 1;
-    overflow: hidden;
-    position: relative;
-  }
-  .left_contaner .carousel .arrow {
-    flex-basis: 25px;
-    cursor: pointer;
-  }
-  .left_contaner .carousel .picture_container {
-    position: absolute;
-    overflow: hidden;
-    top: 0;
-  }
-  .left_contaner .picture_container .picture_item {
-    height: 100%;
-    float: left;
-    padding: 5px;
-    box-sizing: border-box;
-  }
-  .left_contaner .picture_container .picture_item:hover {
-    border: 2px solid #f2019f;
-  }
-  .right_contanier {
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    border: 1px solid #ccc;
-  }
-  .right_contanier .big_img {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-  }
-  .btn_ {
-    background-color: #6aa6e2;
-    position: absolute;
-    bottom: 11px;
-    left: 13px;
-    width: 55px;
-    height: 35px;
-    border-radius: 5px;
-    border: none;
-  }
-
-</style>

package/src/components/server/PcdBuildingSelect.vue

@@ -1,241 +0,0 @@
-<template>
-  <div :class="style" v-show="show.pcdShow">
-    <label class="font_normal_body">省&nbsp;市&nbsp;区&nbsp;</label>
-    <v-select :value.sync="model.f_pcd"
-              class="select_list select"
-              enter-push
-              v-model="model.f_pcd"
-              style="width: 60%"
-              :multiple="mul"
-              @change="pcdChange"
-              :options='arrays.pcd' placeholder='选择省市区'
-              close-on-select v-el:cc>
-    </v-select>
-  </div>
-  <div :class="style" v-show="show.streetShow">
-    <label class="font_normal_body">街&emsp;&emsp;道</label>
-    <v-select :value.sync="model.f_street"
-              class="select_list select"
-              enter-push
-              v-model="model.f_street"
-              @change="streetChange"
-              style="width: 60%"
-              :multiple="mul"
-              :options='arrays.street' placeholder='选择街道'
-              close-on-select v-el:cc>
-    </v-select>
-  </div>
-  <div :class="style" v-show="show.areaShow">
-    <label class="font_normal_body">小&ensp;&ensp;&ensp;&ensp;区</label>
-    <v-select :value.sync="model.f_residential_area"
-              class="select_list select"
-              enter-push
-              v-model="model.f_residential_area"
-              style="width: 60%"
-              :multiple="mul"
-              @change="areaChange()"
-              :options='arrays.area' placeholder='选择小区'
-              close-on-select v-el:cc>
-    </v-select>
-  </div>
-  <div :class="style" v-show="show.buildingShow">
-    <label class="font_normal_body">楼&emsp;&emsp;栋</label>
-    <v-select :value.sync="model.f_building"
-              class="select_list select"
-              enter-push
-              v-model="model.f_building"
-              style="width: 60%"
-              :multiple="mul"
-              :options='arrays.building' placeholder='选择楼栋'
-              close-on-select v-el:cc>
-    </v-select>
-  </div>
-</template>
-<script>
-  import plugin from '../../plugins/GetLoginInfoService'
-  import { HttpResetClass } from 'vue-client'
-  let readyGen = async function (self) {
-    self.showComponent.find((item)=>{
-      switch(item){
-        case 'pcd': self.show.pcdShow=true; break;
-        case 'street': self.show.streetShow=true; break;
-        case 'area': self.show.areaShow=true; break;
-        case 'building': self.show.buildingShow=true; break;
-      }
-    })
-    self.arrays.pcd=[{label:'全部',value:''}]
-    if(self.show.pcdShow){
-      let HttpReset = new HttpResetClass()
-      var pcd = await HttpReset.load('POST', 'rs/sql/singleTable_OrderBy', {
-        data: {
-          items: 'f_pcd',
-          tablename: 't_pcd',
-          condition: `f_pcd is not null group by f_pcd`,
-          orderitem: 'f_pcd'
-        }
-      }, {resolveMsg: null, rejectMsg: '获取省市区出错!'})
-      for(var i=0;i<pcd.data.length;i++){
-        self.arrays.pcd.push({label:pcd.data[i].f_pcd,value:pcd.data[i].f_pcd})
-      }
-    }else if(self.show.streetShow){
-      console.log("------------查街道")
-      let HttpReset = new HttpResetClass()
-      var street = await HttpReset.load('POST', 'rs/sql/singleTable_OrderBy', {
-        data: {
-          items: 'f_street',
-          tablename: 't_street',
-          condition: `f_filialeid = '${self.$login.f.orgid}' and f_street is not null group by f_street`,
-          orderitem: 'f_street'
-        }
-      }, {resolveMsg: null, rejectMsg: '获取街道出错!'})
-      for(var i=0;i<street.data.length;i++){
-        self.arrays.street.push({label:street.data[i].f_street,value:street.data[i].f_street})
-      }
-    }else if(self.show.areaShow){
-      let HttpReset = new HttpResetClass()
-      var area = await HttpReset.load('POST', 'rs/sql/singleTable_OrderBy', {
-        data: {
-          items: 'f_residential_area',
-          tablename: 't_area',
-          condition: `f_filialeid = '${self.$login.f.orgid}' and f_residential_area is not null group by f_residential_area`,
-          orderitem: 'f_residential_area'
-        }
-      }, {resolveMsg: null, rejectMsg: '获取小区出错!'})
-      for(var i=0;i<area.data.length;i++){
-        self.arrays.area.push({label:area.data[i].f_residential_area,value:area.data[i].f_residential_area})
-      }
-    }
-
-
-  }
-  export default {
-    title: '省市区级联选择',
-    props: {
-      style: {
-        type: String,
-        default: 'col-sm-2 form-group'
-      },
-      mul: {
-        type: Boolean,
-        default: false
-      },
-      showComponent:{
-        default:['pcd','street','area','building']
-      }
-
-    },
-    data () {
-      return {
-        condition:'',
-        show:{
-          pcdShow:false,
-          streetShow:false,
-          areaShow:false,
-          buildingShow:false
-        },
-        arrays:{
-          pcd:[{label: '全部', value: ''}],
-          street:[{label: '全部', value: ''}],
-          area:[{label: '全部', value: ''}],
-          building:[{label: '全部', value: ''}]
-        },
-        model:{
-          f_pcd:[],
-          f_street:[],
-          f_residential_area:[],
-          f_building:[]
-        }
-
-      }
-    },
-    ready () {
-      readyGen(this)
-    },
-    methods:{
-      async pcdChange(){
-        this.arrays.street=[{label:'全部',value:''}]
-        var condition = `f_filialeid = '${this.$login.f.orgid}' and f_street is not null group by f_street`
-        let street = await this.$resetpost('rs/sql/singleTable_OrderBy', {
-          data: {
-            items: 'f_street',
-            tablename: 't_street',
-            condition: condition,
-            orderitem: 'f_street'
-          }
-        }, {resolveMsg: null, rejectMsg: '获取街道出错'})
-        for(var i=0;i<street.data.length;i++){
-          this.arrays.street.push({label:street.data[i].f_street,value:street.data[i].f_street})
-        }
-        this.returnCondition()
-      },
-      async streetChange(){
-        this.arrays.area=[{label:'全部',value:''}]
-        var condition = `f_street = '${this.model.f_street?this.model.f_street:null}' and f_residential_area is not null group by f_residential_area`
-        let area = await this.$resetpost('rs/sql/singleTable_OrderBy', {
-          data: {
-            items: 'f_residential_area',
-            tablename: 't_area',
-            condition: condition,
-            orderitem: 'f_residential_area'
-          }
-        }, {resolveMsg: null, rejectMsg: '获取小区出错'})
-        for(var i=0;i<area.data.length;i++){
-          this.arrays.area.push({label:area.data[i].f_residential_area,value:area.data[i].f_residential_area})
-        }
-        this.returnCondition()
-      },
-      async areaChange(){
-        this.building = [{label:'全部',value:''}]
-        var condition=''
-        if(this.show.areaShow){
-          condition = `f_residential_area = '${this.model.f_residential_area?this.model.f_residential_area:null}' and f_building is not null group by f_building`
-        }else{
-          condition = `f_filialeid = '${this.$login.f.orgid}' and f_building is not null group by f_building`
-        }
-        let build = await this.$resetpost('rs/sql/singleTable_OrderBy', {
-          data: {
-            items: 'f_building',
-            tablename: 't_user_address',
-            condition: condition,
-            orderitem: 'f_building'
-          }
-        }, {resolveMsg: null, rejectMsg: '获取楼栋出错'})
-        for(var i=0;i<build.data.length;i++){
-          this.arrays.building.push({label:build.data[i].f_building,value:build.data[i].f_building})
-        }
-        this.returnCondition()
-      },
-
-      returnCondition(){
-        this.condition=''
-        if(this.model.f_pcd){
-          if(this.model.f_pcd.length>0){
-            this.condition+=` and f_pcd = '${this.model.f_pcd[0]}'`
-          }
-        }
-        if(this.model.f_street) {
-          if (this.model.f_street.length > 0) {
-            this.condition += ` and f_street = '${this.model.f_street[0]}'`
-          }
-        }
-        if(this.model.f_area) {
-          if (this.model.f_area.length > 0) {
-            this.condition += ` and f_area = '${this.model.f_area[0]}'`
-          }
-        }
-        if(this.model.f_building) {
-          if (this.model.f_building.length > 0) {
-            this.condition += ` and f_building = '${this.model.f_building[0]}'`
-          }
-        }
-        // this.$parent.setCon(this.condition)
-        this.$dispatch('setcon',this.condition)
-      }
-    },
-    watch: {
-      // 'condition'(val){
-      //
-      // }
-    }
-  }
-</script>