@tongfun/tf-widget 0.1.5 → 0.1.9

package/package/tf-layout/src/components/tf-right-menu.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    v-show="showMenu"
+    class="tf-right-menu"
+    :style="{ top: top + 'px', left: left + 'px' }"
+  >
+    <p @click="rightMenuClick('closeLeft')">
+      <i class="el-icon-back" /> 关闭左侧
+    </p>
+    <p @click="rightMenuClick('closeRight')">
+      <i class="el-icon-right" /> 关闭右侧
+    </p>
+    <p @click="rightMenuClick('closeOther')">
+      <i class="el-icon-circle-close" /> 关闭其他
+    </p>
+    <p @click="rightMenuClick('closeAll')">
+      <i class="el-icon-circle-close" /> 全部关闭
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    top: {
+      default: 0,
+      type: Number
+    },
+    left: {
+      default: 0,
+      type: Number
+    },
+    showMenu: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    /**
+     * @description 右键点击事件
+     */
+    rightMenuClick (params) {
+      this.$emit('rightMenuClick', params)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tf-right-menu {
+  position: fixed;
+  z-index: 9999;
+  width: 120px;
+  height: 166px;
+  background: white;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  border-radius: 4px;
+  box-sizing: border-box;
+  padding: 10px 0;
+  p {
+    cursor: pointer;
+    height: 36px;
+    margin: 0;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+    color: #606266;
+    &:hover {
+      background: #ecf5ff;
+      color: #46a6ff;
+    }
+  }
+  &::before {
+    content: "";
+    position: absolute;
+    width: 12px;
+    height: 6px;
+    top: -6px;
+    right: 10px;
+    background: white;
+    clip-path: polygon(50% 0px, 100% 100%, 0px 100%);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+    border-radius: 1px;
+  }
+}
+</style>

package/package/tf-layout/src/components/tf-rotate-box.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="tf-rotate-box">
+    <span class="close">
+      <i />
+      <i />
+      <i />
+      <i />
+    </span>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.tf-rotate-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .close {
+    width: 14px;
+    height: 14px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 2px 2px;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s,
+      color 0.1s, font-size 0s;
+    &:hover {
+      transform: rotate(90deg);
+      transform-origin: 50% 50%;
+      i {
+        background: #07579a;
+        &:nth-child(1) {
+          transform: rotate(45deg);
+          transform-origin: 50% 50%;
+        }
+      }
+    }
+    i {
+      margin: 0;
+      height: 6px;
+      width: 6px;
+      background: #9a9a9a;
+    }
+  }
+}
+</style>

