system-clients 3.1.91-aode → 3.1.91

package/src/components/equipment/PosParamManage.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="flex-row">
+    <div :class="{'basic-main':!isChange,'binary-left':isChange}">
+      <pos-param-list v-ref:list></pos-param-list>
+    </div>
+    <div class="binary-right" style="margin-left: 10px; width: 40%;" v-if="isChange">
+      <pos-param-add :param_id="param_id" v-ref:add></pos-param-add>
+    </div>
+  </div>
+</template>
+<script>
+
+import PosParamList from './PosParamList'
+import PosParamAdd from './PosParamAdd'
+
+export default {
+  title: 'POS终端管理',
+  components: {
+    PosParamList, PosParamAdd
+  },
+  data() {
+    return {
+      isChange: false,
+      param_id: ''
+    }
+  },
+  methods: {},
+  events: {
+    'add'() {
+      this.isChange = true
+      setTimeout(() => {
+        this.$refs.add.initModel()
+      }, 100)
+    },
+    'close'() {
+      this.isChange = false
+    },
+    'research'() {
+      this.$refs.list.search()
+      this.isChange = false
+    },
+    'modify'(row) {
+      this.isChange = true
+      setTimeout(() => {
+        this.$refs.add.curorgid = []
+        this.$refs.add.edit(row.f_param_id)
+      }, 100)
+    }
+  }
+}
+</script>

package/src/components/parammanage/ParamManage.vue

@@ -1,9 +1,9 @@
 <template>
-  <div id="unit" class="flex-row">
+  <div id="unit" class="flex-row" :style="{width: messlist==='mess' ? '50%' : '100%'}">
     <div class="binary-left">
       <param-page></param-page>
     </div>
-    <div class="binary-right">
+    <div class="binary-right" :style="{width: messlist==='mess' ? '50%' : '60%'}">
       <single-page></single-page>
     </div>
   </div>

package/src/components/parammanage/ParamPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
     <p class="bg-info text-center" style="padding: 8px;">参数管理
-      <span class="btn btn-link add-postition" @click="add('t_parameter')">新增</span>
+      <button type="button" name="button" class="button_search button_spacing width-60" @click="add('t_parameter')" style="float:right">新增</button>
     </p>
     <div class="auto">
       <form class="form-horizontal" style="margin-bottom: 5px;">
@@ -25,7 +25,7 @@
       </form>
     </div>
     <div class="span">
-      <data-grid :model="model" v-ref:params @select-changed="selected" class="list_area table_sy">
+      <data-grid :model="model" v-ref:params @select-changed="selected">
         <template partial='head'>
           <tr>
             <th>序号</th>
@@ -39,9 +39,9 @@
           <td style="text-align:center">{{row.name}}</td>
           <td style="text-align:center">{{row.orgname ? row.orgname + '专用' : '全局'}}</td>
           <td class="flex-around">
-            <button type="button" name="button" class="btn btn-link"
+            <button type="button" name="button" class="button_search button_spacing width-60"
                     @click.stop="$parent.$parent.modifyParam(row, 't_parameter')">修改</button>
-            <button type="button" name="button" class="btn btn-link"
+            <button type="button" name="button" class="btn btn-danger"
                     @click.stop="$parent.$parent.deleteParam(row, 't_parameter')">删除</button>
           </td>
         </template>
@@ -50,7 +50,7 @@
 
     <p v-if="selectItem" class="bg-info text-center" style="padding: 8px;margin: 8px 0px;">
       {{selectItem.name}}
-      <span class="btn btn-link add-postition" @click="add('t_paramvalue')">新增</span>
+      <button type="button" name="button" class="button_search button_spacing width-60" @click="add('t_paramvalue')" style="float:right">新增</button>
     </p>
     <div v-if="selectItem" class="span">
       <data-grid :model="params" v-ref:selects >
@@ -65,8 +65,8 @@
           <td style="text-align:center">{{$index+1}}</td>
           <td style="text-align:center">{{row.name}}</td>
           <td class="flex-around">
