@zscreate/zhxy-app-component 1.0.164 → 1.0.166

package/components/DataTable/DataTable.vue

@@ -0,0 +1,335 @@
+<template>
+  <view class="wrap" :style="{ height: widget.options.height * 1.5 + 'rpx' }" v-if="dataModel && dataModel.length > 0">
+    <!-- @scrolltolower:滚动到底部触发  lower-threshold：距离底部多少距离触发@scrolltolower -->
+    <scroll-view class="scroll-view_H" scroll-x="true" scroll-y="true" @scrolltolower='scrollBottom' :lower-threshold='0'>
+      <view class="top" id="top" :style="{ width: tableWidths + 'rpx', 'padding-left': '0rpx' }">
+        <view class="table-header">
+          <view v-for="(h, n) in header" :key='n' :class="{ 'header_dyg': true, 'flexs': h.flxe, }"
+            :style="{ width: h.hWidth + 'rpx' }">
+            <view v-if="h.columnName !== 'slot'">{{ h.columnName }}</view>
+            <view v-else>
+              <u-checkbox-group>
+                <u-checkbox @change="checkboxChangeAll" v-model="checkedAll" name="all"></u-checkbox>
+              </u-checkbox-group>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="bottom" :style="{ maxHeight: (widget.options.height - 70) * 1.5 + 'rpx', width: tableWidths + 'rpx', 'padding-left': '0rpx' }"
+        v-if="tableData.length > 0">
+        <view class="tablebox" v-for="(t, s) in tableData" :key='s' @click="jumpDetailed(t)">
+          <view v-for="(h, n) in header" :key="n"
+            :class="{ 'table_dyg': true, 'tdColClass': h.bgcolor, 'tdRowClass': t.bgcolor, 'flexs': h.flxe, }"
+            :style="{ width: h.hWidth + 'rpx' }">
+            <!-- 不等于操作列就显示文字 -->
+            <text v-if="h.columnCode !== 'action' && h.columnName !== 'slot'" :style="{ color: getColor(t, h), }">{{
+              t[h.columnCode] }}</text>
+            <view v-else-if="h.columnName === 'slot'">
+              <u-checkbox-group>
+                <u-checkbox @change="checkboxChange" v-model="t.checked" :name="t[rowKey]"></u-checkbox>
+              </u-checkbox-group>
+            </view>
+            <!-- 操作列显示按钮，后期用插槽 -->
+            <view class="uni-group" v-else style="background-color: #fff;">
+              <button class="uni-button" size="mini" type="primary" style="margin-right: 5px;"
+                @click="editTable(t)">编辑</button>
+              <button class="uni-button" size="mini" type="warn" @click="deleteTable(t)">删除</button>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+    <view class="empty" v-if="tableData.length == 0">
+      <!-- <image src="../../static/images/empty.png" style="width: 90vw;height: 400rpx;margin: 50rpx 20rpx;" /> -->
+      <view class="empty-text" style="text-align: center;width: 100%;">暂无数据</view>
+    </view>
+  </view>
+</template>
+
+<script>
+// 表头配置：flxe(固定列)，bgcolor(列底纹)
+// 表体配置：bgcolor(行底纹)
+export default {
+  props: {
+    dataModel: {
+      type: [Array, String],
+      required: true,
+      default: function () {
+        return [];
+      }
+    },
+    widget: {
+      type: Object,
+      required: true,
+      default: function () {
+        return {};
+      }
+    },
+  },
+  data() {
+    return {
+      //表体
+      tableData: [],
+      //表头
+      header: [],
+      // 表格总长度
+      tableWidths: 0,
+      // 全选
+      checkedAll: false,
+      flxed: false,
+      isAll: false,
+      seletedData: []
+    }
+  },
+  watch: {
+    // 监听列表
+    dataModel: {
+      async handler(a, b) {
+        console.log(a, b);
+        if(a && a.length > 0) {
+          await this.getColumsList(this.widget.options.defaultSQL.querySql)
+          this.tableData = a
+          if (!this.header.some(item => item.hWidth)) this.tableWidth()
+        }
+      },
+      deep: true
+    },
+  },
+  created() {
+  },
+  methods: {
+    // 获取表头
+    getColumsList(id) {
+      this.$u.get('/dataset/getDatasetColumns', { id }).then(res => {
+        if (!res.success) return
+        this.header = res.result ? res.result : []
+        if (!this.header.some(item => item.hWidth)) this.tableWidth()
+      })
+    },
+    // 重置复选框
+    reseChecked() {
+      let obj = this.tableData[0]
+      obj.checked = false
+      this.$set(this.tableData, 0, obj);
+      this.checkedAll = false
+      this.$emit('isSelectAll', false);
+    },
+    // 单选
+    checkboxChange(e) {
+      let idx = this.tableData.findIndex(item => item[this.rowKey] === e.name)
+      let obj = this.tableData[idx]
+      obj.checked = e.value
+      this.$set(this.tableData, idx, obj)
+      if (!e.value && !this.tableData.every(item => item.checked)) this.checkedAll = false
+      if (e.value && this.tableData.every(item => item.checked)) this.checkedAll = true
+    },
+    // 全选
+    checkboxChangeAll(e) {
+      if (e.value) {
+        this.tableData.forEach(item => item.checked = true)
+        this.$emit('isSelectAll', true);
+      } else {
+        this.tableData.forEach(item => item.checked = false)
+        this.$emit('isSelectAll', false);
+      }
+    },
+    // 返回行数据
+    jumpDetailed(row) {
+      this.$emit('rowData', row)
+    },
+    // 颜色对比
+    getColor(row, col) {
+      let color = 'black'
+      // 传值给父组件，通过父组件的方法内计算判断当前单元格数据是否需要标红，然后通过回调函数，返回一个color值来渲染
+      this.$emit('getTextColor', row, col, val => {
+        color = val
+      })
+      return color
+    },
+    // 修改按钮
+    editTable(val) {
+      this.$emit('getEdit', val)
+    },
+    // 删除按钮
+    deleteTable(val) {
+      this.$emit('getDelete', val)
+    },
+    // 计算单元格宽度
+    tableWidth() {
+      let w = 0
+      this.header.forEach((item, index) => {
+        item['hWidth'] = this.replaceSpecialCharacters(item.columnName) * 40
+        if (this.tableData.length > 0) {
+          this.tableData.forEach((info, index) => {
+            if (info[item.columnCode] && info[item.columnCode].length > item.columnName.length) {
+              item['hWidth'] = this.replaceSpecialCharacters(info[item.columnCode]) * 40
+            }
+          })
+        }
+        w += item['hWidth'] //叠加表格总长度
+      })
+      this.tableWidths = w   //给表格赋值总长度
+      console.log(this.header);
+    },
+    // 替换特殊字符
+    replaceSpecialCharacters(str) {
+      let chineseCount = 0;
+      let englishCount = 0;
+      let digitCount = 0;
+      for (let i = 0; i < str.length; i++) {
+        const char = str[i];
+        if (this.isChineseCharacter(char)) {
+          chineseCount++;
+        } else if (this.isEnglishCharacter(char)) {
+          englishCount++;
+        } else if (this.isDigit(char)) {
+          digitCount++;
+        }
+      }
+      return chineseCount + ((englishCount + digitCount) * 0.5)
+    },
+    isChineseCharacter(char) {
+      // 使用 Unicode 范围判断是否为中文字符
+      return /^[\u4e00-\u9fff]$/.test(char);
+    },
+    isEnglishCharacter(char) {
+      // 使用正则表达式判断是否为英文字符
+      return /^[a-zA-Z]$/.test(char);
+    },
+    isDigit(char) {
+      // 使用正则表达式判断是否为数字字符
+      return /^[0-9]$/.test(char);
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .u-checkbox__label {
+  display: none !important;
+}
+
+/deep/ .uni-scroll-view-content {
+  overflow-x: scroll;
+
+}
+
+.wrap {
+  width: 100%;
+
+  .empty {
+    // margin: 200rpx 50rpx;
+  }
+}
+
+// 表头
+.top {
+  position: sticky; //表头向上滚动时固定住
+  top: 0;
+  //width: 750px; //左右滚动时不会把固定的表头滚动走
+  z-index: 100; //滑动时表头不被覆盖
+
+  .table-header {
+    display: flex;
+    overflow: visible;
+
+    .flxed {
+      // position: fixed;
+      position: sticky;
+      // top: 0;
+      left: 0;
+      border-left: 1px solid #ccc;
+    }
+
+    // .header_dyg:nth-child(2) {
+    //   padding-left: 90rpx;
+    // }
+    .header_dyg:first-child {
+      border-left: 1px solid #ccc;
+    }
+
+    .header_dyg {
+      height: 40px;
+      text-align: center;
+      line-height: 40px;
+      border-top: 1px solid #ccc;
+      border-right: 1px solid #ccc;
+      border-bottom: 1px solid #ccc;
+      padding: 0 5px;
+      background-color: #f5f5f6;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 14px;
+      font-weight: bold;
+      color: #2b2b2b;
+      flex-shrink: 0;
+    }
+
+    // 列定位固定单元格
+    .flexs {
+      position: absolute;
+      left: 0;
+      background-color: #f5f5f6;
+      z-index: 10;
+    }
+  }
+
+
+}
+
+
+// 表格列表
+.bottom {
+  // overflow-y: scroll;
+  // padding-left: 77rpx;
+
+  .tablebox {
+    display: flex;
+    font-size: 14px;
+    overflow: visible;
+
+    .flxed {
+      position: sticky;
+      left: 0;
+      border-left: 1px solid #ccc;
+      background-color: #fff;
+    }
+    .table_dyg:first-child {
+      border-left: 1px solid #ccc;
+    }
+    .table_dyg {
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      border-right: 1px solid #ccc;
+      border-bottom: 1px solid #ccc;
+      padding: 0 5px;
+      flex-shrink: 0;
+    }
+
+    // 列定位固定单元格
+    .flexs {
+      position: absolute;
+      left: 0;
+      background-color: #fff;
+      z-index: 10;
+    }
+  }
+}
+
+// 列的颜色
+.tdColClass {
+  background-color: #d9edf7;
+}
+
+// 行的颜色
+.tdRowClass {
+  background-color: #afdfe4;
+}
+</style>
+
+