meixioacomponent 2.0.40 → 2.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meixioacomponent",
-  "version": "2.0.40",
+  "version": "2.0.42",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -31,17 +31,17 @@
     "node-polyfill-webpack-plugin": "^2.0.1",
     "npm": "^9.6.1",
     "path-browserify": "^1.0.1",
+    "tdesign-vue": "^1.10.5-naruto",
     "ts-loader": "^9.4.2",
     "tslint": "^6.1.3",
     "tslint-config-standard": "^9.0.0",
     "tslint-loader": "^3.5.4",
     "typescript": "^4.9.4",
-    "vue": "^2.7.10",
-    "vue-class-component": "^7.2.6",
     "vue-cropper": "^0.5.8",
+    "vue": "^2.7.10",
     "vue-property-decorator": "^9.1.2",
-    "vue-template-compiler": "^2.7.10",
-    "tdesign-vue": "^1.10.5-naruto"
+    "vue-template-compiler": "^2.7.10"
+
   },
   "browserslist": [
     "> 1%",

package/packages/components/base/baseAnchor/baseAnchorV2.vue

@@ -0,0 +1,166 @@
+<template>
+  <ol class="base-anchor-wrap">
+    <li
+        v-for="(item, index) in list"
+        :key="index"
+        :class="{
+        active: index === active,
+      }"
+        class="anchor-item-wrap"
+    >
+      <a
+          v-if="type === 'page'"
+          :href="`${currentPath}#${item.id}`"
+          @click="aTagClick(index)"
+      >
+        {{ item.title }}
+      </a>
+      <span v-else @click="toSetScrollTop(index)">{{ item.title }}</span>
+    </li>
+  </ol>
+</template>
+
+<script>
+export default {
+  name:'baseAnchor'
+}
+</script>
+
+<script setup>
+import {getCurrentInstance, nextTick, onMounted, ref, computed} from "vue";
+let _listenElement = null;
+const instance = getCurrentInstance()
+const props = defineProps({
+  listenElementId: {
+    //只接受id
+    type: String,
+  },
+  list: {
+    type: Array,
+  },
+  type: {
+    type: String,
+    default: 'page',
+  },
+})
+
+onMounted(() => {
+  nextTick(() => {
+    init()
+  })
+})
+
+const active = ref(0);
+
+const currentPath = computed(() => {
+  return instance.proxy.$route.path
+})
+
+const init = () => {
+  let type = props.type
+  if (type === 'page') {
+    _listenElement = document.getElementsByClassName(
+        'layout-contnet',
+    )[0]
+    _listenElement?.addEventListener('scroll', listenScroll)
+  } else {
+    _listenElement = document.getElementById(
+        `${props.listenElementId}`,
+    )
+    nextTick(() => {
+      _listenElement?.addEventListener('scroll', (e) => {
+        listenScroll(e)
+      })
+    })
+  }
+}
+
+const listenScroll = (e) => {
+  if (props.list.length <= 0) return
+  let type = props.type
+  let scrollTop = e.target.scrollTop
+  for (let i = 0; i < props.list.length; i++) {
+    let item = props.list[i]
+    let node = null
+    // 类型
+    if (type === 'page') {
+      // page 代表是全局 监听 layout 的滚动
+      node = document.getElementById(item.id)
+    } else {
+      // 指定的容器
+      node = _listenElement.querySelector(`#${item.id}`)
+    }
+    // 滑动到底部直接赋值
+    if (scrollTop + e.target.clientHeight >= e.target.scrollHeight - 5) {
+      active.value = props.list.length - 1
+      break
+    }
+    // 如果循环到最后一个dom也直接赋值
+    if (i === props.list.length - 1) {
+      active.value = i
+      break
+    } else {
+      let nextItem = props.list[i + 1]
+      let nextNode = null
+      if (type === 'page') {
+        nextNode = document.getElementById(nextItem.id)
+      } else {
+        nextNode = _listenElement.querySelector(`#${nextItem.id}`)
+      }
+      // 判单scrolltop是否小于下一个dom的高度
+      if (scrollTop < nextNode.offsetTop) {
+        active.value = i
+        break
+      }
+    }
+  }
+}
+
+const toSetScrollTop = (index) => {
+  if (index == active.value) {
+    return
+  }
+  let id = props.list[index].id
+  let dom = _listenElement.querySelector(`#${id}`)
+  if (dom) {
+    dom.scrollIntoView(true)
+    setTimeout(() => {
+      aTagClick(index)
+    }, 10)
+  }
+}
+
+const aTagClick = (index) => {
+  active.value = index
+}
+</script>
+
+<style scoped lang="less">
+.base-anchor-wrap {
+  width: auto;
+  height: auto;
+  overflow-y: auto;
+
+  .anchor-item-wrap {
+    padding-left: calc(var(--padding-4) * 2);
+    border-left: 2px solid var(--color-border);
+
+    a,
+    span {
+      display: inline-block;
+      color: var(--font-color-m);
+      margin: var(--margin-2) 0px;
+      font-size: var(--font-size-base);
+    }
+
+    span {
+      cursor: pointer;
+    }
+  }
+
+  .active {
+    border-left: 2px solid var(--color-primary);
+    color: var(--color-primary) !important;
+  }
+}
+</style>

