hd-idevvue3 3.0.2 → 3.0.4

package/src/hdcom/GridShow.vue

@@ -1,43 +1,70 @@
 <template>
-  <el-dialog title="展示设置" :visible.sync="visible" width='50%' append-to-body top="2vh">
+  <el-dialog
+    title="展示设置"
+    :visible.sync="visible"
+    width="50%"
+    append-to-body
+    top="2vh"
+  >
     <el-container style="height: 80vh; border: 1px solid #eee">
       <el-main class="gridShow">
         <el-table :data="list" row-key="property">
-          <el-table-column align="center" label="名称" prop="label" width="150" noQuery>
+          <el-table-column
+            align="center"
+            label="名称"
+            prop="label"
+            width="150"
+            noQuery
+          >
           </el-table-column>
-          <el-table-column align="center" label="宽度(px)" prop="width" width="150" noQuery>
+          <el-table-column
+            align="center"
+            label="宽度(px)"
+            prop="width"
+            width="150"
+            noQuery
+          >
             <template slot-scope="scope">
               <hd-num v-model.number="scope.row.width" :step="10"></hd-num>
             </template>
           </el-table-column>
           <el-table-column align="center" label="展示" prop="showFlg" noQuery>
             <template slot-scope="scope">
-              <el-switch v-model="scope.row.showFlg" active-value="1" inactive-value="0"></el-switch>
+              <el-switch
+                v-model="scope.row.showFlg"
+                active-value="1"
+                inactive-value="0"
+              ></el-switch>
             </template>
           </el-table-column>
           <el-table-column align="center" label="冻结" prop="freezeFlg" noQuery>
             <template slot-scope="scope">
-              <el-switch v-model="scope.row.freezeFlg" active-value="1" inactive-value="0"></el-switch>
+              <el-switch
+                v-model="scope.row.freezeFlg"
+                active-value="1"
+                inactive-value="0"
+              ></el-switch>
             </template>
           </el-table-column>
           <el-table-column align="center" label="排序" width="80" noQuery>
             <template slot-scope="scope">
-              <svg-icon class='drag-handler' icon-class="drag"></svg-icon>
+              <svg-icon class="drag-handler" icon-class="drag"></svg-icon>
             </template>
           </el-table-column>
         </el-table>
-
       </el-main>
     </el-container>
     <div slot="footer" class="dialog-footer">
       <el-button @click="reset">{{ $t('重置') }}</el-button>
       <el-button @click="visible = false">{{ $t('取 消') }}</el-button>
-      <el-button type="primary" @click="submit" :loading="loading"> {{ $t('确 定') }}</el-button>
+      <el-button type="primary" @click="submit" :loading="loading">
+        {{ $t('确 定') }}</el-button
+      >
     </div>
   </el-dialog>
 </template>
-<script>
 
