@tongfun/tf-widget 0.1.29 → 0.1.30

package/package/t-data-list/src/t-table/table-group-item-edit.vue

@@ -1,238 +0,0 @@
-<template>
-  <el-dialog
-    :title="type === 'insert' ? '新增分组':'修改分组'"
-    :visible="visible"
-    width="30%"
-    :modal-append-to-body="false"
-    @update:visible="handleVisible"
-    @open="handleOpen"
-    @close="handleClose"
-  >
-    <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
-      <el-form-item label="分组名称" prop="name">
-        <el-input v-model="form.name" />
-      </el-form-item>
-      <el-form-item label="编码" prop="code">
-        <el-input v-model="form.code">
-          <div slot="suffix">
-            <el-tooltip v-model="toolTipShow" manual effect="dark" content="已复制" placement="right">
-              <i class="el-input__icon el-icon-document-copy clickable" @click="copyHoleCode" @mouseleave="toolTipShow = false" />
-            </el-tooltip>
-          </div>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="父级编码" prop="code">
-        <el-input v-model="parentCodeStr" disabled />
-      </el-form-item>
-      <el-form-item label="父级名称" prop="parentId">
-        <el-cascader
-          v-model="form.parentId"
-          :options="nodeOptions"
-          :props="config"
-          :show-all-levels="false"
-        />
-      </el-form-item>
-    </el-form>
-
-    <span slot="footer" class="dialog-footer">
-      <el-button type="primary" size="small" @click="handleVisible(false)">取消</el-button>
-      <el-button type="primary" size="small" @click="confirm">确定</el-button>
-    </span>
-  </el-dialog>
-</template>
-<script>
-import { addGroupNode, updateGroupNode } from '@/api/tableV3'
-import { getParentId } from '../js/util.js'
-export default {
-  components: {
-
-  },
-  props: {
-    // 是否显示
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    // 正在编辑的数据
-    editData: {
-      type: Object,
-      default: null
-    },
-    // 新增数据还是修改数据
-    type: {
-      type: String,
-      default: ''
-    },
-    // 所有的节点
-    nodeOptions: {
-      type: Array,
-      default: null
-    }
-  },
-  inject: ['target'],
-  data () {
-    var checkBlank = (rule, value, callback) => {
-      const reg = /\s+/g
-      if (reg.test(value)) {
-        return callback(new Error('不能含有空格'))
-      }
-      callback()
-    }
-    return {
-      toolTipShow: false,
-      form: {
-        name: '',
-        code: '',
-        parentId: ''
-      },
-      rules: {
-        name: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: checkBlank, trigger: 'blur' }
-        ],
-        code: [
-          { required: true, message: '不能为空', trigger: 'blur' }
-        ],
-        parentId: [
-          { required: true, message: '不能为空', trigger: 'blur' }
-        ]
-      },
-      config: {
-        value: 'id',
-        label: 'name',
-        checkStrictly: true,
-        emitPath: false
-      }
-    }
-  },
-  computed: {
-    // 根据当前的id寻找父id
-    parentId () {
-      if (this.type === 'insert') {
-        return this.editData.id
-      }
-      return this.editData.id === '0'
-        ? null
-        : getParentId(this.nodeOptions[0], this.editData.id)
-    },
-    parentCodeStr () {
-      if (this.type === 'insert') {
-        return this.editData.groupCode
-      }
-      const parentCodeArr = this.editData.groupCode.split('.')
-      parentCodeArr.pop()
-
-      let parentCodeStr = ''
-      if (parentCodeArr.length) {
-        parentCodeStr = parentCodeArr.join('.')
-      }
-      return parentCodeStr
-    }
-  },
-  methods: {
-    /**
-     * 弹窗操作
-     */
-    // .sync 双向绑定
-    handleVisible (value) {
-      this.$emit('update:visible', value)
-    },
-    // 打开弹窗的时候对表单内容进行初始化
-    handleOpen () {
-      if (this.type === 'update') {
-        this.form.name = this.editData.name
-        this.form.code = this.editData.groupCode.split('.').pop()
-      }
-      this.form.parentId = this.parentId
-    },
-    // 关闭弹窗的时候清空校验和表单数据
-    handleClose () {
-      this.$refs.formRef.clearValidate()
-      this.form.name = ''
-      this.form.code = ''
-      this.form.parentId = ''
-      this.handleVisible(false)
-    },
-
-    /**
-     * 数据操作
-     */
-    // 点击确定进行表单校验
-    confirm () {
-      this.$refs.formRef.validate(success => {
-        if (success) {
-          this.type === 'insert'
-            ? this.addGroup()
-            : this.updateGroup()
-        }
-      })
-    },
-    // 复制编码到剪切板
-    copyHoleCode () {
-      if (this.type === 'insert') {
-        return
-      }
-      const tempInput = document.createElement('input')
-      tempInput.value = this.editData.groupCode
-      tempInput.setAttribute('id', 'temp_copy_input')
-      document.body.appendChild(tempInput)
-      tempInput.select()
-      document.execCommand('copy')
-      this.toolTipShow = true
-      document.getElementById('temp_copy_input').remove()
-    },
-    /**
-     * 无论添加还是修改分组，只允许用户修改当前节点的分组
-     * 但是最终传递给后端的分组节点的编码（groupCode),是包含了上一级别和当前级别的编码
-     * 上一级别的节点和当前节点，使用'.' 分割
-     */
-    // 插入新的分组
-    async addGroup () {
-      const groupCode = this.parentCodeStr
-        ? `${this.parentCodeStr}.${this.form.code}`
-        : this.form.code
-      const res = await addGroupNode(this.target, this.form.name, null, this.parentId, groupCode)
-      if (res.code !== 0) {
-        return this.$message.error(res.msg)
-      }
-      this.$emit('success')
-      this.$message.success('插入成功')
-      this.handleVisible(false)
-    },
-
-    // 修改已有分组
-    async updateGroup () {
-      const groupCode = this.parentCodeStr
-        ? this.parentCodeStr + '.' + this.form.code
-        : this.form.code
-      const res = await updateGroupNode(
-        this.target,
-        this.form.name,
-        this.editData.id,
-        this.form.parentId,
-        groupCode)
-
-      if (res.code !== 0) {
-        return this.$message.error(res.msg)
-      }
-      this.$emit('success')
-      this.$message.success('修改成功')
-      this.handleVisible(false)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.clickable {
-  cursor: pointer;
-}
-.el-cascader{
-  width: 100%;
-}
-::v-deep.el-button{
-  background-color: #0c4c8e!important;
-  border-color: #0c4c8e;
-  border-radius: 0;
-}
-</style>

package/package/t-data-list/src/t-table/table-group-item.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="tree-item" @mouseover="handleBtnShow(true)" @mouseleave="handleBtnShow(false)">
-    <div class="item-display-icon">
-      <span :class="[data.children ? 'el-icon-circle-plus':'el-icon-remove']" />
-    </div>
-
-    <div class="item-content" @click.stop="itemClick">
-      {{ data.name }}
-    </div>
-    <div class="item-icons">
-
-      <div v-show="btnShow" class="item-display-controll" @click.prevent>
-        <i class="el-icon-circle-plus-outline" @click.stop="addChild" />
-        <i v-if="data.id != 0" class="el-icon-edit" @click.stop="edit" />
-        <i v-if="data.id != 0" class="el-icon-delete" @click.stop="remove" />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  components: {
-
-  },
-  props: {
-    data: {
-      type: Object,
-      default: null
-    },
-    node: {
-      type: Object,
-      default: null
-    }
-  },
-  data () {
-    return {
-      btnShow: false
-    }
-  },
-  inject: ['enableGroupEdit'],
-  methods: {
-    // 分组编辑按时是否展示的逻辑
-    handleBtnShow (show) {
-      if (!this.enableGroupEdit) {
-        return
-      }
-      this.btnShow = show
-    },
-    addChild () {
-      this.$emit('addChild', this.data)
-    },
-    edit () {
-      this.$emit('edit', this.data)
-    },
-    remove () {
-      this.$emit('remove', this.data)
-    },
-    itemClick () {
-      this.$emit('itemClick', this.data)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .tree-item {
-    width:100%;
-    display:flex;
-    justify-content: flex-start;
-    text-align: start;
-    .item-content {
-      margin-left:5px;
-      // flex:1;
-      // background-color:pink;
-    }
-    .item-display-controll {
-      margin-left:7px;
-      margin-right:5px;
-      i {
-        margin-right:10px;
-      }
-    }
-    .item-icons{
-      width: 72px;
-    }
-  }
-</style>

package/package/t-data-list/src/t-table/table-group.vue

@@ -1,180 +0,0 @@
-<template>
-  <div class="table-group">
-    <!-- 节点搜索 -->
-    <el-input v-model="search" placeholder="请输入节点名称" />
-
-    <!-- 节点展示 -->
-    <el-scrollbar :class="[queryType === 'LIST' ? 'scrollbar' :'in-selector']">
-      <el-tree
-        ref="treeRef"
-        :data="dataTree"
-        node-key="id"
-        icon-class="nothing but won`t show any icon"
-        :default-expanded-keys="expandKeys"
-        :filter-node-method="treeFilter"
-        @node-expand="handleNodeExpand"
-        @node-collapse="handleCollapse"
-      >
-        <template slot-scope="{node,data}">
-          <TableGroupItem
-            :current-data="currentData"
-            :data="data"
-            :node="node"
-            @addChild="handleAddChild"
-            @edit="handleEdit"
-            @remove="handleRemove"
-            @itemClick="handleItemClick"
-          />
-        </template>
-      </el-tree>
-    </el-scrollbar>
-
-    <!-- 节点编辑 -->
-    <TableGroupItemEdit
-      :visible.sync="editVisible"
-      :edit-data="editData"
-      :node-options="dataTree"
-      :type="type"
-      @success="getGroupTree"
-    />
-  </div>
-</template>
-<script>
-import { getGroupTree, removeGroupNode } from '@/api/tableV3.js'
-import TableGroupItem from './table-group-item.vue'
-import TableGroupItemEdit from './table-group-item-edit.vue'
-export default {
-  components: {
-    TableGroupItem,
-    TableGroupItemEdit
-  },
-  data () {
-    return {
-      // 本地分组过滤输入内容
-      search: '',
-      // 分组树
-      dataTree: [],
-      // 当前选中的数据
-      currentData: null,
-      // 默认展开的key
-      expandKeys: ['0'],
-      /**
-       * 分组编辑弹窗相关属性
-       */
-      editVisible: false,
-      // 点击新增或者修改的时候，对应节点的数据对象
-      editData: {
-        groupCode: ''
-      },
-      // 新增一个节点还是修改一个节点的标识
-      type: ''
-    }
-  },
-  watch: {
-    search (value) {
-      this.$refs.treeRef.filter(value)
-    }
-  },
-  inject: ['target', 'queryType'],
-  created () {
-    this.getGroupTree()
-  },
-  methods: {
-    /**
-     * 节点展开，记录正在展开的节点
-     */
-    handleNodeExpand (data) {
-      this.expandKeys.push(data.id)
-    },
-    handleCollapse (data) {
-      this.expandKeys.splice(this.expandKeys.indexOf(data.id), 1)
-    },
-    // 节点内容本地过滤函数
-    treeFilter (value, data) {
-      if (!value) {
-        return true
-      }
-      return data.name.indexOf(value) !== -1
-    },
-    /**
-     * 获取分组
-     */
-    async getGroupTree () {
-      const res = await getGroupTree(this.target)
-      if (res.code !== 0) {
-        if (res.code === 10045) {
-          this.dataTree = []
-          return
-        }
-        return this.$message.error(res.msg)
-      }
-      this.dataTree = []
-      this.dataTree.push(res.data)
-    },
-    /**
-     * 切换分组
-     */
-    handleItemClick (data) {
-      const group = {
-        field: data.field,
-        value: data.id
-      }
-      this.$emit('groupChange', group)
-    },
-    /**
-     * 显示添加分组节点窗口
-     */
-    handleAddChild (data) {
-      this.type = 'insert'
-      this.editData = data
-      this.editVisible = true
-    },
-    /**
-     * 显示修改分组节点窗口
-     */
-    handleEdit (data) {
-      this.type = 'update'
-      this.editData = data
-      this.editVisible = true
-    },
-    /**
-     * 删除分组
-     */
-    async handleRemove (data) {
-      const res = await removeGroupNode(this.target, data.id)
-      if (res.code !== 0) {
-        return this.$message.error(res.msg)
-      }
-      this.$message.success('删除成功')
-      this.getGroupTree()
-    }
-  }
-}
-</script>
-
-<style scoped lang='less'>
-  .table-group {
-    height:70vh;
-    .scrollbar{
-      height:70vh;
-    }
-    .in-selector {
-      height:53vh;
-    }
-    ::v-deep .el-scrollbar__wrap {
-      overflow-x:hidden;
-    }
-    background-color: #fff;
-    box-sizing: border-box;
-    border: 1px solid #e8eaec;
-    border-right: 0px;
-    &:first-child{
-      padding: 5px;
-    }
-  }
-  /deep/ .el-tree{
-    display: inline-block;
-    min-width: 100%;
-  }
-
-</style>