mt-fe-group/pms-aomei
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 样式

Browse Source
This commit is contained in:
lb 2023-01-16 17:01:14 +08:00
parent 795fb5642e
commit 712b5937da
7 changed files with 78 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -38,7 +38,7 @@
"devDependencies": {
"@vue/cli-plugin-babel": "^4.4.6",
"@vue/cli-service": "^4.4.6",
"element-theme-chalk": "^2.15.7",
"element-theme-chalk": "^2.15.12",
"natives": "^1.1.6",
"vue-template-compiler": "^2.6.11"
},

44
src/components/BaseListTable.vue
View File

@ -1,7 +1,19 @@
<!-- 这里单纯的配置表格就好了-->
<template>
<div class="base-list-table w-full">
<el-table :data="tableData" v-bind="tableConfig" ref="base-list-table">
<el-table
:data="tableData"
v-bind="tableConfig"
ref="base-list-table"
:cell-style="{ padding: 0 }"
:header-cell-style="/** 重写表格样式 **/ {
padding: '8px 0',
}"
:header-row-style="/** 重写表格样式 **/ {
color: 'red',
background: 'black',
}"
>
<!-- @cell-mouse-enter="(row, col, cell, event) => $emit('cell-mouse-enter', row, col, cell, event)"> -->
<!-- @cell-mouse-leave="(row, col, cell, event) => $emit('cell-mouse-leave', row, col, cell, event)"> -->
<!-- 表格头定义 -->
@ -22,7 +34,8 @@
}
: null
"
v-bind="head.more"></el-table-column>
v-bind="head.more"
></el-table-column>
<!-- 普通的表头 -->
<el-table-column
v-else
@ -36,7 +49,8 @@
:tooltip-effect="head.tooltipEffect || 'light'"
filter-placement="top"
:align="head.align || null"
v-bind="head.more">
v-bind="head.more"
>
<!-- 子组件 -->
<template v-if="head.prop" slot-scope="scope">
<component
@ -44,9 +58,12 @@
:is="head.subcomponent"
:key="idx + 'sub'"
:inject-data="{ ...scope.row, head }"
@emit-data="handleSubEmitData" />
@emit-data="handleSubEmitData"
/>
<!-- 直接展示数据或应用过滤器 -->
<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
<span v-else>{{
scope.row[head.prop] | commonFilter(head.filter)
}}</span>
</template>
<!-- 多级表头 -->
@ -54,7 +71,8 @@
<TableHead
v-for="(subhead, subindex) in head.children"
:key="'subhead-' + idx + '-subindex-' + subindex"
:opt="subhead" />
:opt="subhead"
/>
</template>
</el-table-column>
</template>
@ -63,13 +81,13 @@
</template>
<script>
import TableHead from './TableHead.vue';
import TableHead from "./TableHead.vue";
// 1. 表格拖拽开启/关闭
// 2. 表格的样式'
// 3. more...
export default {
name: 'BaseListTable',
name: "BaseListTable",
components: { TableHead },
filters: {
commonFilter: (source, filterType = (a) => a) => {
@ -88,14 +106,14 @@ export default {
tableData: {
type: Array,
default: () => [],
}
},
},
inject: ['urls'],
inject: ["urls"],
data() {
return {
page: 1,
size: 20, // 默认20
dataList: []
dataList: [],
};
},
watch: {
@ -108,8 +126,8 @@ export default {
},
methods: {
handleSubEmitData(payload) {
console.log('[component] BaseListTable handleSubEmitData(): ', payload);
this.$emit('operate-event', payload);
console.log("[component] BaseListTable handleSubEmitData(): ", payload);
this.$emit("operate-event", payload);
},
},
};

27
src/components/BaseSearchForm.vue
View File

@ -1,5 +1,6 @@
<template>
<el-row class="base-search-form rounded">
<el-row class="base-search-form">
<div class="brand-color-line"></div>
<el-form :inline="true" :model="searchForm" :rules="headConfig.rules">
<!-- <el-col :span="opt.span ? +opt.span : 4" v-for="opt in options" :key="opt.id"> -->
<el-form-item
@ -40,7 +41,10 @@
<el-button type="primary">上传文件</el-button>
</el-upload>
<el-button
v-if="opt.button && (!opt.button.permission || $hasPermission(opt.button.permission))"
v-if="
opt.button &&
(!opt.button.permission || $hasPermission(opt.button.permission))
"
:key="'button' + Math.random().toString()"
:type="opt.button.type"
@click="handleBtnClick(opt.button.name)"
@ -164,4 +168,21 @@ export default {
};
</script>
<style scoped></style>
<style scoped>
.base-search-form {
display: flex;
/* align-items: center; */
/* position: relative; */
}
.brand-color-line {
display: inline-block;
height: 20px;
width: 6px;
margin-right: 8px;
margin-top: 10px;
border-radius: 2px;
background: #0b58ff;
/* position: absolute; */
}
</style>

7
src/components/DialogWithMenu.vue
View File

@ -6,7 +6,7 @@
:distory-on-close="true"
>
<!-- title -->
<div slot="title" class="">
<div slot="title" class="dialog-title">
<h1 class="">编辑</h1>
</div>
<!-- menu -->
@ -430,4 +430,9 @@ export default {
.el-select {
width: 100% !important;
}
.dialog-with-menu >>> .el-dialog__header {
padding: 10px 20px 10px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white);
}
</style>

4
src/components/noTemplateComponents/operationComponent.js
View File

@ -72,7 +72,7 @@ export default {
h('el-button',
{
props: { type: 'text' },
style: { color: this.colors[opt.name] || '#409EFF' },
style: { color: this.colors[opt.name] || '#0b58ff' },
on: { click: this.emit.bind(null, opt) }
},
this.text[opt.name]
@ -85,7 +85,7 @@ export default {
h('el-button',
{
props: { type: 'text' },
style: { color: this.colors[opt] || '#409EFF' },
style: { color: this.colors[opt] || '#0b58ff' },
on: { click: this.emit.bind(null, opt) }
},
this.text[opt]

2
src/components/noTemplateComponents/statusComponent.js
View File

@ -40,7 +40,7 @@ export default {
return h('el-tag',
{
props:
{ type: this.isEnabled ? this.statusType[0] : this.statusType[1] }
{ size: 'small', type: this.isEnabled ? this.statusType[0] : this.statusType[1] }
},
this.isEnabled ? this.statusText[0] : this.statusText[1])
}

15
src/views/atomViews/ListViewWithHead.vue
View File

@ -1,6 +1,8 @@
<!-- 表格页加上搜索条件 -->
<template>
<div class="bg-white rounded-lg shadow-lg w-full h-full p-5">
<div
class="list-view-with-head"
>
<!-- <head-form :form-config="headFormConfig" @headBtnClick="btnClick" /> -->
<BaseSearchForm :head-config="headConfig" @btn-click="handleBtnClick" />
@ -226,4 +228,13 @@ export default {
};
</script>
<style scoped></style>
<style scoped>
.list-view-with-head {
background: white;
/* height: 100%; */
min-height: inherit;
border-radius: 6px;
padding: 16px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.125);
}
</style>