-            <button type="button" name="button" class="btn btn-link" @click.stop="$parent.$parent.modifyParam(row, 't_paramvalue')">修改</button>
-            <button type="button" name="button" class="btn btn-link" @click.stop="$parent.$parent.deleteParam(row, 't_paramvalue')">删除</button>
+            <button type="button" name="button" class="button_search button_spacing width-60" @click.stop="$parent.$parent.modifyParam(row, 't_paramvalue')">修改</button>
+            <button type="button" name="button" class="btn btn-danger" @click.stop="$parent.$parent.deleteParam(row, 't_paramvalue')">删除</button>
           </td>
         </template>
       </data-grid>

package/src/components/parammanage/SinglePage.vue

@@ -2,7 +2,7 @@
   <div class="flex">
     <p  class="bg-info text-center" style="padding: 8px;">
       单值管理
-      <span class="btn btn-link add-postition" @click="add()">新增</span>
+      <button type="button" name="button" class="button_search button_spacing width-60 " @click="add()" style="float:right">新增</button>
     </p>
     <div class="auto">
       <form class="form-horizontal" style="margin-bottom: 5px;">
@@ -27,7 +27,7 @@
     </div>
     <div class="span">
       <partial-view v-ref:single-load>
-        <data-grid :model="model" v-ref:grid class="list_area table_sy">
+        <data-grid :model="model" v-ref:grid >
           <template partial='head'>
             <tr>
               <th>序号</th>
@@ -43,9 +43,9 @@
             <td style="text-align:center">{{row.value}}</td>
             <td style="text-align:center">{{row.orgname ? row.orgname + '专用' : '全局'}}</td>
             <td class="flex-around">
-              <button type="button" name="button" class="btn btn-link"
+              <button type="button" name="button" class="button_search button_spacing width-60"
                       @click.stop="$parent.$parent.$parent.modifyParam(row)">修改</button>
-              <button type="button" name="button" class="btn btn-link"
+              <button type="button" name="button" class="btn btn-danger"
                       @click.stop="$parent.$parent.$parent.deleteItem(row)">删除</button>
             </td>
           </template>

package/src/components/server/ImageVieweTest.vue

@@ -0,0 +1,56 @@
+<template>
+    <div id="app">
+      <!-- 图片放大镜,需要自定义图片的宽高在这里传入,组件有设置默认的宽高,不传也可以 -->
+      <h4>这是父组件</h4>
+      <h4>安检总体照片</h4>
+     <!-- <button @click="show">显示</button>-->
+      <!--<img :src="src" @click="show" style="width: 80px;height: 80px" >-->
+      <div style="width: 500px; height: 500px;">
+        <button class="btn-default btn" @click="show_p">查看图片</button>
+      <image-viewer :src="src" :show="show_msg" @clone_f="clone_p" alt="总体安检照片"></image-viewer>
+      <h4>用户签名</h4>
+      <h4>用户签名</h4>
+      </div>
+     </div>
+
+</template>
+<script>
+  export default {
+    name: 'app',
+    title: '图片测试',
+    data () {
+      return {
+        show_msg: false,
+        src: [],
+        src1: [
+          {url: 'http://139.9.137.3:8400/rs/image/file/cfdf411d77df828301a56731df655f28-f_overall_path.jpg'},
+          {url: 'http://mp.ofweek.com/Upload/News/Img/member645/201711/17170046839337.jpg'}
+        ],
+        src2: [
+          {url: 'http://image.buy.ccb.com/merchant/201703/904919627/1522929521661_4.jpg'}
+        ],
+        src3: [
+          {url: 'http://d.ifengimg.com/w600/p0.ifengimg.com/pmop/2017/1213/A4037864F6728F006B67AAEC51EC8A485F320FD2_size93_w1024_h734.jpeg'}
+        ]
+      }
+    },
+    methods: {
+      show_p () {
+        console.log('调用图片查看器')
+        // 传要查看的图片
+        this.src = this.src1
+        console.log(this.src)
+        // 显示组件
+        this.show_msg = true
+      },
+      clone_p () {
+        // 关闭组件
+        this.show_msg = false
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/server/ImageViewer.vue

@@ -0,0 +1,350 @@
+<!--父组件调用时需要写一个按钮和两个方法  一个方法用来显示组件和传图片  另一个方法用来关闭此组件
+  具体用法参照 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>