meixioacomponent 1.1.49 → 2.0.1

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

@@ -1,14 +1,14 @@
 <template>
-  <div :class="[tableExtend]" class="table-wrap">
-    <el-table :id="id" ref="elTable" :data="tableData"
-              :header-cell-style="headerCellStyle"
-              :height="height"
-              :max-height="maxHeight"
-              :row-key="rowKey"
-              v-bind="$attrs"
-
-              @selection-change="handleSelectionChange">
-      <!-- 表格暂无数据 -->
+  <div class="table-wrap">
+
+    <t-table
+        :row-key="rowKey"
+        :columns="renderColumns"
+        :data="tableData"
+        :default-selected-row-keys="preCheckValue"
+        :selected-row-keys="preCheckValue"
+        @select-change=""
+    >
       <template slot="empty">
         <baseDefaultSvgVue
             v-if="tableData.length <= 0"
@@ -17,76 +17,31 @@
             :text="`表格无数据`"
             :width="emptyWidth"
         ></baseDefaultSvgVue>
-        <span></span>
       </template>
 
-      <!--      表格的扩展项-->
-      <el-table-column v-if="tableExtend"
-                       :reserve-selection="true"
-                       :selectable="canSelected"
-                       :type="columnType">
-      </el-table-column>
-
-
-      <el-table-column
-          v-for="(item, index) in tableConfig"
-          :key="item.value"
-          :align="`left`"
-          :fixed="item.fixed ? item.fixed : false"
-          :label="item.label"
-          :prop="item.value"
-          :row-key="getRowKey"
-          v-show="!item.hide"
-          :width="isAverageWidth ? '' : item.width"
-      >
-        <template slot="header" slot-scope="scope">
-          <span class="plain-table-header-text">
-            {{ scope.column.label }}
-          </span>
-        </template>
-
-        <template slot-scope="scope">
-
-          <slot
-              v-if="item.template "
-              :name="item.value"
-              :scope="scope.row"
-          ></slot>
-
-
-          <el-tooltip
-              v-else-if="
-                isToolTip(scope.row[`${item.value}`]) && !item.type
-              "
-              :content="scope.row[`${item.value}`].toString()"
-              effect="dark"
-              placement="top"
-          >
-              <span
-                  :class="[ item.fn ? 'handle-primary' : '', ]"
-                  class="cell-content-text"
-                  @click="rowClick(item, scope.row)"
-              >
-                {{ nomalRowValue(scope.row, item) }}
-              </span>
-          </el-tooltip>
-          <span
-
-              v-else-if="!item.type"
-              :class="[ item.fn ? 'handle-primary' : '', ]"
-              :style="{
+      <template v-for="(item) in renderColumns" :slot="item.value" slot-scope="scope">
+        <slot
+            v-if="item.template "
+            :name="item.value"
+            :scope="scope.row"
+        ></slot>
+        <span
+            v-else-if="!item.type"
+            :class="[ item.fn ? 'handle-primary' : '', ]"
+            :style="{
               color: item.color,
             }"
-              class="cell-content-text"
-              @click="rowClick(item, scope.row)"
-          >
+            class="cell-content-text"
+            @click="rowClick(item, scope.row)"
+        >
             {{ nomalRowValue(scope.row, item) }}
           </span>
-          <baseText v-else-if="item.type" :content="scope.row[item.value]"
-                    :type="item.type"></baseText>
-        </template>
-      </el-table-column>
-    </el-table>
+        <baseText v-else-if="item.type" :content="scope.row[item.value]"
+                  :type="item.type"></baseText>
+
+      </template>
+    </t-table>
+
   </div>
 </template>
 
@@ -95,7 +50,7 @@ import baseDefaultSvgVue from '../baseDefaultSvg/baseDefaultSvg.vue'
 import baseText from "../baseText";
 
 //
-import {FilterTime} from '../../../utils/utils'
+import {FilterTime, TransomTableConfig} from '../../../utils/utils'
 import {tableSectionMixins} from "../../mixins/tableSectionMixins";
 
 export default {
@@ -105,10 +60,13 @@ export default {
       id: null,
       checkValue: null,
       maxHeight: 'auto',
+      tableColumns: []
 
     }
   },
