lijingjia
/
ds-wms-client-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

框架重构

Browse Source
frame
lijingjia 6 days ago
parent 658979f6ab
commit 203075c55b
11 changed files with 316 additions and 286 deletions
Show Stats Download Patch File Download Diff File

2
index.html
Unescape Escape View File

@ -10,7 +10,7 @@
/> />
<title><%= title %></title> <title><%= title %></title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3756681_boclsb2vb14.css" /> <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3756681_wqiwqo0ahpj.css" />
</head> </head>
<body> <body>
<script> <script>

21
src/components/Basic/src/BasicArrow.vue
Unescape Escape View File

@ -1,15 +1,15 @@
<!-- <!--
* @Author: Vben * @Desc:
* @Description: Arrow component with animation * @Author: lijj
* @Date: 2024-07-17 08:39:50
--> -->
<template> <template>
<span :class="getClass"> <span :class="getClass">
<Icon icon="ion:chevron-forward" style="font-size: 12px;" /> <span class="iconfont icon-zhankaishouqi-xiao-danse"></span>
</span> </span>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue' import { computed } from 'vue'
import { Icon } from '/@/components/Icon'
import { useDesign } from '/@/hooks/web/useDesign' import { useDesign } from '/@/hooks/web/useDesign'
const props = defineProps({ const props = defineProps({
@ -49,16 +49,17 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-basic-arrow'; @prefix-cls: ~'@{namespace}-basic-arrow';
.@{prefix-cls} { .@{prefix-cls} {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
transform: rotate(0deg); transform: rotate(0deg);
transition: all 0.3s ease 0.1s; transition: all 0.3s ease 0.1s;
transform-origin: center center; transform-origin: center center;
.icon-zhankaishouqi-xiao-danse {
margin: 0;
}
&--active { &--active {
transform: rotate(90deg); transform: rotate(180deg);
} }
&.inset { &.inset {
@ -66,15 +67,15 @@
} }
&.up { &.up {
transform: rotate(-90deg); transform: rotate(-0deg);
} }
&.down { &.down {
transform: rotate(90deg); transform: rotate(180deg);
} }
&.up.@{prefix-cls}--active { &.up.@{prefix-cls}--active {
transform: rotate(90deg); transform: rotate(180deg);
} }
&.down.@{prefix-cls}--active { &.down.@{prefix-cls}--active {

27
src/components/Form/src/components/FormAction.vue
Unescape Escape View File

@ -26,23 +26,24 @@
<slot name="advanceBefore"></slot> <slot name="advanceBefore"></slot>
<a-button <a-button
v-if="showAdvancedButton && !hideAdvanceBtn" v-if="showAdvancedButton && !hideAdvanceBtn"
type="link" :class="{'ds-tb-form-tg-h': getDarkMode == 'black', 'ds-tb-form-tg-l': getDarkMode == 'blue', 'ds-tb-form-tg-b': getDarkMode == 'white'}"
size="small" size="small"
@click="toggleAdvanced" @click="toggleAdvanced"
> >
<BasicArrow :style="{color: '#257AFA'}" :expand="!isAdvanced" up /> <BasicArrow :expand="!isAdvanced" up />
<span id="formFold" style="margin-left: 3px;">{{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}</span> <!-- <span id="formFold" style="margin-left: 3px;">{{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}</span> -->
</a-button> </a-button>
<slot name="advanceAfter"></slot> <slot name="advanceAfter"></slot>
<slot name="resetBefore"></slot> <slot name="resetBefore"></slot>
<Button <Button
:class="{'ds-tb-form-tg-h': getDarkMode == 'black', 'ds-tb-form-tg-l': getDarkMode == 'blue', 'ds-tb-form-tg-b': getDarkMode == 'white'}"
v-if="showResetButton" v-if="showResetButton"
type="default" size="small"
class="mr-2"
v-bind="getResetBtnOptions" v-bind="getResetBtnOptions"
@click="resetAction" @click="resetAction"
> >
{{ getResetBtnOptions.text }} <span class="iconfont icon-zhongzhi-xiao-danse"></span>
<!-- {{ getResetBtnOptions.text }} -->
</Button> </Button>
<!-- <slot name="submitBefore"></slot> --> <!-- <slot name="submitBefore"></slot> -->
@ -75,7 +76,7 @@
import { useI18n } from '/@/hooks/web/useI18n' import { useI18n } from '/@/hooks/web/useI18n'
import { propTypes } from '/@/utils/propTypes' import { propTypes } from '/@/utils/propTypes'
import AdvancedSearch from './AdvancedSearch.vue' import AdvancedSearch from './AdvancedSearch.vue'
import { useRootSetting } from '/@/hooks/setting/useRootSetting'
type ButtonOptions = Partial<ButtonProps> & { text: string } type ButtonOptions = Partial<ButtonProps> & { text: string }
export default defineComponent({ export default defineComponent({
@ -180,10 +181,11 @@
} }
emit('toggle-advanced') emit('toggle-advanced')
} }
const { getDarkMode } = useRootSetting()
return { return {
t, t,
actionColOpt, actionColOpt,
getDarkMode,
getResetBtnOptions, getResetBtnOptions,
getSubmitBtnOptions, getSubmitBtnOptions,
toggleAdvanced, toggleAdvanced,
@ -197,7 +199,10 @@
</script> </script>
<style scoped> <style scoped>
#formFold { .icon-zhongzhi-xiao-danse {
color: #257afa!important; margin: 0;
} }
.ds-tb-form-tg-h {
}
</style> </style>

3
src/components/SimpleMenu/src/components/menu.less
Unescape Escape View File

@ -183,9 +183,10 @@
padding-left: 0px!important; padding-left: 0px!important;
} }
&-vertical &-item-active &-submenu-title { &-vertical &-item-active &-submenu-title {
.light-border();
font-weight: 700; font-weight: 700;
color: @primary-color; color: @primary-color;
border-radius: 4px;
background: rgba(255, 255, 255, 0.15)!important;
// background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(217, 232, 255, 1) 100%); // background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(217, 232, 255, 1) 100%);
} }
&-vertical .@{menu-prefix-cls} { &-vertical .@{menu-prefix-cls} {

3
src/components/SimpleMenu/src/index.less
Unescape Escape View File

@ -6,6 +6,8 @@
background-color: @sider-dark-bg-color; background-color: @sider-dark-bg-color;
> .@{prefix-cls}-submenu-title { > .@{prefix-cls}-submenu-title {
background-color: @sider-dark-bg-color; background-color: @sider-dark-bg-color;
font-size: 14px;
color: #ffffff;
} }
} }
.ant-col { .ant-col {
@ -14,6 +16,7 @@
&-dark&-vertical .@{simple-prefix-cls}__children, &-dark&-vertical .@{simple-prefix-cls}__children,
&-dark&-popup .@{simple-prefix-cls}__children { &-dark&-popup .@{simple-prefix-cls}__children {
height: 30px; height: 30px;
color: rgba(255, 255, 255, 0.5);
// background-color: @sider-dark-lighten-bg-color; // background-color: @sider-dark-lighten-bg-color;
> .@{prefix-cls}-submenu-title { > .@{prefix-cls}-submenu-title {
// background-color: @sider-dark-lighten-bg-color; // background-color: @sider-dark-lighten-bg-color;

16
src/components/Table/src/BasicTable.vue
Unescape Escape View File

@ -34,7 +34,7 @@
show-overflow show-overflow
show-header-overflow show-header-overflow
show-footer-overflow show-footer-overflow
:min-height="tableHeightRef + 35" :min-height="tableHeightRef + 36"
:height="tableHeightRef + 35" :height="tableHeightRef + 35"
:row-config="{ isCurrent: true, isHover: true }" :row-config="{ isCurrent: true, isHover: true }"
:column-config="{ resizable: true }" :column-config="{ resizable: true }"
@ -104,7 +104,12 @@
</Table> </Table>
<slot name="right" class="right" ></slot> <slot name="right" class="right" ></slot>
</div> </div>
<Pagination v-if="getBindValues.tableComponent === 'vxe'" v-bind="getBindValues.pagination" @change="pageChange" @showSizeChange="onShowSizeChange" /> <Pagination
v-if="getBindValues.tableComponent === 'vxe'"
v-bind="getBindValues.pagination"
@change="pageChange"
@showSizeChange="onShowSizeChange"
/>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -581,7 +586,7 @@ export default defineComponent({
.ant-form { .ant-form {
width: 100%; width: 100%;
padding: 10px 8px 10px; padding: 10px 8px 10px;
background-color: #F5F9FC; background-color: #F0F2F5;
} }
} }
@ -672,8 +677,9 @@ export default defineComponent({
color: #257afa!important; color: #257afa!important;
} }
.vxe-cell--sort { .vxe-cell--sort {
font-size: 0.8em!important; font-size: 0.7em!important;
height: 1.5em!important; height: 1.3em!important;
margin-left: 3px;
} }
.vxe-header--row { .vxe-header--row {
background: #f0f4fa!important; background: #f0f4fa!important;

25
src/design/ant/pagination.less
Unescape Escape View File

@ -5,19 +5,17 @@ html[data-theme='dark'] {
.ant-pagination-next, .ant-pagination-next,
.ant-pagination-item { .ant-pagination-item {
background-color: rgb(255 255 255 / 4%) !important; background-color: rgb(255 255 255 / 4%) !important;
a { a {
color: #8b949e !important; color: #8b949e !important;
} }
} }
.ant-select-arrow { .ant-select-arrow {
color: @text-color-secondary !important; color: @text-color-secondary !important;
} }
.ant-pagination-item-active { .ant-pagination-item-active {
background-color: @primary-color !important; background-color: @primary-color !important;
border: none; border: 1px solid @primary-color;
border-radius: none !important; border-radius: none !important;
a { a {
@ -65,20 +63,20 @@ html[data-theme='dark'] {
} }
.ant-pagination-item-active { .ant-pagination-item-active {
// background-color: @primary-color !important; border: 1px solid @primary-color;
border: none; color: @primary-color;
border-radius: none !important;
a { a {
color: rgba(70, 145, 255, 1) !important; color: @primary-color!important;
} }
} }
.ant-pagination-options { .ant-pagination-options {
padding-right: 20px; padding-right: 20px;
position: relative;
top: -2.5px;
.ant-select-selector, .ant-input-number-input-wrap { .ant-select-selector, .ant-input-number-input-wrap {
height: 20px!important; height: 26px!important;
min-height: 20px!important; min-height: 26px!important;
} }
margin-left: 12px; margin-left: 12px;
.ant-select-selector { .ant-select-selector {
@ -93,7 +91,7 @@ html[data-theme='dark'] {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 20px !important; line-height: 26px !important;
color: rgba(122, 135, 152, 1); color: rgba(122, 135, 152, 1);
} }
} }
@ -103,17 +101,16 @@ html[data-theme='dark'] {
} }
.ant-pagination-options-quick-jumper input { .ant-pagination-options-quick-jumper input {
height: 20px!important; height: 26px!important;
margin: 3px 6px; margin: 3px 6px;
border: none !important; border: none !important;
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
background: rgba(240, 244, 250, 1); background: rgba(240, 244, 250, 1);
line-height: 22px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 20px !important; line-height: 26px !important;
color: rgba(122, 135, 152, 1); color: rgba(122, 135, 152, 1);
} }

26
src/design/ant/table.less
Unescape Escape View File

@ -1,12 +1,28 @@
// 列表页面表单和表格的整体样式管理 // 列表页面表单和表格的整体样式管理
.ds-table, .ds-mini-table { .ds-table, .ds-mini-table {
.table-wrapper { border: 1px solid #CCD6DF;
padding-left: 20px; border-radius: 6px;
} padding: 20px 20px 0!important;
height: auto!important;
} }
.ds-table, .ds-table-detail, .ds-mini-table, .ds-mini-table-detail { .ds-table, .ds-table-detail, .ds-mini-table, .ds-mini-table-detail {
.vxe-header--column {
font-weight: 400;
color: #121826;
background-color: #F0F2F5;
.vxe-cell--sort {
line-height: 1.2em;
.sort--active {
color: @primary-color;
}
i {
font-size: 0.8em;
}
}
}
.ant-form { .ant-form {
padding: 10px 19px 1px!important; padding: 10px 20px 11px!important;
border-radius: 6px;
.ant-btn { .ant-btn {
height: 26px; height: 26px;
margin: 0 0 0px 10px; margin: 0 0 0px 10px;
@ -58,7 +74,7 @@
} }
} }
.ant-pagination { .ant-pagination {
margin: 2px 0 3px!important; margin: 10px 0 11px!important;
font-size: 12px; font-size: 12px;
} }
.ant-pagination-total-text { .ant-pagination-total-text {

3
src/design/public.less
Unescape Escape View File

@ -193,6 +193,9 @@ h5 {
.pl0 { .pl0 {
padding-left: 0 !important; padding-left: 0 !important;
} }
.p20 {
padding: 20px;
}
// 表格状态使用 // 表格状态使用
.ds-green-tag, .ds-green-tag,
.ds-blue-tag, .ds-blue-tag,

8
src/views/operation/seaexport/changeConfig/index.vue
Unescape Escape View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="p20">
<BasicTable class="ds-table" @register="registerTable"> <BasicTable class="ds-table" @register="registerTable">
<template #tableTitle> <template #tableTitle>
</template> </template>
@ -120,7 +120,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from 'vue' import { onMounted } from 'vue'
import { BasicTable, useTable, TableAction } from '/@/components/Table' import { BasicTable, useTable } from '/@/components/Table'
import { GetSeaExportRefundList } from './api' import { GetSeaExportRefundList } from './api'
import { formatParams } from '/@/hooks/web/common' import { formatParams } from '/@/hooks/web/common'
import { columns, searchFormSchema } from '../columns' import { columns, searchFormSchema } from '../columns'
@ -151,7 +151,9 @@
bordered: true, bordered: true,
showIndexColumn: true, showIndexColumn: true,
canResize: true, canResize: true,
resizeHeightOffset: 15, resizeHeightOffset: 45,
tableComponent: 'vxe',
autoHeight: window.innerHeight - 330.5
// actionColumn: { // actionColumn: {
// width: 80, // width: 80,
// title: '操作', // title: '操作',

18
src/views/operation/seaexport/index.vue
Unescape Escape View File

@ -1,6 +1,7 @@
<template> <template>
<div class="ds-sea-export-table"> <div class="ds-sea-export-table">
<BasicTable class="ds-table" @register="registerTable" @rowDbClick="handledbclick"> <div class="ds-table">
<BasicTable @register="registerTable" @rowDbClick="handledbclick">
<template #tableTitle> <template #tableTitle>
<div> <div>
<TableActionBar :selectRow="getVxeSelectRows" :reload="reload"> <TableActionBar :selectRow="getVxeSelectRows" :reload="reload">
@ -236,9 +237,7 @@
</template> </template>
</BasicTable> </BasicTable>
<!-- 合计 --> <!-- 合计 -->
<div class="static-box"> <a-table class="static-box" :columns="calcColumns" :data-source="calcData" :pagination="false"></a-table>
<h5 v-if="calcData.length" style="position: absolute; bottom: 68px; left: 22px">合计</h5>
<a-table class="ds-table" :columns="calcColumns" :data-source="calcData" :pagination="false"></a-table>
</div> </div>
<!-- 多提单号查询 --> <!-- 多提单号查询 -->
<a-modal class="ds-modal-small" title="多提单号查询" :maskClosable="false" :width="400" :visible="moreNumVisible" <a-modal class="ds-modal-small" title="多提单号查询" :maskClosable="false" :width="400" :visible="moreNumVisible"
@ -335,8 +334,6 @@ import { formatParams } from '/@/hooks/web/common'
const appStore = useAppStore() const appStore = useAppStore()
const { createMessage } = useMessage() const { createMessage } = useMessage()
const go = useGo() const go = useGo()
// 空数据表格高度
const tbHeight = window.innerHeight - 310
// 合计列 // 合计列
const calcColumns = [ const calcColumns = [
{ {
@ -508,10 +505,10 @@ const [registerTable, { reload, getVxeSelectRows, setLoading }] = useTable({
width: 60, width: 60,
}, },
canResize: true, canResize: true,
resizeHeightOffset: 75, resizeHeightOffset: 131,
immediate: false, immediate: false,
tableComponent: 'vxe', tableComponent: 'vxe',
autoHeight: tbHeight, autoHeight: window.innerHeight - 416.5,
id: '0', id: '0',
actionColumn: { actionColumn: {
width: 60, width: 60,
@ -657,6 +654,7 @@ onActivated(() => {
<style lang="less"> <style lang="less">
.ds-sea-export-table { .ds-sea-export-table {
padding: 20px;
height: 100%; height: 100%;
.TIJIAO { .TIJIAO {
@ -699,9 +697,7 @@ onActivated(() => {
} }
.static-box { .static-box {
position: fixed; margin-bottom: 20px;
bottom: 0;
padding-left: 20px;
} }
.icon-fuzhi3 { .icon-fuzhi3 {

Write Preview
Loading…
Cancel
Save