@10yun/cv-mobile-ui 0.4.1 → 0.4.2

package/ui-cv/cv-data-pickerview/cv-data-pickerview.vue

@@ -0,0 +1,304 @@
+<template>
+  <view class="uni-data-pickerview">
+    <scroll-view class="selected-area" scroll-x="true" scroll-y="false" :show-scrollbar="false">
+      <view class="selected-list">
+        <template v-for="(item, index) in selected">
+          <view
+            class="selected-item"
+            :class="{ 'selected-item-active': index == selectedIndex }"
+            :key="index"
+            v-if="item.text"
+            @click="handleSelect(index)"
+          >
+            <text class="">{{ item.text }}</text>
+          </view>
+        </template>
+      </view>
+    </scroll-view>
+    <view class="tab-c">
+      <template v-for="(child, i) in dataList">
+        <scroll-view class="list" :key="i" v-if="i == selectedIndex" :scroll-y="true">
+          <view
+            class="item"
+            :class="{ 'is-disabled': !!item.disable }"
+            v-for="(item, j) in child"
+            :key="j"
+            @click="handleNodeClick(item, i, j)"
+          >
+            <text class="item-text">{{ item.text }}</text>
+            <view class="check" v-if="selected.length > i && item.value == selected[i].value"></view>
+          </view>
+        </scroll-view>
+      </template>
+
+      <view class="loading-cover" v-if="loading">
+        <cv-load-more class="load-more" :contentText="loadMore" status="loading"></cv-load-more>
+      </view>
+      <view class="error-message" v-if="errorMessage">
+        <text class="error-text">{{ errorMessage }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import dataPicker from './cv-data-picker.js';
+
+/**
+ * DataPickerview
+ * @description cv-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
+    }
+  },
+  data() {
+    return {};
+  },
+  created() {
+    if (this.managedMode) {
+      return;
+    }
+
+    this.$nextTick(() => {
+      this.load();
+    });
+  },
+  methods: {
+    onPropsChange() {
+      this._treeData = [];
+      this.selectedIndex = 0;
+      this.load();
+    },
+    load() {
+      if (this.isLocaldata) {
+        this.loadData();
+      } else if (this.dataValue.length) {
+        this.getTreePath((res) => {
+          this.loadData();
+        });
+      }
+    },
+    handleSelect(index) {
+      this.selectedIndex = index;
+    },
+    handleNodeClick(item, i, j) {
+      if (item.disable) {
+        return;
+      }
+
+      const node = this.dataList[i][j];
+      const { value, text } = node;
+
+      if (i < this.selected.length - 1) {
+        this.selected.splice(i, this.selected.length - i);
+        this.selected.push(node);
+      } else if (i === this.selected.length - 1) {
+        this.selected[i] = node;
+      }
+
+      if (node.isleaf) {
+        this.onSelectedChange(node, node.isleaf);
+        return;
+      }
+
+      const { isleaf, hasNodes } = this._updateBindData();
+
+      if (!this._isTreeView() && !hasNodes) {
+        this.onSelectedChange(node, true);
+        return;
+      }
+
+      if (this.isLocaldata && (!hasNodes || isleaf)) {
+        this.onSelectedChange(node, true);
+        return;
+      }
+
+      if (!isleaf && !hasNodes) {
+        this._loadNodeData((data) => {
+          if (!data.length) {
+            node.isleaf = true;
+          } else {
+            this._treeData.push(...data);
+            this._updateBindData(node);
+          }
+          this.onSelectedChange(node, node.isleaf);
+        }, this._nodeWhere());
+        return;
+      }
+
+      this.onSelectedChange(node, false);
+    },
+    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 scoped>
+.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, 0.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: 0.9;
+  z-index: 102;
+}
+
+/* #ifdef APP-NVUE */
+.selected-area {
+  width: 750rpx;
+}
+
+/* #endif */
+.selected-list {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  flex-wrap: nowrap;
+  padding: 0 5px;
+  border-bottom: 1px solid #f8f8f8;
+}
+
+.selected-item {
+  margin-left: 10px;
+  margin-right: 10px;
+  padding: 12px 0;
+  /* #ifndef APP-NVUE */
+  white-space: nowrap;
+  /* #endif */
+}
+
+.selected-item-active {
+  border-bottom: 2px solid #007aff;
+}
+
+.selected-item-text {
+  color: #007aff;
+}
+
+.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;
+}
+
+.is-disabled {
+  opacity: 0.5;
+}
+
+.item-text {
+  flex: 1;
+  color: #333333;
+}
+
+.check {
+  margin-right: 5px;
+  border: 2px solid #007aff;
+  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>

package/ui-cv/cv-dateformat/cv-dateformat.vue

@@ -0,0 +1,86 @@
+<template>
+  <text>{{ dateShow }}</text>
+</template>
+
+<script>
+import { friendlyDate } from './date-format.js';
+/**
+ * Dateformat 日期格式化
+ * @description 日期格式化组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=3279
+ * @property {Object|String|Number} date 日期对象/日期字符串/时间戳
+ * @property {String} locale 格式化使用的语言
+ * 	@value zh 中文
+ * 	@value en 英文
+ * @property {Array} threshold 应用不同类型格式化的阈值
+ * @property {String} format 输出日期字符串时的格式
+ */
+export default {
+  name: 'cvDateformat',
+  props: {
+    date: {
+      type: [Object, String, Number],
+      default() {
+        return '-';
+      }
+    },
+    locale: {
+      type: String,
+      default: 'zh'
+    },
+    threshold: {
+      type: Array,
+      default() {
+        return [0, 0];
+      }
+    },
+    format: {
+      type: String,
+      default: 'yyyy/MM/dd hh:mm:ss'
+    },
+    // refreshRate使用不当可能导致性能问题，谨慎使用
+    refreshRate: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  data() {
+    return {
+      refreshMark: 0
+    };
+  },
+  computed: {
+    dateShow() {
+      this.refreshMark;
+      return friendlyDate(this.date, {
+        locale: this.locale,
+        threshold: this.threshold,
+        format: this.format
+      });
+    }
+  },
+  watch: {
+    refreshRate: {
+      handler() {
+        this.setAutoRefresh();
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    refresh() {
+      this.refreshMark++;
+    },
+    setAutoRefresh() {
+      clearInterval(this.refreshInterval);
+      if (this.refreshRate) {
+        this.refreshInterval = setInterval(() => {
+          this.refresh();
+        }, parseInt(this.refreshRate));
+      }
+    }
+  }
+};
+</script>
+
+<style scoped></style>