+  mixins: [tableSectionMixins],
   created() {
+    this.tableColumns = this.$props.tableConfig;
     if (this.$props.tableId) {
       this.id = this.$props.tableId
     }
@@ -136,19 +94,22 @@ export default {
       require: true,
       default: () => [],
     },
-
-
     tableId: {
       type: String,
     },
     height: {
       default: 'auto',
     },
-
-    isAverageWidth: {
-      type: Boolean,
-      default: false,
+    rowKey: {
+      type: String,
+      default: ''
+    },
+    // single/multiple
+    checkType: {
+      type: String,
+      default: ''
     },
+
     emptyWidth: {
       type: Number,
       default: 280,
@@ -161,45 +122,64 @@ export default {
       type: Boolean,
       default: false,
     },
-    tableExtend: {
-      type: String,
-    },
+
     preCheckValue: {
       type: Array,
     },
-    headerCellStyle: {
-      type: Object,
-      default: () => {
-        return {
-          background: 'white',
-          color: `var(--font-color-s)`
-        }
-
-      }
-    },
     canSelected: {
       type: Function,
-      default: () => {
-        return true
-      }
-    }
+      default: null
+    },
+    //  表格的配置
+    tableConfig: {
+      type: Array,
+      require: true,
+    },
+
   },
-  mixins: [tableSectionMixins],
   computed: {
-    columnType() {
-      const {tableExtend} = this.$props
-      switch (tableExtend) {
-        case 'single':
-          return 'selection'
-        case 'multiple':
-          return 'selection'
-      }
-
+    renderColumns() {
+
+
+      const config  = this.tableColumns.map((item, index) => {
+        item['key'] = item.value;
+        item['colkey'] = item.key;
+        TransomTableConfig(item, index)
+        return item;
+      });
+
+
+      if (this.$props.checkType) {
+        const checkConfig = {
+          colKey: 'row-select',
+          type: 'multiple',
+          label: 'row-select',
+          disabled: (scope) => {
+            if (this.$props.canSelected) {
+              return !(this.$props.canSelected(scope))
+            } else {
+              return false
+            }
+
+          }
+        }
 
+        return [checkConfig,...config]
+      }else{
+      }
+      return config
     }
+
   },
   methods: {
-
+    // 返回普通格式的样式
+    nomalStyle(item) {
+      return [
+        item.fun ? "fun" : "",
+        item.click ? "primary" : "",
+        item.color ? item.color : "",
+      ];
+    },
     isToolTip(value) {
       if (!value) {
         return false
@@ -237,78 +217,4 @@ export default {
 
 <style lang="less" scoped>
 @import url("../../style/tableStyle.less");
-
-.table-wrap {
-  overflow: hidden;
-  border-top: 0;
-  border-bottom: 0;
-  border-radius: calc(var(--radius) * 2);
-  border-bottom: 1px solid var(--color-table-border);
-
-}
-
-
-/deep/ .has-gutter {
-  tr {
-    th {
-      background: var(--color-table-header) !important;
-    }
-  }
-}
-
-/deep/ .el-table__fixed-header-wrapper {
-  table {
-    thead {
-      tr {
-        th {
-          background: var(--color-table-header) !important;
-        }
-      }
-    }
-  }
-
-}
-
-.plain-table-header-text {
-  color: var(--font-color-s);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-m);
-}
-
-/deep/ .el-table__header-wrapper {
-  background: var(--color-table-header) !important;
-  height: auto !important;
-}
-
-
-/deep/ .el-table__body-wrapper {
-  height: auto !important;
-}
-
-.handle-primary {
-  cursor: pointer;
-  text-decoration: underline !important;
-}
-
-.primary,
-.handle-primary {
-  font-weight: var(--font-weight-g);
-  color: var(--color-primary) !important;
-}
-
-
-/deep/ .el-table::before {
-  display: none !important;
-}
-
-
-/deep/ .el-table__row {
-  &:last-of-type {
-    td {
-      border-bottom: 0;
-    }
-  }
-}
-
-
 </style>

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

@@ -1,45 +1,45 @@
 <template>
-  <el-popover
-      ref="popover"
+  <t-popup
       v-model="module"
       :placement="placement"
       :trigger="trigger"
-      @hide="popoverHide"
-      @show="popoverShow"
+      :disabled="disabled"
+      @visible-change="onVisibleChange"
   >
-    <template>
-      <div ref="popoverContent" class="popover-content">
-        <slot name="popoverContent"></slot>
-      </div>
+    <template #content>
+      <slot name="popoverContent"></slot>
     </template>
-    <template v-if="!template" slot="reference">
-      <el-button
-          :class="{ 'is-single': !buttonText && buttonIcon }"
-          :disabled="disabled"
-          :size="buttonSize"
-          :type="module ? 'selected' : 'info'"
-          class="popover-button"
-          @click.stop="buttonClick"
-      >
-        <base-icon
-            v-if="buttonIcon"
-            :color="module ? 'var(--text-white)' : 'd'"
-            :event="!disabled"
-            :iconClass="iconClass"
-            :name="buttonIcon"
-            :plain="true"
-            :size="`s`"
-            class="button-icon"
-            @iconClick="iconClick"
-        ></base-icon>
+
+    <div>
+      <base-button
+          v-if="!template"
+          :disabled="disabled" :type="buttonType" :size="buttonSize"
+          :shape="buttonText?'rectangle':'square'"
+          @click="buttonClick">
+
+        <template #icon v-if="buttonIcon">
+          <base-icon
+              :style="{
+                marginRight:buttonText?'var(--margin-2)':'0'
+              }"
+              v-if="buttonIcon"
+              :color="module ? 'var(--text-white)' : 'd'"
+              :event="!disabled"
+              :iconClass="iconClass"
+              :name="buttonIcon"
+              :plain="true"
+              :size="`s`"
+              class="button-icon"
+              @iconClick="iconClick"
+          ></base-icon>
+        </template>
         <span v-if="buttonText" class="inner-span">{{ buttonText }}</span>
-      </el-button>
-    </template>
+      </base-button>
+      <slot v-else name="popoverReference"></slot>
+
+    </div>
+  </t-popup>
 
-    <template v-else slot="reference">
-      <slot name="popoverReference"></slot>
-    </template>
-  </el-popover>
 </template>
 
 <script>
@@ -107,6 +107,9 @@ export default {
         return this.$props.value
       },
     },
+    buttonType(){
+      return this.module?'primary':'info'
+    }
   },
   methods: {
     popoverShow() {
@@ -117,12 +120,18 @@ export default {
     },
     iconClick() {
       this.$nextTick(() => {
-        this.$refs.popover.doShow()
-        // console.log(this.$refs.popover)
+        this.module = true;
       })
     },
     buttonClick() {
     },
+    onVisibleChange() {
+      if (this.module) {
+        this.popoverShow()
+      } else {
+        this.popoverHide();
+      }
+    }
   },
 }
 </script>

package/packages/components/base/baseSection/baseSection.vue

@@ -14,12 +14,17 @@
       </div>
       <div class="header-right">
         <slot name="section-header-right"></slot>
-        <base-icon
-            :event="true"
-            :name="iconClass"
-            :size="`l`"
-            @iconClick="iconClick"
-        ></base-icon>
+
+        <t-button shape="square" variant="outline" @click="iconClick">
+          <template #icon>
+            <ArrowDownIcon
+                v-if="!module"
+            ></ArrowDownIcon>
+            <ArrowUpIcon
+                v-else
+            ></ArrowUpIcon>
+          </template>
+        </t-button>
 
       </div>
     </div>
@@ -30,6 +35,8 @@
 </template>
 
 <script>
+import {ArrowDownIcon, ArrowUpIcon} from "tdesign-icons-vue"
+
 export default {
   name: 'baseSection',
   data() {
@@ -42,7 +49,9 @@ export default {
   },
   beforeDestroy() {
   },
-  props: {
+  components: {
+    ArrowDownIcon, ArrowUpIcon
+  }, props: {
     disable: {
       type: Boolean,
       default: false,
@@ -154,7 +163,7 @@ export default {
     margin-left: var(--margin-4);
 
     &::before {
-      top: 0px;
+      top: 0;
       left: -10px;
       width: 4px;
       height: 100%;

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

@@ -18,14 +18,14 @@
       ></BaseImg>
     </div>
 
-    <el-button
+    <base-button
       type="primary"
       size="mini"
       @click="handleCheckImg"
       :disabled="disabled"
     >
       选择图片
-    </el-button>
+    </base-button>
     <BaseUploadItem
       :fileType="`img`"
       :cropper="cropper"

package/packages/components/base/baseSkeleton/baseSkeleton.vue

@@ -62,7 +62,6 @@ export default {
     height: 100%;
     display: flex;
     border-radius: inherit;
-    align-items: flex-start;
     flex-flow: column nowrap;
     justify-content: flex-start;
     align-items: flex-start;

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

@@ -1,66 +1,41 @@
 <template>
-  <el-select
-      v-if="selectStore"
-      ref="target"
-      v-model="module"
-      :disabled="disabled"
-      :filterable="true"
-      :loading="selectLoading"
-      :multiple="multiple"
-      :clearable="true"
-      :multipleLimit="multipleLimit"
-      :placeholder="placeholder"
-      :size="size"
-      style="width: 100%; height: 100%;"
-      @change="selectChange"
-      @visible-change="visibleChange"
-  >
-    <div slot="empty" class="select-empty">
-      <el-button
-          :loading="selectLoading"
-          icon="el-icon-refresh"
-          size="mini"
-          type="primary"
-          @click="loadSelectData"
-      >
-        尝试刷新数据
-      </el-button>
-    </div>
-    <div class="option-wrap">
-      <div class="option-wrap-header">
-
-        <!--        全选-->
-        <el-checkbox
-            v-if="useCheckAll&&multiple"
-            v-model="checkAll"
-            :indeterminate="isIndeterminate" style="width: 100%" @change="handleCheckAllChange">全选
-        </el-checkbox>
-
-        <!--        -->
-        <el-button
-            :disabled="selectLoading"
-            icon="el-icon-refresh"
+  <t-select v-if="selectStore" ref="target" v-model="module" :disabled="disabled" :filterable="true"
+            :loading="selectLoading" :multiple="multiple" :clearable="true" :max="multipleLimit"
+            :placeholder="placeholder" :size="componentSize" style="width: 100%; height: 100%;" @change="selectChange"
+            @popupVisibleChange="visibleChange">
+    <template #empty>
+      <div class="empty-wrap">
+        <base-button
+            :loading="selectLoading"
             size="mini"
-            title="重新刷新数据"
-            type="info"
+            type="primary"
             @click="loadSelectData"
-        ></el-button>
+        >
+          <template #icon>
+            <RefreshIcon></RefreshIcon>
+          </template>
+          尝试刷新数据
+        </base-button>
+      </div>
 
+    </template>
+
+
+    <t-option
+        v-for="item in selectData"
+        :key="item.value"
+        :disabled="item.disabled"
+        :label="item[`${selectConfig.label}`]"
+        :value="item[`${selectConfig.value}`]"
+    ></t-option>
+  </t-select>
 
-      </div>
-      <el-option
-          v-for="item in selectData"
-          :key="item.value"
-          :disabled="item.disabled"
-          :label="item[`${selectConfig.label}`]"
-          :value="item[`${selectConfig.value}`]"
-      ></el-option>
-    </div>
-  </el-select>
 </template>
 
 <script>
 import componentConfig from '../../../config/componentConfig'
+import {RefreshIcon} from "tdesign-icons-vue"
+import {TransomComponentSize} from "../../../utils/utils";
 
 export default {
   name: 'baseStoreSelect',
@@ -128,6 +103,9 @@ export default {
     selectConfig() {
       return this.selectStore.getConfig()
     },
+    componentSize() {
+      return TransomComponentSize(this.$props.size)
+    }
   },
 
   methods: {
@@ -173,7 +151,7 @@ export default {
       this.$emit('onSelectChange', this.module)
     },
     focus() {
-      this.$refs.target.focus()
+      this.$refs.target?.focus()
     },
 
     getSelectData() {
@@ -213,6 +191,9 @@ export default {
       this.loadSelectData()
     },
   },
+  components: {
+    RefreshIcon
+  },
 
   watch: {
     '$props.params': {
@@ -244,16 +225,19 @@ export default {
 .option-wrap {
   width: 100%;
   height: auto;
-
-  .option-wrap-header {
-    width: 100%;
-    display: flex;
-    box-sizing: border-box;
-    justify-content: end;
-    padding: 0 var(--padding-4);
-    margin-bottom: var(--margin-4);
-  }
 }
+.empty-wrap{
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--padding-4);
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+}
+
+
+
 
 .select-empty {
   width: 100%;