zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

公共样式修改

pull/27/head
zq 1 week ago
parent
b31004099b
commit
de09420b18
3 changed files with 207 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 98
      src/components/GlobalLoading1.vue
  2. 127
      src/components/GuipTable.vue
  3. 26
      src/style/theme/common.scss

98
src/components/GlobalLoading1.vue
View File

@ -0,0 +1,98 @@
<template>
<div class="content-loading-overlay" v-if="isLoading">
<div class="loading-content">
<div ref="animationContainer" class="animation-container"></div>
</div>
</div>
<div v-else>
<slot></slot>
</div>
</template>
<script>
import lottie from 'lottie-web'
import { mapState } from 'vuex'
import defaultAnimation from '@/assets/loadingAni.json' // 导入JSON文件
export default {
name: 'Loading',
data() {
return {
anim: null
}
},
computed: {
...mapState(['isLoading', 'loadingText'])
},
watch: {
isLoading(newVal) {
if (newVal) {
this.$nextTick(()=>{
this.playAnimation()
})
} else {
this.stopAnimation()
}
}
},
mounted() {
if (this.isLoading) {
this.playAnimation()
}
},
beforeDestroy() {
this.stopAnimation()
},
methods: {
playAnimation() {
this.anim = lottie.loadAnimation({
container: this.$refs.animationContainer,
renderer: 'svg',
loop: true,
autoplay: true,
animationData: defaultAnimation // 你的JSON动画路径
})
if (this.anim) {
this.anim.play()
}
},
stopAnimation() {
if (this.anim) {
this.anim.stop()
}
}
}
}
</script>
<style scoped>
.content-loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 1000;
/* 确保高于内容 */
display: flex;
justify-content: center;
align-items: center;
}
.loading-content {
text-align: center;
}
.animation-container {
width: 180px;
height: 180px;
margin: 0 auto;
}
.loading-text {
margin-top: 20px;
font-size: 16px;
color: #333;
}
</style>

127
src/components/GuipTable.vue
View File

@ -1,63 +1,79 @@
<template> <template>
<el-table ref="guiptable" :data="tableData" height="250" :border="border" @selection-change="handleSelectionChange" <global-loading>
:style="{ width: width ? width : '100%' }"> <el-table ref="guiptable" :data="tableData" :border="border" @selection-change="handleSelectionChange"
<!-- 多选 --> :style="{ width: width ? width : '100%', height: height ? height : '100%' }" v-loading="loading">
<template v-if="multiple"> <!-- 多选 -->
<el-table-column type="selection" width="55"> <template v-if="multiple">
</el-table-column> <el-table-column type="selection" width="55">
</template> </el-table-column>
<!-- 自定义header --> </template>
<template v-if="autoColumn"> <!-- 自定义header -->
<slot name="header"></slot> <slot></slot>
</template> <!-- <template v-if="autoColumn">
<!-- 通过json数据遍历渲染 --> <slot name="headerTop"></slot>
<template v-if="columns"> </template> -->
<el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" <!-- 通过json数据遍历渲染 -->
:width="column.width"> <template v-if="columns">
<template #default="{ row }" v-if="column.popover"> <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
<el-popover :visible="row[`popoverVisible_${column.prop}`]" class="tablePopover" placement="top" trigger="click"> :width="column.width">
<!-- 自定义内容插槽 --> <template #default="{ row }" v-if="column.popover">
<slot :name="`popover-content-${column.prop}`" :row="row" :column="column"> <el-popover :visible="row[`popoverVisible_${column.prop}`]" class="tablePopover" placement="top"
<div> trigger="click">
<p>默认内容：{{ `popoverVisible_${column.prop}` }}</p> <!-- 自定义内容插槽 -->
<el-input v-model="row[`edit_${column.prop}`]" :placeholder="`请输入${column.label}`" /> <slot :name="`popover-content-${column.prop}`" :row="row" :column="column">
<div>
<p>默认内容：{{ `popoverVisible_${column.prop}` }}</p>
<el-input v-model="row[`edit_${column.prop}`]" :placeholder="`请输入${column.label}`" />
</div>
</slot>
<!-- 确定和取消按钮 -->
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
<GuipButton size="medium" @click="handleCancel(row, column.prop)">取消</GuipButton>
<GuipButton type="primary" @click="handleConfirm(row, column.prop)" size="medium">确定</GuipButton>
</div> </div>
</slot> <!-- 单元格内容 -->
<!-- 确定和取消按钮 --> <template #reference>
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;"> <span style="cursor: pointer">{{ row[column.prop] }}</span>
<GuipButton size="medium" @click="handleCancel(row, column.prop)">取消</GuipButton> </template>
<GuipButton type="primary" @click="handleConfirm(row, column.prop)" size="medium">确定</GuipButton> </el-popover>
</div> </template>
<!-- 单元格内容 -->
<template #reference>
<span style="cursor: pointer">{{ row[column.prop] }}</span>
</template>
</el-popover>
</template>
</el-table-column> </el-table-column>
</template> </template>
<template #empty>
<!-- <div v-if="loading">
<i class="el-icon-loading"></i>
<span>数据加载中...</span>
</div> -->
<!-- <div class="custom-empty">
<img src="@/assets/table_empty.png" alt="无数据" class="empty-image">
<p class="empty-text">暂无数据</p>
</div> -->
<el-empty :image="emptyImg"></el-empty>
</template>
</el-table>
</global-loading>
</el-table>
</template> </template>
<script> <script>
import GuipButton from '@/components/GuipButton.vue'; import GuipButton from '@/components/GuipButton.vue';
import GlobalLoading from '@/components/GlobalLoading1.vue'
export default { export default {
name: 'GuipTextarea', name: 'GuipTextarea',
props: ['tableData', 'width', 'autoColumn', 'columns', 'border', 'multiple'], props: ['tableData', 'loading', 'width', 'height', 'autoColumn', 'columns', 'border', 'multiple'],
data() { data() {
return { return {
emptyImg:require('@/assets/table_empty.png')
// loading:false
} }
}, },
components: { components: {
GuipButton GuipButton,
GlobalLoading
}, },
mounted(){ mounted() {
}, },
methods: { methods: {
handleSelectionChange(row) { handleSelectionChange(row) {
@ -83,4 +99,29 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
.custom-empty {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.empty-image {
width: 160px;
height: 160px;
}
.empty-text {
color: #626573;
letter-spacing: 0.08em;
height: 18px;
line-height: 18px;
}
.el-empty{
padding: 0;
}
::v-deep .el-empty__description{
line-height: 20px;
margin-top: 0;
}
</style> </style>

26
src/style/theme/common.scss
View File

@ -638,6 +638,20 @@ body {
// table start // table start
.el-table{
min-height: 258px;
th,td{
font-size: 14px;
font-weight: normal;
letter-spacing: 0.08em;
color: #1E2226;
height: 56px;
padding: 18px 16px !important;
box-sizing: border-box !important;
}
td{
}
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
background-color: #F6F7FA; background-color: #F6F7FA;
} }
@ -674,12 +688,22 @@ body {
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;
} }
.el-table .el-form-item { .el-table .el-form-item {
margin-bottom: 0; margin-bottom: 0;
} }
// 表格行内小图标 默认隐藏
.svg-icon-wrapper{
display: none !important;
}
//划过时 显示
.el-table__row:hover{
.svg-icon-wrapper{
display: block !important;
}
}
// table end // table end
.el-pagination { .el-pagination {
margin-top: 16px; margin-top: 16px;
display: flex; display: flex;

Write Preview
Loading…
Cancel
Save