xt-element-ui 1.1.2 → 1.1.4

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

@@ -1,10 +1,10 @@
 <template>
   <div class="ExTable">
     <slot name="title">
-      <BaseFlexBox content="between" style="padding: 0 10px;">
+      <XtFlexBox 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>
     </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,14 @@
 <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 XtFlexBox from "../xt-flex-box";
 export default {
   name: "ExTable",
   components: {
     ExCell,
-    ExColumn
+    ExColumn,
+    XtFlexBox
   },
-  mixins: [exportExcell],
   inheritAttrs: false,
   props: {
     tbId: {
@@ -155,7 +153,6 @@ export default {
         return [];
       }
     },
-    // 自定义 插入列
     insertColumns: {
       type: Array,
       default() {
@@ -208,18 +205,12 @@ 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: {
@@ -232,9 +223,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 +290,6 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      // 表格高度自适应浏览器大小
       this.changeTableHight();
       if (!this.height) {
         window.onresize = () => {
@@ -336,41 +326,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 +351,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 +359,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 +419,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 +426,6 @@ export default {
         }
       }
 
-      // 分级计算合并
-
       for (let level = 0; level < this.groupColumns.length; level++) {
         let pos = 0;
         while (pos < rowCount) {
@@ -499,8 +434,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 +504,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 +511,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 +525,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 : "";
@@ -658,8 +584,7 @@ export default {
         const obj = { ...r };
         list.push(obj);
       });
-      // 复制一份数据解决导出数据问题
-      this.doExport(list, title, null, this.column);
+      console.log('Export data:', list, title);
     }
   }
 };
@@ -679,10 +604,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 +627,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/config/element-registry.js

@@ -0,0 +1,136 @@
+/**
+ * XT-UI 组件注册配置文件
+ * 用于统一管理 Element UI 组件的自动注册配置
+ */
+
+// 已存在的 Ex 组件列表（不需要从 Element UI 自动注册）
+export const existingExComponents = [
+  'Button',       // ExButton 已存在
+  'Card',         // ExCard 已存在
+  'Input',        // XtInput 已存在（用户要求不自动注册）
+  'Table',        // ExTable 已存在（在 xt-table 目录中）
+  'TableColumn',  // ExColumn 已存在（在 xt-table 目录中）
+  'Chart'         // ExChart 已存在
+]
+
+// Element UI 组件列表（用于自动注册为 Ex 开头，但排除已存在的组件）
+export const elementComponentNames = [
+  'Autocomplete',
+  'Avatar',
+  'Backtop',
+  'Badge',
+  'Breadcrumb',
+  'BreadcrumbItem',
+  'ButtonGroup',
+  'Calendar',
+  'Carousel',
+  'CarouselItem',
+  'Cascader',
+  'Checkbox',
+  'CheckboxButton',
+  'CheckboxGroup',
+  'Col',
+  'Collapse',
+  'CollapseItem',
+  'ColorPicker',
+  'Container',
+  'DatePicker',
+  'Dialog',
+  'Divider',
+  'Drawer',
+  'Dropdown',
+  'DropdownItem',
+  'DropdownMenu',
+  'Footer',
+  'Form',
+  'FormItem',
+  'Header',
+  'Icon',
+  'Image',
+  'InputNumber',
+  'Link',
+  'Main',
+  'Menu',
+  'MenuItem',
+  'MenuItemGroup',
+  'Option',
+  'OptionGroup',
+  'Pagination',
+  'Popconfirm',
+  'Popover',
+  'Progress',
+  'Radio',
+  'RadioButton',
+  'RadioGroup',
+  'Rate',
+  'Row',
+  'Scrollbar',
+  'Select',
+  'Slider',
+  'Step',
+  'Steps',
+  'Submenu',
+  'Switch',
+  'TabPane',
+  'Tabs',
+  'Tag',
+  'TimePicker',
+  'TimeSelect',
+  'Timeline',
+  'TimelineItem',
+  'Tooltip',
+  'Transfer',
+  'Tree',
+  'Upload'
+]
+
+// Element UI 指令列表
+export const elementDirectives = [
+  'Loading',
+  'Popover',
+  'Tooltip'
+]
+
+// 注册 Element UI 组件为 Ex 开头的工具函数
+export function registerElementExComponents(Vue, ElementUI) {
+  if (!ElementUI) {
+    console.warn('[XT-UI] ElementUI not found, skipping Ex- prefix registration')
+    return
+  }
+
+  elementComponentNames.forEach(componentName => {
+    // 如果组件已存在于排除列表中，则跳过
+    if (existingExComponents.includes(componentName)) {
+      console.log(`[XT-UI] ${componentName} already exists, skipping registration`)
+      return
+    }
+    
+    const exComponentName = `Ex${componentName}`
+    
+    // 检查是否已经注册过该组件
+    if (Vue.options.components[exComponentName]) {
+      return
+    }
+    
+    // 注册 Element 的组件为 Ex 开头
+    const elementComponent = ElementUI[componentName]
+    if (elementComponent) {
+      Vue.component(exComponentName, elementComponent)
+      console.log(`[XT-UI] Registered Element component as ${exComponentName}`)
+    }
+  })
+}
+
+// 注册 Element UI 指令的工具函数
+export function registerElementDirectives(Vue, ElementUI) {
+  if (!ElementUI) {
+    return
+  }
+
+  elementDirectives.forEach(directiveName => {
+    const directive = ElementUI[directiveName]
+    if (directive && directive.install) {
+      Vue.use(directive)
+    }
+  })
+}

package/src/index.js

@@ -16,38 +16,44 @@ const utils = utilsModule.default || utilsModule
 const { getConfig, setConfig, getTheme, getSize, getPrimaryColor, resetConfig, onConfigChange, setTheme, setSize, setPrimaryColor } = utils
 
 // 导入组件
-import Button from './components/button'
-import Input from './components/input'
-import FlexBox from './components/flex-box'
-import Card from './components/card'
-import CardItem from './components/card-item'
-import ConfigProvider from './components/config-provider'
-import Text from './components/text'
-import Chart from './components/chart'  // Chart 组件
-import GridBox from './components/grid-box'
-import DatePicker from './components/date-picker'
+import XtButton from './components/xt-button'
+import XtInput from './components/xt-input'
+import XtFlexBox from './components/xt-flex-box'
+import XtCard from './components/xt-card'
+import XtCardItem from './components/xt-card-item'
+import XtConfigProvider from './components/xt-config-provider'
+import XtText from './components/xt-text'
+import XtGridBox from './components/xt-grid-box'
+import XtDatePicker from './components/xt-date-picker'
+import ExButton from './components/ex-button'
+import ExChart from './components/ex-chart'  // ExChart 组件（基于 ECharts 封装）
+import ExCard from './components/ex-card'
+
+// 导入 Element UI 组件注册配置
+import { registerElementExComponents } from './config/element-registry'
 
 // 存储组件列表
 const components = [
-  Button,
-  Input,
-  FlexBox,
-  Card, 
-  CardItem,
-  ConfigProvider,
-  Text,
-  Chart,
-  GridBox,
-  DatePicker
+  XtButton,
+  XtInput,
+  XtFlexBox,
+  XtCard, 
+  XtCardItem,
+  XtConfigProvider,
+  XtText,
+  XtGridBox,
+  XtDatePicker,
+  ExButton,
+  ExChart,
+  ExCard
 ]
 
-
 // 定义 install 方法，Vue.use() 会自动调用
 const install = function (Vue, options = {}) {
   if (install.installed) return
   install.installed = true
 
-  // 全局注册所有 xt- 组件
+  // 全局注册所有组件
   components.forEach(component => {
     Vue.component(component.name, component)
   })
@@ -85,6 +91,18 @@ const install = function (Vue, options = {}) {
       setConfig(options.config)
     }
   }
+
+  // 尝试获取 ElementUI（如果已安装）并注册 Ex 开头的组件
+  let ElementUI = null
+  try {
+    ElementUI = require('element-ui')
+  } catch (e) {
+    console.warn('[XT-UI] ElementUI not found, skipping Ex- prefix registration for Element components')
+    return
+  }
+
+  // 调用统一的注册函数
+  registerElementExComponents(Vue, ElementUI)
 }
 
 // 支持全局 script 标签引入
@@ -95,18 +113,24 @@ if (typeof window !== 'undefined' && window.Vue) {
 // 导出
 export default {
   install,
+  // 导出组件列表
+  components,
   // 按需导出组件
-  Button,
-  Input,
-  FlexBox,
-  Card,
-  CardItem,
-  ConfigProvider,
-  Text
+  XtButton,
+  XtInput,
+  XtFlexBox,
+  XtCard,
+  XtCardItem,
+  XtConfigProvider,
+  XtText,
+  XtGridBox,
+  XtDatePicker,
+  ExButton,
+  ExCard
 }
 
-// Chart 组件按需导出（使用时需自行安装 echarts 依赖）
-export { default as Chart } from './components/chart'
+// ExChart 组件按需导出（使用时需自行安装 echarts 依赖）
+export { default as ExChart } from './components/ex-chart'
 
 // 导出工具函数和变量
 export {
@@ -123,4 +147,4 @@ export {
   setTheme,
   setSize,
   setPrimaryColor
-}
+}

package/src/styles/theme/colors.scss

@@ -98,3 +98,4 @@ $xt-dark-color-info-light-7: #393a3c;      // 信息色暗色 70%
 $xt-dark-color-info-light-8: #2d2d2f;      // 信息色暗色 80%
 $xt-dark-color-info-light-9: #202121;      // 信息色暗色 90%
 $xt-dark-color-info-dark-2: #a6a9ad;       // 信息色亮色 20%
+

package/lib/css/2.3f7aa432.css

@@ -1 +0,0 @@
-.bar-box[data-v-730aa873]{position:relative;height:100%;width:100%}

package/lib/css/3.ffcc175d.css

@@ -1 +0,0 @@
-.line-box[data-v-52e2b0b2]{position:relative;height:100%;width:100%}

package/lib/css/4.9abd1f2b.css

@@ -1 +0,0 @@
-.multiline-box[data-v-6f25e9c5]{height:100%;width:100%}

package/lib/css/5.1a31ed8a.css

@@ -1 +0,0 @@
-.pie-box[data-v-6735cf79]{position:relative;height:100%;width:100%}

package/lib/css/6.c2d0d77e.css

@@ -1 +0,0 @@
-.bar-box[data-v-9e2bb3de]{position:relative}

package/src/components/chart/index.js

@@ -1,2 +0,0 @@
-import XtChart from './index.vue'
-export default XtChart

package/src/components/chart/index.vue

@@ -1,51 +0,0 @@
-<template>
-  <ex-bar v-if="type=='bar'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-bar>
-  <ex-line v-else-if="type=='line'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-line>
-  <ex-pie v-else-if="type=='pie'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-pie>
-  <ex-multi v-else-if="type=='multi'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-multi>
-  <ex-trend v-else-if="type=='trend'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-trend>
-</template>
-<script>
-export default {
-  name: "XtChart",
-  components: {
-    ExBar: () => import("./ExBar.vue"),
-    ExLine: () => import("./ExLine.vue"),
-    ExPie: () => import("./ExPie.vue"),
-    ExMulti: () => import("./ExMulti.vue"),
-    ExTrend: () => import("./ExTrend.vue")
-  },
-  props: {
-    theme: {
-      type: String,
-      default: ""
-    },
-    size: {
-      type: String,
-      default: "medium",
-      validator: (value) => {
-        return ['small', 'medium', 'large'].includes(value)
-      }
-    },
-    type: {
-      type: String,
-      required: true,
-      default: "bar"
-    }
-  },
-  data() {
-    return {
-      myTheme: this.theme,
-      mySize: this.size
-    };
-  },
-  watch: {
-    theme(newVal) {
-      this.myTheme = newVal;
-    },
-    size(newVal) {
-      this.mySize = newVal;
-    }
-  }
-};
-</script>