gyyg-components 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "private": false,
   "main": "lib/gyyg-components.umd.js",
   "scripts": {

package/src/components/EmcTable/EmcTable.js

@@ -0,0 +1,5 @@
+import EmcTable from "./EmcTable.vue";
+
+EmcTable.install = Vue => Vue.component(EmcTable.name, EmcTable); //注册组件
+
+export default EmcTable;

package/src/components/EmcTable/EmcTable.vue

@@ -0,0 +1,246 @@
+<template>
+    <div class="table-container">
+        <el-table 
+            :data="tableData"
+            ref='table'
+            :height="height"
+			:max-height="maxHeight"
+            :highlight-current-row="highlightCurrentRow"
+            :row-class-name="tableRowClassName"
+            :header-cell-style="headerCellStyle"
+            :row-key="rowKey"
+            :expand-row-keys="expandRowKeys"
+            :tree-props="treeProps"
+            @current-change="currentChange"
+            @sort-change="sortChange"
+			@selection-change="selectionChange"
+			@select="select"
+            :row-style="selectedRowStyle"
+            :default-expand-all="defaultExpandAll"
+            >
+            <!-- 多选框 -->
+             <el-table-column
+                type="selection"
+                width="55"
+                align="center"
+                :reserve-selection="reserveSelection"
+                v-if="selection"
+             ></el-table-column>
+             <template v-for="(col, index) in column">
+                <el-table-column
+                    v-if="!col['type']"
+					:label="col.label"
+					:align="col.align"
+					:min-width="col.minWidth"
+					:max-width="col.maxWidth"
+					:width="col.width"
+					:sortable="col.sortable"
+					:show-overflow-tooltip="col.showOverflowTooltip"
+					:key="index"
+					:fixed="col.fixed"
+                    :prop="col.bind"
+                    >
+                    <template slot="header" v-if="col.header == 'custom'">
+                        <span>{{ col.label }}
+                            <el-tooltip class="item" effect="dark" :content="col.message" placement="top">
+                                <i :class="col.headerIcon || 'el-icon-question'"></i>
+                            </el-tooltip>
+                        </span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    v-else
+					:label="col.label"
+					:align="col.align"
+					:min-width="col.minWidth"
+					:max-width="col.maxWidth"
+					:width="col.width"
+					:sortable="col.sortable"
+					:show-overflow-tooltip="col.showOverflowTooltip"
+					:key="index + col.type"
+					:fixed="col.fixed"
+                    >
+                    <template slot-scope="scope">
+                        <component
+                            :key="index"
+                            :is="col['type']"
+                            :scope="scope"
+                            :tableData="col"
+                            v-model="scope.row[col.bind]"
+                            v-bind="col.componentProps || {}"
+                            v-on="col.componentListeners || {}"
+                        ></component>
+                    </template>
+                    <template slot="header" v-if="col.header == 'custom'">
+                        <span>{{ col.label }}
+                            <el-tooltip class="item" effect="dark" :content="col.message" placement="top">
+                                <i :class="col.headerIcon || 'el-icon-question'"></i>
+                            </el-tooltip>
+                        </span>
+                    </template>
+                </el-table-column>
+             </template>
+             
+        </el-table>
+        <!-- 分页 -->
+         <div class="pagination-layout">
+            <el-pagination
+                v-if="page"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :page-sizes="[10, 20, 30, 50]"
+				:page-size="page.pageSize"
+				:current-page="page.currentPage"
+                layout="total, sizes, prev, pager, next, jumper"
+				:total="page.totalRecords"
+            ></el-pagination>
+         </div>
+    </div>
+</template>
+<script>
+import deepCopy from './methods'
+import styleText from './styleText.vue'
+import btnClick from './btnClick.vue'
+import iconButton from './iconButton.vue';
+export default {
+    name: 'emc-table',
+    components: {
+        styleText,
+        btnClick,
+        iconButton,
+    },
+    props: {
+        // 表格数据
+        tableData: {
+            reauried: true,
+        },
+        // 表格列
+        columns: {
+			required: true,
+		},
+        // 表格高度
+        height: {
+            required: false
+        },
+        // 表格最大高度
+        maxHeight: {
+            required: false,
+        },
+        //  是否显示多选框
+        selection: {
+			required: false,
+		},
+        // 是否保留多选框
+        reserveSelection: {
+           type: Boolean,
+            default: false
+        },
+        // 分页
+        page: {
+			// 分页
+			required: false,
+		},
+        // 是否高亮当前行
+        highlightCurrentRow: {
+            required: false,
+        },
+        // 表头样式
+        headerCellStyle:{
+            required: false,
+            default: () => {
+                return {
+                    backgroundColor: "#fff",
+                    textAlign: "center",
+                }
+            }
+        },
+        // 行数据的key
+        rowKey: {
+			type: [String,Number],
+			default: 'id',
+		},
+        // 行className回调
+        tableRowClassName:{
+            type: [Function, String],
+            required: false,
+        },
+        // 展开行的key
+        expandRowKeys: {
+			type: Array,
+			required: false,
+		},
+        // 嵌套数据的配置选项
+        treeProps: {
+			type: Object,
+			default: () => {
+				return {};
+			},
+		},
+        // 是否默认展开所有行
+        defaultExpandAll: {
+            default: false,
+        }
+    },
+    data() {
+        return {
+            multipleSelection: [],
+        }
+    },
+    methods: {
+        // 列表选中当前行字体加粗
+		selectedRowStyle({ row }) {
+			const idArr = this.multipleSelection.map(row => row[this.rowKey])
+			if (idArr.includes(row[this.rowKey])) {
+				return { 'font-weight': '700' }
+			}
+		},
+        // pageSize 改变时会触发
+        handleSizeChange(val) {
+            this.$emit('page-size-change', val);
+        },
+        // // currentPage 改变时会触发
+        handleCurrentChange(val) {
+			this.$emit('page-change', val);
+		},
+        // 表格属性回调
+        currentChange(val) {
+            this.$emit('current-change', val);
+        },
+        // 排序规则发生变化时会触发
+        sortChange(column, prop, order) {
+			this.$emit('sort-change', column, prop, order);
+		},
+        // 手动勾选数据行的checkbox时触发的事件
+        select(column, row) {
+			let refs = this.$refs.table;
+			this.$emit('select', column, row, refs);
+		},
+        // 选择项发生变化时会触发
+		selectionChange(column) {
+			this.multipleSelection = column
+			this.$emit('selection-change', column);
+		},
+
+    },
+    watch: {
+		columns: {
+			handler: function (val) {
+                console.log(this.selection);
+                
+				this.column = deepCopy(val);
+			},
+			immediate: true,
+			deep: true,
+		},
+	},
+}
+</script>
+<style lang="less" scoped>
+.table-container {
+    background-color: #fff;
+}
+.pagination-layout {
+    text-align: right;
+    height: 35px;
+}
+</style>

package/src/components/EmcTable/btnClick.vue

@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <div style="text-align: left;">
+            <el-button
+                v-for="btn in btnClickEvent"
+                :key="btn.index"
+                @click="btnClick(btn, scope.row)"
+                :type="btn.type"
+                :style="[btn.style]"
+                :icon="btn.icon"
+                :size="btn.size"
+                v-bind="btn"
+            >{{ btn.text }}
+      </el-button>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'btn-click',
+    props: ['tableData', 'scope'],
+    computed: {
+        btnClickEvent() {
+            let btnList = []
+            
+
+            if (typeof this.tableData.bind === 'function') {
+                btnList = this.tableData.bind(this.scope.row)
+            } else {
+                btnList = this.tableData.bind || []
+            }
+            return btnList.filter(item => !item.showButton || item.showButton(this.scope.row))
+        }
+    },
+    methods:{
+        btnClick(btn, row) {
+            if(btn.trigger){
+                btn.trigger(Object.assign({}, row), this)
+            }
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.btn-click {
+  display: flex;
+  // justify-content: space-around;
+}
+
+.br {
+  flex-direction: column;
+}

package/src/components/EmcTable/iconButton.vue

@@ -0,0 +1,82 @@
+<template>
+	<div class="icon-btn">
+		
+		<div
+			v-for="item in iconlist"
+			:key="item.id"
+			@click="item.callback ? item.callback(scope.row) : null"
+			class="icon"
+		>
+		<el-tooltip class="item" effect="dark" :content="item.tooltipText" placement="top" v-if="item.isTooltip">
+			<el-icon :class="item.isHover ? item.class + ' view-btn' : item.class" :style="[item.style ? setStyle(item.style) : {}]"></el-icon>
+		</el-tooltip>
+			<el-icon v-else :class="item.isHover ? item.class + ' view-btn' : item.class" :style="[item.style ? setStyle(item.style) : {}]"></el-icon>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'iconbutton',
+	props: {
+		tableData: Object,
+		scope: Object,
+	},
+	watch: {
+		'scope.row': {
+			handler() {
+				let that = this;
+				let arr = [];
+				this.tableData.iconList.forEach((item, index) => {
+					if (typeof item.show == 'boolean') {
+						if (item.show) {
+							arr.push(item);
+						}
+					} else if (typeof item.show == 'function') {
+						if (that.tableData.iconList[index].show(that.scope.row)) {
+							arr.push(item);
+						}
+					} else {
+						arr.push(item);
+					}
+				});
+				this.iconlist = arr.filter(item => !item.showButton || item.showButton(that.scope.row)) || [];
+			},
+			immediate: true,
+			deep: true,
+		},
+	},
+	data() {
+		return {
+			iconlist: [],
+		};
+	},
+	methods: {
+		setStyle(style) {
+			if (typeof style == 'function') return style(this.scope.row);
+			else return style;
+		},
+	},
+	components: {},
+};
+</script>
+
+<style lang="less" scoped>
+.icon-btn {
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+}
+.icon-btn /deep/.icon {
+	display: flex;
+	align-items: center;
+	user-select: none;
+	cursor: pointer;
+	padding: 5px;
+}
+.view-btn {
+    &:hover {
+        color: #409eff !important;
+    }
+}
+</style>

package/src/components/EmcTable/methods.js

@@ -0,0 +1,59 @@
+// 深拷贝
+export default function deepCopy(obj, hash = new WeakMap()) {
+    // 处理 null、undefined 和非对象类型（如数字、字符串、布尔值等）
+    if (obj === null || typeof obj !== 'object') {
+        return obj;
+    }
+
+    // 处理循环引用
+    if (hash.has(obj)) {
+        return hash.get(obj);
+    }
+
+    // 处理 Date 对象
+    if (obj instanceof Date) {
+        return new Date(obj);
+    }
+
+    // 处理 Array 对象
+    if (Array.isArray(obj)) {
+        const copy = [];
+        hash.set(obj, copy);
+        for (let i = 0; i < obj.length; i++) {
+            copy[i] = deepCopy(obj[i], hash);
+        }
+        return copy;
+    }
+
+    // 处理普通对象
+    const copy = {};
+    hash.set(obj, copy);
+    for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+            copy[key] = deepCopy(obj[key], hash);
+        }
+    }
+
+    // 处理 Map 和 Set 对象（可选）
+    if (obj instanceof Map) {
+        const copy = new Map();
+        hash.set(obj, copy);
+        obj.forEach((value, key) => {
+            copy.set(deepCopy(key, hash), deepCopy(value, hash));
+        });
+        return copy;
+    }
+
+    if (obj instanceof Set) {
+        const copy = new Set();
+        hash.set(obj, copy);
+        obj.forEach(value => {
+            copy.add(deepCopy(value, hash));
+        });
+        return copy;
+    }
+
+    // 处理其他类型的对象（如自定义对象、TypedArray 等）可能需要额外的逻辑
+    // 这里默认返回空对象或基本类型的值（如果上述条件都不满足）
+    return copy;
+}

