@tongfun/tf-widget 0.1.6 → 0.1.10

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

@@ -0,0 +1,238 @@
+<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

@@ -0,0 +1,87 @@
+<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

@@ -0,0 +1,179 @@
+<template>
+  <div class="table-group">
+    <!-- 节点搜索 -->
+    <el-input v-model="search" placeholder="请输入节点名称" />
+
+    <!-- 节点展示 -->
+    <el-scrollbar class="scrollbar">
+      <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'],
+  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:100%;
+    .scrollbar{
+      height:calc(100% - 40px);
+    }
+    ::v-deep .el-scrollbar__wrap {
+      overflow-x:hidden;
+    }
+    background-color: #fff;
+    // margin-right:10px;
+    // border-radius:5px;
+    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>