@tongfun/tf-widget 0.1.6 → 0.1.10

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

@@ -0,0 +1,89 @@
+<template>
+  <el-date-picker
+    ref="date"
+    class="date"
+    :value="value"
+    :type="type"
+    :placeholder="placeholderComp"
+    :disabled="disabled"
+    :format="timeFormmat"
+    value-format="yyyy-MM-dd HH:mm:ss"
+    style="width:100%"
+    @input="handleInput"
+  />
+</template>
+<script>
+export default {
+  components: {
+
+  },
+  props: {
+    value: {
+      type: String,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: ['placeholder', 'datetime', 'entity'],
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+    type () {
+      if (this.datetime) {
+        return 'datetime'
+      }
+      return 'date'
+    },
+    timeFormmat () {
+      if (this.datetime) {
+        return 'yyyy-MM-dd HH:mm:ss'
+      }
+      return 'yyyy-MM-dd'
+    },
+    placeholderComp () {
+      if (!this.placeholder) {
+        if (this.datetime) {
+          return '请输入日期时间'
+        }
+        return '请输入日期'
+      }
+      return this.placeholder
+    }
+  },
+  mounted () {
+    if (this.entity) {
+      this.$refs.date.focus()
+    }
+  },
+  created () {
+    if (!this.value) {
+      this.handleInput(null)
+    }
+  },
+  methods: {
+    handleInput (value) {
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+.date {
+   ::v-deep .el-icon-date:before {
+      content: "\e78e";
+      font-size: 16px;
+      position: absolute;
+      right: 0%  !important;
+    }
+    ::v-deep .el-icon-date{
+      width: 20px;
+    }
+ }
+</style>

package/package/t-input/children/group-components/group-dialog.vue

@@ -0,0 +1,350 @@
+<template>
+  <div class="main">
+    <!-- 分组选择主弹窗 -->
+    <el-dialog
+      :visible="visible"
+      class="group-display"
+      width="30%"
+      title="分组选择"
+      @update:visible="handleUpdateVisible"
+      @open="handleOpen"
+    >
+      <div class="dataDialog">
+        <div class="dialog-header">
+          <el-input v-model="searchText" placeholder="搜索关键字" />
+        </div>
+        <div class="dialog-body">
+          <el-scrollbar class="scrollbar">
+            <el-tree
+              ref="groupTree"
+              :data="groupList"
+              :show-checkbox="false"
+              node-key="id"
+              highlight-current
+              :expand-on-click-node="false"
+              check-on-click-node
+              accordion
+              :props="defaultProps"
+              :filter-node-method="filterNode"
+              :check-strictly="true"
+              @check="handleNodeChange"
+            />
+          </el-scrollbar>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" size="mini" @click="openOperateDialog('insert')">新建分组</el-button>
+        <el-button type="primary" size="mini" @click="openOperateDialog('update')">编辑分组</el-button>
+        <el-button type="primary" size="mini" @click="handleCloseDialog">取 消</el-button>
+        <el-button type="primary" size="mini" @click="handleDialogConfirm">确 定</el-button>
+      </span>
+    </el-dialog>
+    <!-- 新建/编辑页面 -->
+    <el-dialog
+      title=""
+      :visible.sync="operatingVisible"
+      width="30%"
+      @open="handleOpenOperate"
+      @close="handleCloseOperate"
+    >
+      <div>
+        <el-form ref="form" :rules="rules" :model="operatingData" label-width="80px">
+          <el-form-item label="父级名称" prop="pid">
+            <el-select v-model="operatingData.pid" placeholder="" @change="handleParentSelect">
+              <el-option
+                v-for="item in selectList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="父级编码" prop="code">
+            <el-input v-model="operatingData.groupCode" placeholder="" disabled />
+          </el-form-item>
+          <el-form-item label="编码" prop="code">
+            <el-input v-model="operatingData.code" placeholder="" />
+          </el-form-item>
+          <el-form-item label="分组名称" prop="name">
+            <el-input v-model="operatingData.name" placeholder="" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer">
+        <el-button @click="operatingVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleSubmitOperate">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addGroupNode, updateGroupNode } from '@/api/tableV3'
+export default {
+  name: 'GroupDialog',
+  props: {
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  inject: ['target'],
+  data () {
+    var checkBlank = (rule, value, callback) => {
+      const reg = /\s+/g
+      if (reg.test(value)) {
+        return callback(new Error('不能含有空格'))
+      }
+      callback()
+    }
+    return {
+      searchText: '',
+      selectNode: {},
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      rules: {
+        name: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: checkBlank, trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        pid: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ]
+      },
+      // selectList: [],
+      operatingVisible: false,
+      operatingStatus: 'insert', // 新增编辑弹窗的状态标识
+      operatingData: {
+        groupCode: '', // 分组编码
+        code: '', // 节点编码
+        id: '', // 节点id（编辑的时候存在）
+        name: '', // 节点名称
+        pid: ''// 父级id
+      }
+
+    }
+  },
+  computed: {
+    groupList () {
+      let list = []
+      if (this.data && this.data[0]) {
+        list = this.data[0]
+      }
+      // todo: 下面的方式eslint报错,而且下面的是啥逻辑啊,需要追踪数据后确定
+      // return this.data[0] && this.data || []
+      return list
+    },
+    selectMap () {
+      return this.createSelectMap(this.data)
+    },
+    selectList () {
+      return Object.values(this.selectMap)
+    }
+  },
+  watch: {
+    searchText (val) {
+      this.$refs.groupTree.filter(val)
+    },
+    selectMap () {
+      this.operatingVisible && this.updateGroupStatus()
+    }
+  },
+  methods: {
+    // 打开编辑弹窗前进行必要的校验
+    openOperateDialog (mod) {
+      if (!this.selectNode.id) {
+        return this.$message.error('请先选择节点')
+      }
+      this.operatingStatus = mod
+      if (this.operatingStatus === 'update' && this.selectNode.id === '0') {
+        return this.$message.error('根节点不可编辑')
+      }
+      this.operatingVisible = true
+    },
+    // 打开弹窗进行的操作
+    handleOpen () {
+      this.$nextTick(() => {
+        if (this.value && this.value.id) {
+          this.$refs.groupTree.setCheckedKeys([this.value.id])
+          this.$refs.groupTree.setCurrentKey(this.value.id)
+          this.updateGroupStatus()
+          this.handleNodeChange(this.selectMap[this.value.id])
+        }
+      })
+    },
+    // 更新展开状态
+    updateGroupStatus () {
+      this.$nextTick(() => {
+        const id = this.selectNode.id || this.value.id
+        if (id) {
+          this.$refs.groupTree.setCurrentKey(id)
+          this.expandedNode(id)
+        }
+      })
+    },
+    expandedNode (id, temp = false) {
+      if (temp && this.$refs.groupTree.store.nodesMap[id]) {
+        this.$refs.groupTree.store.nodesMap[id].expanded = true
+      }
+
+      if (this.selectMap[id].pid) {
+        this.expandedNode(this.selectMap[id].pid, true)
+      }
+    },
+    // 创建数据的map集合（id：{}）
+    createSelectMap (data, map, parentData = {}) {
+      const dataCache = data || this.data
+      const result = map || {}
+      dataCache.forEach(e => {
+        if (e.id) {
+          result[e.id] = { id: e.id, name: e.name, groupCode: e.groupCode, pid: parentData.id || '' }
+        }
+        e.children && this.createSelectMap(e.children, result, e)
+      })
+      if (!map) return result
+    },
+    // 节点过滤
+    filterNode (value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    // 节点选中
+    handleNodeChange (data) {
+      // console.log(this.$refs.groupTree)
+      this.$refs.groupTree.setCheckedKeys([data.id])
+      this.selectNode = data
+    },
+    // dialog确认
+    handleDialogConfirm () {
+      this.$emit('confirm', { id: this.selectNode.id, name: this.selectNode.name })
+      this.handleCloseDialog()
+    },
+    // 关闭主dialog
+    handleCloseDialog () {
+      this.$emit('update:visible', false)
+    },
+    // 更新dialog
+    handleUpdateVisible (val) {
+      this.$emit('update:visible', val)
+    },
+    // 赋值
+    handleParentSelect (id, field = 'groupCode') {
+      this.operatingData[field] = this.selectMap[id][field]
+    },
+    // 打开操作界面
+    handleOpenOperate () { // 打开操作界面
+      if (this.operatingStatus === 'insert') {
+        this.operatingData.pid = this.selectNode.id
+        this.handleParentSelect(this.selectNode.id)
+      }
+      if (this.operatingStatus === 'update') {
+        const id = this.selectMap[this.selectNode.id].pid
+        this.operatingData.pid = id
+        const groupCodeList = this.selectNode.groupCode.split('.')
+        this.operatingData.code = groupCodeList[groupCodeList.length - 1]
+        this.handleParentSelect(id)
+        this.handleParentSelect(this.selectNode.id, 'name')
+      }
+    },
+    // 关闭弹窗
+    handleCloseOperate () {
+      this.$refs.form.clearValidate()
+      Object.keys(this.operatingData).forEach(e => {
+        this.operatingData[e] = ''
+      })
+    },
+    // 提交操作信息
+    handleSubmitOperate () {
+      this.$refs.form.validate(success => {
+        if (success) {
+          this.operatingStatus === 'insert'
+            ? this.updateGroup(addGroupNode, '添加成功')
+            : this.updateGroup(updateGroupNode, '修改成功')
+        }
+      })
+    },
+    async updateGroup (fun, msg) {
+      const groupCode = this.operatingData.groupCode
+        ? this.operatingData.groupCode + '.' + this.operatingData.code
+        : this.operatingData.code
+      const res = await fun(
+        this.target,
+        this.operatingData.name,
+        this.operatingStatus === 'insert' ? '' : this.selectNode.id,
+        this.operatingData.pid,
+        groupCode)
+
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.$emit('success')
+      // 如果修改到当前节点的更新操作
+      if (this.selectNode.id === this.value.id) {
+        this.selectNode.name = this.operatingData.name
+        this.$emit('confirm', { id: this.value.id, name: this.operatingData.name })
+      }
+      this.$message.success(msg)
+      this.operatingVisible = false
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  /**
+    列表弹窗
+  */
+  .group-display{
+    ::v-deep .el-dialog__body {
+      padding-top:0 !important;
+    }
+    ::v-deep .el-dialog__footer {
+      .el-button {
+        background-color: #07599C;
+        border:none;
+      }
+    }
+  }
+
+.dataDialog{
+  height: 50vh;
+  .dialog-header{
+    width: 100%;
+    height: 40px;
+    box-sizing: border-box;
+    padding: 5px;
+    padding-top:0px;
+    ::v-deep .el-input__inner {
+      height:30px;
+      width: 100% !important;
+    }
+  }
+  .dialog-body{
+    height: 100%;
+    .scrollbar{
+      height: 100%;
+      /deep/.el-scrollbar__wrap{
+        overflow-x: hidden;
+      }
+    }
+  }
+}
+.el-form-item{
+  margin-top: 20px;
+}
+</style>

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

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <!-- 输入控件 -->
+    <el-autocomplete
+      ref="group"
+      v-model="showValue"
+      placeholder=""
+      :fetch-suggestions="getAdvice"
+      :disabled="disabled"
+      :trigger-on-focus="false"
+      @select="handleSelect"
+      @blur="handleBlur"
+      @keydown.delete.native="handleDeleteKeyDown"
+    >
+      <i slot="suffix" class="el-icon-search" style="cursor: pointer" @click="showDialog" />
+      <template slot-scope="{item}">
+        <div>{{ item.name }}</div>
+      </template>
+    </el-autocomplete>
+
+    <!-- 弹窗数据选择器 -->
+    <GroupDialog
+      ref="groupDialog"
+      :value="value"
+      :data="options"
+      :visible.sync="dialogVisible"
+      @confirm="handleConfig"
+      @success="handleSuccess"
+    />
+  </div>
+</template>
+
+<script>
+import { getGroupTree } from '@/api/tableV3.js'
+import GroupDialog from '../children/group-components/group-dialog.vue'
+// 使用该组件必穿一个target
+
+export default {
+  name: 'Group',
+  components: {
+    GroupDialog
+  },
+  props: {
+    value: {
+      type: Object,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: ['target'],
+  data () {
+    return {
+      options: [],
+      dialogVisible: false,
+      groupList: []
+    }
+  },
+  computed: {
+    showValue: {
+      get: function () {
+        return this.value ? this.value.name : ''
+      },
+      set: function (newVal) {
+        this.$emit('input', { id: '', name: newVal })
+      }
+    }
+  },
+  mounted () {
+    this.getGroupTree()
+  },
+  methods: {
+    // 获取分组数据
+    async getGroupTree () {
+      const res = await getGroupTree(this.target)
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.groupList = []
+      this.options = [res.data]
+      this.groupList = Object.values(this.$refs.groupDialog.createSelectMap(this.options))
+      if (this.dialogVisible) {
+        this.$refs.groupDialog.updateGroupStatus()
+      }
+    },
+    handleSelect (val) {
+      this.$emit('input', { id: val.id, name: val.name })
+      // this.$emit('input', val[val.length - 1])
+    },
+    // 点击删除时进行的操作
+    handleDeleteKeyDown () {
+      this.$emit('input', { id: '', name: '' })
+    },
+    // 获取搜索建议
+    getAdvice (str, cb) {
+      if (str) {
+        cb(this.groupList.filter(e => e.name.includes(str)))
+      }
+    },
+    // 展示dialog
+    showDialog () {
+      this.dialogVisible = true
+    },
+    handleBlur () {
+      if (!this.value.id) {
+        this.$emit('input', { id: '', name: '' })
+      }
+    },
+    handleConfig (val) {
+      this.$emit('input', val)
+    },
+    handleSuccess () {
+      this.getGroupTree()
+    }
+
+  }
+}
+</script>
+<style lang="less" scoped>
+  /deep/.el-scrollbar__wrap{
+    overflow-x: hidden!important;
+  }
+
+</style>

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

@@ -0,0 +1,72 @@
+<template>
+  <el-input
+    ref="input"
+    :value="value"
+    :type="inputType"
+    :disabled="disabled"
+    :rows="rows"
+    :placeholder="placeholder"
+    @input="handleInput"
+  />
+</template>
+<script>
+export default {
+  components: {
+
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    defaultValue: {
+      type: String,
+      default: ''
+    }
+  },
+  inject: ['rows', 'placeholder', 'text', 'entity'],
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+    inputType () {
+      if (this.text) {
+        return 'textarea'
+      }
+      return 'text'
+    }
+  },
+  created () {
+    // 对象还不存在这个属性,创建属性，如果有属性，但是值是null不进行任何操作
+    if (!this.value) {
+      this.handleInput(null)
+    }
+  },
+  mounted () {
+    if (this.entity) {
+      this.$refs.input.focus()
+    }
+  },
+  methods: {
+    handleInput (value) {
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.el-textarea{
+  ::v-deep .el-textarea__inner{
+    border:0;
+    border-bottom: 1px solid #dcdcdc;
+    border-radius: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,74 @@
+<template>
+  <el-input-number
+    ref="number"
+    :disabled="disabled"
+    :controls="false"
+    :placeholder="placeholder"
+    :precision="percision"
+    :min="0"
+    :value="value"
+    @input="handleInput"
+  />
+</template>
+<script>
+export default {
+  components: {
+
+  },
+  props: {
+    value: {
+      type: Number,
+      default: undefined
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    defaultValue: {
+      type: Number,
+      default: null
+    }
+  },
+  inject: ['percision', 'placeholder', 'entity'],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    this.entity && this.$refs.number.focus()
+  },
+  created () {
+    if (!this.value) {
+      const initValue = this.defaultValue || null
+      this.handleInput(initValue)
+    }
+  },
+  methods: {
+    handleInput (value) {
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+ .el-input-number {
+   width:100%;
+
+    ::v-deep .el-input{
+    height: 100%;
+    //margin-top: -0.55vh;
+  }
+  ::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;
+  }
+ }
+</style>