@tongfun/tf-widget 0.1.6 → 0.1.10

package/package/t-data-list/index.js

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

package/package/t-data-list/main.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="page">
+    <div class="t-data-list-controll">
+      <div class="common-table-header">
+        <!--
+          按钮区域
+          以下按钮的处理逻辑统一在button-controll-mixin的混入对象当中
+       -->
+        <div class="common-table-buttons">
+          <slot name="insertReplace" />
+          <el-button v-if="!$slots.insertReplace" v-debounce type="primary" size="mini" @click="insert">新增</el-button>
+
+          <slot name="updateReplace" />
+          <el-button v-if="!$slots.updateReplace" v-debounce type="primary" size="mini" @click="update">修改</el-button>
+
+          <slot name="pushDownReplace" />
+          <el-button v-if="!$slots.pushDownReplace && pushDownTableName" v-debounce type="primary" size="mini" @click="showPushDown">下推</el-button>
+
+          <slot name="deleteReplace" />
+          <el-button v-if="!$slots.deleteReplace" v-debounce type="primary" size="mini" @click="del">删除 </el-button>
+
+          <el-button v-debounce type="primary" size="mini" @click="refresh(false,true)">刷新 </el-button>
+          <!-- <el-button type="primary" size="mini">批改</el-button> -->
+          <slot name="importAndExport" />
+          <slot name="buttons" />
+        </div>
+
+        <!-- 搜索输入框 -->
+        <TListSearch class="common-table-buttons-search" @search="handleSuggestMultiCondition($event)" />
+      </div>
+      <!--过滤方案-->
+      <Tplan :fields-option="tableLayout" @change="handlePlanConditionChange" />
+    </div>
+
+    <!--
+      数据区域
+        layout:表格表头字段和类型
+        sum: 表格的底部合集行的数据，条件发生改变的时候获取新的结果，翻页不获取
+        show-summary
+        data:表格的数据
+        enableGroup:是否显示分组，一般基础资料列表显示分组，业务列表不显示
+        enable-group-edit: 分组是否可以编辑（添加修改，一般基础资料列表中可以修改，弹窗中不允许修改
+        page-size:每页条数
+        current-page:当前页数
+        update-in-dialog:点击编辑或者双击数据行的时候，不进行页面跳转，而是将该行的id发射出来
+        @groupChange:监听分组条件改变
+        @conditionChange 监听到表头条件改变
+        @size-change 监听每页条数改变
+        @current-change 监听当前页改
+        @dbclick 处理双击事件
+        @dbRowClick 也是双击事件，但是当前行的数据被事件发射出来
+     -->
+    <Ttable
+      class="t-table"
+      :layout="tableLayout"
+      :sum="tableSum"
+      show-summary
+      :data="tableData"
+      :disable-sum="disableSum"
+      :enable-group="enableGroup"
+      enable-group-edit
+      :page-size="query.pageSize"
+      :current-page="query.pageNum"
+      :update-in-dialog="getDbId"
+      @condition-change="handleHeadChange"
+      @groupChange="handleGroupChange"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      @dbClick="handleDbClick"
+      @dbRowClick="$emit('dbRowClick',$event)"
+    />
+
+    <!-- 下推弹窗 -->
+    <PushDown
+      :visible.sync="pushdownVisible"
+      :push-down-table-name="pushDownTableName"
+      :parent-selection-data="ids"
+    />
+  </div>
+</template>
+<script>
+import TListSearch from './src/t-list-search.vue'
+import Tplan from './src/t-plan'
+import Ttable from './src/t-table'
+import PushDown from './src/pushdown/push-down.vue'
+import buttonControll from './src/mixins/button-controll-mixin.js'
+import dataQuery from '@/mixins/t-data-query-mixin.js'
+export default {
+  name: 'TDataList',
+  components: {
+    Tplan, Ttable, PushDown, TListSearch
+  },
+  mixins: [buttonControll, dataQuery],
+  props: {
+    // 目标单据,接口地址的一部分，单据列表的标识符
+    target: {
+      type: String,
+      default: ''
+    },
+    pushDownTableName: {
+      type: String,
+      default: null
+    },
+    // 表格双击不跳转路由，而是将数据的id发射出来
+    getDbId: {
+      type: Boolean,
+      default: false
+    },
+    getDbRow: {
+      type: Boolean,
+      default: false
+    },
+    // 页面组件控制配置
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    enableGroup: {
+      type: Boolean,
+      default: false
+    },
+    disableSum: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      // 下推弹窗是否显示
+      pushdownVisible: false,
+      queryType: 'LIST'
+    }
+  },
+  created () {
+    this.getTableLayout()
+  },
+  methods: {
+    /**
+     * 方案进行切换/方案中的高级条件变化后进行查询
+     * 在方案中点击查促按钮触发此事件
+     * 也是列表页面第一次获取表格数据内容的入口
+     */
+    handlePlanConditionChange (value) {
+      this.queryPlanCondition = value.conditionMulti
+      this.query.conditionAlwaysList = value.conditionAlways
+      this.getTableData(false, true)
+    },
+    // 数据行被双击
+    handleDbClick (value) {
+      this.$emit('dbClick', value)
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+// 列表页面的外轮廓
+.page{
+  height:100%;
+  margin:0 10px;
+  background-color: #F0F2F5;
+  border-radius:10px;
+  //按钮组和过滤条件所在列表的操控区域的样式
+  .t-data-list-controll {
+    // height:6vh;
+    border-radius: 4px;
+    padding: 1.1111vh 1.1111vh 0 1.1111vh;
+    background-color: #fff;
+    margin-bottom:10px;
+    .common-table-header{
+      display: flex;
+      justify-content: space-between;
+      .common-table-buttons{
+        min-width: 800px;
+        display: flex;
+        justify-content: flex-start;
+        .el-button{
+          background-color: #0c4c8e!important;
+          border-color: #0c4c8e;
+        }
+      }
+      .common-table-buttons-search{
+        height: 30px;
+      }
+    }
+  }
+}
+
+// .t-table{
+//   height: 80vh
+// }
+</style>

package/package/t-data-list/src/condition-input/basic.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-input :value="value" size="mini" :disabled="disabled" @input="handleInput" />
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    handleInput (newValue) {
+      this.$emit('input', newValue)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/package/t-data-list/src/condition-input/date.vue

@@ -0,0 +1,106 @@
+<template>
+  <!-- <el-date-picker
+    :value="dateValue"
+    size="mini"
+    :type="type"
+    :disabled="disabled"
+    :format="timeFormmat"
+    value-format="yyyy-MM-dd HH:mm:ss"
+    style="width:100%"
+    @input="dateValue = $event"
+  /> -->
+  <DatePicker
+    v-model="dateValue"
+    class="wrapper"
+    range-separator="-"
+    :type="type"
+    value-type="YYYY-MM-DD HH:mm:ss"
+    confirm
+    confirm-text="确定"
+    :range="range"
+    :append-to-body="false"
+    :format="displayFormat"
+  />
+
+</template>
+<script>
+import DatePicker from 'vue2-datepicker'
+import 'vue2-datepicker/index.css'
+import 'vue2-datepicker/locale/zh-cn'
+export default {
+  components: {
+    DatePicker
+  },
+  props: {
+    value: {
+      type: String,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    datetime: {
+      type: Boolean,
+      default: false
+    },
+    range: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+    /**
+     * 时间范围element使用数组，时间使用字符串
+     * 该计算属性，始终保持外界的数据格式为字符串，如果是范围，将使用‘，’对两个值进行分割
+     */
+    dateValue: {
+      get () {
+        if (this.range) {
+          if (this.value) {
+            return this.value.split(',')
+          }
+        }
+        return this.value
+      },
+      set (value) {
+        if (this.range) {
+          return this.$emit('input', value.join())
+        }
+        this.$emit('input', value)
+      }
+    },
+    type () {
+      return this.datetime ? 'datetime' : 'date'
+    },
+    displayFormat () {
+      return this.datetime
+        ? 'YYYY-MM-DD HH:mm:ss'
+        : 'YYYY-MM-DD'
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+  .wrapper {
+    height:100%;
+    width:100%;
+      height:100%;
+      width:100%;
+    ::v-deep .mx-input {
+      height:28px !important;
+    }
+  }
+  // .t-date-picker {
+  //   height:100%;
+  //   border:1px solid #dddfe6;
+  //   width:100%;
+  // }
+
+</style>

package/package/t-data-list/src/condition-input/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="condition-input">
+    <component
+      :is="inputType"
+      :value="value"
+      :disabled="disabled"
+      :datetime="isDateTime"
+      :multi="multi"
+      :field="field"
+      :range="range"
+      :table-head="tableHead"
+      @input="handleInput"
+    />
+    <span class="err-msg">{{ errorMsg }}</span>
+  </div>
+</template>
+<script>
+import cdate from './date.vue'
+import cinput from './input.vue'
+import cselect from './select.vue'
+import cnumber from './number.vue'
+import cbasic from './basic.vue'
+export default {
+  components: {
+    cdate, cinput, cselect, cnumber, cbasic
+  },
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 当前的字段，用来获取枚举的选项的参数
+    field: {
+      type: String,
+      default: ''
+    },
+    // 是否开启多选，针对枚举类型的数据
+    multi: {
+      type: Boolean,
+      default: false
+    },
+    // 是否是范围类型的输入
+    range: {
+      type: Boolean,
+      default: false
+    },
+    // 当前的输入空间在表头上进行使用，使用不同样式和不同逻辑的判断依据
+    tableHead: {
+      type: Boolean,
+      default: false
+    }
+
+  },
+  data () {
+    return {
+      typeEnum: {
+        input: 'cinput',
+        enum: 'cselect',
+        date: 'cdate',
+        datetime: 'cdate',
+        number: 'cnumber',
+        basic: 'cbasic'
+      },
+      errorMsg: ''
+    }
+  },
+  computed: {
+    inputType () {
+      return this.typeEnum[this.type]
+    },
+    isDateTime () {
+      return this.type === 'datetime'
+    }
+  },
+  methods: {
+    handleInput (newValue) {
+      this.$emit('input', newValue)
+    }
+
+  }
+}
+</script>
+
+<style lang='less' scoped>
+  .condition-input {
+    ::v-deep el-input {
+      box-sizing: border-box;
+
+    }
+  }
+
+</style>

package/package/t-data-list/src/condition-input/input.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-input :value="value" size="mini" :disabled="disabled" @input="handleInput" />
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    handleInput (newValue) {
+      this.$emit('input', newValue)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/package/t-data-list/src/condition-input/number.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-input v-if="!range" :value="value" size="mini" @input="handleInput" />
+  <div v-else :class="[tableHead?'col-layout':'row-layout']">
+    <el-input :value="numberRangeValue.start" size="mini" @input="handleStartInput" />
+    <span class="number-separators">~</span>
+    <el-input :value="numberRangeValue.end" size="mini" @input="handleEndInput" />
+  </div>
+</template>
+<script>
+export default {
+  components: {
+
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    range: {
+      type: Boolean,
+      default: false
+    },
+    tableHead: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      numberRangeValue: {
+        start: '',
+        end: ''
+      }
+    }
+  },
+  watch: {
+    value () {
+      if (this.range) {
+        if (!this.value) return
+        const dataArr = this.value.split(',')
+        this.numberRangeValue.start = dataArr[0] || ''
+        this.numberRangeValue.end = dataArr[1] || ''
+      }
+    }
+  },
+  methods: {
+    /**
+     * 将输入转换为数字，如果不能转换则进行忽略
+     */
+    inputValid (value) {
+      return /^\d*$/g.test(value)
+    },
+
+    /**
+     * 非范围状态的输入处理函数
+     */
+    handleInput (value) {
+      if (!this.inputValid(value)) {
+        return
+      }
+      this.$emit('input', value)
+    },
+
+    /**
+     * 范围开始的输入处理
+     */
+    handleStartInput (value) {
+      if (!this.inputValid(value)) {
+        return
+      }
+      this.numberRangeValue.start = value
+      this.emitRangeValue()
+    },
+
+    /**
+     * 范围的结束输入处理
+     */
+    handleEndInput (value) {
+      if (!this.inputValid(value)) {
+        return
+      }
+      this.numberRangeValue.end = value
+      this.emitRangeValue()
+    },
+
+    /**
+     * 范围输入对外发射
+     */
+    emitRangeValue () {
+      const start = this.numberRangeValue.start
+      const end = this.numberRangeValue.end
+      this.$emit('input', `${start},${end}`)
+    }
+
+  }
+}
+</script>
+<style lang='less' scoped>
+  .row-layout {
+    display:flex;
+  }
+  .col-layout {
+    display:flex;
+    flex-direction: column;
+  }
+  .number-separators{
+      display:flex;
+      align-items: center;
+      justify-content: center;
+  }
+</style>

package/package/t-data-list/src/condition-input/select.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-select
+    :value="selectValue"
+    :popper-append-to-body="false"
+    size="mini"
+    filterable
+    clearable
+    placeholder=""
+    :multiple="multi"
+    collapse-tags
+    :disabled="disabled"
+    style="display:block"
+    @input="selectValue = $event"
+  >
+    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.enumId" />
+  </el-select>
+</template>
+<script>
+import { getEnumOptions } from '@/api/tableV3.js'
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    multi: {
+      type: Boolean,
+      default: false
+    },
+    field: {
+      type: String,
+      default: '2'
+    }
+  },
+  inject: ['target', 'enumOptionCache'],
+  data () {
+    return {
+      options: []
+    }
+  },
+  computed: {
+    selectValue: {
+      set (value) {
+        if (this.multi) {
+          return this.$emit('input', value.join())
+        }
+        this.$emit('input', value)
+      },
+      get () {
+        if (this.multi) {
+          if (this.value === '') {
+            return []
+          }
+          return this.value.split(',')
+        }
+        return this.value
+      }
+    }
+
+  },
+  created () {
+    this.getOptions()
+  },
+  methods: {
+    async getOptions () {
+      if (this.enumOptionCache[this.field]) {
+        this.options = this.enumOptionCache[this.field]
+        return
+      }
+      const res = await getEnumOptions(this.target, this.field)
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.options = res.data
+      this.enumOptionCache[this.field] = res.data
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

package/package/t-data-list/src/js/fieldTypeEnum.js

@@ -0,0 +1,10 @@
+const fieldType = {
+  PARAM_TEXT: 'input',
+  PARAM_TIME_LONG: 'datetime',
+  PARAM_TIME_SHORT: 'date',
+  PARAM_ENUM: 'enum',
+  PARAM_BASIC: 'basic',
+  PARAM_NUMBER: 'number'
+}
+
+export default fieldType