package/packages/components/base/baseAnchor/index.js

@@ -1,6 +1,6 @@
-import baseAnchor from "./baseAnchor.vue";
+import baseAnchor from "./baseAnchorV2.vue";
 
 baseAnchor.install = function (Vue) {
-    Vue.component(baseAnchor.name, baseAnchor);
+    Vue.component(baseAnchor.default.name, baseAnchor);
 };
 export default baseAnchor;

package/packages/components/base/baseArea/baseAreaV2.vue

@@ -20,43 +20,29 @@
 
 <script>
 import baseButtonHandleVue from '../baseButtonHandle/baseButtonHandle.vue'
-import {GetAreaTree} from "./api";
 import areaConfig from "./areaConfig";
 import {TransomComponentSize} from "../../../utils/utils";
+import {mixinsByBaseArea} from "../../mixins/mixinsByBaseArea";
 //
 
 export default {
   name: 'baseArea',
   data() {
     return {
-      loading: false,
       localValue: [],
       localDetailValue: {},
-      placeholder: '请选择省市区镇',
-      options: [],
       inputProps: {
         value: '',
       },
     }
   },
+  mixins: [mixinsByBaseArea],
   created() {
   },
-
-  mounted() {
-    this.loadArea('').then(res => {
-      this.options = res;
-    })
-  },
-
   props: {
     value: {
       default: null,
     },
-    disable: {
-      type: Boolean,
-      default: false,
-    },
-    size: {type: String, default: 'small'}
   },
 
   components: {
@@ -95,33 +81,6 @@ export default {
         }
       }
     },
