From 48879d8d9869e7974987ea881796beeaf4615efb Mon Sep 17 00:00:00 2001 From: wangxiang <1827945911@qq.com> Date: Fri, 6 May 2022 01:46:52 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=91=A3=20=E9=87=8D=E6=9E=84=E5=BA=95?= =?UTF-8?q?=E5=B1=82=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- kicc-ui/src/assets/styles/kicc.less | 257 ++++++++++++- kicc-ui/src/assets/styles/var/index.less | 1 + kicc-ui/src/assets/styles/var/kicc.less | 13 + .../src/components/Table/src/BasicTable.vue | 115 ------ .../Table/src/components/TableAction.vue | 53 --- .../Table/src/components/TableHeader.vue | 16 - .../src/components/settings/ColumnSetting.vue | 76 ---- kicc-ui/src/utils/dateUtil.ts | 10 +- .../src/views/system/config/config.data.ts | 168 ++------- kicc-ui/src/views/system/config/index.vue | 347 ++++++++++-------- 10 files changed, 500 insertions(+), 556 deletions(-) create mode 100644 kicc-ui/src/assets/styles/var/kicc.less diff --git a/kicc-ui/src/assets/styles/kicc.less b/kicc-ui/src/assets/styles/kicc.less index afcf0af2..59d94809 100644 --- a/kicc-ui/src/assets/styles/kicc.less +++ b/kicc-ui/src/assets/styles/kicc.less @@ -17,13 +17,252 @@ } } -.table-title { - position: relative; - display: flex; - padding-left: 7px; - font-size: 14px; - font-weight: 500; - line-height: 24px; - color: rgba(0, 0, 0, 0.85); - cursor: pointer; + +// 基础表格样式 +[data-theme='dark'] { + .ant-table-tbody > tr:hover.ant-table-row-selected > td, + .ant-table-tbody > tr.ant-table-row-selected td { + background-color: #262626; + } + + .@{basic-table-prefix-cls} { + // [黑暗模式]table顶部插槽多选栏样式 + .alert { + background-color: #323232; + border-color: #424242; + } + } +} + +.@{basic-table-prefix-cls} { + max-width: 100%; + + &-row__striped { + td { + background-color: @app-content-background; + } + } + + &-form-container { + padding: 16px; + + .ant-form { + padding: 12px 10px 6px 10px; + margin-bottom: 16px; + background-color: @component-background; + border-radius: 2px; + } + } + + .ant-tag { + margin-right: 0; + } + + .ant-table-wrapper { + padding: 6px; + background-color: @component-background; + border-radius: 2px; + + .ant-table-title { + min-height: 40px; + padding: 0 0 8px 0 !important; + } + + .ant-table.ant-table-bordered .ant-table-title { + border: none !important; + } + } + + .ant-table { + width: 100%; + overflow-x: hidden; + + &-title { + display: flex; + padding: 8px 6px; + border-bottom: none; + justify-content: space-between; + align-items: center; + } + + .ant-table-tbody > tr.ant-table-row-selected td { + background-color: fade(@primary-color, 8%) !important; + } + } + + .ant-pagination { + margin: 10px 0 0 0; + } + + .ant-table-footer { + padding: 0; + + .ant-table-wrapper { + padding: 0; + } + + table { + border: none !important; + } + + .ant-table-body { + overflow-x: hidden !important; + overflow-y: scroll !important; + } + + td { + padding: 12px 8px; + } + + // [明亮模式]table顶部插槽多选栏样式 + .alert { + height: 38px; + background-color: #f3f3f3; + border-color: #e3e3e3; + } + + &--inset { + .ant-table-wrapper { + padding: 0; + } + } + } + + // 表格头部样式 + .@{basic-table-header-prefix-cls} { + &__toolbar { + flex: 1; + display: flex; + align-items: center; + justify-content: flex-end; + + > * { + margin-right: 8px; + } + } + } + + // 表格动作样式 + .@{basic-table-action-prefix-cls} { + display: flex; + align-items: center; + + .action-divider { + display: table; + } + + &.left { + justify-content: flex-start; + } + + &.center { + justify-content: center; + } + + &.right { + justify-content: flex-end; + } + + button { + display: flex; + align-items: center; + + span { + margin-left: 0 !important; + } + } + + button.ant-btn-circle { + span { + margin: auto !important; + } + } + + .ant-divider, + .ant-divider-vertical { + margin: 0 2px; + } + + .icon-more { + transform: rotate(90deg); + + svg { + font-size: 1.1em; + font-weight: 700; + } + } + } + + // 表格设置样式 + .table-coulmn-drag-icon { + margin: 0 5px; + cursor: move; + } + .@{basic-column-setting-prefix-cls} { + &__popover-title { + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + } + + &__check-item { + display: flex; + align-items: center; + min-width: 100%; + padding: 4px 16px 8px 0; + + .ant-checkbox-wrapper { + width: 100%; + + &:hover { + color: @primary-color; + } + } + } + + &__fixed-left, + &__fixed-right { + color: rgba(0, 0, 0, 0.45); + cursor: pointer; + + &.active, + &:hover { + color: @primary-color; + } + + &.disabled { + color: @disabled-color; + cursor: not-allowed; + } + } + + &__fixed-right { + transform: rotate(180deg); + } + + &__cloumn-list { + svg { + width: 1em !important; + height: 1em !important; + } + + .ant-popover-inner-content { + // max-height: 360px; + padding-right: 0; + padding-left: 0; + // overflow: auto; + } + + .ant-checkbox-group { + width: 100%; + min-width: 260px; + // flex-wrap: wrap; + } + + .scrollbar { + height: 220px; + } + } + } } diff --git a/kicc-ui/src/assets/styles/var/index.less b/kicc-ui/src/assets/styles/var/index.less index bc3e3c6a..53d69e00 100644 --- a/kicc-ui/src/assets/styles/var/index.less +++ b/kicc-ui/src/assets/styles/var/index.less @@ -8,6 +8,7 @@ @import (reference) '../color.less'; @import 'easing'; @import 'breakpoint'; +@import 'kicc'; @namespace: kicc; diff --git a/kicc-ui/src/assets/styles/var/kicc.less b/kicc-ui/src/assets/styles/var/kicc.less new file mode 100644 index 00000000..3f1527f6 --- /dev/null +++ b/kicc-ui/src/assets/styles/var/kicc.less @@ -0,0 +1,13 @@ +/** + * @program: kicc-ui + * @description: kicc系统相关变量定义 + * 在kicc系统中全局调用的变量全部在这里配置 + * @author: entfrm开发团队-王翔 + * @create: 2022/4/7 + */ + +// 基础表格变量 +@basic-table-prefix-cls: ~'@{namespace}-basic-table'; +@basic-table-header-prefix-cls: ~'@{namespace}-basic-table-header'; +@basic-table-action-prefix-cls: ~'@{namespace}-basic-table-action'; +@basic-column-setting-prefix-cls: ~'@{namespace}-basic-column-setting'; diff --git a/kicc-ui/src/components/Table/src/BasicTable.vue b/kicc-ui/src/components/Table/src/BasicTable.vue index 2dca16e1..8ede45c9 100644 --- a/kicc-ui/src/components/Table/src/BasicTable.vue +++ b/kicc-ui/src/components/Table/src/BasicTable.vue @@ -318,118 +318,3 @@ }, }); - diff --git a/kicc-ui/src/components/Table/src/components/TableAction.vue b/kicc-ui/src/components/Table/src/components/TableAction.vue index 8de9a4e0..875ec33d 100644 --- a/kicc-ui/src/components/Table/src/components/TableAction.vue +++ b/kicc-ui/src/components/Table/src/components/TableAction.vue @@ -148,56 +148,3 @@ }, }); - diff --git a/kicc-ui/src/components/Table/src/components/TableHeader.vue b/kicc-ui/src/components/Table/src/components/TableHeader.vue index 2c37d58b..d918b49e 100644 --- a/kicc-ui/src/components/Table/src/components/TableHeader.vue +++ b/kicc-ui/src/components/Table/src/components/TableHeader.vue @@ -102,19 +102,3 @@ }, }); - diff --git a/kicc-ui/src/components/Table/src/components/settings/ColumnSetting.vue b/kicc-ui/src/components/Table/src/components/settings/ColumnSetting.vue index 94f4d6ef..3f6cac78 100644 --- a/kicc-ui/src/components/Table/src/components/settings/ColumnSetting.vue +++ b/kicc-ui/src/components/Table/src/components/settings/ColumnSetting.vue @@ -387,79 +387,3 @@ }, }); - diff --git a/kicc-ui/src/utils/dateUtil.ts b/kicc-ui/src/utils/dateUtil.ts index 3ce5a1c5..c45b5b6d 100644 --- a/kicc-ui/src/utils/dateUtil.ts +++ b/kicc-ui/src/utils/dateUtil.ts @@ -22,13 +22,15 @@ export function formatToDate(date: moment.MomentInput = undefined, format = DATE } /** 添加日期范围 */ -export function convertDateRange(params: Recordable, dateRangeField: string): Recordable { - const search = params, dateRange = search[dateRangeField]; - if (null != dateRange && dateRange?.length > 0) { +export function convertDateRange(params: Recordable, dateRange: string[]): Recordable { + const search = params; + search.beginTime = ''; + search.endTime = ''; + if (dateRange && dateRange?.length > 0) { search.beginTime = dateRange[0]; search.endTime = dateRange[1]; } - return search; + return params; } export const dateUtil = moment; diff --git a/kicc-ui/src/views/system/config/config.data.ts b/kicc-ui/src/views/system/config/config.data.ts index ad2f750c..b9e98022 100644 --- a/kicc-ui/src/views/system/config/config.data.ts +++ b/kicc-ui/src/views/system/config/config.data.ts @@ -1,143 +1,43 @@ /** * @program: kicc-ui - * @description: 角色模块动态渲染配置 + * @description: 配置参数模块动态渲染配置 * @author: entfrm开发团队-王翔 * @create: 2022/4/21 */ +import { h } from 'vue'; +import { Tag } from 'ant-design-vue'; +import { ColumnProps } from "ant-design-vue/lib/table/interface"; -import {BasicColumn} from '/@/components/Table'; -import {FormSchema} from '/@/components/Table'; -import {h} from 'vue'; -import {Tag} from 'ant-design-vue'; - -export const columns: BasicColumn[] = [ - { - title: '参数名称', - dataIndex: 'name', - width: 200 - }, - { - title: '参数键名', - dataIndex: 'key', - width: 200 - }, - { - title: '参数键值', - dataIndex: 'value', - width: 200 - }, - { - title: '系统内置', - dataIndex: 'isSys', - width: 120, - customRender: ({record}) => { - let text = ''; - if (record.isSys === '0'){ - text = '是'; - }else { - text = '否'; - } - return h(Tag, ()=> text); - } - }, - { - title: '备注', - dataIndex: 'remarks', - customRender: ({record}) => { - return record.remarks || h(Tag, {color: 'red'}, () => '暂无数据'); - } - }, - { - title: '创建时间', - dataIndex: 'createTime' - } -]; - -export const searchFormSchema: FormSchema[] = [ - { - field: 'name', - label: '参数名称', - component: 'Input', - componentProps: { - placeholder: '请输入角色名称', - }, - colProps: {span: 8} - }, - { - field: 'key', - label: '参数键名', - component: 'Input', - componentProps: { - placeholder: '请输入参数键名', - }, - colProps: {span: 8} - }, - { - field: 'isSys', - label: '系统内置', - component: 'Select', - componentProps: { - options: [ - {label: '是', value: '0'}, - {label: '否', value: '1'} - ] - }, - colProps: {span: 7} +/** 表格列配置 */ +export const columns: ColumnProps[] = [ + { + title: '参数名称', + dataIndex: 'name' + }, + { + title: '参数键名', + dataIndex: 'key' + }, + { + title: '参数键值', + dataIndex: 'value' + }, + { + title: '系统内置', + dataIndex: 'isSys', + customRender: ({record}) => { + return record.isSys == '0' ? h(Tag, { color: 'success' }, '是') : h(Tag, { color: 'red' }, '否'); } -]; - -export const formSchema: FormSchema[] = [ - { - field: 'id', - label: 'ID', - component: 'Input', - show: false - }, - { - field: 'name', - label: '参数名称', - required: true, - component: 'Input', - colProps: { - span: 12 - } - }, - { - field: 'key', - label: '参数键名', - component: 'Input', - required: true, - colProps: { - span: 12 - } - }, - { - field: 'value', - label: '参数键值', - component: 'Input', - required: true, - colProps: { - span: 12 - } - }, - { - field: 'isSys', - label: '系统内置', - component: 'RadioButtonGroup', - defaultValue: '0', - componentProps: { - options: [ - {label: '是', value: '0'}, - {label: '否', value: '1'} - ], - }, - colProps: { - span: 12 - } - }, - { - label: '备注', - field: 'remarks', - component: 'InputTextArea', + }, + { + title: '备注', + dataIndex: 'remarks', + customRender: ({record}) => { + return record.remarks || h(Tag, {color: 'red'},'暂无数据'); } + }, + { + title: '创建时间', + dataIndex: 'createTime' + } ]; diff --git a/kicc-ui/src/views/system/config/index.vue b/kicc-ui/src/views/system/config/index.vue index f0c6c8a0..0e356e64 100644 --- a/kicc-ui/src/views/system/config/index.vue +++ b/kicc-ui/src/views/system/config/index.vue @@ -1,186 +1,184 @@