@tongfun/tf-widget 0.1.20 → 0.1.21

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

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