Merge branch 'master' of http://139.196.39.194:9021/chenc/cd-work-flow-web

src/components/jeecg/JEditor.vue

@@ -6,6 +6,8 @@
       :disabled="disabled"
       @onClick="onClick">
     </editor>
+    <!-- 显示 -->
+  <!-- <div v-html="myValue" id="myValue"></div> -->
   </div>
 </template>
 
@@ -23,6 +25,8 @@
   import 'tinymce/plugins/colorpicker'
   import 'tinymce/plugins/textcolor'
   import 'tinymce/plugins/fullscreen'
+  
+  import 'tinymce/icons/default/icons.min.js'
   export default {
     components: {
       Editor

src/views/oa/mailList.vue

@@ -0,0 +1,204 @@
+<template>
+  <a-row :gutter="24">
+    <!-- 左边 -->
+    <a-col :span="6" style="padding:5px">
+      <a-card>
+        <a-input-search style="margin-bottom: 8px" placeholder="搜索" @change="onChange" />
+        <a-tree
+          :show-line="true"
+          :expanded-keys="expandedKeys"
+          :auto-expand-parent="autoExpandParent"
+          :tree-data="gData"
+          @expand="onExpand"
+        >
+          <template slot="title" slot-scope="{ title }">
+            <span v-if="title.indexOf(searchValue) > -1">
+              {{ title.substr(0, title.indexOf(searchValue)) }}
+              <span
+                style="color: #f50"
+              >{{ searchValue }}</span>
+              {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
+            </span>
+            <span v-else>{{ title }}</span>
+          </template>
+        </a-tree>
+      </a-card>
+    </a-col>
+    <!-- 右边 -->
+    <a-col :span="18" style="padding:5px">
+      <a-card>
+        <a-table
+          :columns="columns"
+          :row-key="record => record.id"
+          :data-source="dataPageList"
+          :pagination="pagination"
+          :loading="loading"
+          @change="handleTableChange"
+        ></a-table>
+      </a-card>
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+//递归找出搜索项的父级key
+const getParentKey = (key, tree) => {
+  let parentKey = ''
+  for (let i = 0; i < tree.length; i++) {
+    const node = tree[i]
+    if (node.children) {
+      node.children.forEach(item => {
+        if (parentKey == '' && item.key == key) {
+          parentKey = node.key
+        } else {
+          parentKey = getParentKey(key, node.children)
+        }
+      })
+    }
+  }
+  return parentKey
+}
+export default {
+  name: 'mailList',
+  data() {
+    return {
+      expandedKeys: [],
+      searchValue: '',
+      autoExpandParent: true,
+      //树形数据
+      gData: [
+        {
+          key: '上海萃颠',
+          title: '上海萃颠',
+          scopedSlots: { title: 'title' },
+          children: [
+            {
+              key: '开发部',
+              title: '开发部',
+              scopedSlots: { title: 'title' }
+            },
+            {
+              key: '测试部',
+              title: '测试部',
+              scopedSlots: { title: 'title' }
+            },
+            {
+              key: '实施部',
+              title: '开发部',
+              scopedSlots: { title: 'title' }
+            },
+            {
+              key: '销售部',
+              title: '销售部',
+              scopedSlots: { title: 'title' }
+            },
+            {
+              key: '行政部',
+              title: '行政部',
+              scopedSlots: { title: 'title' }
+            },
+            {
+              key: '财务部',
+              title: '财务部',
+              scopedSlots: { title: 'title' }
+            }
+          ]
+        }
+      ],
+      dataList: [],
+      //表格标题
+      columns: [
+        {
+          title: '#',
+          dataIndex: 'index'
+        },
+        {
+          title: '姓名',
+          dataIndex: 'name',
+          // sorter: true,
+          width: '20%'
+          // scopedSlots: { customRender: 'name' }
+        },
+        {
+          title: '部门',
+          dataIndex: 'gender',
+          // filters: [
+          //   { text: 'Male', value: 'male' },
+          //   { text: 'Female', value: 'female' }
+          // ],
+          width: '20%'
+        },
+        {
+          title: '职务',
+          dataIndex: 'zhiwu'
+        },
+        {
+          title: '手机',
+          dataIndex: 'phone'
+        },
+        {
+          title: '公司邮箱',
+          dataIndex: 'email'
+        }
+      ],
+      dataPageList: [{ id:"123",index: 1, name: '张三',gender:"开发部",zhiwu:"开发", phone:"12345697485"}], //表格数据集合
+      loading: false, //表格加载
+      pagination: {} //分页
+    }
+  },
+  created() {
+    this.generateList(this.gData)
+  },
+  computed: {},
+  mounted() {},
+  methods: {
+    //把tree中的数据用list保存平级数据，用来查找搜索项
+    generateList(data) {
+      for (let i = 0; i < data.length; i++) {
+        const node = data[i]
+        const key = node.key
+        this.dataList.push({ key, title: key })
+        if (node.children) {
+          this.generateList(node.children)
+        }
+      }
+    },
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = false
+    },
+    //搜索项初发事件
+    onChange(e) {
+      const value = e.target.value
+      const expandedKeys = this.dataList
+        .map(item => {
+          if (item.title.indexOf(value) > -1) {
+            return getParentKey(item.key, this.gData)
+          }
+          return null
+        })
+        .filter((item, i, self) => item && self.indexOf(item) === i)
+      Object.assign(this, {
+        expandedKeys,
+        searchValue: value,
+        autoExpandParent: true
+      })
+    },
+    handleTableChange(pagination, filters, sorter) {
+      // console.log(pagination)
+      // const pager = { ...this.pagination }
+      // pager.current = pagination.current
+      // this.pagination = pager
+      // this.fetch({
+      //   results: pagination.pageSize,
+      //   page: pagination.current,
+      //   sortField: sorter.field,
+      //   sortOrder: sorter.order,
+      //   ...filters
+      // })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>