Skip to content

GitLab

S
Starter Web Vue
Commit fc8aea41 authored by shuiluo's avatar shuiluo
Browse files
Options

feat: 代码优化， 部分国际化完善

parent ca9a6587
Hide whitespace changes
Inline Side-by-side
Showing with 149 additions and 129 deletions
src/components/table/table.vue
View file @ fc8aea41
......@@ -13,10 +13,10 @@
<slot name="moreSearch" :query="queryForm" />
</div>
</template>
<a-button>更多查询</a-button>
<a-button>{{ $t('table.moreSearch') }}</a-button>
</a-popover>
<a-button @click="reset">重置</a-button>
<a-button type="primary" @click="getData">查询</a-button>
<a-button @click="reset">{{ $t('table.reset') }}</a-button>
<a-button type="primary" @click="getData">{{ $t('table.search') }}</a-button>
</a-space>
</div>
</my-card>
......@@ -24,7 +24,7 @@
<my-card :class="noPadding ? 'tw-p-0' : ''" :style="tableCardStyle">
<a-space class="tw-mb-2">
<a-button type="primary" v-if="newBtn" @click="addBtnClick">
{{ newBtn.text || '新增' }}
{{ newBtn.text || $t('table.add') }}
</a-button>
<slot name="operation" />
</a-space>
......@@ -42,7 +42,7 @@
>
<slot />
<a-table-column
:title="newButtons.title"
:title="newButtons.title || $t('table.operation')"
v-if="this.newButtons"
v-bind="this.newButtons.options"
>
......@@ -65,7 +65,7 @@
:width="dWidth"
@close="hidden"
:maskClosable="false"
:title="title"
:title="drawerTitle"
:afterVisibleChange="afterVisibleChange"
>
<slot name="drawer" :hidden="hidden" :refresh="getData" :type="type" :row="row" />
......@@ -83,8 +83,6 @@ const initQuery = {
pageNum: 1,
};
const defaultTitle = '新增';
export default {
props: {
url: String,
......@@ -123,7 +121,7 @@ export default {
loading: false,
total: 0,
visible: false,
title: newBtn.title ?? defaultTitle,
title: null,
drawerStyle: {
display: 'flex',
flexDirection: 'column',
......@@ -160,7 +158,7 @@ export default {
newButtons() {
return this.buttons
? Array.isArray(this.buttons)
? { data: this.buttons, title: '操作' }
? { data: this.buttons }
: this.buttons
: null;
},
......@@ -188,6 +186,9 @@ export default {
}
: {};
},
drawerTitle() {
return this.title ?? this.addBtn?.title ?? this.$t('table.add');
},
},
methods: {
......@@ -228,7 +229,7 @@ export default {
},
afterVisibleChange(visible) {
if (!visible) {
this.title = this.addBtn?.title ?? defaultTitle;
this.title = null;
this.type = null;
this.row = null;
this.dWidth = this.drawerWidth;
......
src/components/tool/Drawer.vue
View file @ fc8aea41
<template>
<div >
<div :class="['mask', visible ? 'open' : 'close']" @click="close"></div>
<div :class="['drawer', placement, visible ? 'open' : 'close']">
<div ref="drawer" class="content beauty-scroll">
<slot></slot>
</div>
<div v-if="showHandler" :class="['handler-container', placement, visible ? 'open' : 'close']" ref="handler" @click="toggle">
<slot v-if="$slots.handler" name="handler"></slot>
<div v-else class="handler">
<a-icon :type="visible ? 'close' : 'bars'" />
</div>
</div>
<div>
<div :class="['mask', visible ? 'open' : 'close']" @click="close"></div>
<div :class="['drawer', placement, visible ? 'open' : 'close']">
<div ref="drawer" class="content beauty-scroll">
<slot />
</div>
<div
v-if="showHandler"
:class="['handler-container', placement, visible ? 'open' : 'close']"
ref="handler"
@click="toggle"
>
<slot v-if="$slots.handler" name="handler" />
<div v-else class="handler">
<a-icon :type="visible ? 'close' : 'bars'" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Drawer',
data () {
return {
}
},
model: {
prop: 'visible',
event: 'change'
},
props: {
visible: {
type: Boolean,
required: false,
default: false
name: 'Drawer',
data() {
return {};
},
placement: {
type: String,
required: false,
default: 'left'
model: {
prop: 'visible',
event: 'change',
},
showHandler: {
type: Boolean,
required: false,
default: true
}
},
methods: {
open () {
this.$emit('change', true)
props: {
visible: {
type: Boolean,
required: false,
default: false,
},
placement: {
type: String,
required: false,
default: 'left',
},
showHandler: {
type: Boolean,
required: false,
default: true,
},
},
close () {
this.$emit('change', false)
methods: {
open() {
this.$emit('change', true);
},
close() {
this.$emit('change', false);
},
toggle() {
this.$emit('change', !this.visible);
},
},
toggle () {
this.$emit('change', !this.visible)
}
}
}
};
</script>
<style lang="less" scoped>
.mask{
.mask {
position: fixed;
left: 0;
right: 0;
......@@ -67,50 +71,50 @@ export default {
background-color: @shadow-color;
transition: all 0.5s;
z-index: 100;
&.open{
display: inline-block;
&.open {
display: inline-block;
}
&.close{
display: none;
&.close {
display: none;
}
}
.drawer{
}
.drawer {
position: fixed;
transition: all 0.5s;
height: 100vh;
z-index: 100;
&.left{
left: 0px;
&.open{
.content{
box-shadow: 2px 0 8px @shadow-color;
&.left {
left: 0px;
&.open {
.content {
box-shadow: 2px 0 8px @shadow-color;
}
}
&.close {
transform: translateX(-100%);
}
}
&.close{
transform: translateX(-100%);
}
}
&.right{
right: 0px;
.content{
float: right;
}
&.open{
.content{
box-shadow: -2px 0 8px @shadow-color;
&.right {
right: 0px;
.content {
float: right;
}
&.open {
.content {
box-shadow: -2px 0 8px @shadow-color;
}
}
&.close {
transform: translateX(100%);
}
}
&.close{
transform: translateX(100%);
}
}
}
.content{
}
.content {
display: inline-block;
height: 100vh;
overflow-y: auto;
}
.handler-container{
}
.handler-container {
position: absolute;
display: inline-block;
text-align: center;
......@@ -119,24 +123,24 @@ export default {
top: 200px;
z-index: 100;
.handler {
height: 40px;
width: 40px;
background-color: @base-bg-color;
font-size: 26px;
box-shadow: 0 2px 8px @shadow-color;
line-height: 40px;
height: 40px;
width: 40px;
background-color: @base-bg-color;
font-size: 26px;
box-shadow: 0 2px 8px @shadow-color;
line-height: 40px;
}
&.left{
right: -40px;
.handler{
border-radius: 0 5px 5px 0;
}
&.left {
right: -40px;
.handler {
border-radius: 0 5px 5px 0;
}
}
&.right{
left: -40px;
.handler{
border-radius: 5px 0 0 5px;
}
&.right {
left: -40px;
.handler {
border-radius: 5px 0 0 5px;
}
}
}
}
</style>
src/local/index.js
View file @ fc8aea41
import selectLang from './select';
import TableLang from './table';
const zh_CN = {};
const en_US = {};
......@@ -12,5 +13,6 @@ function formatLang(langObject) {
}
formatLang(selectLang);
formatLang(TableLang);
export { en_US, zh_CN };
src/local/table.js 0 → 100644
View file @ fc8aea41
export default {
'table.operation': ['操作', 'Operation'],
'table.moreSearch': ['更多查询', 'More Search'],
'table.reset': ['重置', 'Reset'],
'table.add': ['新增', 'Add'],
'table.search': ['查询', 'Search'],
};
src/pages/frame/components/setting/Setting.vue
View file @ fc8aea41
......@@ -8,7 +8,7 @@
</setting-item>
<setting-item :title="$t('theme.title')">
<img-checkbox-group
@change="values => setTheme({ ...theme, mode: values[0] })"
@change="(values) => setTheme({ ...theme, mode: values[0] })"
:default-values="[theme.mode]"
>
<img-checkbox
......@@ -39,7 +39,7 @@
</setting-item>
<a-divider />
<setting-item :title="$t('navigate.title')">
<img-checkbox-group @change="values => setLayout(values[0])" :default-values="[layout]">
<img-checkbox-group @change="(values) => setLayout(values[0])" :default-values="[layout]">
<img-checkbox
:title="$t('navigate.side')"
img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg"
......@@ -105,7 +105,7 @@
:checked="animate.disabled"
slot="actions"
size="small"
@change="val => setAnimate({ ...animate, disabled: val })"
@change="(val) => setAnimate({ ...animate, disabled: val })"
/>
</a-list-item>
<a-list-item>
......@@ -113,7 +113,7 @@
<a-select
:value="animate.name"
:getPopupContainer="getPopupContainer"
@change="val => setAnimate({ ...animate, name: val })"
@change="(val) => setAnimate({ ...animate, name: val })"
class="select-item"
size="small"
slot="actions"
......@@ -128,7 +128,7 @@
<a-select
:value="animate.direction"
:getPopupContainer="getPopupContainer"
@change="val => setAnimate({ ...animate, direction: val })"
@change="(val) => setAnimate({ ...animate, direction: val })"
class="select-item"
size="small"
slot="actions"
......@@ -238,7 +238,7 @@ export default {
},
computed: {
directions() {
return this.animates.find(item => item.name == this.animate.name).directions;
return this.animates.find((item) => item.name == this.animate.name).directions;
},
...mapState('settingModule', [
'theme',
......@@ -254,7 +254,7 @@ export default {
]),
},
watch: {
'animate.name': function(val) {
'animate.name': function (val) {
this.setAnimate({ name: val, direction: this.directions[0] });
},
},
......@@ -282,7 +282,7 @@ export default {
let config = {};
let mySetting = this.$store.state.settingModule;
let dftSetting = local ? settingConfig : settingConfig;
Object.keys(mySetting).forEach(key => {
Object.keys(mySetting).forEach((key) => {
const dftValue = dftSetting[key],
myValue = mySetting[key];
if (dftValue != undefined && !fastEqual(dftValue, myValue)) {
......@@ -309,6 +309,7 @@ export default {
<style lang="less" module>
.side-setting {
min-height: 100%;
width: 280px;
background-color: @base-bg-color;
padding: 24px;
font-size: 14px;
......
src/pages/frame/layouts/AdminLayout.vue
View file @ fc8aea41
......@@ -47,9 +47,9 @@
<script>
import LayoutTopHeader from '../components/header/LayoutTopHeader.vue';
import Drawer from '@/components/tool/Drawer';
import Drawer from '@/components/tool/Drawer.vue';
import SideMenu from '@/components/menu/SideMenu.vue';
import Setting from '../components/setting/Setting';
import Setting from '../components/setting/Setting.vue';
import { mapState, mapMutations, mapGetters } from 'vuex';
import { convertListToTree, getUserInfo } from '@/utils';
......
src/pages/ranger/task_managment/center/index.vue
View file @ fc8aea41
......@@ -7,6 +7,7 @@
:selected.sync="selected"
ref="table"
:drawerWidth="800"
:scroll="scroll"
>
<template #search="{ query }">
<MoreItem label="开始时间">
......@@ -175,19 +176,23 @@ export default {
addBtn: {
title: '新建临时任务',
},
buttons: [
{
label: '详情',
click: this.viewDetail,
},
{ label: '进度', click: this.viewProgress },
{
type: 'confirm',
url: (row) => `/ranger/inspection/api/v1/jobs/${row.jobId}`,
after: this.refresh,
},
],
buttons: {
options: { fixed: 'right', width: 200 },
data: [
{
label: '详情',
click: this.viewDetail,
},
{ label: '进度', click: this.viewProgress },
{
type: 'confirm',
url: (row) => `/ranger/inspection/api/v1/jobs/${row.jobId}`,
after: this.refresh,
},
],
},
selected: {},
scroll: { x: 1500 },
};
},
methods: {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment