@tongfun/tf-widget 0.1.6 → 0.1.10

package/package/t-input/children/select.vue

@@ -0,0 +1,89 @@
+<template>
+  <el-select
+    :value="selectId"
+    filterable
+    clearable
+    :placeholder="placeholder"
+    :disabled="JSON.parse(disabled)"
+    style="display:block"
+    @input="handleInput"
+    @change="handleSelectChange"
+  >
+    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
+  </el-select>
+</template>
+<script>
+import { getEnumOptions } from '@/api/edit.js'
+export default {
+  components: {
+
+  },
+  props: {
+    value: {
+      type: Object,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: ['enumType', 'placeholder', 'defaultValue'],
+  data () {
+    return {
+      options: []
+    }
+  },
+  computed: {
+    selectId () {
+      if (this.value) {
+        return this.value.id
+      }
+      return ''
+    }
+  },
+  async created () {
+    const res = await getEnumOptions(this.enumType)
+    this.options = res.data
+    if (res.code !== 0) {
+      return this.$message.error(res.msg)
+    }
+    if (!this.value) {
+      const initValue = this.defaultValue || null
+      this.handleInput(initValue)
+    }
+  },
+  methods: {
+    handleInput (value) {
+      const name = this.getLabelByValue(value)
+      const id = value
+      this.$emit('input', { name, id })
+      // 下面是将来处理行关闭和整单关闭的预留
+      // if (this.field === 'is_closed') {
+      //   this.$emit('receiptClose', value)
+      // }
+      // if (this.field === 'line_closed') {
+      //   this.$emit('rowClose', value)
+      // }
+    },
+    // 选中的值发生了变化
+    handleSelectChange (newValue) {
+      this.$emit('change', newValue)
+    },
+    getLabelByValue (newValue) {
+      const option = this.options.find(item => item.id === newValue)
+      return option ? option.name : null
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+ .el-select{
+  ::v-deep .el-input__inner{
+    border: 0;
+    border-bottom: 1px solid #dcdcdc;
+    border-radius: 0;
+  }
+}
+</style>

package/package/t-input/children/tfile/fiile-enclosure.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="enclosure">
+    <div class="enclosure-box">
+      <dl v-for="(item,index) in fileList" :key="index" class="enclosure-item">
+        <dt>
+          <div v-if="item.suffix === 'png' || item.suffix === 'jpg' || item.suffix === 'jpeg'">
+            <img src="./file-img/img.png">
+          </div>
+          <div v-else-if="item.suffix === 'pdf' ">
+            <img src="./file-img/pdf.png">
+          </div>
+          <div v-else-if="item.suffix === 'xlx' || item.suffix === 'xlsx'">
+            <img src="./file-img/excel.png">
+          </div>
+          <div v-else-if="item.suffix === 'doc' || item.suffix === 'docx'">
+            <img src="./file-img/word.png">
+          </div>
+          <div v-else-if="item.suffix === 'zip' || item.suffix === 'rar'">
+            <img src="./file-img/comp.png">
+          </div>
+          <p>{{ item.size }}Mb</p>
+        </dt>
+        <dd>
+          <el-tooltip :content="item.title" placement="top">
+            <p class="dd-title">{{ item.title }}</p>
+          </el-tooltip>
+          <div class="item-dd">
+            <p @click="downloadList(item)">下载</p>
+            <span>|</span>
+            <p @click="delEnclosureList(item)">删除</p>
+          </div>
+        </dd>
+      </dl>
+    </div>
+    <div class="enclosure-fot">
+      <el-upload
+        class="upload-demo"
+        action=""
+        :show-file-list="false"
+        multiple
+        :auto-upload="false"
+        :file-list="fileList"
+        :on-change="onChange"
+      >
+        <el-button size="mini" type="primary">选择文件</el-button>
+        <p class="fot-text">文件可上传<span>附件</span>,<span>照片</span>和<span>PDF</span>形式</p>
+      </el-upload>
+    </div>
+  </div>
+</template>
+
+<script>
+import { delAttachment, download } from '@/api/file-enclosure'
+export default {
+  props: {
+    value: { // 给后端的参数
+      type: Array,
+      default: () => []
+    },
+    fileList: { // 前端的附件列表
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {},
+  methods: {
+    onChange (file, fileList) {
+      file.suffix = file.name.split('.')[1]
+      file.title = file.name.split('.')[0]
+      file.size = (file.size / 1024 / 1024).toFixed(2)
+      this.fileList.push(file)
+    },
+    /**
+     * 删除附件
+     */
+    delEnclosureList (item) {
+      if (this.value.length > 0) {
+        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          const index = this.fileList.findIndex(ele => { return ele === item })
+          this.fileList.splice(index, 1)
+
+          if (this.value.length > 0) {
+            delAttachment(item.id).then((res) => {
+              if (res.code === 0) {
+                this.value.splice(index, 1)
+                this.$emit('input', this.value)
+              }
+            })
+          }
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+        return
+      }
+      const index = this.fileList.findIndex(ele => { return ele === item })
+      this.fileList.splice(index, 1)
+    },
+    /**
+     * 下载附件
+     */
+    async downloadList (item) {
+      const findItem = this.value.find(ele => ele.id === item.id)
+      // const a = document.createElement('a')
+      // a.download = findItem.submittedFileName
+      // a.href = findItem.url
+      // a.click()
+      const res = await download(item.id)
+      const blob = new Blob([res])
+      if ('download' in document.createElement('a')) {
+        const link = document.createElement('a') // 创建a标签
+        link.download = findItem.submittedFileName // a标签添加属性
+        link.style.display = 'none'
+        link.href = URL.createObjectURL(blob)
+        document.body.appendChild(link)
+        link.click() // 执行下载
+        URL.revokeObjectURL(link.href) // 释放url
+        document.body.removeChild(link) // 释放标签
+      } else {
+        // IE10+下载
+        navigator.msSaveBlob(blob)
+      }
+    }
+  }
+}
+
+</script>
+<style lang='less' scoped>
+p{
+  margin: 0;
+  padding: 0;
+  height: 2vh;
+}
+.enclosure{
+  width: 30vw;
+  height: 28vh;
+  background: #ffffff;
+  border: 1px dashed #dcdcdc;
+  padding: 0vh 2vw 0.5vh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .enclosure-box{
+    flex: 1;
+    // margin-bottom: 0.5vh;
+    display: flex;
+    overflow-x: auto;
+    .enclosure-item{
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin-left: 5vw;
+      >dt{
+        >div{
+          width: 3vw;
+          height: 7vh;
+          >img{
+            width: 100%;
+            height: 100%;
+            display: block;
+          }
+        }
+        >p{
+          width: 100%;
+          text-align: center;
+          color: #9CA2A7;
+        }
+      }
+      >dd{
+        width: 4vw;
+        margin: 0;
+        .item-dd{
+          width: 100%;
+          height: 3vh;
+          display: flex;
+          color: #0C4C8E;
+          cursor: pointer;
+          justify-content: space-around;
+          font-family: Source Han Sans SC, Source Han Sans SC-Regular;
+        }
+        .dd-title{
+          height: 3vh;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          cursor: default;
+          }
+        }
+      p{
+        text-align: center;
+        margin: 0;
+      }
+    }:nth-child(1) {
+      margin: 0;
+    }
+  }
+  .enclosure-box::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+  .enclosure-box::-webkit-scrollbar-thumb {
+    background-color: #eee;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+  }
+  .enclosure-fot{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    .fot-text{
+      width: 100%;
+      font-size: 1.4vh;
+      color: #666666;
+      >span{
+        color: #0C4C8E;
+      }
+    }
+  }
+}
+</style>

package/package/t-input/index.js

@@ -0,0 +1,7 @@
+import Tinput from './index.vue'
+
+Tinput.install = function (Vue) {
+  Vue.component(Tinput.name, Tinput)
+}
+
+export default Tinput

package/package/t-input/index.vue

@@ -0,0 +1,337 @@
+<template>
+  <div>
+    <component
+      :is="typeRelations[type]"
+      v-if="entity || notForm"
+      class="common-input"
+      :value="value"
+      :target="target"
+      :show-field="showField"
+      v-bind="property"
+      :common-flag="commonFlag"
+      :append-to-body="false"
+      :modal-append-to-body="true"
+      @selected="handleSelected"
+      @handleSelected="handleSelected"
+      @input="handleInput"
+      @isDel="handleDel"
+      @change="handleChange"
+      @delete="$emit('delete')"
+      @suggestSelected="$emit('suggestSelected',$event)"
+    />
+
+    <el-form-item v-else :label-width="labelWidth" :prop="prop">
+      <template v-slot:label>
+        <el-tooltip effect="dark" :content="title" placement="top">
+          <span>{{ title }}</span>
+        </el-tooltip>
+      </template>
+      <component
+        :is="typeRelations[type]"
+        v-if="type !== 'basicCus'"
+        class="common-input"
+        :value="value"
+        :target="target"
+        :show-field="showField"
+        :common-flag="commonFlag"
+        :append-to-body="true"
+        :modal-append-to-body="false"
+        v-bind="property"
+        @isDel="handleDel"
+        @selected="handleSelected"
+        @handleSelected="handleSelected"
+        @input="handleInput"
+        @change="handleChange"
+        @delete="$emit('delete')"
+        @suggestSelected="$emit('suggestSelected',$event)"
+      />
+
+      <slot />
+    </el-form-item>
+  </div>
+</template>
+<script>
+import tinput from './children/input.vue'
+import tselect from './children/select.vue'
+import tdate from './children/date.vue'
+import tnumber from './children/number.vue'
+import tbasicDisplay from './children/basic-display'
+import tfile from './children/tfile/fiile-enclosure.vue'
+import tbasic from './children/basic.vue'
+import tGroup from './children/group.vue'
+import tAddress from './children/address.vue'
+import basicData from '../tf-widget/src/children/basic-data/basic-data.vue'
+import { getTableIdByTableName } from '@/api/edit.js'
+export default {
+  name: 'Tinput',
+  components: {
+    tinput, tnumber, tselect, tdate, tfile, tbasic, tbasicDisplay, basicData, tGroup, tAddress
+  },
+  props: {
+    // 双向绑定
+    value: {
+      type: [String, Number, Object, Array],
+      default: undefined
+    },
+    /**
+     * 控件类型
+     * input :  文本输入
+     * select： 下拉选择
+     * date     日期
+     * datetime 日期时间
+     * integer  整数
+     * decimal  小数
+     * text     文本域
+     * basicDisplay  基础资料展示字段，用于创建人等永远不能被填写的字段
+     * basicData     通用的基础资料
+     * basicCus      非通用的基础资料，
+     */
+    type: {
+      type: String,
+      default: 'input'
+    },
+    /**
+     * 控件属性
+     */
+    // el-form-item 属性
+    labelWidth: {
+      type: String,
+      default: '150px'
+    },
+    // el-form-item属性
+    title: {
+      type: String,
+      default: ''
+    },
+    // el form item属性，用来指定校验的属性的规则
+    prop: {
+      type: String,
+      default: ''
+    },
+    // 不在表单中使用这个控件，默认在表单中
+    notForm: {
+      type: Boolean,
+      default: false
+    },
+    // 在单据体中显示，当使用这个属性，默认开启not form
+    entity: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 子组件的通用属性
+     */
+    // 默认值
+    defaultValue: {
+      type: String,
+      default: ''
+    },
+    // 关闭
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 提示
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    /**
+     * select枚举类型属性
+     */
+    // 下拉框属性，获取下拉的选项的参数
+    enumType: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * 数值类型属性
+     */
+    // 小数属性，保留的小数个数
+    percision: {
+      type: Number,
+      default: 2
+    },
+
+    /**
+     * 多行文本文本类型
+     */
+    // 文本域的行数
+    rows: {
+      type: Number,
+      default: 3
+    },
+
+    /**
+     * 基础资料类型属性
+     */
+    // 基础资料相关信息的网络请求地址,和基础资料相关的一个请求参数
+    target: {
+      type: String,
+      default: ''
+    },
+    // 基础资料的搜索限制条件，将会被解析成多个高级过滤条件，拼接到查询条件里面
+    // 格式如下：｛a:{name:'xx',id:'xx'}
+    limitation: {
+      type: Object,
+      default: () => {}
+    },
+    // 指定基础资料显示哪个属性作为展示的字段
+    // 没有值使用后端提供的配置，有值则覆盖后端的配置
+    displayField: {
+      type: String,
+      default: null
+    },
+    // todo:这两个属性功能已经重复，需要对接 // 基础资料需要展示的数据
+    showField: {
+      type: String,
+      default: ''
+    },
+    // 通用基础资料的表名
+    tableConfig: {
+      type: Object,
+      default: function () {
+        return {
+          enum: {},
+          name: ''
+        }
+      }
+    },
+    // 此标识用于写死的组件，将事件发射出去自己处理 ???????????
+    commonFlag: {
+      type: Boolean,
+      default: false
+    },
+    // 附件上传的文件列表
+    fileList: {
+      type: Array,
+      default: () => []
+    }
+
+  },
+  provide () {
+    return {
+      entity: this.entity,
+      target: this.target,
+      enumType: this.enumType,
+      placeholder: this.placeholder,
+      // 是否是日期时间控件
+      datetime: this.type === 'datetime',
+      // 小数的情况下，指定小数的精度
+      percision: this.type === 'decimal' ? this.percision : null,
+      // 是否是文本域控件
+      text: this.type === 'text',
+      // 文本域的行数
+      rows: this.type === 'text' ? this.rows : null,
+      defaultValue: this.defaultValue
+    }
+  },
+  data () {
+    return {
+      typeRelations: {
+        input: 'tinput',
+        text: 'tinput',
+        date: 'tdate',
+        datetime: 'tdate',
+        integer: 'tnumber',
+        decimal: 'tnumber',
+        select: 'tselect',
+        basicDisplay: 'tbasicDisplay',
+        basicData: 'basicData',
+        basic: 'tbasic',
+        file: 'tfile',
+        group: 'tGroup',
+        address: 'tAddress'
+      }
+    }
+  },
+  computed: {
+    // 部分属性加入到计算属性传递下去，不使用provide的属性是为了获取响应式支持
+    property () {
+      return {
+        disabled: this.disabled,
+        tableId: this.tableConfig.enum[this.tableConfig.name] || null,
+        fileList: this.fileList,
+        displayField: this.displayField,
+        limitation: this.limitation
+      }
+    }
+  },
+  created () {
+    if (this.type === 'basicData') {
+      this.getTableId()
+    }
+  },
+  methods: {
+    // 通知触发了删除事件
+    handleDel () {
+      this.$emit('isDel')
+    },
+    // 基础资料的方法
+    handleSelected (rows) {
+      this.$emit('selected', rows)
+    },
+    // 选中的值发生了变化，目前仅仅是为了 枚举/下拉类型使用
+    handleChange (newValue) {
+      this.$emit('change', newValue)
+    },
+    handleInput (value) {
+      this.$emit('input', value)
+    },
+    async getTableId () {
+      const conf = this.tableConfig
+      // 如果已经存在了tableId，则不进行获取
+      if (conf.enum[conf.name]) {
+        return
+      }
+      const res = await getTableIdByTableName(conf.name)
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      conf.enum[conf.name] = res.data
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+  .common-input {
+    // 即便是disable,也不改变背景色
+    // 采用直接子元素的方式避免影响到分页的样式
+    ::v-deep >.el-input__inner {
+      background: #fff !important;
+      border:none;
+      border-bottom:1px solid #DCDCDC;
+      border-radius: 0;
+    }
+    ::v-deep>div{
+      >div{
+        >.el-input__inner{
+          background: #fff !important;
+          border:none;
+          border-bottom:1px solid #DCDCDC;
+          border-radius: 0;
+
+        }
+        >div{
+          >.el-input__inner{
+            background: #fff !important;
+            border:none;
+            border-bottom:1px solid #DCDCDC;
+            border-radius: 0;
+          }
+        }
+      }
+    }
+
+  }
+  .el-form-item{
+    ::v-deep .el-form-item__label{
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+</style>

package/package/t-input/tInputCache.js

@@ -0,0 +1,24 @@
+const ProxyCreateSingleton = (function () {
+  let instance = null
+  return function () {
+    if (instance) {
+      return instance
+    }
+    instance = new InputData()
+    return instance
+  }
+})()
+class InputData {
+  #cacheData = new Map()
+  getCacheData (key) {
+    if (key) {
+      return this.#cacheData.get(key)
+    }
+    return this.#cacheData
+  }
+
+  setCacheData (key, value) {
+    this.#cacheData.set(key, value)
+  }
+}
+export default ProxyCreateSingleton