uni-data-pickerview.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. <template>
  2. <view class="uni-data-pickerview">
  3. <scroll-view class="selected-area" scroll-x="true" scroll-y="false" :show-scrollbar="false">
  4. <view class="selected-list">
  5. <template v-for="(item,index) in selected">
  6. <view class="selected-item"
  7. :class="{'selected-item-active':index==selectedIndex, 'selected-item-text-overflow': ellipsis}"
  8. :key="index" v-if="item.text" @click="handleSelect(index)">
  9. <text class="">{{item.text}}</text>
  10. </view>
  11. </template>
  12. </view>
  13. </scroll-view>
  14. <view class="tab-c">
  15. <template v-for="(child, i) in dataList">
  16. <scroll-view class="list" :key="i" v-if="i==selectedIndex" :scroll-y="true">
  17. <view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in child" :key="j"
  18. @click="handleNodeClick(item, i, j)">
  19. <text class="item-text item-text-overflow">{{item[map.text]}}</text>
  20. <view class="check" v-if="selected.length > i && item[map.value] == selected[i].value"></view>
  21. </view>
  22. </scroll-view>
  23. </template>
  24. <view class="loading-cover" v-if="loading">
  25. <uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
  26. </view>
  27. <view class="error-message" v-if="errorMessage">
  28. <text class="error-text">{{errorMessage}}</text>
  29. </view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. import dataPicker from "./uni-data-picker.js"
  35. /**
  36. * DataPickerview
  37. * @description uni-data-pickerview
  38. * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
  39. * @property {Array} localdata 本地数据,参考
  40. * @property {Boolean} step-searh = [true|false] 是否分布查询
  41. * @value true 启用分布查询,仅查询当前选中节点
  42. * @value false 关闭分布查询,一次查询出所有数据
  43. * @property {String|DBFieldString} self-field 分布查询当前字段名称
  44. * @property {String|DBFieldString} parent-field 分布查询父字段名称
  45. * @property {String|DBCollectionString} collection 表名
  46. * @property {String|DBFieldString} field 查询字段,多个字段用 `,` 分割
  47. * @property {String} orderby 排序字段及正序倒叙设置
  48. * @property {String|JQLString} where 查询条件
  49. */
  50. export default {
  51. name: 'UniDataPickerView',
  52. emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'],
  53. mixins: [dataPicker],
  54. props: {
  55. managedMode: {
  56. type: Boolean,
  57. default: false
  58. },
  59. ellipsis: {
  60. type: Boolean,
  61. default: true
  62. }
  63. },
  64. data() {
  65. return {}
  66. },
  67. created() {
  68. if (this.managedMode) {
  69. return
  70. }
  71. this.$nextTick(() => {
  72. this.load()
  73. })
  74. },
  75. methods: {
  76. onPropsChange() {
  77. this._treeData = []
  78. this.selectedIndex = 0
  79. this.load()
  80. },
  81. load() {
  82. if (this.isLocaldata) {
  83. this.loadData()
  84. } else if (this.dataValue.length) {
  85. this.getTreePath((res) => {
  86. this.loadData()
  87. })
  88. }
  89. },
  90. handleSelect(index) {
  91. this.selectedIndex = index
  92. },
  93. handleNodeClick(item, i, j) {
  94. if (item.disable) {
  95. return
  96. }
  97. const node = this.dataList[i][j]
  98. const text = node[this.map.text]
  99. const value = node[this.map.value]
  100. if (i < this.selected.length - 1) {
  101. this.selected.splice(i, this.selected.length - i)
  102. this.selected.push({
  103. text,
  104. value
  105. })
  106. } else if (i === this.selected.length - 1) {
  107. this.selected.splice(i, 1, {
  108. text,
  109. value
  110. })
  111. }
  112. if (node.isleaf) {
  113. this.onSelectedChange(node, node.isleaf)
  114. return
  115. }
  116. const {
  117. isleaf,
  118. hasNodes
  119. } = this._updateBindData()
  120. if (!this._isTreeView() && !hasNodes) {
  121. this.onSelectedChange(node, true)
  122. return
  123. }
  124. if (this.isLocaldata && (!hasNodes || isleaf)) {
  125. this.onSelectedChange(node, true)
  126. return
  127. }
  128. if (!isleaf && !hasNodes) {
  129. this._loadNodeData((data) => {
  130. if (!data.length) {
  131. node.isleaf = true
  132. } else {
  133. this._treeData.push(...data)
  134. this._updateBindData(node)
  135. }
  136. this.onSelectedChange(node, node.isleaf)
  137. }, this._nodeWhere())
  138. return
  139. }
  140. this.onSelectedChange(node, false)
  141. },
  142. updateData(data) {
  143. this._treeData = data.treeData
  144. this.selected = data.selected
  145. if (!this._treeData.length) {
  146. this.loadData()
  147. } else {
  148. //this.selected = data.selected
  149. this._updateBindData()
  150. }
  151. },
  152. onDataChange() {
  153. this.$emit('datachange')
  154. },
  155. onSelectedChange(node, isleaf) {
  156. if (isleaf) {
  157. this._dispatchEvent()
  158. }
  159. if (node) {
  160. this.$emit('nodeclick', node)
  161. }
  162. },
  163. _dispatchEvent() {
  164. this.$emit('change', this.selected.slice(0))
  165. }
  166. }
  167. }
  168. </script>
  169. <style >
  170. .uni-data-pickerview {
  171. flex: 1;
  172. /* #ifndef APP-NVUE */
  173. display: flex;
  174. /* #endif */
  175. flex-direction: column;
  176. overflow: hidden;
  177. height: 100%;
  178. }
  179. .error-text {
  180. color: #DD524D;
  181. }
  182. .loading-cover {
  183. position: absolute;
  184. left: 0;
  185. top: 0;
  186. right: 0;
  187. bottom: 0;
  188. background-color: rgba(255, 255, 255, .5);
  189. /* #ifndef APP-NVUE */
  190. display: flex;
  191. /* #endif */
  192. flex-direction: column;
  193. align-items: center;
  194. z-index: 1001;
  195. }
  196. .load-more {
  197. /* #ifndef APP-NVUE */
  198. margin: auto;
  199. /* #endif */
  200. }
  201. .error-message {
  202. background-color: #fff;
  203. position: absolute;
  204. left: 0;
  205. top: 0;
  206. right: 0;
  207. bottom: 0;
  208. padding: 15px;
  209. opacity: .9;
  210. z-index: 102;
  211. }
  212. /* #ifdef APP-NVUE */
  213. .selected-area {
  214. width: 750rpx;
  215. }
  216. /* #endif */
  217. .selected-list {
  218. /* #ifndef APP-NVUE */
  219. display: flex;
  220. /* #endif */
  221. flex-direction: row;
  222. flex-wrap: nowrap;
  223. padding: 0 5px;
  224. border-bottom: 1px solid #f8f8f8;
  225. }
  226. .selected-item {
  227. margin-left: 10px;
  228. margin-right: 10px;
  229. padding: 12px 0;
  230. text-align: center;
  231. /* #ifndef APP-NVUE */
  232. white-space: nowrap;
  233. /* #endif */
  234. }
  235. .selected-item-text-overflow {
  236. width: 168px;
  237. /* fix nvue */
  238. overflow: hidden;
  239. /* #ifndef APP-NVUE */
  240. width: 6em;
  241. white-space: nowrap;
  242. text-overflow: ellipsis;
  243. -o-text-overflow: ellipsis;
  244. /* #endif */
  245. }
  246. .selected-item-active {
  247. border-bottom: 2px solid #007aff;
  248. }
  249. .selected-item-text {
  250. color: #007aff;
  251. }
  252. .tab-c {
  253. position: relative;
  254. flex: 1;
  255. /* #ifndef APP-NVUE */
  256. display: flex;
  257. /* #endif */
  258. flex-direction: row;
  259. overflow: hidden;
  260. }
  261. .list {
  262. flex: 1;
  263. }
  264. .item {
  265. padding: 12px 15px;
  266. /* border-bottom: 1px solid #f0f0f0; */
  267. /* #ifndef APP-NVUE */
  268. display: flex;
  269. /* #endif */
  270. flex-direction: row;
  271. justify-content: space-between;
  272. }
  273. .is-disabled {
  274. opacity: .5;
  275. }
  276. .item-text {
  277. /* flex: 1; */
  278. color: #333333;
  279. }
  280. .item-text-overflow {
  281. width: 280px;
  282. /* fix nvue */
  283. overflow: hidden;
  284. /* #ifndef APP-NVUE */
  285. width: 20em;
  286. white-space: nowrap;
  287. text-overflow: ellipsis;
  288. -o-text-overflow: ellipsis;
  289. /* #endif */
  290. }
  291. .check {
  292. margin-right: 5px;
  293. border: 2px solid #007aff;
  294. border-left: 0;
  295. border-top: 0;
  296. height: 12px;
  297. width: 6px;
  298. transform-origin: center;
  299. /* #ifndef APP-NVUE */
  300. transition: all 0.3s;
  301. /* #endif */
  302. transform: rotate(45deg);
  303. }
  304. </style>