-    load(node) {
-      const {value, data} = node;
-      return new Promise((resolve) => {
-        this.loadArea(data ? data.code : '').then(res => {
-          resolve(res);
-        })
-      })
-    },
-
-    loadArea(keyword) {
-      return new Promise((resolve) => {
-        this.loading = true;
-        GetAreaTree({
-          keyword: keyword
-        }).then(res => {
-          if (Array.isArray(res)) {
-            res.forEach(item => {
-              item[`children`] = item.level !== 4;
-            })
-            this.loading = false;
-            resolve(res);
-          } else {
-            resolve([]);
-          }
-        })
-      })
-    },
     onChange() {
       this.inputProps.value = '';
       this.$nextTick(() => {

package/packages/components/base/baseArea/baseAreaV21.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="base-area-select-wrap">
+    <t-cascader
+        ref="cascader"
+        :keys="{
+          value:'code',
+          label:'name',
+          children: 'children',
+        }"
+        :load="load"
+        :options="options"
+        :disabled="disable||loading"
+        :size="componentSize" @change="onChange"
+        :placeholder="placeholder"
+        :input-props="inputProps"
+        v-model="localValue">
+    </t-cascader>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: 'baseArea'
+}
+</script>
+
+<script setup>
+import areaConfig from "./areaConfig";
+import {TransomComponentSize} from "../../../utils/utils";
+import useHookByBaseArea from "../../hooks/useHookByBaseArea";
+import {computed, onMounted, reactive, ref, toRaw, watch, nextTick, getCurrentInstance} from "vue";
+
+
+const cascader = ref();
+console.log(cascader.value)
+
+getCurrentInstance().proxy.$mount(() => {
+  loadArea('').then(res => {
+    console.log('v2');
+    options.value = res;
+  })
+})
+
+
+const localValue = ref([]);
+const localDetailValue = reactive({});
+const inputProps = reactive({
+  value: '',
+},)
+
+
+const emits = defineEmits(['input', 'confirmAreaValue'])
+const {options, loading, placeholder, load, loadArea} = useHookByBaseArea();
+
+const props = defineProps({
+  value: {
+    default: null,
+  },
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+  size: {type: String, default: 'small'}
+})
+
+
+const module = computed({
+  set(val) {
+    emits('input', val)
+  },
+  get() {
+    return props.value;
+  },
+})
+
+
+const componentSize = computed(() => {
+  return TransomComponentSize(props.size);
+})
+
+
+const init = () => {
+  if (module.value) {
+    const {province, city, district, town} = module.value;
+    inputProps.value = `${province}/${city}/${district}`
+    if (town) {
+      inputProps.value += `/${town}`
+      localValue.value = [province, city, district, town]
+    } else {
+      localValue.value = [province, city, district]
+    }
+    Object.assign(localDetailValue, {
+      province,
+      city,
+      district,
+      town
+    })
+  }
+}
+
+
+const onChange = () => {
+  inputProps.value = '';
+  nextTick(() => {
+    const list = cascader.value.panels;
+    list.forEach(itemList => {
+      onAreaChange(itemList)
+    })
+    const _value = {
+      ...toRaw(localDetailValue),
+    }
+    emits('confirmAreaValue', _value)
+    module.value = _value;
+  })
+}
+
+const onAreaChange = (list) => {
+  try {
+    let index = null;
+    for (let i = 0; i < list.length; i++) {
+      const item = list[i];
+      if (item.indeterminate || item.checked) {
+        index = i;
+      }
+    }
+    const value = list[index];
+    const {data} = value;
+    const {name, code, level} = data;
+    if (!level) return;
+    if (!localDetailValue[`idList`]) {
+      localDetailValue[`idList`] = [0, 0, 0, 0];
+    }
+    localDetailValue[`${areaConfig[level - 1].value}`] = name;
+    localDetailValue[`idList`][level - 1] = code;
+  } catch (error) {
+  }
+};
+
+
+watch(() => module, () => {
+  nextTick(() => {
+    init();
+  })
+}, {deep: true,})
+
+
+</script>
+
+<style scoped lang="less">
+.base-area-select-wrap {
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  border-radius: calc(var(--radius) * 2);
+}
+</style>

package/packages/components/base/baseAreaByMultiple/baseAreaByMultiple.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="base_area_by_multiple-wrap">
+    <t-cascader
+        ref="cascader"
+        v-model="value"
+        :options="options"
+        @change="onChange"
+        :load="load"
+        :keys="{
+          value:'value',
+          label:'name',
+          children: 'children',
+        }"
+        :disabled="disable||loading"
+        :placeholder="placeholder"
+        value-mode="all"
+        value-type="full"
+        multiple
+        clearable/>
+  </div>
+</template>
+
+<script>
+/**
+ * 该组件不支持回显
+ */
+import {defineComponent} from 'vue'
+import {mixinsByBaseArea} from "../../mixins/mixinsByBaseArea";
+import areaConfig from "../baseArea/areaConfig";
+
+export default defineComponent({
+  name: "baseAreaByMultiple",
+  data() {
+    return {
+      options: [],
+      value: []
+    }
+  },
+  mixins: [mixinsByBaseArea],
+  methods: {
+    onChange() {
+    },
+    getCheckValue() {
+      const valueList = this.value;
+      const value = [];
+      for (let i = 0; i < valueList.length; i++) {
+        const itemLength = valueList[i];
+        const obj = {
+          idList: [],
+        };
+        for (let j = 0; j < itemLength.length; j++) {
+          const item = itemLength[j];
+          const splitList = item.split('-');
+          obj.idList.push(splitList[0]);
+          obj[`${areaConfig[j].value}`] = splitList[1];
+        }
+        value.push(obj);
+      }
+      return value;
+    }
+  }
+})
+</script>
+
+
+<style scoped lang="less">
+.base_area_by_multiple-wrap {
+  width: 100%;
+  height: auto;
+}
+</style>

package/packages/components/base/baseAreaByMultiple/index.js

@@ -0,0 +1,7 @@
+import baseAreaByMultiple from "./baseAreaByMultiple.vue"
+
+baseAreaByMultiple.install = function (Vue) {
+    Vue.component(baseAreaByMultiple.name, baseAreaByMultiple);
+};
+
+export default baseAreaByMultiple;

package/packages/components/base/basePlainTable/basePlainTable.vue

@@ -9,9 +9,11 @@
         :max-height="maxHeight"
         :columns="renderColumns"
         :tree="tree"
+        :sort="sortInfo"
         :default-selected-row-keys="preCheckValue"
         :selected-row-keys="preCheckValue"
         :rowspan-and-colspan='rowspanAndColspan'
