meixioacomponent 1.1.49 → 2.0.2

package/packages/components/base/baseTag/index.vue

@@ -1,16 +1,9 @@
 <template>
 
-  <div :class="[size]" class="tag-wrap">
-    <!--    当是纯色的时候-->
-    <el-tag v-if="type=== 'pure' " :size="size" :type="stateType" class="tag" effect="dark">{{
-        stateText
-      }}
-    </el-tag>
+  <div class="tag-wrap" v-if="stateText">
+    <t-tag v-if="type==='pure'" :size="componentSize" :theme="stateType">{{ stateText }}</t-tag>
 
-    <!--    当是简单的时候-->
-    <div v-else-if="type==='simple'  " :class="[stateType]" class="simple-tag-wrap">
-      <p>{{ stateText }}</p>
-    </div>
+    <t-tag v-else-if="type==='simple'" :size="componentSize" variant="light">{{ stateText }}</t-tag>
 
 
     <base-store-select
@@ -23,10 +16,13 @@
         @selectDataComplated="selectDataComplated"
     ></base-store-select>
   </div>
+
+  <base-text v-else :content="false"></base-text>
 </template>
 
 <script>
 import {stateTagMixin} from "./stateTag";
+import {TransomComponentSize} from "../../../utils/utils";
 
 export default {
   name: 'baseTag',
@@ -43,6 +39,12 @@ export default {
       default: 'pure'
     }
   },
+  computed: {
+    componentSize() {
+      return TransomComponentSize(this.$props.size)
+    }
+  },
+
 
   mixins: [stateTagMixin],
 };