package/src/components/EmcTable/styleText.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="default-text">
+        <span class="default-text" :style="[statusStyle]"
+            :class="tableData.getClass ? tableData.getClass(scope.row) : ''">{{ getText(tableData.bind) }}</span>
+    </div>
+</template>
+<script>
+
+export default {
+    name: 'style-text',
+    props: ['tableData', 'scope'],
+    methods: {
+        getText(val) {
+            if (typeof val === 'function') {
+                return val(this.scope.row, this.scope.$index)
+            } else {
+                return this.scope.row[val]
+            }
+            
+        },
+    },
+    computed: {
+		statusStyle() {
+			if (this.tableData.statusStyle) return this.tableData.statusStyle(this.scope.row);
+		},
+    },
+}
+</script>
+<style lang="less" scoped>
+.deathText {
+    color: #909399;
+}
+
+.normalText {
+    color: #67c23a;
+}
+
+.danger {
+    color: #f56c6c;
+}
+
+.warning {
+    color: #e6a23c;
+}
+
+.default-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>

package/src/main.js

@@ -2,13 +2,17 @@ import Vue from 'vue'
 import App from './App.vue'
 
 Vue.config.productionTip = false
-import { Dialog,Button,Pagination,Input,Table,TableColumn } from 'element-ui';
+import { Dialog,Button,Pagination,Input,Table,TableColumn,Icon, Switch, Tooltip } from 'element-ui';
 Vue.use(Dialog)
 Vue.use(Button)
 Vue.use(Pagination)
 Vue.use(Input)
 Vue.use(Table)
 Vue.use(TableColumn)
+Vue.use(Icon)
+Vue.use(Switch)
+Vue.use(Tooltip)
+
 import zj from '@/index.js'
 Vue.use(zj)
 import "./icons"; // icon