@tongfun/tf-widget 0.1.4 → 0.1.8-beta

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

@@ -0,0 +1,104 @@
+<template>
+  <div class="tf-layout">
+    <TfMenu :menu-info="menuInfo" />
+    <div class="tf-layout-subject">
+      <TfLaberBar @setCache="setCache" @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: {
+    menuInfo: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      cacheMap: new Map(),
+      secondCacheArray: [],
+      thirdCacheArr: []
+    }
+  },
+  methods: {
+    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) => {
+          console.log(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
+            )
+          }
+          console.log(this.cacheMap.get(item[2] || item[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: 100%;
+    width: 100vw;
+    .tf-layout-subject-content {
+      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>
@@ -35,7 +35,7 @@
   </div>
 </template>
 <script>
-import { getBasicDataSearchAdvice } from '@/api/edit.js'
+import { getBasicDataSearchAdvice, getFormData } from '@/api/edit.js'
 import BasicDataSelector from './dependcy/basic-data-selector.vue'
 export default {
   components: {
@@ -141,14 +141,40 @@ export default {
     }
   },
   created () {
-    if (this.defaultValue && !this.value) {
-      return this.handleInput(this.defaultValue)
+    if (this.defaultValue && (!this.value || this.value.id === '')) {
+      return this.handleDefaultValue()
     }
     if (!this.value) {
       this.$emit('input', { name: '', id: null })
     }
   },
   methods: {
+
+    /**
+     * 根据默认值id获取数据
+     */
+    handleDefaultValue () {
+      const interval = setInterval(async () => {
+        if (this.tableId) {
+          clearInterval(interval)
+          const data = {
+            entityMark: '',
+            id: this.defaultValue,
+            pageNum: 1,
+            pageSize: 1,
+            tableId: this.tableId
+          }
+          const res = await getFormData(data)
+          if (res.code === 0) {
+            const data = {
+              id: this.defaultValue,
+              name: res.data[res.data.headIdentification].name
+            }
+            this.$emit('input', data)
+          }
+        }
+      }, 50)
+    },
     /**
      * dialog关闭和确定处理函数
      */
@@ -290,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.4",
+  "version": "0.1.8-beta",
   "description": "tf-widget",
   "main": "lib/tf-widget.umd.js",
   "private": false,

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/index.js

@@ -1,10 +1,11 @@
 
 import TfWidget from '../package/tf-widget'
 import SvgIcon from '../package/svg-icon'
-
+import TfLayout from '../package/tf-layout'
 const components = [
   TfWidget,
-  SvgIcon
+  SvgIcon,
+  TfLayout
 ]
 
 const install = function (Vue) {
@@ -16,5 +17,6 @@ const install = function (Vue) {
 export default {
   install,
   TfWidget,
-  SvgIcon
+  SvgIcon,
+  TfLayout
 }

package/src/utils/request.js

@@ -14,9 +14,12 @@ const service = axios.create({
 // request interceptor
 service.interceptors.request.use(
   config => {
-    config.headers.token = 'Bearer ' + getToken()
     config.headers['client-type'] = 'WEB'
+    config.headers.token = 'Bearer ' + getToken()
     config.headers.Authorization = `Basic ${Base64.encode(`${clientId}:${clientSecret}`)}`
+    // 测试组件时使用下方头部信息，过期则修改后再测试
+    // config.headers.token = 'Bearer eyJ0eXAiOiJKc29uV2ViVG9rZW4iLCJhbGciOiJIUzI1NiJ9.eyJtb2JpbGUiOiIxMzE1MTYyODY1NyIsIm5hbWUiOiLmnLHmmI7mmI4iLCJ0b2tlbl90eXBlIjoidG9rZW4iLCJwVXNlcmlkIjoiMTM2ODg0NjcxOTU3OTU4NjU2MSIsInVzZXJpZCI6IjE0MTczNjg0NjMwODg4MTIwMzIiLCJ0ZW5hbnQiOiIwMDAxIiwiYWNjb3VudCI6InpodW1pbmdtaW5nIiwiaWF0IjoxNjM2MDgxNzM1LCJuYmYiOjE2MzYwODE3MzUsImV4cCI6MTYzNjExMDUzNX0.TTSbWUYTOd6znNko8sNyKz9KqLyeyO5AC4WgBvVNvBo'
+    // config.headers.Authorization = 'Basic dG9uZ2Z1bmNsb3VkX3dlYjp0b25nZnVuY2xvdWRfd2ViX3NlY3JldA=='
     return config
   },
   error => {