package/package/tf-layout/src/tf-layout.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="tf-layout">
+    <TfMenu
+      :menus-info="menusInfo"
+      :menu-state="menuState"
+    />
+    <div class="tf-layout-subject">
+      <TfLaberBar
+        @setCache="setCache"
+        @changeMenuState="changeMenuState"
+        @deleteCache="deleteCache"
+      />
+      <div class="tf-layout-subject-content">
+        <keep-alive :include="secondCacheArray">
+          <router-view />
+        </keep-alive>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TfMenu from './components/tf-menu'
+import TfLaberBar from './components/tf-labelbar'
+export default {
+  name: 'TfLayout',
+  components: {
+    TfMenu,
+    TfLaberBar
+  },
+  props: {
+    menusInfo: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      menuState: false,
+      cacheMap: new Map(),
+      secondCacheArray: [],
+      thirdCacheArr: []
+    }
+  },
+  methods: {
+    changeMenuState(state) {
+      this.menuState = state
+    },
+    setCache (value) {
+      this.cacheMap.set(value[2] || value[1], value[1])
+      this.initCacheArr()
+    },
+    initCacheArr () {
+      this.secondCacheArray.push(
+        ...this.arrayDiff([...this.cacheMap.values()], this.secondCacheArray)
+      )
+      this.thirdCacheArr.push(
+        ...this.arrayDiff([...this.cacheMap.keys()], this.thirdCacheArr)
+      )
+      this.$emit('setSecondCache', this.secondCacheArray)
+      this.$emit('setThirdCache', this.thirdCacheArr)
+    },
+    arrayDiff (arr, arrRaw) {
+      if (Array.isArray(arr)) {
+        return arr.filter((i) => {
+          return arrRaw.indexOf(i) < 0
+        })
+      }
+      return []
+    },
+    deleteCache (value) {
+      if (Array.isArray(value)) {
+        value.forEach((item) => {
+          this.cacheMap.delete(item[2] || item[1])
+          this.thirdCacheArr.splice(
+            this.thirdCacheArr.indexOf(item[2] || item[1]),
+            1
+          )
+          if ([...this.cacheMap.values()].indexOf(item[1]) === -1) {
+            this.secondCacheArray.splice(
+              this.secondCacheArray.indexOf(item[2]),
+              1
+            )
+          }
+        })
+        this.$emit('setSecondCache', this.secondCacheArray)
+        this.$emit('setThirdCache', this.thirdCacheArr)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tf-layout {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  .tf-layout-subject {
+    flex: 1;
+    height: 94.82vh;
+    width: 100%;
+    overflow: hidden;
+    .tf-layout-subject-content {
+      width: 100%;
+      height: calc(100% - 35px);
+      background: rgb(241, 241, 241);
+      box-sizing: border-box;
+      padding: 5px 0 0 0;
+    }
+  }
+}
+</style>

package/package/tf-widget/src/assets/common-input.less

@@ -0,0 +1,11 @@
+// 颜色定义
+@disabledBgColor: #f0f0f5;
+
+::v-deep .el-input__inner[disabled = 'disabled']{
+  background: @disabledBgColor;
+  border-color: @disabledBgColor;
+}
+::v-deep .el-textarea__inner[disabled = 'disabled']{
+  background: @disabledBgColor;
+  border-color: @disabledBgColor;
+}

package/package/tf-widget/src/children/basic-data/basic-data.vue

@@ -12,7 +12,7 @@
       @select="handleSelect"
       @keydown.delete.native="handleDeleteKeyDown"
     >
-      <i slot="suffix" class="el-icon-search" style="cursor: pointer" @click="showDialog" />
+      <i slot="suffix" :class=" disabled ? 'el-icon-lock' : 'el-icon-search' " style="cursor: pointer" @click="showDialog" />
       <template slot-scope="{item}">
         <div>{{ item[displayField] + '   ' + '[' + item.head__code + ']' }}</div>
       </template>
@@ -316,6 +316,7 @@ export default {
 
 <style lang='less' scoped>
 @import "@/assets/styles/common-table.less";
+@import '../../assets/common-input.less';
   .el-autocomplete{
     display:block;
     ::v-deep .el-input__inner{

package/package/tf-widget/src/children/date-time.vue

@@ -80,7 +80,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-
+@import '../assets/common-input.less';
 ::v-deep .el-input__inner{
   width: 100%;
   border: none;

package/package/tf-widget/src/children/date.vue

@@ -79,6 +79,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '../assets/common-input.less';
 ::v-deep .el-input__inner{
   width: 100%;
   border: none;

package/package/tf-widget/src/children/decimal.vue

@@ -10,6 +10,7 @@
       @change="handleInput"
       v-on="$listeners"
     />
+    <!-- <i v-if="disabled" class="el-icon-lock" /> -->
   </div>
 </template>
 <script>
@@ -45,7 +46,8 @@ export default {
   },
   data () {
     return {
-
+      // refName: Math.random().toString().slice(3, 9),
+      // inputWidth: '0'
     }
   },
   watch: {
@@ -66,6 +68,11 @@ export default {
     }
     this.$emit('input', undefined)
   },
+
+  // mounted () {
+  //   this.inputWidth = this.$refs[this.refName].$children[0].$el.clientWidth + 'px'
+  // },
+
   methods: {
     handleInput (value) {
       this.$emit('input', value)
@@ -76,8 +83,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '../assets/common-input.less';
 .decimal{
   width: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
   ::v-deep .el-input{
     height: 100%;
     //margin-top: -0.55vh;
@@ -92,5 +103,13 @@ export default {
     border-radius: 0;
     text-align: left;
   }
+  // .el-icon-lock{
+  //   position: absolute;
+  //   left: calc(var(--inputWidth) - 25px);
+  // }
+  // .el-icon-lock::before{
+  //   color: #C0C4CC;
+  //   font-size: 14px;
+  // }
 }
 </style>

package/package/tf-widget/src/children/integer.vue

@@ -11,6 +11,7 @@
       @change="handleInput"
       v-on="$listeners"
     />
+    <!-- <i v-if="disabled" class="el-icon-lock" /> -->
   </div>
 </template>
 <script>
@@ -38,7 +39,8 @@ export default {
   },
   data () {
     return {
-
+      // refName: Math.random().toString().slice(3, 9),
+      // inputWidth: '0'
     }
   },
   watch: {
@@ -59,6 +61,11 @@ export default {
     }
     this.$emit('input', undefined)
   },
+
+  // mounted () {
+  //   this.inputWidth = this.$refs[this.refName].$children[0].$el.clientWidth + 'px'
+  // },
+
   methods: {
     handleInput (value) {
       this.$emit('input', value)
@@ -69,17 +76,29 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .integer{
+@import '../assets/common-input.less';
+.integer{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  ::v-deep .el-input-number{
     width: 100%;
-    ::v-deep .el-input-number{
-      width: 100%;
-    }
-    ::v-deep .el-input__inner{
-      width: 100%;
-      border: none;
-      border-bottom: 1px solid #DCDCDC;
-      border-radius: 0;
-      text-align: left;
-    }
   }
+  ::v-deep .el-input__inner{
+    width: 100%;
+    border: none;
+    border-bottom: 1px solid #DCDCDC;
+    border-radius: 0;
+    text-align: left;
+  }
+  // .el-icon-lock{
+  //   position: absolute;
+  //   left: calc(var(--inputWidth) - 25px);
+  // }
+  // .el-icon-lock::before{
+  //   color: #C0C4CC;
+  //   font-size: 14px;
+  // }
+}
 </style>

package/package/tf-widget/src/children/single-line-text.vue

@@ -3,9 +3,12 @@
     :value="value"
     :disabled="JSON.parse(disabled) "
     :placeholder="placeholder"
+    :clearable="clearable"
     @input="handleInput"
     v-on="$listeners"
-  />
+  >
+    <i v-if="disabled" class="el-icon-lock el-input__icon" slot="suffix" />
+  </el-input>
 </template>
 <script>
 export default {
@@ -28,6 +31,10 @@ export default {
     defaultValue: {
       type: String,
       default: ''
+    },
+    clearable: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
@@ -65,10 +72,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  ::v-deep .el-input__inner{
-    width: 100%;
-    border: none;
-    border-bottom: 1px solid #DCDCDC;
-    border-radius: 0;
-  }
+@import '../assets/common-input.less';
+::v-deep .el-input__inner{
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #DCDCDC;
+  border-radius: 0;
+}
 </style>

package/package/tf-widget/src/children/small-pictures.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="small-picture">
-    <el-button size="mini" @click="handleClickUploadPicture">点击上传图片</el-button>
+    <el-button size="mini" @click="handleClickUploadPicture" :disabled="disabled">点击上传图片</el-button>
     <el-dialog
       title="图片上传"
       :visible.sync="dialogVisible"
@@ -40,6 +40,10 @@ export default {
     value: {
       type: String,
       default: null
+    },
+    disabled: {
+      type: [Boolean, Object, String],
+      default: null
     }
   },
   data () {

package/package/tf-widget/src/children/text-area.vue

@@ -66,8 +66,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  ::v-deep .el-textarea__inner{
-    width: 100%;
-    height: 100%;
-  }
+@import '../assets/common-input.less';
+::v-deep .el-textarea__inner{
+  width: 100%;
+  height: 100%;
+}
 </style>

package/package/tf-widget/src/children/tf-select.vue

@@ -1,8 +1,16 @@
 <template>
   <div class="tf-select">
-    <el-select :value="selectId" filterable clearable :placeholder="placeholder" :disabled="JSON.parse(disabled)" style="display:block" @input="change" @change="$emit('change', $event)">
+    <el-select v-if="!disabled" :value="selectId" filterable clearable :placeholder="placeholder" :disabled="JSON.parse(disabled)" style="display:block" @input="change" @change="$emit('change', $event)">
       <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
     </el-select>
+    <el-input
+      v-else
+      :value="value ? value.name : ''"
+      :disabled="true"
+      :placeholder="placeholder"
+    >
+      <i class="el-icon-lock el-input__icon" slot="suffix" />
+    </el-input>
   </div>
 </template>
 <script>
@@ -95,10 +103,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  ::v-deep .el-input__inner{
-    width: 100%;
-    border: none;
-    border-bottom: 1px solid #DCDCDC;
-    border-radius: 0;
-  }
+@import '../assets/common-input.less';
+::v-deep .el-input__inner{
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #DCDCDC;
+  border-radius: 0;
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tongfun/tf-widget",
-  "version": "0.1.5",
+  "version": "0.1.9",
   "description": "tf-widget",
   "main": "lib/tf-widget.umd.js",
   "private": false,
@@ -20,8 +20,10 @@
     "js-base64": "^3.6.0",
     "less": "^4.1.0",
     "less-loader": "^7.2.1",
+    "sortablejs": "^1.13.0",
     "vue": "^2.6.11",
-    "sortablejs": "^1.13.0"
+    "vue2-datepicker": "^3.10.4",
+    "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

package/postinstall.js

@@ -1,10 +1,10 @@
-
-const BANNER = '\u001B[96mThank you for using tf-widget for polyfilling JavaScript standard library!\u001B[0m\n\n' +
-             '\u001B[96mWe need the best of you! Come and join us\n\n' +
-             '\u001B[96mWe are waiting for you\n'
-
-function showBanner () {
-  console.log(BANNER)
-}
-
-showBanner()
+
+const BANNER = '\u001B[96mThank you for using tf-widget for polyfilling JavaScript standard library!\u001B[0m\n\n' +
+             '\u001B[96mWe need the best of you! Come and join us\n\n' +
+             '\u001B[96mWe are waiting for you\n'
+
+function showBanner () {
+  console.log(BANNER)
+}
+
+showBanner()

package/src/api/file-enclosure.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request.js'
+
+/**
+ * 删除附件
+ * @param {id} 删除附件的id
+ */
+export function delAttachment (id) {
+  return request({
+    url: `/api/file/attachment/?ids[]=${id}`,
+    method: 'delete'
+  })
+}
+
+/**
+ * 下载附件
+ * @param {id} 下载附件的id
+ */
+
+// 根据id下载附件
+export function download (id) {
+  return request({
+    url: `/api/file/attachment/download/${id}`,
+    method: 'get',
+    responseType: 'arraybuffer'
+  })
+}

package/src/api/push-down.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 查询所有下推的单据
+export function findBillExchangeRouterVO (params) {
+  return request({
+    url: '/api/report/billExchange/findBillExchangeRouterVO',
+    method: 'get',
+    params
+  })
+}
+
+// 下推时获取数据
+export function getDataWhenAdd (params) {
+  return request({
+    url: '/api/report/billExchange/doExchange',
+    method: 'Get',
+    params
+  })
+}