@tongfun/tf-widget 0.1.18 → 0.1.22

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

@@ -1,350 +1,344 @@
-<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>
+<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 () {
+      return (this.data && this.data[0]) || []
+    },
+    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>