From c9c263dc43ad90f95f24a036cee9e6b47afb596c Mon Sep 17 00:00:00 2001
From: skyouc
Date: 星期六, 21 十二月 2024 18:44:20 +0800
Subject: [PATCH] 新建盐城德森项目
---
uni_modules/uni-table/components/uni-th/uni-th.vue | 502 +++++++++++++++++++++++++++---------------------------
1 files changed, 251 insertions(+), 251 deletions(-)
diff --git a/uni_modules/uni-table/components/uni-th/uni-th.vue b/uni_modules/uni-table/components/uni-th/uni-th.vue
index 9430fba..de3beb0 100644
--- a/uni_modules/uni-table/components/uni-th/uni-th.vue
+++ b/uni_modules/uni-table/components/uni-th/uni-th.vue
@@ -1,251 +1,251 @@
-<template>
- <!-- #ifdef H5 -->
- <th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }">
- <view class="uni-table-th-row">
- <view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
- <slot></slot>
- <view v-if="sortable" class="arrow-box">
- <text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
- <text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
- </view>
- </view>
- <dropdown v-if="filterType || filterData.length" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
- </view>
- </th>
- <!-- #endif -->
- <!-- #ifndef H5 -->
- <view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }"><slot></slot></view>
- <!-- #endif -->
-</template>
-
-<script>
- import dropdown from './filter-dropdown.vue'
-/**
- * Th 琛ㄥご
- * @description 琛ㄦ牸鍐呯殑琛ㄥご鍗曞厓鏍肩粍浠�
- * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
- * @property {Number} width 鍗曞厓鏍煎搴�
- * @property {Boolean} sortable 鏄惁鍚敤鎺掑簭
- * @property {Number} align = [left|center|right] 鍗曞厓鏍煎榻愭柟寮�
- * @value left 鍗曞厓鏍兼枃瀛楀乏渚у榻�
- * @value center 鍗曞厓鏍兼枃瀛楀眳涓�
- * @value right 鍗曞厓鏍兼枃瀛楀彸渚у榻�
- * @property {Array} filterData 绛涢�夋暟鎹�
- * @property {String} filterType [search|select] 绛涢�夌被鍨�
- * @value search 鍏抽敭瀛楁悳绱�
- * @value select 鏉′欢閫夋嫨
- * @event {Function} sort-change 鎺掑簭瑙﹀彂浜嬩欢
- */
-export default {
- name: 'uniTh',
- options: {
- virtualHost: true
- },
- components: {
- dropdown
- },
- emits:['sort-change','filter-change'],
- props: {
- width: {
- type: [String, Number],
- default: ''
- },
- align: {
- type: String,
- default: 'left'
- },
- rowspan: {
- type: [Number, String],
- default: 1
- },
- colspan: {
- type: [Number, String],
- default: 1
- },
- sortable: {
- type: Boolean,
- default: false
- },
- filterType: {
- type: String,
- default: ""
- },
- filterData: {
- type: Array,
- default () {
- return []
- }
- }
- },
- data() {
- return {
- border: false,
- ascending: false,
- descending: false
- }
- },
- computed: {
- contentAlign() {
- let align = 'left'
- switch (this.align) {
- case 'left':
- align = 'flex-start'
- break
- case 'center':
- align = 'center'
- break
- case 'right':
- align = 'flex-end'
- break
- }
- return align
- }
- },
- created() {
- this.root = this.getTable('uniTable')
- this.rootTr = this.getTable('uniTr')
- this.rootTr.minWidthUpdate(this.width ? this.width : 140)
- this.border = this.root.border
- this.root.thChildren.push(this)
- },
- methods: {
- sort() {
- if (!this.sortable) return
- this.clearOther()
- if (!this.ascending && !this.descending) {
- this.ascending = true
- this.$emit('sort-change', { order: 'ascending' })
- return
- }
- if (this.ascending && !this.descending) {
- this.ascending = false
- this.descending = true
- this.$emit('sort-change', { order: 'descending' })
- return
- }
-
- if (!this.ascending && this.descending) {
- this.ascending = false
- this.descending = false
- this.$emit('sort-change', { order: null })
- }
- },
- ascendingFn() {
- this.clearOther()
- this.ascending = !this.ascending
- this.descending = false
- this.$emit('sort-change', { order: this.ascending ? 'ascending' : null })
- },
- descendingFn() {
- this.clearOther()
- this.descending = !this.descending
- this.ascending = false
- this.$emit('sort-change', { order: this.descending ? 'descending' : null })
- },
- clearOther() {
- this.root.thChildren.map(item => {
- if (item !== this) {
- item.ascending = false
- item.descending = false
- }
- return item
- })
- },
- ondropdown(e) {
- this.$emit("filter-change", e)
- },
- /**
- * 鑾峰彇鐖跺厓绱犲疄渚�
- */
- getTable(name) {
- let parent = this.$parent
- let parentName = parent.$options.name
- while (parentName !== name) {
- parent = parent.$parent
- if (!parent) return false
- parentName = parent.$options.name
- }
- return parent
- }
- }
-}
-</script>
-
-<style lang="scss">
-$border-color: #ebeef5;
-
-.uni-table-th {
- padding: 12px 10px;
- /* #ifndef APP-NVUE */
- display: table-cell;
- box-sizing: border-box;
- /* #endif */
- font-size: 14px;
- font-weight: bold;
- color: #909399;
- border-bottom: 1px $border-color solid;
-}
-
-.uni-table-th-row {
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex-direction: row;
-}
-
-.table--border {
- border-right: 1px $border-color solid;
-}
-.uni-table-th-content {
- display: flex;
- align-items: center;
- flex: 1;
-}
-.arrow-box {
-}
-.arrow {
- display: block;
- position: relative;
- width: 10px;
- height: 8px;
- // border: 1px red solid;
- left: 5px;
- overflow: hidden;
- cursor: pointer;
-}
-.down {
- top: 3px;
- ::after {
- content: '';
- width: 8px;
- height: 8px;
- position: absolute;
- left: 2px;
- top: -5px;
- transform: rotate(45deg);
- background-color: #ccc;
- }
- &.active {
- ::after {
- background-color: #007aff;
- }
- }
-}
-.up {
- ::after {
- content: '';
- width: 8px;
- height: 8px;
- position: absolute;
- left: 2px;
- top: 5px;
- transform: rotate(45deg);
- background-color: #ccc;
- }
- &.active {
- ::after {
- background-color: #007aff;
- }
- }
-}
-</style>
+<template>
+ <!-- #ifdef H5 -->
+ <th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }">
+ <view class="uni-table-th-row">
+ <view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
+ <slot></slot>
+ <view v-if="sortable" class="arrow-box">
+ <text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
+ <text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
+ </view>
+ </view>
+ <dropdown v-if="filterType || filterData.length" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
+ </view>
+ </th>
+ <!-- #endif -->
+ <!-- #ifndef H5 -->
+ <view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }"><slot></slot></view>
+ <!-- #endif -->
+</template>
+
+<script>
+ import dropdown from './filter-dropdown.vue'
+/**
+ * Th 琛ㄥご
+ * @description 琛ㄦ牸鍐呯殑琛ㄥご鍗曞厓鏍肩粍浠�
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+ * @property {Number} width 鍗曞厓鏍煎搴�
+ * @property {Boolean} sortable 鏄惁鍚敤鎺掑簭
+ * @property {Number} align = [left|center|right] 鍗曞厓鏍煎榻愭柟寮�
+ * @value left 鍗曞厓鏍兼枃瀛楀乏渚у榻�
+ * @value center 鍗曞厓鏍兼枃瀛楀眳涓�
+ * @value right 鍗曞厓鏍兼枃瀛楀彸渚у榻�
+ * @property {Array} filterData 绛涢�夋暟鎹�
+ * @property {String} filterType [search|select] 绛涢�夌被鍨�
+ * @value search 鍏抽敭瀛楁悳绱�
+ * @value select 鏉′欢閫夋嫨
+ * @event {Function} sort-change 鎺掑簭瑙﹀彂浜嬩欢
+ */
+export default {
+ name: 'uniTh',
+ options: {
+ virtualHost: true
+ },
+ components: {
+ dropdown
+ },
+ emits:['sort-change','filter-change'],
+ props: {
+ width: {
+ type: [String, Number],
+ default: ''
+ },
+ align: {
+ type: String,
+ default: 'left'
+ },
+ rowspan: {
+ type: [Number, String],
+ default: 1
+ },
+ colspan: {
+ type: [Number, String],
+ default: 1
+ },
+ sortable: {
+ type: Boolean,
+ default: false
+ },
+ filterType: {
+ type: String,
+ default: ""
+ },
+ filterData: {
+ type: Array,
+ default () {
+ return []
+ }
+ }
+ },
+ data() {
+ return {
+ border: false,
+ ascending: false,
+ descending: false
+ }
+ },
+ computed: {
+ contentAlign() {
+ let align = 'left'
+ switch (this.align) {
+ case 'left':
+ align = 'flex-start'
+ break
+ case 'center':
+ align = 'center'
+ break
+ case 'right':
+ align = 'flex-end'
+ break
+ }
+ return align
+ }
+ },
+ created() {
+ this.root = this.getTable('uniTable')
+ this.rootTr = this.getTable('uniTr')
+ this.rootTr.minWidthUpdate(this.width ? this.width : 140)
+ this.border = this.root.border
+ this.root.thChildren.push(this)
+ },
+ methods: {
+ sort() {
+ if (!this.sortable) return
+ this.clearOther()
+ if (!this.ascending && !this.descending) {
+ this.ascending = true
+ this.$emit('sort-change', { order: 'ascending' })
+ return
+ }
+ if (this.ascending && !this.descending) {
+ this.ascending = false
+ this.descending = true
+ this.$emit('sort-change', { order: 'descending' })
+ return
+ }
+
+ if (!this.ascending && this.descending) {
+ this.ascending = false
+ this.descending = false
+ this.$emit('sort-change', { order: null })
+ }
+ },
+ ascendingFn() {
+ this.clearOther()
+ this.ascending = !this.ascending
+ this.descending = false
+ this.$emit('sort-change', { order: this.ascending ? 'ascending' : null })
+ },
+ descendingFn() {
+ this.clearOther()
+ this.descending = !this.descending
+ this.ascending = false
+ this.$emit('sort-change', { order: this.descending ? 'descending' : null })
+ },
+ clearOther() {
+ this.root.thChildren.map(item => {
+ if (item !== this) {
+ item.ascending = false
+ item.descending = false
+ }
+ return item
+ })
+ },
+ ondropdown(e) {
+ this.$emit("filter-change", e)
+ },
+ /**
+ * 鑾峰彇鐖跺厓绱犲疄渚�
+ */
+ getTable(name) {
+ let parent = this.$parent
+ let parentName = parent.$options.name
+ while (parentName !== name) {
+ parent = parent.$parent
+ if (!parent) return false
+ parentName = parent.$options.name
+ }
+ return parent
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+$border-color: #ebeef5;
+
+.uni-table-th {
+ padding: 12px 10px;
+ /* #ifndef APP-NVUE */
+ display: table-cell;
+ box-sizing: border-box;
+ /* #endif */
+ font-size: 14px;
+ font-weight: bold;
+ color: #909399;
+ border-bottom: 1px $border-color solid;
+}
+
+.uni-table-th-row {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+}
+
+.table--border {
+ border-right: 1px $border-color solid;
+}
+.uni-table-th-content {
+ display: flex;
+ align-items: center;
+ flex: 1;
+}
+.arrow-box {
+}
+.arrow {
+ display: block;
+ position: relative;
+ width: 10px;
+ height: 8px;
+ // border: 1px red solid;
+ left: 5px;
+ overflow: hidden;
+ cursor: pointer;
+}
+.down {
+ top: 3px;
+ ::after {
+ content: '';
+ width: 8px;
+ height: 8px;
+ position: absolute;
+ left: 2px;
+ top: -5px;
+ transform: rotate(45deg);
+ background-color: #ccc;
+ }
+ &.active {
+ ::after {
+ background-color: #007aff;
+ }
+ }
+}
+.up {
+ ::after {
+ content: '';
+ width: 8px;
+ height: 8px;
+ position: absolute;
+ left: 2px;
+ top: 5px;
+ transform: rotate(45deg);
+ background-color: #ccc;
+ }
+ &.active {
+ ::after {
+ background-color: #007aff;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.1