xt-element-ui 1.1.3 → 1.1.5

package/src/components/{table → ex-table}/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="ExTable">
     <slot name="title">
-      <BaseFlexBox content="between" style="padding: 0 10px;">
-        <div class="small-title" style="padding: 10px; 0" v-if="title">{{ title }}</div>
-        <el-button size="small" type="primary" plain  v-if="toolExport" icon="el-icon-download" @click="exportTableData">导出</el-button>
-      </BaseFlexBox>
+      <XtFlexBox content="between" style="padding: 0 10px;">
+        <ExText size="medium" style="padding: 10px" v-if="title">{{ title }}</ExText>
+        <el-button size="small" type="primary" plain  v-if="typeof toolExport === 'function'" icon="el-icon-download" @click="exportTableData">导出</el-button>
+      </XtFlexBox>
     </slot>
     <el-table
       ref="ExtendTable"
@@ -79,7 +79,6 @@
       </template>
       <template v-slot:empty>
         <div style="text-align:center" v-show="hasLoadData&&!loading">
-          <img :src="emptyIcon" height="150px" />
           <div class="empty-title">暂无数据</div>
           <div class="empty-subtitle">{{emptSubTitle}}</div>
         </div>
@@ -87,7 +86,7 @@
     </el-table>
     <div ref="toolBar" class="toolBar left">
       <slot name="pagination">
-        <BasePagination v-if="pagination" :total="total" :page-sizes="pageSizes" :is-simple="simplePage" :page-drop-show="simplePage" :page-size="pagination.PageSize" :current-page="pagination.PageNum" @current-change="pageChange" @size-change="sizeChange"></BasePagination>
+        <el-pagination v-if="pagination" :total="total" :page-sizes="pageSizes" :page-size="pagination.PageSize" :current-page="pagination.PageNum" @current-change="pageChange" @size-change="sizeChange"></el-pagination>
       </slot>
     </div>
   </div>
@@ -95,15 +94,16 @@
 <script>
 import ExColumn from "./ExColumn";
 import ExCell from "./ExCell";
