From c9c263dc43ad90f95f24a036cee9e6b47afb596c Mon Sep 17 00:00:00 2001 From: skyouc Date: 星期六, 21 十二月 2024 18:44:20 +0800 Subject: [PATCH] 新建盐城德森项目 --- uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue | 666 +++++++++++++++++++++++++++--------------------------- 1 files changed, 333 insertions(+), 333 deletions(-) diff --git a/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue b/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue index 72f8b33..e180301 100644 --- a/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue +++ b/uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue @@ -1,333 +1,333 @@ -<template> - <view class="uni-data-pickerview"> - <scroll-view class="selected-area" scroll-x="true" scroll-y="false" :show-scrollbar="false"> - <view class="selected-list"> - <template v-for="(item,index) in selected"> - <view class="selected-item" - :class="{'selected-item-active':index==selectedIndex, 'selected-item-text-overflow': ellipsis}" - :key="index" v-if="item.text" @click="handleSelect(index)"> - <text class="">{{item.text}}</text> - </view> - </template> - </view> - </scroll-view> - <view class="tab-c"> - <template v-for="(child, i) in dataList"> - <scroll-view class="list" :key="i" v-if="i==selectedIndex" :scroll-y="true"> - <view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in child" :key="j" - @click="handleNodeClick(item, i, j)"> - <text class="item-text item-text-overflow">{{item[map.text]}}</text> - <view class="check" v-if="selected.length > i && item[map.value] == selected[i].value"></view> - </view> - </scroll-view> - </template> - - <view class="loading-cover" v-if="loading"> - <uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more> - </view> - <view class="error-message" v-if="errorMessage"> - <text class="error-text">{{errorMessage}}</text> - </view> - </view> - </view> -</template> - -<script> - import dataPicker from "./uni-data-picker.js" - - /** - * DataPickerview - * @description uni-data-pickerview - * @tutorial https://ext.dcloud.net.cn/plugin?id=3796 - * @property {Array} localdata 鏈湴鏁版嵁锛屽弬鑰� - * @property {Boolean} step-searh = [true|false] 鏄惁鍒嗗竷鏌ヨ - * @value true 鍚敤鍒嗗竷鏌ヨ锛屼粎鏌ヨ褰撳墠閫変腑鑺傜偣 - * @value false 鍏抽棴鍒嗗竷鏌ヨ锛屼竴娆℃煡璇㈠嚭鎵�鏈夋暟鎹� - * @property {String|DBFieldString} self-field 鍒嗗竷鏌ヨ褰撳墠瀛楁鍚嶇О - * @property {String|DBFieldString} parent-field 鍒嗗竷鏌ヨ鐖跺瓧娈靛悕绉� - * @property {String|DBCollectionString} collection 琛ㄥ悕 - * @property {String|DBFieldString} field 鏌ヨ瀛楁锛屽涓瓧娈电敤 `,` 鍒嗗壊 - * @property {String} orderby 鎺掑簭瀛楁鍙婃搴忓�掑彊璁剧疆 - * @property {String|JQLString} where 鏌ヨ鏉′欢 - */ - export default { - name: 'UniDataPickerView', - emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'], - mixins: [dataPicker], - props: { - managedMode: { - type: Boolean, - default: false - }, - ellipsis: { - type: Boolean, - default: true - } - }, - data() { - return {} - }, - created() { - if (this.managedMode) { - return - } - - this.$nextTick(() => { - this.load() - }) - }, - methods: { - onPropsChange() { - this._treeData = [] - this.selectedIndex = 0 - this.load() - }, - load() { - if (this.isLocaldata) { - this.loadData() - } else if (this.dataValue.length) { - this.getTreePath((res) => { - this.loadData() - }) - } - }, - handleSelect(index) { - this.selectedIndex = index - }, - handleNodeClick(item, i, j) { - if (item.disable) { - return - } - const node = this.dataList[i][j] - const text = node[this.map.text] - const value = node[this.map.value] - if (i < this.selected.length - 1) { - this.selected.splice(i, this.selected.length - i) - this.selected.push({ - text, - value - }) - } else if (i === this.selected.length - 1) { - this.selected.splice(i, 1, { - text, - value - }) - } - - if (node.isleaf) { - this.onSelectedChange(node, node.isleaf) - return - } - - const { - isleaf, - hasNodes - } = this._updateBindData() - - if (!this._isTreeView() && !hasNodes) { - this.onSelectedChange(node, true) - return - } - - if (this.isLocaldata && (!hasNodes || isleaf)) { - this.onSelectedChange(node, true) - return - } - - if (!isleaf && !hasNodes) { - this._loadNodeData((data) => { - if (!data.length) { - node.isleaf = true - } else { - this._treeData.push(...data) - this._updateBindData(node) - } - this.onSelectedChange(node, node.isleaf) - }, this._nodeWhere()) - return - } - - this.onSelectedChange(node, false) - }, - updateData(data) { - this._treeData = data.treeData - this.selected = data.selected - if (!this._treeData.length) { - this.loadData() - } else { - //this.selected = data.selected - this._updateBindData() - } - }, - onDataChange() { - this.$emit('datachange') - }, - onSelectedChange(node, isleaf) { - if (isleaf) { - this._dispatchEvent() - } - - if (node) { - this.$emit('nodeclick', node) - } - }, - _dispatchEvent() { - this.$emit('change', this.selected.slice(0)) - } - } - } -</script> -<style > - .uni-data-pickerview { - flex: 1; - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: column; - overflow: hidden; - height: 100%; - } - - .error-text { - color: #DD524D; - } - - .loading-cover { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - background-color: rgba(255, 255, 255, .5); - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: column; - align-items: center; - z-index: 1001; - } - - .load-more { - /* #ifndef APP-NVUE */ - margin: auto; - /* #endif */ - } - - .error-message { - background-color: #fff; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - padding: 15px; - opacity: .9; - z-index: 102; - } - - /* #ifdef APP-NVUE */ - .selected-area { - width: 750rpx; - } - - /* #endif */ - - .selected-list { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: row; - flex-wrap: nowrap; - padding: 0 5px; - border-bottom: 1px solid #f8f8f8; - } - - .selected-item { - margin-left: 10px; - margin-right: 10px; - padding: 12px 0; - text-align: center; - /* #ifndef APP-NVUE */ - white-space: nowrap; - /* #endif */ - } - - .selected-item-text-overflow { - width: 168px; - /* fix nvue */ - overflow: hidden; - /* #ifndef APP-NVUE */ - width: 6em; - white-space: nowrap; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - /* #endif */ - } - - .selected-item-active { - border-bottom: 2px solid #007aff; - } - - .selected-item-text { - color: #007aff; - } - - .tab-c { - position: relative; - flex: 1; - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: row; - overflow: hidden; - } - - .list { - flex: 1; - } - - .item { - padding: 12px 15px; - /* border-bottom: 1px solid #f0f0f0; */ - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: row; - justify-content: space-between; - } - - .is-disabled { - opacity: .5; - } - - .item-text { - /* flex: 1; */ - color: #333333; - } - - .item-text-overflow { - width: 280px; - /* fix nvue */ - overflow: hidden; - /* #ifndef APP-NVUE */ - width: 20em; - white-space: nowrap; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - /* #endif */ - } - - .check { - margin-right: 5px; - border: 2px solid #007aff; - border-left: 0; - border-top: 0; - height: 12px; - width: 6px; - transform-origin: center; - /* #ifndef APP-NVUE */ - transition: all 0.3s; - /* #endif */ - transform: rotate(45deg); - } -</style> +<template> + <view class="uni-data-pickerview"> + <scroll-view class="selected-area" scroll-x="true" scroll-y="false" :show-scrollbar="false"> + <view class="selected-list"> + <template v-for="(item,index) in selected"> + <view class="selected-item" + :class="{'selected-item-active':index==selectedIndex, 'selected-item-text-overflow': ellipsis}" + :key="index" v-if="item.text" @click="handleSelect(index)"> + <text class="">{{item.text}}</text> + </view> + </template> + </view> + </scroll-view> + <view class="tab-c"> + <template v-for="(child, i) in dataList"> + <scroll-view class="list" :key="i" v-if="i==selectedIndex" :scroll-y="true"> + <view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in child" :key="j" + @click="handleNodeClick(item, i, j)"> + <text class="item-text item-text-overflow">{{item[map.text]}}</text> + <view class="check" v-if="selected.length > i && item[map.value] == selected[i].value"></view> + </view> + </scroll-view> + </template> + + <view class="loading-cover" v-if="loading"> + <uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more> + </view> + <view class="error-message" v-if="errorMessage"> + <text class="error-text">{{errorMessage}}</text> + </view> + </view> + </view> +</template> + +<script> + import dataPicker from "./uni-data-picker.js" + + /** + * DataPickerview + * @description uni-data-pickerview + * @tutorial https://ext.dcloud.net.cn/plugin?id=3796 + * @property {Array} localdata 鏈湴鏁版嵁锛屽弬鑰� + * @property {Boolean} step-searh = [true|false] 鏄惁鍒嗗竷鏌ヨ + * @value true 鍚敤鍒嗗竷鏌ヨ锛屼粎鏌ヨ褰撳墠閫変腑鑺傜偣 + * @value false 鍏抽棴鍒嗗竷鏌ヨ锛屼竴娆℃煡璇㈠嚭鎵�鏈夋暟鎹� + * @property {String|DBFieldString} self-field 鍒嗗竷鏌ヨ褰撳墠瀛楁鍚嶇О + * @property {String|DBFieldString} parent-field 鍒嗗竷鏌ヨ鐖跺瓧娈靛悕绉� + * @property {String|DBCollectionString} collection 琛ㄥ悕 + * @property {String|DBFieldString} field 鏌ヨ瀛楁锛屽涓瓧娈电敤 `,` 鍒嗗壊 + * @property {String} orderby 鎺掑簭瀛楁鍙婃搴忓�掑彊璁剧疆 + * @property {String|JQLString} where 鏌ヨ鏉′欢 + */ + export default { + name: 'UniDataPickerView', + emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'], + mixins: [dataPicker], + props: { + managedMode: { + type: Boolean, + default: false + }, + ellipsis: { + type: Boolean, + default: true + } + }, + data() { + return {} + }, + created() { + if (this.managedMode) { + return + } + + this.$nextTick(() => { + this.load() + }) + }, + methods: { + onPropsChange() { + this._treeData = [] + this.selectedIndex = 0 + this.load() + }, + load() { + if (this.isLocaldata) { + this.loadData() + } else if (this.dataValue.length) { + this.getTreePath((res) => { + this.loadData() + }) + } + }, + handleSelect(index) { + this.selectedIndex = index + }, + handleNodeClick(item, i, j) { + if (item.disable) { + return + } + const node = this.dataList[i][j] + const text = node[this.map.text] + const value = node[this.map.value] + if (i < this.selected.length - 1) { + this.selected.splice(i, this.selected.length - i) + this.selected.push({ + text, + value + }) + } else if (i === this.selected.length - 1) { + this.selected.splice(i, 1, { + text, + value + }) + } + + if (node.isleaf) { + this.onSelectedChange(node, node.isleaf) + return + } + + const { + isleaf, + hasNodes + } = this._updateBindData() + + if (!this._isTreeView() && !hasNodes) { + this.onSelectedChange(node, true) + return + } + + if (this.isLocaldata && (!hasNodes || isleaf)) { + this.onSelectedChange(node, true) + return + } + + if (!isleaf && !hasNodes) { + this._loadNodeData((data) => { + if (!data.length) { + node.isleaf = true + } else { + this._treeData.push(...data) + this._updateBindData(node) + } + this.onSelectedChange(node, node.isleaf) + }, this._nodeWhere()) + return + } + + this.onSelectedChange(node, false) + }, + updateData(data) { + this._treeData = data.treeData + this.selected = data.selected + if (!this._treeData.length) { + this.loadData() + } else { + //this.selected = data.selected + this._updateBindData() + } + }, + onDataChange() { + this.$emit('datachange') + }, + onSelectedChange(node, isleaf) { + if (isleaf) { + this._dispatchEvent() + } + + if (node) { + this.$emit('nodeclick', node) + } + }, + _dispatchEvent() { + this.$emit('change', this.selected.slice(0)) + } + } + } +</script> +<style > + .uni-data-pickerview { + flex: 1; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + overflow: hidden; + height: 100%; + } + + .error-text { + color: #DD524D; + } + + .loading-cover { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: rgba(255, 255, 255, .5); + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + align-items: center; + z-index: 1001; + } + + .load-more { + /* #ifndef APP-NVUE */ + margin: auto; + /* #endif */ + } + + .error-message { + background-color: #fff; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + padding: 15px; + opacity: .9; + z-index: 102; + } + + /* #ifdef APP-NVUE */ + .selected-area { + width: 750rpx; + } + + /* #endif */ + + .selected-list { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + flex-wrap: nowrap; + padding: 0 5px; + border-bottom: 1px solid #f8f8f8; + } + + .selected-item { + margin-left: 10px; + margin-right: 10px; + padding: 12px 0; + text-align: center; + /* #ifndef APP-NVUE */ + white-space: nowrap; + /* #endif */ + } + + .selected-item-text-overflow { + width: 168px; + /* fix nvue */ + overflow: hidden; + /* #ifndef APP-NVUE */ + width: 6em; + white-space: nowrap; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + /* #endif */ + } + + .selected-item-active { + border-bottom: 2px solid #007aff; + } + + .selected-item-text { + color: #007aff; + } + + .tab-c { + position: relative; + flex: 1; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + overflow: hidden; + } + + .list { + flex: 1; + } + + .item { + padding: 12px 15px; + /* border-bottom: 1px solid #f0f0f0; */ + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + justify-content: space-between; + } + + .is-disabled { + opacity: .5; + } + + .item-text { + /* flex: 1; */ + color: #333333; + } + + .item-text-overflow { + width: 280px; + /* fix nvue */ + overflow: hidden; + /* #ifndef APP-NVUE */ + width: 20em; + white-space: nowrap; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + /* #endif */ + } + + .check { + margin-right: 5px; + border: 2px solid #007aff; + border-left: 0; + border-top: 0; + height: 12px; + width: 6px; + transform-origin: center; + /* #ifndef APP-NVUE */ + transition: all 0.3s; + /* #endif */ + transform: rotate(45deg); + } +</style> -- Gitblit v1.9.1