+        @sort-change="sortChange"
         @select-change="onHandleSelectChange"
     >
       <template slot="empty">
@@ -64,7 +66,13 @@ export default {
     return {
       id: null,
       checkValue: null,
-      tableColumns: []
+      tableColumns: [],
+      sortInfo: {
+        // 按照 status 字段进行排序
+        sortBy: '',
+        // 是否按照降序进行排序
+        descending: false,
+      },
     }
   },
   mixins: [tableSectionMixins],
@@ -155,6 +163,10 @@ export default {
     showSummary: {
       type: Boolean,
       default: false
+    },
+    sort: {
+      type: Boolean,
+      default: false
     }
 
   },
@@ -181,6 +193,7 @@ export default {
       return this.tableColumns.map((item, index) => {
         item['key'] = item.value;
         item['colkey'] = item.key;
+        item[`sorter`] = this.$props.sort
         TransomTableConfig(item, index)
         if (this.$props.showSummary) {
           if (index === 0) {
@@ -210,6 +223,10 @@ export default {
 
   },
   methods: {
+    sortChange(sortInfo) {
+      this.sortInfo = sortInfo;
+      this.$emit('sortChange',sortInfo);
+    },
     // 返回普通格式的样式
     nomalStyle(item) {
       return [

package/packages/components/base/baseTimeTypeSelect/base_time_type_select.vue

@@ -15,7 +15,7 @@
                            size="large"
                            :checked="selectLineItem?selectLineItem === cItem.key:cItem.key === module "
                            @click="selectLineItem = cItem.key;timeModule=null"
-                          >{{ cItem.text }}
+              >{{ cItem.text }}
               </t-check-tag>
 
             </div>
@@ -26,8 +26,9 @@
           <div class="time-type-custom-content">
             <t-date-range-picker
                 v-model="timeModule"
-                size="small"
+                size="medium"
                 enable-time-picker=""
+                :clearable="true"
                 style="width: 100%; margin-top: var(--margin-4)"
                 valueType="time-stamp"
                 @change="onTimeChange"
@@ -81,7 +82,7 @@ export default {
       //  是否打开了选择器
       isOpen: false,
       //   内部是否选择了自定义时间
-      timeModule: null,
+      timeModule: [],
       //   内部是否选择了某一个单项
       selectLineItem: null,
       //   按钮的配置
@@ -96,6 +97,7 @@ export default {
     this.handleConfig = [
       {
         text: "确定",
+        size: 'small',
         type: "primary",
         plain: false,
         click: () => {
@@ -175,14 +177,11 @@ export default {
     },
     eventShow() {
       this.isOpen = true;
-
       const {renderTime} = this.$props;
-      if (renderTime && !this.selectLineItem) {
-        this.timeModule = JSON.parse(JSON.stringify(renderTime));
-      } else {
-        this.timeModule = null;
+      console.log(this.$props);
+      if (renderTime && Array.isArray(renderTime) && !this.selectLineItem) {
+        this.timeModule = renderTime;
       }
-
     },
 
     doClose() {
@@ -193,8 +192,8 @@ export default {
       this.isOpen = false;
     },
 
-    visibleChange() {
-      if (this.isOpen) {
+    visibleChange(visible) {
+      if (visible) {
         this.eventShow()
       } else {
         this.eventHide();
@@ -207,7 +206,7 @@ export default {
       let _timeModule = this.timeModule;
       let _selectLineItem = this.selectLineItem;
 
-      if ((typeof _timeModule === 'object' && _timeModule?.length >= 1)) {
+      if ((Array.isArray(_timeModule) && _timeModule?.length >= 1)) {
         this.module = _timeModule;
       }
       if (_selectLineItem) {
@@ -215,22 +214,20 @@ export default {
       }
       this.$nextTick(() => {
         this.$emit("selectConfirm", this.module);
-        // this.$refs.popover.doClose();
+        this.isOpen = false;
       })
     },
     onTimeChange() {
       this.$nextTick(() => {
         this.selectLineItem = null;
         let time = null;
-
-
-        if (this.timeModule && this.timeModule instanceof Array && this.timeModule.length >= 1) {
+        if (this.timeModule && Array.isArray(this.timeModule) && this.timeModule.length >= 1) {
           time = [this.timeModule[0], (this.timeModule[1] + 1000 * 60 * 60 * 24) - 1]
         } else {
-          time = this.module;
+          time = null;
+          this.module = null;
         }
 
-
         this.$emit('onTimeChange', time);
       })
     }