From f09d9ec905b6247b36a394158662fe90d02197a5 Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期一, 15 七月 2024 14:59:36 +0800
Subject: [PATCH] fix bug
---
uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue | 677 +++++++++++++++++++++++++++++---------------------------
1 files changed, 353 insertions(+), 324 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 10d3e29..49454b5 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,324 +1,353 @@
-<template>
- <view class="uni-data-pickerview">
- <scroll-view v-if="!isCloudDataList" class="selected-area" scroll-x="true">
- <view class="selected-list">
- <view
- class="selected-item"
- v-for="(item,index) in selected"
- :key="index"
- :class="{
- 'selected-item-active':index == selectedIndex
- }"
- @click="handleSelect(index)"
- >
- <text>{{item.text || ''}}</text>
- </view>
- </view>
- </scroll-view>
- <view class="tab-c">
- <scroll-view class="list" :scroll-y="true">
- <view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in dataList[selectedIndex]" :key="j"
- @click="handleNodeClick(item, selectedIndex, j)">
- <text class="item-text">{{item[map.text]}}</text>
- <view class="check" v-if="selected.length > selectedIndex && item[map.value] == selected[selectedIndex].value"></view>
- </view>
- </scroll-view>
-
- <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
- }
- },
- created() {
- console.log('created picker')
- if (!this.managedMode) {
- this.$nextTick(() => {
- this.loadData();
- })
- }
- },
- methods: {
- onPropsChange() {
- this._treeData = [];
- this.selectedIndex = 0;
- this.$nextTick(() => {
- 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.isLocalData) {
- this.onSelectedChange(node, (!hasNodes || isleaf))
- } else if (this.isCloudDataList) { // Cloud 数据 (单列)
- this.onSelectedChange(node, true)
- } else if (this.isCloudDataTree) { // Cloud 数据 (树形)
- if (isleaf) {
- this.onSelectedChange(node, node.isleaf)
- } else if (!hasNodes) { // 请求一次服务器以确定是否为叶子节点
- this.loadCloudDataNode((data) => {
- if (!data.length) {
- node.isleaf = true
- } else {
- this._treeData.push(...data)
- this._updateBindData(node)
- }
- this.onSelectedChange(node, node.isleaf)
- })
- }
- }
- },
- 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 lang="scss">
- $uni-primary: #007aff !default;
-
- .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;
- flex-wrap: nowrap;
- /* #endif */
- flex-direction: row;
- 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 $uni-primary;
- }
-
- .selected-item-text {
- color: $uni-primary;
- }
-
- .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 $uni-primary;
- 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 v-if="!isCloudDataList" class="selected-area" scroll-x="true">
+ <view class="selected-list">
+ <view class="selected-item" v-for="(item,index) in selected" :key="index" :class="{
+ 'selected-item-active':index == selectedIndex
+ }" @click="handleSelect(index)">
+ <text>{{item.text || ''}}</text>
+ </view>
+ </view>
+ </scroll-view>
+ <view class="tab-c">
+ <!-- <view>
+ selected:{{JSON.stringify(selected)}}
+ </view> -->
+ <!-- v-if="!area||!selected|| selected.length==0||area&&selected&&selected.length>0&&(item[map.text]!==selected[selected.length-1].text)" -->
+ <scroll-view class="list" :scroll-y="true">
+ <view v-for="(item, j) in dynamicList" :key="j">
+ <view class="item" :class="{'is-disabled': !!item.disable}" v-show="!item.hide"
+ @click="handleNodeClick(item, selectedIndex, j)">
+ <text class="item-text">{{item[map.text]}}</text>
+ <view class="check"
+ v-if="selected.length > selectedIndex && item[map.value] == selected[selectedIndex].value">
+ </view>
+ </view>
+ </view>
+
+ </scroll-view>
+
+ <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
+ }
+ },
+ computed: {
+ dynamicList() {
+ var lastnodes = []
+ if (this.selected && this.selected.length > 0) {
+ for (var name of this.selected) {
+ lastnodes.push(name.text)
+ }
+ // lastnode = this.selected[this.selectedIndex].text
+ }
+ var arr = []
+ console.log('lastnodes', lastnodes)
+ if (this.dataList && this.dataList[this.selectedIndex]) {
+ for (var item of this.dataList[this.selectedIndex]) {
+ if (lastnodes.indexOf(item[this.map.text]) >= 0) {
+ item.hide = true
+ arr.push(item)
+ } else {
+ item.hide = false
+ arr.push(item)
+ }
+ }
+ }
+ return arr
+ }
+ },
+ created() {
+ console.log('created picker')
+ if (!this.managedMode) {
+ this.$nextTick(() => {
+ this.loadData();
+ })
+ }
+ },
+ methods: {
+ onPropsChange() {
+ this._treeData = [];
+ this.selectedIndex = 0;
+ this.$nextTick(() => {
+ 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.isLocalData) {
+ this.onSelectedChange(node, (!hasNodes || isleaf))
+ } else if (this.isCloudDataList) { // Cloud 数据 (单列)
+ this.onSelectedChange(node, true)
+ } else if (this.isCloudDataTree) { // Cloud 数据 (树形)
+ if (isleaf) {
+ this.onSelectedChange(node, node.isleaf)
+ } else if (!hasNodes) { // 请求一次服务器以确定是否为叶子节点
+ this.loadCloudDataNode((data) => {
+ if (!data.length) {
+ node.isleaf = true
+ } else {
+ this._treeData.push(...data)
+ this._updateBindData(node)
+ }
+ this.onSelectedChange(node, node.isleaf)
+ })
+ }
+ }
+ },
+ 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 lang="scss">
+ $uni-primary: #007aff !default;
+
+ .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;
+ flex-wrap: nowrap;
+ /* #endif */
+ flex-direction: row;
+ 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 $uni-primary;
+ }
+
+ .selected-item-text {
+ color: $uni-primary;
+ }
+
+ .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 $uni-primary;
+ 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>
\ No newline at end of file
--
Gitblit v1.9.3