+<script>
 import Sortable from 'sortablejs'
 
 export default {
@@ -53,9 +80,8 @@ export default {
       loading: false,
       menuId: '',
       gridId: '',
-      specCkForGrid: true // HdTableColumn判断是否来自HdGrid用
+      specCkForGrid: true, // HdTableColumn判断是否来自HdGrid用
       // shipId: ""
-
     }
   },
   mounted() {
@@ -66,42 +92,50 @@ export default {
       this.menuId = menuId
       this.gridId = gridId
       this.visible = true
-      this.list = JSON.parse(JSON.stringify(disCol.filter(item => item.property)))// 判断有property的展示,使用复制采用新对象(否则chrome有问题)
+      this.list = JSON.parse(
+        JSON.stringify(disCol.filter((item) => item.property))
+      ) // 判断有property的展示,使用复制采用新对象(否则chrome有问题)
       // console.log('list',this.list)
       //过滤掉子序列
-      this.list.forEach(v => v.children = []);
-      this.oldList = this.list.map(v => v.property)
+      this.list.forEach((v) => (v.children = []))
+      this.oldList = this.list.map((v) => v.property)
       this.newList = this.oldList.slice() //清空
       this.$nextTick(() => {
         this.setSort()
       })
     },
     setSort() {
-      const elAll = document.querySelectorAll('.gridShow .el-table__body-wrapper > table > tbody')
+      const elAll = document.querySelectorAll(
+        '.gridShow .el-table__body-wrapper > table > tbody'
+      )
       for (let i = 0; i < elAll.length; i++) {
         const el = elAll[i]
         this.sortable = Sortable.create(el, {
           ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
-          onEnd: evt => {
+          onEnd: (evt) => {
             const targetRow = this.list.splice(evt.oldIndex, 1)[0]
             this.list.splice(evt.newIndex, 0, targetRow)
 
             // for show the changes, you can delete in you code
             const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
             this.newList.splice(evt.newIndex, 0, tempIndex)
-          }
+          },
         })
       }
     },
     submit() {
-      const url = '/webresources/login/com/ComGridShow/save?menuId=' + this.menuId + '&gridId=' + this.gridId
+      const url =
+        '/webresources/login/com/ComGridShow/save?menuId=' +
+        this.menuId +
+        '&gridId=' +
+        this.gridId
       this.loading = true
-      this.$http.post(url, this.list).then(response => {
+      this.$http.post(url, this.list).then((response) => {
         this.loading = false
         const data = response.data
         this.$message({
           type: data.code == '-1' ? 'error' : 'success',
-          message: data.message
+          message: data.message,
         })
         if (data.code == '-1') {
           return
@@ -112,12 +146,13 @@ export default {
     },
     reset() {
       //江阴港特色，重置需要弹窗确认框，确认后方可重置
-      let resetFlag = this.$store.state.app.sysParam.JYG_CONTROL.RESET_BUTTON_CONFIRM
+      let resetFlag =
+        this.$store.state.app.sysParam.JYG_CONTROL.RESET_BUTTON_CONFIRM
       if (resetFlag && resetFlag == '1') {
         this.$confirm('是否确认重置？', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
-          type: 'warning'
+          type: 'warning',
         }).then(() => {
           // 确定
           this.resetColumn()
@@ -127,12 +162,16 @@ export default {
       }
     },
     resetColumn() {
-      const url = '/webresources/login/com/ComGridShow/reset?menuId=' + this.menuId + '&gridId=' + this.gridId
-      this.$http.post(url, this.list).then(response => {
+      const url =
+        '/webresources/login/com/ComGridShow/reset?menuId=' +
+        this.menuId +
+        '&gridId=' +
+        this.gridId
+      this.$http.post(url, this.list).then((response) => {
         const data = response.data
         this.$message({
           type: data.code == '-1' ? 'error' : 'success',
-          message: data.message
+          message: data.message,
         })
         if (data.code == '-1') {
           return
@@ -140,15 +179,14 @@ export default {
         this.visible = false
         this.$emit('save-ok')
       })
-    }
-
-  }
+    },
+  },
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style lang="scss" rel="stylesheet/scss">
 .sortable-ghost {
-  opacity: .8;
+  opacity: 0.8;
   color: #fff !important;
   background: #42b983 !important;
 }
@@ -167,19 +205,27 @@ export default {
       padding-bottom: 30px;
     }
 
-    .el-table__header-wrapper th { //列表标题
+    .el-table__header-wrapper th {
+      //列表标题
       background-color: #f6f6f6;
     }
 
-    .el-table__fixed-header-wrapper th { //固定的列表标题
+    .el-table__fixed-header-wrapper th {
+      //固定的列表标题
       background-color: #8cbda4;
     }
 
-    td, th { //列表标题及内容
+    td,
+    th {
+      //列表标题及内容
       padding: 2px 0;
     }
 
-    .cell, .el-table th div, .el-table--border th:first-child .cell, .el-table--border td:first-child .cell { //列表的margin
+    .cell,
+    .el-table th div,
+    .el-table--border th:first-child .cell,
+    .el-table--border td:first-child .cell {
+      //列表的margin
       padding-left: 2px !important;
       padding-right: 2px !important;
     }
@@ -188,10 +234,11 @@ export default {
       position: static;
       text-align: center;
       width: 100%;
-      height: 80%
+      height: 80%;
     }
 
-    .el-table__body { //列表下面加了空白
+    .el-table__body {
+      //列表下面加了空白
       margin-bottom: 10px;
     }
 
@@ -205,7 +252,10 @@ export default {
       margin-bottom: 0px;
     }
 
-    .el-input, .el-form-item__content, .el-form-item__label, .el-input__icon {
+    .el-input,
+    .el-form-item__content,
+    .el-form-item__label,
+    .el-input__icon {
       line-height: 30px;
     }
 
@@ -213,12 +263,12 @@ export default {
       padding: 5px;
     }
 
-    .el-input--prefix .el-input__inner { //日期的有logo不一样
+    .el-input--prefix .el-input__inner {
+      //日期的有logo不一样
       padding-left: 30px;
     }
   }
 }
-
 </style>
 
 <style scoped>

package/src/hdcom/HdAside.vue

@@ -1,178 +1,225 @@
 <template>
-  <ExAside :width="nowWidth" ref="aside" style="display: flex;">
+  <ExAside :width="nowWidth" ref="aside" style="display: flex">
     <div class="hdAside">
       <template v-if="title">
-        <div class="hd-title" v-show="!isShrink">{{$t(title)}}
+        <div class="hd-title" v-show="!isShrink">
+          {{ $t(title) }}
           <slot name="title"></slot>
-          <div align="right" style="margin: -15px 10px 0px 0px;" v-if="arrowShow">
-            <i @click="isShrink?doShrink(false):doShrink(true)"
-               style="cursor:pointer;" v-bind:class="['fa', isShrink?'fa-chevron-right':'fa-chevron-left']">
+          <div
+            align="right"
+            style="margin: -15px 10px 0px 0px"
+            v-if="arrowShow"
+          >
+            <i
+              @click="isShrink ? doShrink(false) : doShrink(true)"
+              style="cursor: pointer"
+              v-bind:class="[
+                'fa',
+                isShrink ? 'fa-chevron-right' : 'fa-chevron-left',
+              ]"
+            >
             </i>
           </div>
         </div>
       </template>
       <div class="hd-title" v-show="isShrink">
-        <i @click="isShrink?doShrink(false):doShrink(true)"
-           style="cursor:pointer;" v-bind:class="['fa', isShrink?'fa-chevron-right':'fa-chevron-left']">
+        <i
+          @click="isShrink ? doShrink(false) : doShrink(true)"
+          style="cursor: pointer"
+          v-bind:class="[
+            'fa',
+            isShrink ? 'fa-chevron-right' : 'fa-chevron-left',
+          ]"
+        >
         </i>
       </div>
-      <div style="flex:1;position: relative;height:100%; width: 100%" v-show="!isShrink">
-        <div style="position: absolute; width: 100%;height: 100%;">
+      <div
+        style="flex: 1; position: relative; height: 100%; width: 100%"
+        v-show="!isShrink"
+      >
+        <div style="position: absolute; width: 100%; height: 100%">
           <slot></slot>
         </div>
       </div>
     </div>
-    <div :class="{asideDrag:true,dragShowCls:dragShow}" @mousedown="mousedown($event)" @mouseout="dragShow=false"
-         @mouseover="dragShow=true" v-if="!noDrag"></div>
-    <div class="moveline" ref="moveline" v-show="dragFrom!=null"></div>
+    <div
+      :class="{ asideDrag: true, dragShowCls: dragShow }"
+      @mousedown="mousedown($event)"
+      @mouseout="dragShow = false"
+      @mouseover="dragShow = true"
+      v-if="!noDrag"
+    ></div>
+    <div class="moveline" ref="moveline" v-show="dragFrom != null"></div>
   </ExAside>
 </template>
 
 <script>
+/**
+ * 覆写ElAside,增加拖动和title
+ * @module HdAside
+ */
+export default {
+  name: 'HdAside',
+  component: {},
+  inheritAttrs: false,
   /**
-   * 覆写ElAside,增加拖动和title
-   * @module HdAside
+   * Props 继承ELAside属性和事件,如果仅需要elementui的ElAside请使用ExAside
+   * 插槽:<slot name="title"></slot> title进行额外扩展如增加按钮等
+   * @prop {String} title 标题
+   * @prop {String} width 禁止在style中写width
+   * @prop {Boolen} arrowShow 是否显示一键收缩
+   * @prop {Boolen} noDrag 是否可拖动,默认否
+   * @prop {String} showType 字符串:"1" 普通 2 收缩 3 全屏
+   *
    */
-  export default {
-    name: 'HdAside',
-    component: {},
-    inheritAttrs: false,
-    /**
-     * Props 继承ELAside属性和事件,如果仅需要elementui的ElAside请使用ExAside
-     * 插槽:<slot name="title"></slot> title进行额外扩展如增加按钮等
-     * @prop {String} title 标题
-     * @prop {String} width 禁止在style中写width
-     * @prop {Boolen} arrowShow 是否显示一键收缩
-     * @prop {Boolen} noDrag 是否可拖动,默认否
-     * @prop {String} showType 字符串:"1" 普通 2 收缩 3 全屏
-     *
-     */
-    props: {
-      width: String,
-      title: String, arrowShow: {type: Boolean, default: true},
-      noDrag: {type: Boolean, default: false},
-      showType: {type: String, default: '1'} // 注意是字符串:"1" 普通 2 收缩 3 全屏
-    },
-    data() {
-      return {
-        isShrink: false, // 收缩还是展开
-        isFull: false,// 是否全屏
-        differ: 0,//鼠标点击的位置与元素上级位置的差
-        dragFrom: null, //开始点击的点
-        inputWidth: 0, //第一次进来时的,宽度
-        nowWidth: '300px',//无设置默认300px
-        dragShow: false
-
+  props: {
+    width: String,
+    title: String,
+    arrowShow: { type: Boolean, default: true },
+    noDrag: { type: Boolean, default: false },
+    showType: { type: String, default: '1' }, // 注意是字符串:"1" 普通 2 收缩 3 全屏
+  },
+  data() {
+    return {
+      isShrink: false, // 收缩还是展开
+      isFull: false, // 是否全屏
+      differ: 0, //鼠标点击的位置与元素上级位置的差
+      dragFrom: null, //开始点击的点
+      inputWidth: 0, //第一次进来时的,宽度
+      nowWidth: '300px', //无设置默认300px
+      dragShow: false,
+    }
+  },
+  mounted() {
+    if (this.width) {
+      this.nowWidth = this.width
+    }
+    this.inputWidth = this.nowWidth
+  },
+  methods: {
+    doShrink(isShrink) {
+      this.isShrink = isShrink
+      this.isFull = false // 收缩时,全屏还原
+      if (isShrink) {
+        this.$emit('update:showType', '2')
+        this.nowWidth = '15px'
+      } else {
+        //点还原按钮
+        this.$emit('update:showType', '1')
+        this.nowWidth = this.inputWidth
       }
     },
-    mounted() {
-      if (this.width) {
-        this.nowWidth = this.width
+    doFullScreen(isFull) {
+      // 全屏
+      this.isFull = isFull
+      this.isShrink = false //
+      if (isFull) {
+        this.$emit('update:showType', '3')
+        this.nowWidth = '100%'
+      } else {
+        this.$emit('update:showType', '1')
+        this.nowWidth = this.inputWidth
       }
-      this.inputWidth = this.nowWidth
     },
-    methods: {
-      doShrink(isShrink) {
-        this.isShrink = isShrink
-        this.isFull = false // 收缩时,全屏还原
-        if (isShrink) {
-          this.$emit('update:showType', '2')
-          this.nowWidth = '15px'
-        } else {//点还原按钮
-          this.$emit('update:showType', '1')
-          this.nowWidth = this.inputWidth
-        }
-      },
-      doFullScreen(isFull) { // 全屏
-        this.isFull = isFull
-        this.isShrink = false //
-        if (isFull) {
-          this.$emit('update:showType', '3')
-          this.nowWidth = "100%"
-        } else {
-          this.$emit('update:showType', '1')
-          this.nowWidth = this.inputWidth
-        }
-      },
-      mousedown: function (event) {
-        this.$set(this.$store.state, 'hotKey', "-1") //避免热键样式影响体验
-        this.dragFrom = event.x
-        this.$refs.moveline.style.left = this.dragFrom + "px"
-        document.documentElement.addEventListener('mousemove', this.handleMove, true)
-        document.documentElement.addEventListener('mouseup', this.handleMouseup, true)
-      },
-      handleMove: function (event) {
-        this.$refs.moveline.style.left = event.x + "px"
-      },
-      handleMouseup: function (event) {
-        document.documentElement.removeEventListener('mousemove', this.handleMove, true)
-        document.documentElement.removeEventListener('mouseup', this.handleMouseup, true)
-        let newWidth = this.$refs.aside.$el.offsetWidth + event.x - this.dragFrom
-        this.nowWidth = newWidth + 'px';
-        this.dragFrom = null
-        this.$set(this.$store.state, 'hotKey', null) //避免热键样式影响体验
-        if (newWidth <= 100) { // 少于一定宽度自动收缩
-          this.doShrink(true)
-        }
-        if (newWidth >= 150) { // 少于一定宽度自动收缩
-          this.isShrink = false
-        }
-      },
+    mousedown: function (event) {
+      this.$set(this.$store.state, 'hotKey', '-1') //避免热键样式影响体验
+      this.dragFrom = event.x
+      this.$refs.moveline.style.left = this.dragFrom + 'px'
+      document.documentElement.addEventListener(
+        'mousemove',
+        this.handleMove,
+        true
+      )
+      document.documentElement.addEventListener(
+        'mouseup',
+        this.handleMouseup,
+        true
+      )
     },
-    watch: {
-      // 如果 `activeName` 发生改变，这个函数就会运行
-      showType: {
-        immediate: true,
-        handler:
-          function (newVal) {
-            this.$nextTick(() => {
-              if (newVal == '1') { // 第一次显示查询,以后不查询
-                this.doShrink(false)
-              } else if (newVal == '2') { // 第一次显示查询,以后不查询
-                this.doShrink(true)
-              } else if (newVal == '3') { // 第一次显示查询,以后不查询
-                this.doFullScreen(true)
-              }
-            })
+    handleMove: function (event) {
+      this.$refs.moveline.style.left = event.x + 'px'
+    },
+    handleMouseup: function (event) {
+      document.documentElement.removeEventListener(
+        'mousemove',
+        this.handleMove,
+        true
+      )
+      document.documentElement.removeEventListener(
+        'mouseup',
+        this.handleMouseup,
+        true
+      )
+      let newWidth = this.$refs.aside.$el.offsetWidth + event.x - this.dragFrom
+      this.nowWidth = newWidth + 'px'
+      this.dragFrom = null
+      this.$set(this.$store.state, 'hotKey', null) //避免热键样式影响体验
+      if (newWidth <= 100) {
+        // 少于一定宽度自动收缩
+        this.doShrink(true)
+      }
+      if (newWidth >= 150) {
+        // 少于一定宽度自动收缩
+        this.isShrink = false
+      }
+    },
+  },
+  watch: {
+    // 如果 `activeName` 发生改变，这个函数就会运行
+    showType: {
+      immediate: true,
+      handler: function (newVal) {
+        this.$nextTick(() => {
+          if (newVal == '1') {
+            // 第一次显示查询,以后不查询
+            this.doShrink(false)
+          } else if (newVal == '2') {
+            // 第一次显示查询,以后不查询
+            this.doShrink(true)
+          } else if (newVal == '3') {
+            // 第一次显示查询,以后不查询
+            this.doFullScreen(true)
           }
+        })
       },
-      nowWidth(val) {
-        this.$emit('update:width', val);
-      },
-      width(val) {
-        this.nowWidth = val
-      }
-    }
-  }
-
+    },
+    nowWidth(val) {
+      this.$emit('update:width', val)
+    },
+    width(val) {
+      this.nowWidth = val
+    },
+  },
+}
 </script>
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .hdAside {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
 
-  .asideDrag {
-    width: 5px;
-    height: 100%;
-    overflow: hidden;
-    cursor: ew-resize;
-    user-select: none;
-  }
+<style lang="scss" rel="stylesheet/scss" scoped>
+.hdAside {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.asideDrag {
+  width: 5px;
+  height: 100%;
+  overflow: hidden;
+  cursor: ew-resize;
+  user-select: none;
+}
 
-  .moveline {
-    width: 5px;
-    height: 100%;
-    overflow: hidden;
-    position: fixed;
-    cursor: ew-resize;
-    background-color: red;
-    z-index: 9999;
-    user-select: none;
-  }
+.moveline {
+  width: 5px;
+  height: 100%;
+  overflow: hidden;
+  position: fixed;
+  cursor: ew-resize;
+  background-color: red;
+  z-index: 9999;
+  user-select: none;
+}
 
-  .dragShowCls {
-    background-color: #409EFF;
-  }
+.dragShowCls {
+  background-color: #409eff;
+}
 </style>