-import exportExcell from "@/views/compreSafeInsIos/mixin/exportExcell.js";
-import { GetSelfData, SaveIsShowInfo } from "@/api/compreSafeInsIos/common.js";
+import ExText from "../xt-text";
+import XtFlexBox from "../xt-flex-box";
 export default {
   name: "ExTable",
   components: {
     ExCell,
-    ExColumn
+    ExColumn,
+    ExText,
+    XtFlexBox
   },
-  mixins: [exportExcell],
   inheritAttrs: false,
   props: {
     tbId: {
@@ -155,7 +155,6 @@ export default {
         return [];
       }
     },
-    // 自定义 插入列
     insertColumns: {
       type: Array,
       default() {
@@ -208,23 +207,17 @@ export default {
     spanFields: {
       type: Object
     },
-    groupColumns: { // 左侧合并分组列
+    groupColumns: {
       type: Array,
       default() {
         return [];
       }
     },
-    emptyIcon: {
-      type: String,
-      default: () => {
-        return require("@/assets/images/common/noData.png");
-      }
-    },
     title: {},
     emptSubTitle: {},
     toolExport: {
-      type: Boolean,
-      default: false
+      type: Function,
+      default: null
     }
   },
   data() {
@@ -232,9 +225,9 @@ export default {
       startIndex: 0,
       inTableHeight: 0,
       dropvisible: false,
-      hasLoad: false,
+      hasLoad: true,
       hasLoadData: false,
-      diyColumns: this.columns || [], // 自定义列数据源
+      diyColumns: this.columns || [],
       checkedColumns: [],
       tableColumns: []
     };
@@ -299,7 +292,6 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      // 表格高度自适应浏览器大小
       this.changeTableHight();
       if (!this.height) {
         window.onresize = () => {
@@ -336,41 +328,8 @@ export default {
       const _columns = [];
       return new Promise((resolve, reject) => {
         if (!this.hasLoad && this.tbId) {
-          GetSelfData({
-            gridViewTypeId: this.tbId
-          }).then((res) => {
-            const { code, data } = res;
-            if (code === 200 && data.Result) {
-              const _resColumns = JSON.parse(data.Data);
-              // 解决 slotName问题 接口数据根据DATAFIELD 匹配 slotName
-              this.columns.map((item, ind) => {
-                const _fItem = _resColumns.find(it => item.prop == it.DATAFIELD);
-                if (_fItem && item.prop) {
-                  _columns.push({
-                    ...item,
-                    label: _fItem.HEADERTEXT,
-                    show: _fItem.ISSHOW || false,
-                    OrderNum: _fItem.ORDERNUM || ind
-                  });
-                } else if (item.label == "操作") {
-                  _columns.push(item);
-                } else {
-                  return item;
-                }
-              });
-              resolve(_columns.sort((pre, aft) => {
-                return pre.OrderNum - aft.OrderNum;
-              }));
-            } else {
-              resolve(this.columns);
-              this.$emit("update:showColumsFilter", false);
-            }
-            this.hasLoad = true;
-          }).catch(() => {
-            this.hasLoad = true;
-            resolve(this.columns);
-            this.$emit("update:showColumsFilter", false);
-          });
+          resolve(this.columns);
+          this.$emit("update:showColumsFilter", false);
         } else {
           resolve(this.columns);
           this.$emit("update:showColumsFilter", false);
@@ -394,7 +353,7 @@ export default {
     },
     handleToggle(show, item) {
       if (this.checkedColumns.length === 0) {
-        this.$Message.MessageWarning("至少选择一列显示！");
+        this.$message.warning("至少选择一列显示！");
         return;
       }
       this.$emit("update:loading", true);
@@ -402,29 +361,10 @@ export default {
       this.tableColumns = this.diyColumns.filter(item => (item.show === undefined ? true : item.show));
       this.checkedColumns = this.updateCheckColumns(this.tableColumns);
       this.dropvisible = false;
-      // 设置定制列
       this.changeTableHight();
       this.$nextTick(() => {
         this.doLayout();
       });
-      if (this.tbId) {
-        const params = {
-          dataField: item.prop,
-          isShow: show ? 1 : 0,
-          gridviewTypeId: this.tbId
-        };
-        SaveIsShowInfo(params).then((res) => {
-          const { code } = res;
-          this.$emit("update:loading", false);
-          if (code !== 200) {
-            // 取消勾选处理
-          } else {
-            this.$Message.MessageSuccess("设置成功");
-          }
-        }).catch(() => {
-          this.$emit("update:loading", false);
-        });
-      }
     },
     doLayout() {
       this.$refs.ExtendTable && this.$refs.ExtendTable.doLayout();
@@ -481,7 +421,6 @@ export default {
 
       if (rowCount === 0) return spans;
 
-      // 初始化数组
       for (let i = 0; i < rowCount; i++) {
         spans[i] = [];
         for (let j = 0; j < this.groupColumns.length; j++) {
@@ -489,8 +428,6 @@ export default {
         }
       }
 
-      // 分级计算合并
-
       for (let level = 0; level < this.groupColumns.length; level++) {
         let pos = 0;
         while (pos < rowCount) {
@@ -499,8 +436,6 @@ export default {
           let endPos = startPos;
           const currentValue = this.tableData[startPos][this.groupColumns[level].prop];
 
-          // 检查上级是否相同
-
           let sameParent = true;
 
           for (let parentLevel = 0; parentLevel < level; parentLevel++) {
@@ -571,7 +506,6 @@ export default {
       try {
         if (!this.autoSetHeight) return;
         if (this.height) {
-          // 如果有传进来高度就取消自适应
           this.inTableHeight = (this.height - 1 - (this.title ? 40 : 0));
           this.$nextTick(() => {
             this.doLayout();
@@ -579,12 +513,10 @@ export default {
           return;
         }
         let tableHeight = window.innerHeight || document.body.clientHeight;
-        // 高度设置
         const disTop = this.$refs.ExtendTable.$el;
         tableHeight -= (disTop.getBoundingClientRect().top + 20 + 1);
         tableHeight -= this.$refs.toolBar.offsetHeight;
         this.inTableHeight = tableHeight;
-        // 重绘表格
         this.doLayout();
       } catch (err) {
         console.log(err);
@@ -595,15 +527,11 @@ export default {
       if (!options.align) {
         options.align = "center";
       }
-      // if (!options.resizable) {
-      //   options.resizable = true;
-      // }
       if (options.showTip) {
         options.showOverflowTooltip = true;
       }
       return { ...options };
     },
-    // 排序
     changeTableSort(column) {
       const sortingType = column.order;
       const sidx = sortingType ? column.prop : "";
@@ -653,13 +581,15 @@ export default {
     },
     exportTableData() {
       const title = this.title;
-      const list = [];
-      this.tableData.forEach(r => {
-        const obj = { ...r };
-        list.push(obj);
-      });
-      // 复制一份数据解决导出数据问题
-      this.doExport(list, title, null, this.column);
+      const list = [...this.tableData];
+      
+      if (typeof this.toolExport === 'function') {
+        try {
+          this.toolExport(list, title, this.columns);
+        } catch (error) {
+          console.error('Export hook error:', error);
+        }
+      }
     }
   }
 };
@@ -679,10 +609,9 @@ export default {
   &.right{
     justify-content: flex-end;
   }
-  /deep/.pagination {
+  ::v-deep .pagination {
     padding: 15px 10px;
     width: 100%;
-    // background-color: #ffffff;
   }
 }
 .drop-body{
@@ -703,29 +632,46 @@ export default {
     color: #999999;
   }
 }
-@mixin setColorType($color) {
-  color:  $color;
-  &.effect-light{
-    background-color: rgba($color: $color, $alpha: .2);
-  }
-  &.effect-dark{
-    color: #ffffff;
-    background-color: $color;
-  }
-}
-
-/deep/.el-table__cell,/deep/.el-table__row{
+::v-deep .el-table__cell, ::v-deep .el-table__row{
   &.warn{
-    @include setColorType($darkWarning);
+    color: #E6A23C;
+    &.effect-light{
+      background-color: rgba(230, 162, 60, .2);
+    }
+    &.effect-dark{
+      color: #ffffff;
+      background-color: #E6A23C;
+    }
   }
   &.error{
-    @include setColorType($darkDanger);
+    color: #F56C6C;
+    &.effect-light{
+      background-color: rgba(245, 108, 108, .2);
+    }
+    &.effect-dark{
+      color: #ffffff;
+      background-color: #F56C6C;
+    }
   }
   &.info{
-    @include setColorType($darkPrimary);
+    color: #409EFF;
+    &.effect-light{
+      background-color: rgba(64, 158, 255, .2);
+    }
+    &.effect-dark{
+      color: #ffffff;
+      background-color: #409EFF;
+    }
   }
   &.success{
-    @include setColorType($darkSuccess);
+    color: #67C23A;
+    &.effect-light{
+      background-color: rgba(103, 194, 58, .2);
+    }
+    &.effect-dark{
+      color: #ffffff;
+      background-color: #67C23A;
+    }
   }
 }
-</style>
+</style>

package/src/components/index.scss

@@ -1,22 +1,31 @@
 // 组件样式统一入口文件
 
 // Button 组件样式
-@import './button/style/index.scss';
+@import './xt-button/style/index.scss';
 
 // Card 组件样式
-@import './card/style/index.scss';
+@import './xt-card/style/index.scss';
 
 // CardItem 组件样式
-@import './card-item/style/index.scss';
+@import './xt-card-item/style/index.scss';
 
 // Input 组件样式
-@import './input/style/index.scss';
+@import './xt-input/style/index.scss';
 
 // FlexBox 组件样式
-@import './flex-box/style/index.scss';
+@import './xt-flex-box/style/index.scss';
 
 // ConfigProvider 组件样式
-@import './config-provider/style/index.scss';
+@import './xt-config-provider/style/index.scss';
 
 // Text 组件样式
-@import './text/style/index.scss';
+@import './xt-text/style/index.scss';
+
+// ExButton 组件样式
+@import './ex-button/style/index.scss';
+
+// ExCard 组件样式
+@import './ex-card/style/index.scss';
+
+// GridBox 组件样式
+@import './xt-grid-box/style/index.scss';

package/src/components/{button → xt-button}/index.vue

@@ -23,7 +23,7 @@ export default {
     type: {
       type: String,
       default: '',
-      validator: (val) => ['primary', 'success', 'warning', 'danger'].includes(val)
+      validator: (val) => ['', 'primary', 'success', 'warning', 'danger'].includes(val)
     },
     size: {
       type: String,

package/src/components/{card-item → xt-card-item}/index.vue

@@ -34,7 +34,7 @@
   </FlexBox>
 </template>
 <script>
-import FlexBox from '../flex-box/index.vue'
+import FlexBox from '../xt-flex-box/index.vue'
 export default {
   name: "XtCardItem",
   components: {

package/src/components/{config-provider → xt-config-provider}/index.vue

@@ -2,6 +2,38 @@
 export default {
   name: 'XtConfigProvider',
   inheritAttrs: false,
+  provide() {
+    return {
+      xtConfig: {
+        theme: this.theme,
+        size: this.size,
+        primaryColor: this.primaryColor
+      }
+    }
+  },
+  watch: {
+    theme(newVal) {
+      this.$provide('xtConfig', {
+        theme: newVal,
+        size: this.size,
+        primaryColor: this.primaryColor
+      })
+    },
+    size(newVal) {
+      this.$provide('xtConfig', {
+        theme: this.theme,
+        size: newVal,
+        primaryColor: this.primaryColor
+      })
+    },
+    primaryColor(newVal) {
+      this.$provide('xtConfig', {
+        theme: this.theme,
+        size: this.size,
+        primaryColor: newVal
+      })
+    }
+  },
   render(h) {
     // Vue 2 不支持 Fragment，当 tag="template" 时需要特殊处理
     // 如果设置了 proxyElement，则不渲染包裹元素，只渲染 slot 内容
@@ -77,6 +109,16 @@ export default {
       type: [HTMLElement, String, Object],
       default: null,
       description: '代理元素，将样式应用到该元素上。支持 HTMLElement、CSS选择器字符串或 ref 对象'
+    },
+    onThemeChange: {
+      type: Function,
+      default: null,
+      description: '主题改变时的钩子函数，接收参数: { theme, size, primaryColor }'
+    },
+    onStyleApplied: {
+      type: Function,
+      default: null,
+      description: '样式应用完成时的钩子函数，接收参数: { element, style, theme }'
     }
   },
   computed: {
@@ -257,13 +299,37 @@ export default {
       if (!element) return
       
       const style = this.mergedStyle
+      const prevTheme = element.getAttribute('data-theme')
       
+      // 应用样式到代理元素
       for (const key in style) {
         element.style.setProperty(key, style[key])
       }
       
       // 设置 data-theme 属性
       element.setAttribute('data-theme', this.theme)
+      
+      // 触发主题改变钩子（当主题实际发生变化时）
+      if (prevTheme !== this.theme && typeof this.onThemeChange === 'function') {
+        this.onThemeChange({
+          theme: this.theme,
+          size: this.size,
+          primaryColor: this.primaryColor,
+          prevTheme: prevTheme
+        })
+      }
+      
+      // 触发样式应用完成钩子
+      if (typeof this.onStyleApplied === 'function') {
+        this.onStyleApplied({
+          element: element,
+          style: style,
+          theme: this.theme,
+          size: this.size,
+          primaryColor: this.primaryColor
+        })
+      }
+      
     },
     
     clearProxyElementStyle() {

package/src/components/{date-picker → xt-date-picker}/index.vue

@@ -17,7 +17,7 @@ const typeFormatEnum = {
   datetime: "yyyy-MM-dd HH:mm", month: "yyyy-MM", year: "yyyy", date: "yyyy-MM-dd", quarter: "yyyy-Qq", week: "yyyy-WW"
 };
 
-import FlexBox from '../flex-box/index.vue'
+import FlexBox from '../xt-flex-box/index.vue'
 import Quarter from "./quarter.vue";
 export default {
   name: "XtDatePicker",

package/src/components/{date-picker → xt-date-picker}/quarter.vue

@@ -1,4 +1,6 @@
-<template>
+ 
+ 
+ <template>
   <el-popover v-model="popoverVisible" trigger="click" :disabled="disabled" transition="el-zoom-in-top" :placement="placement" :width="popoverWidth" @hide="handleBlur">
     <div class="quarter-wrapper">
       <BaseFlexBox content="between">
@@ -15,7 +17,7 @@
 </template>
 
 <script>
-import BaseFlexBox from "../flex-box/index.vue";
+import BaseFlexBox from "../xt-flex-box/index.vue";
 import dateFns from "date-fns";
 export default {
   name: "DateQuarter",

package/src/components/xt-grid-box/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="xt-grid-box" :style="styleAttrs">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "XtGridBox",
+  props: {
+    // 列配置
+    columns: {
+      type: [String, Array, Number],
+      default: "1fr"
+    },
+    // 行配置
+    rows: {
+      type: [String, Array],
+      default: "auto"
+    },
+    // 间距（同时控制行列间距）
+    gap: { type: String, default: "" },
+    // 行间距
+    rowGap: { type: String, default: "" },
+    // 列间距
+    colGap: { type: String, default: "" },
+    // 排列方向
+    flow: { 
+      type: String, 
+      default: "row",
+      validator: (val) => ['row', 'column', 'row dense', 'column dense'].includes(val)
+    },
+    // 命名区域
+    areas: { type: [String, Array], default: "" },
+    // 子项对齐（place-items）
+    align: { 
+      type: String, 
+      default: "stretch",
+      validator: (val) => ['start', 'end', 'center', 'stretch', 'baseline'].includes(val)
+    },
+    // 内容对齐（place-content）
+    justify: { 
+      type: String, 
+      default: "start",
+      validator: (val) => ['start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch'].includes(val)
+    },
+    // 响应式配置 { sm: 2, md: 3, lg: 4 }
+    responsive: { type: Object, default: () => ({}) },
+    // 是否自动填充
+    autoFlow: { type: String, default: "" }
+  },
+  computed: {
+    styleAttrs() {
+      const styles = {
+        display: "grid"
+      };
+
+      // 处理列配置
+      if (typeof this.columns === 'number') {
+        styles.gridTemplateColumns = `repeat(${this.columns}, 1fr)`;
+      } else if (Array.isArray(this.columns)) {
+        styles.gridTemplateColumns = this.columns.join(" ");
+      } else {
+        styles.gridTemplateColumns = this.columns;
+      }
+
+      // 处理行配置
+      if (Array.isArray(this.rows)) {
+        styles.gridTemplateRows = this.rows.join(" ");
+      } else {
+        styles.gridTemplateRows = this.rows;
+      }
+
+      // 处理间距
+      if (this.gap) {
+        styles.gap = this.gap;
+      } else {
+        if (this.rowGap) styles.rowGap = this.rowGap;
+        if (this.colGap) styles.columnGap = this.colGap;
+      }
+
+      // 处理排列方向
+      if (this.flow) {
+        styles.gridAutoFlow = this.flow;
+      }
+
+      // 处理命名区域
+      if (this.areas) {
+        if (Array.isArray(this.areas)) {
+          styles.gridTemplateAreas = this.areas.map(row => `"${row}"`).join(" ");
+        } else {
+          styles.gridTemplateAreas = this.areas;
+        }
+      }
+
+      // 处理子项对齐
+      if (this.align) {
+        styles.placeItems = this.align;
+      }
+
+      // 处理内容对齐
+      if (this.justify) {
+        styles.placeContent = this.justify;
+      }
+
+      // 处理响应式断点
+      if (Object.keys(this.responsive).length > 0) {
+        this.addResponsiveStyles(styles);
+      }
+
+      return styles;
+    }
+  },
+  methods: {
+    addResponsiveStyles(styles) {
+      // 响应式断点映射
+      const breakpoints = {
+        xs: '(max-width: 575px)',
+        sm: '(min-width: 576px)',
+        md: '(min-width: 768px)',
+        lg: '(min-width: 992px)',
+        xl: '(min-width: 1200px)'
+      };
+
+      Object.entries(this.responsive).forEach(([key, value]) => {
+        if (breakpoints[key]) {
+          const mediaQuery = `@media ${breakpoints[key]}`;
+          // 注意：内联样式不支持媒体查询，这里预留接口
+          // 实际响应式需要通过 CSS 类或其他方式实现
+        }
+      });
+    }
+  }
+};
+</script>