@zscreate/zhxy-app-component 1.0.171 → 1.0.173

package/components/DataTable/DataTable.vue

@@ -1,335 +1,336 @@
-<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>
-
-
+<template>
+  <view class="wrap" :style="{ height: widget.options.height * 1.5 + 'rpx' }" v-if="dataModel && dataModel.length > 0">
+    <!-- @scrolltolower:滚动到底部触发  lower-threshold：距离底部多少距离触发@scrolltolower -->
+    <view style="overflow: auto;">
+      <view class="top" id="top" :style="{ width: tableWidths + 'rpx', 'padding-left': '0rpx' }">
+        <view class="table-header-data">
+          <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>
+    </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,
+      immediate: 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-data{
+    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>
+
+