@@ -51,90 +53,4 @@ export default {
 <style lang="less" scoped>
 
 
-.tag-wrap {
-
-  width: fit-content;
-
-  .simple-tag-wrap {
-    width: auto;
-    height: auto;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    padding: var(--padding-4);
-    justify-content: flex-start;
-    padding-left: calc(var(--margin-4) + 4px + 8px);
-
-    p {
-      position: relative;
-      color: var(--font-color-d);
-
-      &:before {
-        content: '';
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        display: block;
-        position: absolute;
-        top: 50%;
-        left: calc(calc(var(--margin-4) + 4px) * -1);
-        transform: translateY(-50%);
-      }
-    }
-  }
-
-  .primary {
-    p {
-      &:before {
-        background: var(--color-primary);
-      }
-    }
-  }
-
-  .success {
-    p {
-      &:before {
-        background: var(--color-success);
-      }
-    }
-  }
-
-  .danger {
-    p {
-      &:before {
-        background: var(--color-error);
-      }
-    }
-  }
-
-  .warning {
-    p {
-      &:before {
-        background: var(--color-warn);
-      }
-    }
-  }
-
-
-}
-
-.mini {
-  .simple-tag-wrap {
-    p {
-      font-size: var(--font-size-s);
-      line-height: calc(var(--font-size-s) + 8px);
-    }
-  }
-}
-
-.small {
-  .simple-tag-wrap {
-    p {
-      font-size: var(--font-size-base);
-      line-height: calc(var(--font-size-base) + 8px);
-    }
-  }
-}
-
-
 </style>

package/packages/components/base/baseText/index.vue

@@ -1,5 +1,38 @@
-<script type="text/jsx">
+<template>
+  <div :class="[ 'base-text-wrap' ]" v-if="content"  :title="content" @click="onClick">
+    <div v-if="type==='phone'" :class="['content-wrap',type]">
+        <MobileIcon></MobileIcon>
+      {{content}}
+    </div>
+    <div v-else-if="type==='time'" :class="['content-wrap', type]">
+      <TimeIcon></TimeIcon>
+      {{filterContent()}}
+    </div>
+    <div v-else-if="type==='money'" :class="[type]">
+      <t-statistic  :value="content" prefix="￥" trend="increase" />
+    </div>
+    <div v-else-if="type==='number'" :class="[type]">
+      {{filterContent()}}
+    </div>
+
+    <div v-else class="default">
+      {{filterContent()}}
+    </div>
+
+  </div>
+
+
+
+  <div v-else  class="empty">暂无数据</div>
+
+
+
+</template>
+
+
+<script>
 import {FilterTime} from "../../../utils/utils";
+import {MobileIcon,TimeIcon} from "tdesign-icons-vue"
 
 export default {
   name: "baseText",
@@ -9,34 +42,18 @@ export default {
     }
   },
 
-  render(createElement, context) {
-    return (
-        <div class={`base-text-wrap ${this.type}`} ref="baseTextRef">
-          <i class={`${this.renderIcon()}`} style={{color: `${this.content ? '' : 'var(--color-error)'}`}}></i>
-          <el-tooltip
-              disabled={this.toolTipFlag}
-              content={this.filterContent()} effect="dark" placement="top">
-            <div class={`content-wrap`}>
-              <p onClick={this.onClick}
-                 style={this.textStyle}
-                 ref="pRef">{`${this.filterContent()}`}</p>
-            </div>
-          </el-tooltip>
-        </div>
-    )
-
+  components:{
+    MobileIcon,
+    TimeIcon
   },
+
   mounted() {
     this.$nextTick(() => {
       this.setToolTipFlag();
     })
   },
   computed: {
-    textStyle() {
-      return {
-        'textAlign': this.align
-      }
-    }
+
   },
   props: {
     type: {},
@@ -70,7 +87,7 @@ export default {
       }
       switch (type) {
         case 'time':
-          return FilterTime(content, 'YYYY-MM-DD HH:mm:ss')
+          return FilterTime(content, 'YYYY/MM/DD HH:mm:ss')
         case 'money':
           return `¥ ${parseFloat(content.toString()).toFixed(2)}`
       }
@@ -99,12 +116,11 @@ export default {
 
     },
     setToolTipFlag() {
-      const scrollWidth = this.$refs.pRef.scrollWidth;
-      const offsetWidth = this.$refs.pRef.offsetWidth;
-      if (scrollWidth > offsetWidth) {
-        this.toolTipFlag = false;
-
-      }
+      // const scrollWidth = this.$refs.pRef.scrollWidth;
+      // const offsetWidth = this.$refs.pRef.offsetWidth;
+      // if (scrollWidth > offsetWidth) {
+      //   this.toolTipFlag = false;
+      // }
     },
     onClick() {
       const {type} = this.$props;
@@ -119,64 +135,35 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.base-text-wrap {
-  width: 100%;
-  height: auto;
-  display: flex;
-  align-items: center;
-
-  i {
-    margin-right: var(--margin-2);
-  }
 
-  .content-wrap {
-    width: 100%;
-    height: 100%;
-
-    p {
-      width: 100%;
-      display: inherit;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      color: var(--font-color-d);
-      font-size: var(--font-size-base);
-    }
+.base-text-wrap{
+  width: fit-content;
+  font-size: var(--font-size-base);
+  .content-wrap{
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
   }
-
-}
-
-.money, .number {
-  p {
+  .time,.number,.money{
+    font-family: TCloudNumber !important;
+  }
+  .money{
     font-weight: var(--font-weight-kg);
   }
-}
 
 
-.money {
-  p {
-    color: var(--color-warn) !important;
+  /deep/ .t-statistic-content-prefix{
+    font-size: var(--font-size-s) !important;
   }
-}
-
-.handle {
-  width: fit-content !important;
-
-  p {
-    color: var(--color-primary) !important;
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: underline !important;
-    }
+  /deep/ .t-statistic-content-value{
+    font-size: var(--font-size-base) !important;
+    font-family: TCloudNumber !important;
   }
-}
-
-.phone, .time {
-  border-radius: var(--radius);
 
-  .content-wrap {
-    width: calc(100% - 18px);
-  }
+}
+.empty{
+  color: var(--font-color-ds);
+  font-size: var(--font-size-s);
 }
 </style>

package/packages/components/base/baseTimeLine/baseTimeLineLeft.vue

@@ -97,7 +97,7 @@ export default {
   }
 
   .time-week-wrap {
-    padding: 0px var(--padding-5);
+    padding: 0 var(--padding-5);
 
     span {
       color: var(--font-color-d);

package/packages/components/base/baseTimeLine/baseTimeLineRight.vue

@@ -48,7 +48,7 @@ export default {
 .base-time-line-right-wrap {
   width: auto;
   height: auto;
-  padding: 0px var(--padding-5);
+  padding: 0 var(--padding-5);
   .time-line-content {
     color: var(--font-color-d);
     size: var(--font-size-base);

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

@@ -1,91 +1,75 @@
 <template>
-  <div class="base-time-type-select-wrap">
-    <el-popover
-        ref="popover"
-        placement="bottom"
-        trigger="click"
-        @hide="eventHide"
-        @show="eventShow"
-    >
-      <!-- 内容 -->
-      <template>
-        <div class="time-type-select-content">
-          <div class="content-line-wrap">
-            <div
-                v-for="(item, index) in baseTimeTypeConfig"
-                :key="index"
-                class="content-line"
-            >
-              <div class="type-des">{{ item.text }}</div>
-              <div class="line-item-wrap">
-                <div
-                    v-for="(citem, cindex) in item.list"
-                    :key="cindex"
-                    :class="{
-                    select: selectLineItem
-                      ? selectLineItem == citem.key
-                      : citem.key == module,
-                  }"
-                    class="line-item"
-                    @click="selectLineItem = citem.key;timeModule=null;"
-                >
-                  <span>{{ citem.text }}</span>
-                </div>
-              </div>
+  <t-popup v-model="isOpen" ref="popover" placement="bottom" trigger="click" @visible-change="visibleChange">
+    <template #content>
+      <div class="time-type-select-content">
+        <div class="content-line-wrap">
+          <div
+              v-for="(item, index) in baseTimeTypeConfig"
+              :key="index"
+              class="content-line"
+          >
+            <div class="type-des">{{ item.text }}</div>
+            <div class="line-item-wrap">
+              <t-check-tag v-for="(cItem, cIndex) in item.list"
+                           :key="cIndex"
+                           size="large"
+                           :checked="selectLineItem?selectLineItem === cItem.key:cItem.key === module "
+                           @click="selectLineItem = cItem.key;timeModule=null"
+                          >{{ cItem.text }}
+              </t-check-tag>
+
             </div>
           </div>
-          <div class="time-type-custom-wrap">
-            <div class="type-des"><span>自定义</span></div>
-            <div class="time-type-custom-content">
-              <el-date-picker
-                  v-model="timeModule"
-                  end-placeholder="结束日期"
-                  range-separator="至"
-                  size="small"
-                  start-placeholder="开始日期"
-                  style="width: 100%; margin-top: var(--margin-5)"
-                  type="daterange"
-                  value-format="timestamp"
-                  @change="onTimeChange"
-              >
-              </el-date-picker>
-            </div>
+        </div>
+        <div class="time-type-custom-wrap">
+          <div class="type-des"><span>自定义</span></div>
+          <div class="time-type-custom-content">
+            <t-date-range-picker
+                v-model="timeModule"
+                size="small"
+                enable-time-picker=""
+                style="width: 100%; margin-top: var(--margin-4)"
+                valueType="time-stamp"
+                @change="onTimeChange"
+            >
+            </t-date-range-picker>
           </div>
-          <div class="time-type-custom-footer">
-            <div class="time-type-custom-footer-left">
-              <slot name="footerByLeft"></slot>
-            </div>
-            <baseButtonHandle
-                :config="handleConfig"
-                class="button-handle-wrap"
-            ></baseButtonHandle>
+        </div>
+        <div class="time-type-custom-footer">
+          <div class="time-type-custom-footer-left">
+            <slot name="footerByLeft"></slot>
           </div>
-
+          <baseButtonHandle
+              :config="handleConfig"
+              class="button-handle-wrap"
+          ></baseButtonHandle>
         </div>
-      </template>
-      <div
-          slot="reference"
-          :class="{
+
+      </div>
+    </template>
+    <div
+        :class="{
           'is-open': isOpen,
         }"
-          class="time-type-select-input"
-          @click="openSelectWrap"
+        class="time-type-select-input"
+    >
+      <t-input
+          v-model="showModule"
+          :readonly="true"
+          placeholder="请选择时间"
+          size="medium"
       >
-        <el-input
-            v-model="showModule"
-            :readonly="true"
-            :suffix-icon="suffixIcon"
-            placeholder="请选择时间"
-            size="small"
-        >
-        </el-input>
-      </div>
-    </el-popover>
-  </div>
+        <template #suffix-icon>
+          <time-icon></time-icon>
+        </template>
+      </t-input>
+    </div>
+  </t-popup>
 </template>
 
 <script>
 import baseButtonHandle from "../baseButtonHandle/baseButtonHandle.vue";
+import {TimeIcon} from "tdesign-icons-vue"
 //
 import {baseTimeTypeConfig} from "./config";
 import {FilterTime} from "../../../utils/utils";
@@ -130,6 +114,7 @@ export default {
   },
   components: {
     baseButtonHandle,
+    TimeIcon
   },
   computed: {
     module: {
@@ -200,12 +185,22 @@ export default {
 
     },
 
+    doClose() {
+      this.isOpen = false;
+    },
+
     eventHide() {
       this.isOpen = false;
     },
 
-    openSelectWrap() {
-      this.isOpen = !this.isOpen;
+    visibleChange() {
+      if (this.isOpen) {
+        this.eventShow()
+      } else {
+        this.eventHide();
+      }
+
+
     },
 
     confirm() {
@@ -220,7 +215,7 @@ export default {
       }
       this.$nextTick(() => {
         this.$emit("selectConfirm", this.module);
-        this.$refs.popover.doClose();
+        // this.$refs.popover.doClose();
       })
     },
     onTimeChange() {

package/packages/components/base/baseToggle/toggle.vue

@@ -1,40 +1,17 @@
 <template>
-  <div :class="[size]" class="toggle-wrap">
-    <div
-        v-for="(item, index) in toggleList"
-        :key="index"
-        :class="{
-        disabled: disabled,
-        selected: item.value == module,
-      }"
-        :style="{
-        background: item.value == module ? toggleColor[toggleList.length>toggleColor.length? 0:index] : ''  ,
-      }"
-        class="toggle-item-wrap"
-        @click="handletoggle(item)"
-    >
-      <base-icon
-          v-if="item.icon"
-          :color="item.value == module ? `${toggleTextColor[toggleList.length>toggleColor.length? 0:index]}` : 's'"
-          :event="disabled ? false : true"
-          :name="item.icon"
-          :size="`l`"
-          @iconClick="handletoggle(item)"
-      ></base-icon>
-      <span
-          v-else
-          :style="{
-          color:
-            item.value == module ? `${toggleTextColor[toggleList.length>toggleTextColor.length? 0:index]} !important` : '',
-        }"
-      >
-        {{ item.label }}
-      </span>
-    </div>
-  </div>
+    <t-radio-group v-model="module" :disabled="disabled"  variant="primary-filled" :size="componentSize">
+      <t-radio-button
+          :disabled="item.disabled"
+          v-for="(item, index) in toggleList"
+          :key="index"
+          :value="item.value">{{ item.label }}
+      </t-radio-button>
+    </t-radio-group>
 </template>
 
 <script>
+import {TransomComponentSize} from "../../../utils/utils";
+
 export default {
   name: 'baseToggle',
   data() {
@@ -72,29 +49,30 @@ export default {
   computed: {
     module: {
       set(val) {
-        this.$emit('input', val)
+        const {beforeHandle,toggleList} = this.$props
+        const index =  toggleList.findIndex(item=>{return item.value===val});
+        const item  = toggleList[index];
+        if (beforeHandle) {
+          beforeHandle(() => {
+            this.setModule(item)
+            this.$emit('input', val)
+          }, item)
+        } else {
+          this.$emit('input', val)
+          this.setModule(item)
+        }
       },
       get() {
         return this.$props.value
       },
     },
+    componentSize(){
+      return TransomComponentSize(this.$props.size);
+
+    }
   },
   methods: {
-    handletoggle(item) {
-      const {disabled} = this.$props
-      if (disabled || item.value == this.module) return
-      const {beforeHandle} = this.$props
-      if (beforeHandle) {
-        beforeHandle(() => {
-          this.setModule(item)
-        }, item)
-      } else {
-        this.setModule(item)
-      }
-    },
-
     setModule(item) {
-      this.module = item.value
       this.$emit('handletoggle', item)
     },
   },
@@ -168,6 +146,7 @@ export default {
     font-size: var(--font-size-s);
     line-height: calc(var(--font-size-s) + 8px);
     padding: var(--padding) var(--padding-3) !important;
+
     span {
       font-size: var(--font-size-s) !important;
     }
@@ -178,6 +157,7 @@ export default {
   .toggle-item-wrap {
     padding: 0px calc(var(--padding-4));
     line-height: calc(var(--font-size-base) + 8px);
+
     span {
       font-size: var(--font-size-base);
     }