@aochuang/common 1.0.1 → 1.0.126

package/components/transfer/transfer.vue

@@ -1,9 +1,11 @@
 <template>
-  <el-transfer
+  <transfer-element
     class="ui-transfer"
     :data="innerData"
     :props="props"
     :titles="titles"
+    :remote="remote"
+    :query-method="handleQueryTransferData"
     :filter-placeholder="filterPlaceholer"
     :filterable="filterable"
     :filter-method="filterMethod"
@@ -24,17 +26,16 @@
       >
       </div>
     </template>
-  </el-transfer>
+  </transfer-element>
 </template>
 <script>
-import ElTransfer from 'element-ui/lib/transfer'
-import 'element-ui/lib/theme-chalk/transfer.css'
+import TransferElement from './transfer-element'
 import TransferLoadMore from './transfer-load-more'
 
 export default {
   name: 'UiTransfer',
   components: {
-    ElTransfer,
+    TransferElement,
     TransferLoadMore
   },
   props: {
@@ -44,6 +45,10 @@ export default {
     titles: {
       type: Array
     },
+    remote: {
+      type: Boolean,
+      default: false
+    },
     filterable: {
       type: Boolean,
       default: false
@@ -75,6 +80,7 @@ export default {
   },
   data () {
     return {
+      keyword: null,
       pageIndex: 1,
       pageSize: 20,
       reloading: false,
@@ -135,6 +141,10 @@ export default {
     }
   },
   methods: {
+    handleQueryTransferData ({ keyword }) {
+      this.keyword = keyword
+      this.reload()
+    },
     loadMoreOptions () {
       if (this.innerLoading || this.notMore) {
         return
@@ -225,8 +235,13 @@ export default {
     font-size: 14px;
   }
   .el-transfer-panel .el-checkbox__inner {
-    width: 12px;
-    height: 12px;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    box-sizing: border-box;
+    &:after {
+      top: 1px;
+    }
   }
   .el-transfer-panel{
     flex: 1;

package/components/tree/tree.vue

@@ -10,13 +10,17 @@
       :node-key="idField"
       :show-checkbox="multiple"
       :highlight-current="highlightCurrent"
-      :expand-on-click-node="false"
+      :expand-on-click-node="expandOnClickNode"
       :current-node-key="current"
+      :lazy="lazy"
+      :load="lazyLoadMethod"
+      :props="treeProps"
       @current-change="handleCurrentChange"
       :filter-node-method="handleFilterNode"
       :check-strictly="checkStrictly"
       :default-expand-all="defaultExpandAll"
       :allow-drop="allowDrop"
+      v-on="bindEvents"
       @check="handleNodeCheck"
     >
       <div class="ui-tree__node" slot-scope="{ node, data }" :style="{'height': itemHeight, 'line-height': itemHeight}">
@@ -24,10 +28,12 @@
           <component
             :is="handleRenderLevelIcon(node)"
           ></component>
-          <span
-            :title="data[textField]"
-            class="ui-tree__node-text"
-          >{{ data[textField] }}</span>
+          <slot name="node" :data="data">
+            <span
+              :title="data[textField]"
+              class="ui-tree__node-text"
+            >{{ data[textField] }}</span>
+          </slot>
           <span class="ui-tree__node-tool" v-if="$slots['node-toolbar']">
             <slot name="node-toolbar" :data="data"></slot>
           </span>
@@ -44,12 +50,15 @@
 import ElTree from 'element-ui/lib/tree'
 import 'element-ui/lib/theme-chalk/tree.css'
 import UiIcon from '../icon'
+import UiLoading from '../loading'
 import { getNodesByLevel, getCheckLeastFatherNodes } from './utils'
 
 export default {
   name: 'UiTree',
   components: {
-    ElTree
+    ElTree,
+    UiIcon,
+    UiLoading
   },
   props: {
     height: {
@@ -64,6 +73,10 @@ export default {
     queryMethod: {
       type: Function
     },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
     defaultExpandAll: {
       type: Boolean,
       default: false
@@ -124,12 +137,25 @@ export default {
     filterKeyword: {
       type: String
     },
+    filterMethod: {
+      type: Function
+    },
+    expandOnClickNode: {
+      type: Boolean,
+      default: false
+    },
     allowDrop: {
       type: Function
     },
+    isLeaf: {
+      type: [Function]
+    },
     itemHeight: {
       type: String,
       default: '32px'
+    },
+    bindContextMenuEvent: {
+      type: Boolean
     }
   },
   data () {
@@ -139,6 +165,13 @@ export default {
     }
   },
   computed: {
+    bindEvents () {
+      const events = {}
+      if (this.bindContextMenuEvent) {
+        events['node-contextmenu'] = this.handleNodeContextMenu
+      }
+      return events
+    },
     levelIconsMap () {
       const map = {}
       if (this.levelIcons && this.levelIcons.length) {
@@ -156,6 +189,30 @@ export default {
       return getNodesByLevel(this.innerData, this.defaultExpandedLevel).map(v => {
         return v[this.idField]
       })
+    },
+    treeProps () {
+      return {
+        isLeaf: this.isLeaf
+      }
+    },
+    lazyLoadMethod () {
+      if (!this.lazy || !this.queryMethod) {
+        return
+      }
+      return (parentNode, resolveData) => {
+        const rs = this.queryMethod({
+          parentNode: !parentNode || !parentNode.parent ? null : parentNode 
+        })
+        if (rs && rs.then) {
+          rs.then((rs) => {
+            resolveData(rs)
+          }, () => {
+            resolveData([])
+          })
+        } else {
+          resolveData(rs || [])
+        }
+      }
     }
   },
   watch: {
@@ -177,19 +234,28 @@ export default {
     }
   },
   created () {
-    if (this.queryMethod) {
-      this.loading = true
-      this.queryMethod().then(rs => {
-        this.innerData = rs
-      }).finally(() => {
-        this.loading = false
-      })
+    if (!this.lazy) {
+      if (this.queryMethod) {
+        this.loading = true
+        this.queryMethod().then(rs => {
+          this.innerData = rs || []
+        }).finally(() => {
+          this.loading = false
+        })
+      }
     }
   },
   mounted () {
     this.$refs.tree.filter(this.filterKeyword)
   },
   methods: {
+    handleNodeContextMenu (evt, data, node) {
+      this.$emit('node-contextmenu', {
+        event: evt,
+        data,
+        node
+      })
+    },
     handleRenderLevelIcon (node) {
       if (!this.showLevelIcon || !node.level) {
         return
@@ -224,10 +290,17 @@ export default {
       })
     },
     handleFilterNode (value, data) {
-      if (typeof this.filterKeyword === 'undefined' || this.filterKeyword === null || this.filterKeyword === '') {
-        return true
+      if (this.filterMethod) {
+        return this.filterMethod({
+          keyword: value,
+          data
+        })
+      } else {
+        if (typeof this.filterKeyword === 'undefined' || this.filterKeyword === null || this.filterKeyword === '') {
+          return true
+        }
+        return (data[this.textField] || '').toString().toLowerCase().indexOf(value) >= 0
       }
-      return (data[this.textField] || '').toString().toLowerCase().indexOf(value) >= 0
     },
     handleNodeCheck (data, check) {
       let checkedKeys = check.checkedKeys
@@ -245,6 +318,92 @@ export default {
       this.$nextTick(() => {
         this.$refs.tree.setCurrentKey(val)
       })
+    },
+    filter (keyword) {
+      this.$refs.tree.filter(keyword)
+    },
+    reloadNode (node) {
+      return new Promise((resolve, reject) => {
+        if (this.lazy) {
+          node = this.getNode(node) || this.$refs.tree.root
+          if (!node) {
+            return reject(new Error('未找到节点'))
+          }
+          node.loaded = false
+          node.loadData(() => {
+            resolve()
+          })
+        } else {
+          if (this.queryMethod) {
+            this.loading = true
+            this.queryMethod().then(rs => {
+              this.innerData = rs || []
+              resolve(this.innerData)
+            }, err => {
+              reject(err)
+            }).finally(() => {
+              this.loading = false
+            })
+          }
+        }
+      })
+    },
+    expandNode (node) {
+      node = this.getNode(node)
+      if (!node) {
+        return
+      }
+      if (node.isLeaf) {
+        return
+      }
+      node.expand()
+    },
+    getNode (node) {
+      let result = null
+      let nodeId = typeof node === 'object' ? node[this.idField] : node
+      const loop = (nodes) => {
+        if (!nodes || !nodes.length) {
+          return
+        }
+        return nodes.some(node => {
+          if (node.data[this.idField] === nodeId) {
+            result = node
+            return true
+          } else {
+            return loop(node.childNodes)
+          }
+        })
+      }
+      loop(this.$refs.tree.root.childNodes)
+      return result
+    },
+    remove (node) {
+      node = this.getNode(node)
+      if (!node) {
+        return
+      }
+      return this.$refs.tree.remove(node)
+    },
+    append (data, parentNode) {
+      return this.$refs.tree.append(data, this.getNode(parentNode))
+    },
+    update (node, props) {
+      node = this.getNode(node)
+      if (!node) {
+        return
+      }
+      if (!props) {
+        return
+      }
+      Object.keys(props).forEach(key => {
+        this.$set(node.data, key, props[key])
+      })
+    },
+    getData () {
+      if (!this.$refs.tree || !this.$refs.tree.store) {
+        return []
+      }
+      return this.$refs.tree.store.root.data
     }
   }
 }

package/components/video/video.vue

@@ -1,10 +1,21 @@
 <template>
-  <video class="ui-video" :autoplay="autoplay" :width="width" :poster="poster" :preload="preload" :height="height" :controls="controls">
+  <video 
+    class="ui-video" 
+    :autoplay="autoplay" 
+    :width="width" 
+    :poster="poster" 
+    :preload="preload" 
+    :height="height" 
+    :controls="controls" 
+    @error="handleError"
+  >
     <source :src="innerSrc">
     您的浏览器不支持 video 标签。
   </video>
 </template>
 <script>
+import { formatOssPath } from '../../utils/oss'
+
 export default {
   name: 'UiVideo',
   props: {
@@ -40,8 +51,45 @@ export default {
       }
     },
     innerSrc () {
-      return this.src
+      return formatOssPath(this.src)
     }
+  },
+  data () {
+    return {
+      isError: false
+    }
+  },
+  watch: {
+    src () {
+      this.isError = false
+    }
+  },
+  mounted () {
+    this.loopCheckError()
+  },
+  methods: {
+    loopCheckError () {
+      if (this.isError) {
+        return
+      }
+      this._checkErrorTimer = setTimeout(() => {
+        // 0:没有关于媒体资源的可用信息，或者媒体资源尚未加载。
+        // 3: 媒体元素尝试加载资源，但没有找到有效的媒体源（可能是资源 URL 错误、403/404 等网络错误，或所有<source>标签指定的资源都无法加载）。
+        if (this.$el.readyState === 0 && this.$el.networkState === 3) {
+          this.isError = true
+          this.$emit('error')
+        } else {
+          this.loopCheckError()
+        }
+      }, 1000)
+    },
+    handleError () {
+      this.isError = true
+      this.$emit('error')
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this._checkErrorTimer)
   }
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aochuang/common",
-  "version": "1.0.1",
+  "version": "1.0.126",
   "description": "",
   "main": "index.js",
   "publishConfig": {
@@ -9,7 +9,18 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "dependencies": {
+    "md5": "^2.3.0",
+    "merge-options": "^3.0.4",
+    "resize-observer-polyfill": "^1.5.1",
+    "x2js": "^3.4.4",
+    "vxe-table": "3.8.19",
+    "viewerjs": "^1.6.1",
+    "sortablejs": "^1.15.0",
+    "load-script": "^2.0.0"
+  },
   "peerDependencies": {
+    "query-string": "^4.1.0",
     "element-ui": "git+https://gitee.com/devi001/wk-element.git#v2.15.10"
   },
   "author": "",

package/uni-common/more-button/more-button.vue

@@ -0,0 +1,23 @@
+<template>
+	<view class="bi-more-button" @click="handleClick">
+		<bi-icon name="more-fill"></bi-icon>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'BiMoreFill',
+	methods: {
+		handleClick () {
+			this.$emit('click')
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.bi-more-button {
+	display: inline-block;
+	vertical-align: top;
+}
+</style>

package/uni-common/popup-select/popup-select.vue

@@ -0,0 +1,217 @@
+<template>
+	<view class="bi-popup-select" :class="{'is-border' : border}">
+		<view class="bi-popup-select__handle" :style="{'width': width}" @click="handleHandleClick">
+			<template v-if="loading">
+				<view class="bi-popup-select__handle-loading">
+					<ui-loading class="bi-popup-select__handle-loading-icon" size="mini"></ui-loading> 
+					<view class="bi-popup-select__handle-loading-text">数据加载中...</view>
+				</view>
+			</template>
+			<template v-else>
+				<template v-if="isEmpty">
+					<view class="bi-popup-select__handle-placeholder">
+						{{ placeholder }}
+					</view>
+				</template>
+				<template v-else>
+					<view class="bi-popup-select__handle-current">
+						<slot name="current"></slot>
+					</view>
+				</template>
+			</template>
+			<view class="bi-popup-select__handle-arrow"></view>
+		</view>
+		<ui-popup
+			v-model="showPopup"
+			:title="popupTitle"
+		>
+			<view class="bi-popup-select__main" :style="{height: popupHeight}">
+				<view class="bi-popup-select__toolbar">
+					<view class="bi-popup-select__toolbar-item">
+						<view class="bi-popup-select__toolbar-cancel" @click="handleCancleClick">取消</view>
+					</view>
+					<view class="bi-popup-select__toolbar-item">
+						<view class="bi-popup-select__toolbar-confirm">确定</view>
+					</view>
+				</view>
+				<view class="bi-popup-select__wrap">
+					<slot></slot>
+				</view>
+			</view>
+		</ui-popup>
+	</view>
+</template>
+
+<script>
+import UiLoading from '@aochuang/common/uni-components/loading'
+import UiPopup from '@aochuang/common/uni-components/popup'
+
+export default {
+	name: 'BiPopupSelect',
+	components: {
+		UiPopup,
+		UiLoading
+	},
+	props: {
+		value: {
+			type: [String, Number]
+		},
+		width: {
+			type: String
+		},
+		border: {
+			type: Boolean
+		},
+		loading: {
+			type: Boolean
+		},
+		placeholder: {
+			type: String
+		},
+		popupTitle: {
+			type: String
+		},
+		popupHeight: {
+			type: String,
+			default: '40vh'
+		}
+	},
+	data () {
+		return {
+			showPopup: false
+		}
+	},
+	computed: {
+		isEmpty () {
+			return this.value === null || this.value === '' || this.value === undefined
+		}
+	},
+	methods: {
+		handleHandleClick () {
+			if (this.loading) {
+				return
+			}
+			this.showPopup = true
+		},
+		handleCancleClick () {
+			this.showPopup = false
+		},
+		close () {
+			this.showPopup = false
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.bi-popup-select{
+	&.is-border {
+		.bi-popup-select__handle{
+			border: 1px solid #eee;
+			border-radius: 3px;
+			padding: 0 24px 0 12px;
+		}
+	}
+}
+.bi-popup-select__handle-loading{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	color: #999;
+}
+.bi-popup-select__handle-loading-icon {
+	margin-right: 5px;
+}
+.bi-popup-select__handle{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	height: 30px;
+	line-height: 30px;
+	padding: 1px 24px 1px 1px;
+	position: relative;
+	box-sizing: border-box;
+}
+.bi-popup-select__handle-arrow{
+	width: 18px;
+	height: 18px;
+	position: relative;
+	margin-left: 4px;
+	position: absolute;
+	right: 4px;
+	top: 50%;
+	transform: translateY(-50%);
+	&:after {
+		position: absolute;
+		top: 4px;
+		left: 6px;
+		content: '';
+		width: 5px;
+		height: 5px;
+		border: 1px solid #555;
+		display: inline-block;
+		transform: rotate(45deg);
+		border-left: 0;
+		border-top: 0;
+	}
+}
+.bi-popup-select__handle-clear{
+	width: 18px;
+	height: 18px;
+	background-color: #eee;
+	position: relative;
+	border-radius: 50%;
+	position: absolute;
+	right: 6px;
+	top: 50%;
+	margin-top: -2px;
+	transform: rotate(45deg) translateY(-50%);
+	&:after, &:before {
+		content: '';
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		background-color: #444;
+	}
+	&:after {
+		width: 10px;
+		height: 1px;
+	}
+	&:before {
+		width: 1px;
+		height: 10px;
+	}
+}
+.bi-popup-select__handle-placeholder{
+	color: #999;
+}
+.bi-popup-select__toolbar {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 0;
+	border-bottom: 1px solid #f3f3f3;
+}
+.bi-popup-select__toolbar-confirm {
+	font-size: 15px;
+	cursor: pointer;
+	color: #3c9cff;
+	padding: 0 12px;
+}
+.bi-popup-select__toolbar-cancel {
+	font-size: 15px;
+	cursor: pointer;
+	color: #909193;
+	padding: 0 12px;
+}
+.bi-popup-select__main{
+	display: flex;
+	flex-direction: column;
+}
+.bi-popup-select__wrap{
+	flex: 1;
+	min-height: 0;
+}
+</style>