Skip to content

O
on-site-service-admin-view
Commit 2c1be876 authored by shangtx's avatar shangtx
Browse files
Options

init: 主题修改

parent 9bcfce81
Hide whitespace changes
Inline Side-by-side
Showing with 597 additions and 1229 deletions
src/components/layouts/ApplyCar.vue deleted 100644 → 0
View file @ 9bcfce81
<template>
<div>
<a-modal
title="用车申请"
:visible="show"
:width="1120"
@cancel="handleCancel"
destroyOnClose
:footer="null"
>
<a-spin :spinning="loading">
<div class="flex-column" style="background: #f4f8ff;margin-bottom: 30px;">
<div class="flex-row" style="flex-wrap: wrap">
<div class="flex-column" style="padding: 10px" v-for="(item,index) in data.processMsgList" :key="index">
<div class="flex-row" style="align-items: center">
<div class="point" v-show="item.isCurrent" style="height:8px;width:8px; background: #3A62D7"></div>
<div class="point" v-show="item.beforePoint" style="height:8px;width:8px; background: #00C17E"></div>
<div class="point" v-show="item.afterPoint" style="height:8px;width:8px; background: #E3E4F2"></div>
<!-- <div class="point" v-if="item.isCurrent" style="background:#3A62D7"></div>-->
<!-- <div class="point" v-else></div>-->
<div class="point-text" style="font-size: large">{{ item.name }}</div>
<div class="line2" v-if="index !=data.processMsgList.length-1"></div>
</div>
<div class="date">{{ item.auditDate }}</div>
</div>
</div>
</div>
<div class="flex-column">
<div class="title">用车人信息</div>
<div class="flex-row">
<div class="content">姓名：{{ data.name }}</div>
<div class="content">电话：{{ data.phone }}</div>
<div class="content">部门：{{ data.orgName }}</div>
<div class="content">发起时间：{{ data.ctDate }}</div>
</div>
<div class="line"></div>
<div class="title">用车事由</div>
<div class="content" style="width: auto">{{ data.reason }}</div>
<div class="line"></div>
<div class="title">行程信息</div>
<div class="flex-column">
<div class="flex-row">
<div class="content">出发时间：{{ data.startDate }}</div>
<div class="content">预计返回时间：{{ data.endDate }}</div>
<div class="content">目的地:{{ data.destination }}</div>
</div>
<div class="flex-row" style="margin-top: 8px">
<div class="content">用车人数：{{ data.passengerNum }}</div>
<div class="content">路途性质：{{ data.routeNature }}</div>
<div class="content">同行人员：{{ data.passengerStr }}</div>
</div>
</div>
<div class="line"></div>
<div class="flex-row" v-if="data.plate">
<div class="content">车辆属性：{{ data.property }}</div>
<div class="content">车牌信息：{{ data.plate }}</div>
</div>
<template v-if="data.isAuditUser">
<!--用车审批form-->
<a-form-model ref="form" style="margin-top: 10px" v-if="data.status == 1">
<a-row>
<a-col>
<a-form-model-item label="选择车辆">
<a-select placeholder="选择用车" style="width: 200px" v-model="auditData.carId">
<a-select-option v-for="type in carSelectList" v-bind:value="type.id" v-bind:key="type.id">
{{ type.name }}
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<!--用车审批form-->
<!--用车结束form-->
<a-form-model ref="form" style="margin-top: 10px" v-if="data.status == backCardStatus">
<a-row>
<a-col>
<a-form-model-item label="用车结束时间">
<a-date-picker valueFormat="YYYY-MM-DD" style="width: 100%" v-model="auditData.returnTime"/>
</a-form-model-item>
</a-col>
<div style="width: 40px"></div>
<a-col>
<a-form-model-item label="本次里表里程">
<div class="flex-row fff">
<a-input-number :min="1" :max="999999" class="input" v-model="auditData.nowMile"/>
<div class="info">上次里程表：{{ data.lastMile }}</div>
</div>
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col>
<a-form-model-item label="是否加油">
<div class="flex-row fff">
<a-switch v-model="auditData.isFuel"></a-switch>
<div style="width: 20px"></div>
<a-form-model-item label="本次加油金额" v-if="auditData.isFuel == 1">
<div class="flex-row fff">
<a-input-number :min="0" class="input" v-model="auditData.fuelAmount"/>
</div>
</a-form-model-item>
<div class="info">卡号:{{ auditData.fuelCard }}</div>
<a-button type="link" @click="changeCard">
换绑
</a-button>
</div>
</a-form-model-item>
</a-col>
<div style="width: 40px"></div>
<a-col>
<a-form-model-item label="是否保养">
<div class="flex-row fff">
<a-switch v-model="auditData.isMaintain"></a-switch>
<div class="info">上次保养里程表：{{ data.lastMaintainMile }}</div>
</div>
</a-form-model-item>
</a-col>
</a-row>
<a-row v-if="auditData.isMaintain == 1">
<div style="width: 40px"></div>
<a-col>
<a-form-model-item label="本次保养金额">
<div class="flex-row fff">
<a-input-number :min="0" :max="99999" class="input" v-model="auditData.maintainAmount"/>
</div>
</a-form-model-item>
</a-col>
<div style="width: 40px"></div>
<a-col>
<a-form-model-item label="本次保养里程" >
<div class="flex-row fff">
<a-input-number :min="0" :max="999999" class="input" v-model="auditData.maintainMile"/>
<div class="info">KM</div>
</div>
</a-form-model-item>
</a-col>
<div style="width: 40px"></div>
<a-col>
<a-form-model-item label="本次保养时间" >
<div class="flex-row fff">
<a-date-picker valueFormat="YYYY-MM-DD" style="width: 100%" v-model="auditData.maintainTime"/>
</div>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<!--用车结束form-->
</template>
<a-textarea
:rows="4"
style="margin-top: 10px; margin-bottom: 10px"
v-if="data.isAuditUser && data.status <backCardStatus"
placeholder="请输入备注"
v-model="auditData.remark"/>
<div style="height: 10px"></div>
<a-card class="cust-normal-card" title="流程信息">
<a-card
:style="{ maxHeight: '590px',minHeight: '590px',overflow:'auto',padding:'8px'}"
class="cust-list-cart">
<a-timeline>
<a-timeline-item :color="item.isCurrent?'green':'gray'" :key="item.id" v-for="item in processLogList">
<a-icon slot="dot" style="font-size: 16px;" type="clock-circle-o" v-if="item.isCurrent"/>
<div style="margin-bottom:5px;">
<span style="font-weight:bold">{{item.taskName}}</span>
<span v-if="item.auditUserName">（{{item.auditUserName}}）</span>
<div style="color:gray" v-if="item.auditDateStr!=null">{{item.auditDateStr}}</div>
</div>
<div v-if="item.isCurrent">
<div style="color:orange;font-weight:bold" v-if="item.alert">
<a-icon type="exclamation-circle"/>
&nbsp;{{item.alert}}
</div>
<div v-if="item.auditObjectBlackLog">
<span style="color:darkblue;font-weight:bold">[待办对象]：</span>
<span>{{item.auditObjectBlackLog}}</span>
</div>
</div>
<div style="color:gray" v-if="item.comment">
<span style="color:darkblue;font-weight:bold">[提交备注]：</span>
<span>{{item.comment}}</span>
</div>
</a-timeline-item>
</a-timeline>
</a-card>
</a-card>
<div style="height: 10px"></div>
<template v-if="data.isAuditUser">
<!-- 底部操作栏 -->
<div class="flex-row" style="justify-content: end;" v-if="data.status <backCardStatus">
<div class="jj" @click="action(0)">拒绝</div>
<div class="btn1 ty" @click="action(1)">同意</div>
</div>
<div class="flex-row" style="justify-content: end;" v-else-if="data.status == backCardStatus">
<div class="btn1 ty" @click="action(1)">确认用车结束</div>
</div>
</template>
</div>
</a-spin>
</a-modal>
<a-modal v-model="showChangeFuelCard" title="换绑卡号" @ok="handleOk">
<a-input class="input" v-model="auditData.fuelCard" style="width: 100%;"/>
</a-modal>
</div>
</template>
<script>
import {getCarApplyDetail, getCarSelectList, carAudit} from "@/api/car/home";
export default {
props: {
show: {
type: Boolean,
default: false,
},
},
data() {
return {
backCardStatus:4,
showChangeFuelCard:false,
loading: false,
data: {},
carSelectList: [],
processLogList: [],
auditData: {
// 1：同意 0：拒绝
auditType: null,
// 车辆id
carId: null,
// 流程id
id: null,
status: null,
remark: null,
// 是否保养： 1：是 0：否
isMaintain:null,
// 是否加油
isFuel:null,
// 用车结束时间
returnTime:null,
// 本次里表里程
nowMile:null,
fuelAmount:null,
maintainMile:null,
maintainTime:null,
maintainAmount:null,
// 加油卡号
fuelCard:"",
}
}
},
deactivated() {
this.processLogList = [];
},
mounted() {
},
methods: {
getData(id) {
this.loading = true
this.auditData = {}
getCarApplyDetail(id).then(res => {
this.data = res.data
this.processLogList = res.data.processLogList
this.auditData.fuelCard = res.data.fuelCard
this.auditData.id = res.data.id
if (res.data.status == 1) {
getCarSelectList().then(res => {
this.carSelectList = res.data
})
}
this.loading = false
}).catch(() => {
this.loading = false
})
},
handleOk(){
this.showChangeFuelCard = false
},
changeCard(){
this.showChangeFuelCard = true
},
handleCancel() {
this.$emit('onHide')
this.data = {}
this.auditData = {}
},
action(e) {
this.auditData.auditType = e
this.auditData.status = this.data.status
if (this.data.status == 1 && e == 1) {
if (this.auditData.carId == null) {
this.$notification.error({message: '系统提示', description: "请选择车辆", duration: 4,});
return
}
}
if(this.data.status != this.data.backCardStatus){
if (this.auditData.status != 4 && ( this.auditData.remark == null || this.auditData.remark.length <= 0)) {
this.$notification.error({message: '系统提示', description: "请填写备注信息", duration: 4,});
return
}
}
console.log(this.data.status)
if(this.data.status == this.backCardStatus){
if(this.auditData.isFuel == 1){
if (this.auditData.fuelAmount == null || this.auditData.fuelAmount.length <= 0) {
this.$notification.error({message: '系统提示', description: "请填写加油金额", duration: 4,});
return
}
}
if (this.auditData.returnTime == null || this.auditData.returnTime.length <= 0) {
this.$notification.error({message: '系统提示', description: "请选择用车结束时间", duration: 4,});
return
}
if (this.auditData.nowMile == null || this.auditData.nowMile.length <= 0) {
this.$notification.error({message: '系统提示', description: "请本次里表里程", duration: 4,});
return
}
console.log("1",this.data.lastMile)
console.log("2",this.auditData.nowMile)
if (this.auditData.nowMile <= this.data.lastMile){
this.$notification.error({message: '系统提示', description: "本次里表里程必须大于上次里表里程", duration: 4,});
return
}
if(this.auditData.isMaintain){
if (this.auditData.maintainAmount == null || this.auditData.maintainAmount.length <= 0) {
this.$notification.error({message: '系统提示', description: "请填写本次保养金额", duration: 4,});
return
}
if (this.auditData.maintainMile == null || this.auditData.maintainMile.length <= 0) {
this.$notification.error({message: '系统提示', description: "请填写本次保养里程(km)", duration: 4,});
return
}
if (this.auditData.maintainTime == null || this.auditData.maintainTime.length <= 0) {
this.$notification.error({message: '系统提示', description: "请选择本次保养时间", duration: 4,});
return
}
if (this.auditData.maintainMile <= this.data.lastMaintainMile){
this.$notification.error({message: '系统提示', description: "本次保养里程必须大于上次保养里程", duration: 4,});
return
}
}
}
this.loading = true
console.log("data",this.auditData)
carAudit(this.auditData).then(res => {
this.loading = false
this.$notification.success({message: '系统提示', description: res.code == 200 ? "处理成功" : "处理失败", duration: 4,});
if (res.code == 200) {
this.$emit('onSuccess')
}
}).catch(() => {
this.loading = false
})
}
},
}
</script>
<style lang="less" scoped>
.title {
font-size: 8px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #3e3e3e;
line-height: 22px;
}
.w40 {
width: 40px;
}
.content {
width: 255px;
font-size: 7px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3e3e3e;
line-height: 20px;
}
.line {
width: 100%;
border: 0.5px solid #e6e9f4;
margin-top: 10px;
margin-bottom: 10px;
}
.point {
width: 4px;
height: 4px;
background: #e3e4f2;
border-radius: 100%;
}
.point-text {
margin-left: 5px;
font-size: 7px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #7d8592;
line-height: 10px;
}
.date {
margin-top: 4px;
font-size: 4px;
font-family: PingFangSC-Regular, PingFang SC;
margin-left: 7px;
color: #7d8592;
}
.line2 {
margin-left: 20px;
width: 50px;
height: 0.5px;
background: #c8d1f2;
}
::v-deep .ant-form-item {
margin-bottom: 0px;
}
::v-deep .ant-row {
display: flex;
align-items: center;
}
.info {
margin-left: 10px;
font-size: 8px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 500;
color: #3E3E3E;
line-height: 20px;
}
.input {
width: 140px;
height: 30px;
}
.fff {
align-items: center;
}
.ty {
width: 160px;
height: 40px;
line-height: 40px;
font-size: 14px;
border-radius: 24px;
margin-right: 10px;
}
.jj {
width: 160px;
height: 40px;
border-radius: 24px;
border: 1px solid #EC3535;
text-align: center;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #EC3535;
line-height: 40px;
margin-right: 10px;
}
</style>
src/components/menu/SideMenu.vue
View file @ 2c1be876
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
theme: { theme: {
type: String, type: String,
required: false, required: false,
default: 'light' default: 'dark'
}, },
collapsible: { collapsible: {
type: Boolean, type: Boolean,
......
src/components/menu/index.js
View file @ 2c1be876
...@@ -13,7 +13,7 @@ export default { ...@@ -13,7 +13,7 @@ export default {
theme: { theme: {
type: String, type: String,
required: false, required: false,
default: 'light' default: 'dark'
}, },
mode: { mode: {
type: String, type: String,
......
src/components/page/GlobalHeader.vue
View file @ 2c1be876
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
theme: { theme: {
type: String, type: String,
required: false, required: false,
default: 'light' default: 'dark'
}, },
collapsed: { collapsed: {
type: Boolean, type: Boolean,
......
src/components/page/GlobalLayout.vue
View file @ 2c1be876
<template> <template>
<a-layout class="layout" :class="[device]"> <a-layout :class="[device]" class="layout">
<template v-if="layoutMode === 'sidemenu'"> <template v-if="layoutMode === 'sidemenu'">
<a-drawer <a-drawer
v-if="device === 'mobile'"
:wrapClassName="'drawer-sider ' + navTheme"
placement="left"
@close="() => this.collapsed = false"
:closable="false" :closable="false"
:visible="collapsed" :visible="collapsed"
:wrapClassName="'drawer-sider ' + navTheme"
@close="() => (this.collapsed = false)"
placement="left"
v-show="device === 'mobile'"
width="213" width="213"
class="drawerSty"
> >
<side-menu <side-menu
mode="inline" :collapsed="false"
:collapsible="true"
:company="company"
:menus="menus" :menus="menus"
@menuSelect="menuSelect"
:theme="navTheme" :theme="navTheme"
:collapsed="false" @menuSelect="menuSelect"
:collapsible="true"></side-menu> mode="inline"
></side-menu>
</a-drawer> </a-drawer>
<side-menu <side-menu
v-else :collapsed="collapsed"
mode="inline" :collapsible="true"
:company="company"
:menus="menus" :menus="menus"
:theme="navTheme" :theme="navTheme"
:collapsed="collapsed" mode="inline"
:collapsible="true"></side-menu> v-show="device === 'desktop'"
></side-menu>
</template> </template>
<!-- 下次优化这些代码 --> <!-- 下次优化这些代码 -->
<template v-else> <template v-else>
<a-drawer <a-drawer
v-if="device === 'mobile'"
:wrapClassName="'drawer-sider ' + navTheme"
placement="left"
@close="() => this.collapsed = false"
:closable="false" :closable="false"
:visible="collapsed" :visible="collapsed"
:wrapClassName="'drawer-sider ' + navTheme"
@close="() => (this.collapsed = false)"
placement="left"
v-if="device === 'mobile'"
width="213" width="213"
> >
<side-menu <side-menu
mode="inline" :collapsed="false"
:collapsible="true"
:company="company"
:menus="menus" :menus="menus"
@menuSelect="menuSelect"
:theme="navTheme" :theme="navTheme"
:collapsed="false" @menuSelect="menuSelect"
:collapsible="true"></side-menu> mode="inline"
></side-menu>
</a-drawer> </a-drawer>
</template> </template>
<a-layout <a-layout
:class="[layoutMode, `content-width-${contentWidth}`]" :class="[layoutMode, `content-width-${contentWidth}`]"
:style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 213 : 80}px` : '0' }"> :style="{
paddingLeft:
fixSiderbar && isDesktop() ? `${sidebarOpened ? 213 : 80}px` : '0',
}"
>
<!-- layout header --> <!-- layout header -->
<global-header <global-header
style="background: transparent"
:mode="layoutMode"
:menus="menus"
:theme="navTheme"
:collapsed="collapsed" :collapsed="collapsed"
:device="device" :device="device"
:company="company"
:menus="menus"
:mode="layoutMode"
:theme="navTheme"
@toggle="toggle" @toggle="toggle"
/> />
<!-- layout content --> <!-- layout content -->
<a-layout-content <a-layout-content
:style="{ marginLeft: ' 10px',marginRight:'10px', height: 'calc(100vh - 50px)', marginTop: fixedHeader ? '50px' : '10' }"> style="scroll-behavior:smooth"
:style="{
marginLeft: ' 16px',
marginRight: '16px',
height: 'calc(100vh - 50px)',
marginTop: fixedHeader ? '74px' : '24px',
}"
>
<slot></slot> <slot></slot>
</a-layout-content> </a-layout-content>
<!-- layout footer --> <!-- layout footer -->
<a-layout-footer style="padding: 0px"> <a-layout-footer style="padding: 0px"></a-layout-footer>
</a-layout-footer>
</a-layout> </a-layout>
<!--<setting-drawer></setting-drawer>--> <!--<setting-drawer></setting-drawer>-->
...@@ -81,788 +95,699 @@ ...@@ -81,788 +95,699 @@
</template> </template>
<script> <script>
import SideMenu from '@/components/menu/SideMenu' import SideMenu from "@/components/menu/SideMenu";
import GlobalHeader from '@/components/page/GlobalHeader' import GlobalHeader from "@/components/page/GlobalHeader";
// import SettingDrawer from '@/components/setting/SettingDrawer' // import SettingDrawer from '@/components/setting/SettingDrawer'
import {triggerWindowResizeEvent} from '@/util/util' import { triggerWindowResizeEvent } from "@/util/util";
import {mapActions, mapState} from 'vuex' import { mapActions, mapState } from "vuex";
import {mixin, mixinDevice} from '@/util/mixin.js' import { mixin, mixinDevice } from "@/util/mixin.js";
export default { export default {
name: "GlobalLayout", name: "GlobalLayout",
components: { components: {
SideMenu, SideMenu,
GlobalHeader GlobalHeader,
// ,SettingDrawer // ,SettingDrawer
}, },
mixins: [mixin, mixinDevice], mixins: [mixin, mixinDevice],
data() { data() {
return { return {
collapsed: false, collapsed: false,
menus: [] menus: [],
} };
}, },
computed: { computed: {
...mapState({ ...mapState({
// 主路由 // 主路由
mainMenu: state => state.permission.addRouters, mainMenu: (state) => state.permission.addRouters,
}) company: (state) => state.user.company,
}),
},
watch: {
sidebarOpened(val) {
this.collapsed = !val;
}, },
watch: { },
sidebarOpened(val) { created() {
this.collapsed = !val this.menus = this.filterHidenRouter(
}, this.mainMenu.find((item) => item.path === "/").children
);
},
methods: {
...mapActions(["setSidebar"]),
toggle() {
this.collapsed = !this.collapsed;
this.setSidebar(!this.collapsed);
triggerWindowResizeEvent();
}, },
created() { menuSelect() {
this.menus = this.filterHidenRouter(this.mainMenu.find((item) => item.path === '/').children) if (!this.isDesktop()) {
this.collapsed = false;
}
}, },
methods: { filterHidenRouter(routes, init = []) {
...mapActions(['setSidebar']), for (let i = 0; i < routes.length; i++) {
toggle() { let item = routes[i];
this.collapsed = !this.collapsed if (item.hidden == true) {
this.setSidebar(!this.collapsed) continue;
triggerWindowResizeEvent() }
}, let routerItem = {
menuSelect() { meta: {},
if (!this.isDesktop()) { };
this.collapsed = false routerItem.path = item.path;
routerItem.name = item.name;
routerItem.meta.title = item.meta.title;
if (item.meta.icon) {
routerItem.meta.icon = item.meta.icon;
} }
},
filterHidenRouter(routes, init = []) {
for (let i = 0; i < routes.length; i++) {
let item = routes[i]
if (item.hidden == true) {
continue
}
let routerItem = {
meta: {}
};
routerItem.path = item.path
routerItem.name = item.name
routerItem.meta.title = item.meta.title
if (item.meta.icon) {
routerItem.meta.icon = item.meta.icon
}
if (item.children) { if (item.children) {
routerItem.children = [] routerItem.children = [];
this.filterHidenRouter(item.children, routerItem.children); this.filterHidenRouter(item.children, routerItem.children);
}
init.push(routerItem);
} }
return init; init.push(routerItem);
} }
return init;
}, },
} },
};
</script> </script>
<style lang="less"> <style lang="less">
body { body {
// 打开滚动条固定显示 // 打开滚动条固定显示
// overflow-y: scroll; // overflow-y: scroll;
&.colorWeak { &.colorWeak {
filter: invert(80%); filter: invert(80%);
} }
} }
//修改antd header 行高 //修改antd header 行高
.ant-layout-header { .ant-layout-header {
height: 50px !important; height: 50px !important;
line-height: 50px !important; line-height: 50px !important;
} }
//修改menu行高 .ant-layout.ant-layout-has-sider > .ant-layout,
.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title { .ant-layout.ant-layout-has-sider > .ant-layout-content {
height: 35px !important; overflow: hidden;
line-height: 35px !important; }
} .ant-layout-content {
overflow: auto;
//修改menu行高 .ant-spin-container {
.ant-menu-sub.ant-menu-inline > .ant-menu-item, .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title { // min-width: 400px;
height: 35px !important; }
line-height: 35px !important; }
}
.ant-card-body {
//调整table行高 padding: 5px !important;
.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td { }
padding-bottom: 5px !important;
padding-top: 5px !important;
font-size: 13px;
} //列表页样式调整
.ant-advanced-search-form {
margin-bottom: 5px !important;
.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td { padding: 3px !important;
padding-bottom: 5px !important; background: #fbfbfb;
padding-top: 5px !important; border: 1px solid #d9d9d9;
} border-radius: 6px;
}
.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th {
padding-bottom: 6px !important; .ant-table-selection-column {
padding-top: 6px !important; min-width: 45px !important;
} width: 45px !important;
}
.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th {
padding-bottom: 6px !important; .cust-table-operator {
padding-top: 6px !important; float: right;
} }
.ant-card-body { .cust-pagination {
padding: 5px !important; float: right;
} margin-top: -6px !important;
}
.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td {
padding-bottom: 5px !important; //列表页样式
padding-top: 5px !important; .cust-list-cart {
font-size: 13px; margin: 0px 0px 0px 0px !important;
} }
.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th { .cust-list-cart .ant-table-footer {
padding-bottom: 6px !important; padding: 0px 10px;
padding-top: 6px !important; height: 37px;
} line-height: 37px;
}
//列表页样式调整
.ant-advanced-search-form { .cust-list-cart .ant-row .ant-form-item {
margin-bottom: 5px !important; margin-bottom: 5px !important;
padding: 3px !important; }
background: #fbfbfb;
border: 1px solid #d9d9d9; .cust-list-cart .ant-table-title {
border-radius: 6px; padding: 0px 10px 0px 10px !important;
} height: 45px;
line-height: 45px;
.ant-table-selection-column{ border-bottom: 0px !important;
min-width: 45px !important; background: #fbfbfb;
width: 45px !important; }
}
.cust-list-cart .ant-table-content {
clear: both;
.cust-table-operator { }
float: right
} //自定义卡片样式
.cust-normal-card {
.cust-pagination { margin: 5px !important;
float: right; }
margin-top: -6px !important;
} .cust-normal-card .ant-card-head-title {
padding: 0px;
//列表页样式 font-weight: bold !important;
.cust-list-cart { font-size: 15px;
margin: 0px 0px 0px 0px !important; line-height: 40px;
} }
.cust-list-cart .ant-table-footer { .cust-normal-card .ant-card-extra {
padding: 0px 10px; padding: 0px;
height: 37px; line-height: 40px;
line-height: 37px; }
}
.cust-normal-card .ant-card-head {
.cust-list-cart .ant-row .ant-form-item { background: #f8f8ff;
margin-bottom: 5px !important; min-height: 30px;
} padding: 0px 10px !important;
}
.cust-list-cart .ant-table-title {
padding: 0px 10px 0px 10px !important; .cust-normal-card .ant-card-body {
height: 45px; padding: 5px !important;
line-height: 45px; }
border-bottom: 0px !important;
background: #fbfbfb; //自定义form input 提示样式
} .cust-normal-card .ant-form-explain {
font-size: 12px;
.cust-list-cart .ant-table-content { line-height: 14px;
clear: both; }
}
.cust-normal-card .ant-form-item-with-help {
//自定义卡片样式 margin-bottom: 0px !important;
.cust-normal-card { }
margin: 5px !important;
} //自定义弹出dialog样式
.cust-modal {
.cust-normal-card .ant-card-head-title { .ant-modal-body {
padding: 0px; padding: 10px;
font-weight: bold !important; }
font-size: 15px; .ant-form-explain {
line-height: 40px;
}
.cust-normal-card .ant-card-extra {
padding: 0px;
line-height: 40px;
}
.cust-normal-card .ant-card-head {
background: #F8F8FF;
min-height: 30px;
padding: 0px 10px !important;
}
.cust-normal-card .ant-card-body {
padding: 5px !important;
}
//自定义form input 提示样式
.cust-normal-card .ant-form-explain {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 16px;
height: 16px;
} }
.cust-normal-card .ant-form-item-with-help { .ant-form-item-with-help {
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
.cust-normal-card .ant-row { .ant-form-item {
height: 40px;
}
.cust-normal-card .ant-form-item {
margin-bottom: 14px; margin-bottom: 14px;
} }
}
//自定义弹出dialog样式
.cust-modal{ //自定义明细form
.ant-modal-body{ .cust-detail-form {
padding: 10px; padding-top: 45px !important;
} }
.ant-form-explain {
font-size: 12px; .cust-card-table {
line-height: 16px; padding-bottom: 10px;
height: 16px; }
} //原有样式
.layout {
.ant-form-item-with-help { min-height: 100vh;
margin-bottom: 0px !important; overflow-x: hidden;
}
&.mobile {
.ant-form-item { .ant-layout-content {
margin-bottom: 14px; .content {
} margin: 24px 0 0;
}
//自定义明细form
.cust-detail-form {
padding-top: 45px !important;
}
.cust-title {
font-size: 16px;
font-weight: bold;
color: #473C8B;
}
.cust-card-table{
padding-bottom: 10px;
}
//原有样式
.layout {
min-height: 100vh;
overflow-x: hidden;
&.mobile {
.ant-layout-content {
.content {
margin: 24px 0 0;
}
} }
}
/** /**
* ant-table-wrapper * ant-table-wrapper
* 覆盖的表格手机模式样式，如果想修改在手机上表格最低宽度，可以在这里改动 * 覆盖的表格手机模式样式，如果想修改在手机上表格最低宽度，可以在这里改动
*/ */
.ant-table-wrapper { .ant-table-wrapper {
.ant-table-content { .ant-table-content {
overflow-y: auto; overflow-y: auto;
}
.ant-table-body {
min-width: 800px;
}
} }
.sidemenu { .ant-table-body {
.ant-header-fixedHeader { min-width: 800px;
&.ant-header-side-opened, &.ant-header-side-closed {
width: 100%
}
}
} }
.topmenu {
/* 必须为 topmenu 才能启用流式布局 */
&.content-width-Fluid {
.header-index-wide {
margin-left: 0;
}
}
}
}
&.ant-layout-has-sider {
flex-direction: row;
} }
.trigger { .sidemenu {
font-size: 20px;
line-height: 50px;
padding: 0 24px;
cursor: pointer;
transition: color .3s;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
.topmenu {
.ant-header-fixedHeader { .ant-header-fixedHeader {
position: fixed; &.ant-header-side-opened,
top: 0;
right: 0;
z-index: 9;
width: 100%;
transition: width .2s;
&.ant-header-side-opened {
width: 100%;
}
&.ant-header-side-closed { &.ant-header-side-closed {
width: 100%; width: 100%;
} }
} }
}
.topmenu {
/* 必须为 topmenu 才能启用流式布局 */ /* 必须为 topmenu 才能启用流式布局 */
&.content-width-Fluid { &.content-width-Fluid {
.header-index-wide { .header-index-wide {
max-width: unset; margin-left: 0;
margin-left: 24px;
}
.page-header-index-wide {
max-width: unset;
} }
} }
} }
}
.sidemenu { &.ant-layout-has-sider {
.ant-header-fixedHeader { flex-direction: row;
position: fixed; }
top: 0;
right: 0;
z-index: 9;
width: 100%;
transition: width .2s;
&.ant-header-side-opened {
width: calc(100% - 213px)
}
&.ant-header-side-closed { .trigger {
width: calc(100% - 80px) font-size: 20px;
} line-height: 50px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
.sidemenu {
.ant-header-fixedHeader {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: 100%;
transition: width 0.2s;
&.ant-header-side-opened {
width: calc(100% - 213px);
} }
&.ant-header-side-closed {
width: calc(100% - 80px);
}
} }
}
.header {
height: 50px;
padding: 0 12px 0 0;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
position: relative;
}
.header { .header,
height: 50px; .top-nav-header-index {
padding: 0 12px 0 0; .breadcrumb {
background: transparent; float: left;
background-color: whitesmoke; line-height: 50px;
//box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
position: relative;
} }
.header, .top-nav-header-index { .user-wrapper {
.breadcrumb { float: right;
float: left; height: 100%;
line-height: 50px;
}
.user-wrapper { .action {
float: right; cursor: pointer;
padding: 0 12px;
display: inline-block;
transition: all 0.3s;
height: 100%; height: 100%;
.action { &:hover {
cursor: pointer; background: rgba(0, 0, 0, 0.025);
padding: 0 12px; }
display: inline-block;
transition: all .3s;
height: 100%;
&:hover { .avatar {
background: rgba(0, 0, 0, 0.025); margin: 12px 8px 20px 0;
} color: #1890ff;
background: hsla(0, 0%, 100%, 0.85);
vertical-align: middle;
}
.avatar { .icon {
margin: 12px 8px 20px 0; font-size: 16px;
color: #1890ff; padding: 4px;
background: hsla(0, 0%, 100%, .85); }
vertical-align: middle; }
} }
&.dark {
.user-wrapper {
.action {
color: rgba(255, 255, 255, 0.85);
.icon { &:hover {
font-size: 16px; background: rgba(255, 255, 255, 0.16);
padding: 4px;
} }
} }
} }
}
}
&.dark { &.mobile {
.user-wrapper { .top-nav-header-index {
.header-index-wide {
.action { .header-index-left {
.trigger {
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
padding: 0 12px;
}
&:hover { .logo.top-nav-header {
background: rgba(255, 255, 255, 0.16); text-align: center;
} width: 56px;
line-height: 58px;
} }
} }
} }
}
&.mobile {
.top-nav-header-index {
&.light {
.header-index-wide { .header-index-wide {
.header-index-left { .header-index-left {
.trigger { .trigger {
color: rgba(255, 255, 255, 0.85); color: rgba(0, 0, 0, 0.65);
padding: 0 12px;
}
.logo.top-nav-header {
text-align: center;
width: 56px;
line-height: 58px;
} }
} }
} }
&.light {
.header-index-wide {
.header-index-left {
.trigger {
color: rgba(0, 0, 0, 0.65);
}
}
}
//
}
} }
} }
}
&.tablet { &.tablet {
// overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
.top-nav-header-index { .top-nav-header-index {
.header-index-wide {
.header-index-wide { .header-index-left {
.logo > a {
.header-index-left { overflow: hidden;
.logo > a { text-overflow: ellipsis;
overflow: hidden; white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
} }
} }
} }
}
.top-nav-header-index {
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
position: relative;
transition: background 0.3s, width 0.2s;
.top-nav-header-index { .header-index-wide {
box-shadow: 0 1px 4px rgba(0, 21, 41, .08); max-width: 1200px;
position: relative; margin: auto;
transition: background .3s, width .2s; padding-left: 0;
display: flex;
height: 50px;
.header-index-wide { .ant-menu.ant-menu-horizontal {
max-width: 1200px; border: none;
margin: auto;
padding-left: 0;
display: flex;
height: 50px; height: 50px;
line-height: 50px;
}
.ant-menu.ant-menu-horizontal { .header-index-left {
border: none; flex: 1 1;
display: flex;
.logo.top-nav-header {
width: 165px;
height: 50px; height: 50px;
position: relative;
line-height: 50px; line-height: 50px;
} transition: all 0.3s;
overflow: hidden;
.header-index-left {
flex: 1 1;
display: flex;
.logo.top-nav-header {
width: 165px;
height: 50px;
position: relative;
line-height: 50px;
transition: all .3s;
overflow: hidden;
img { img {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
height: 32px; height: 32px;
} }
h1 { h1 {
color: #fff; color: #fff;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
font-size: 14px; font-size: 14px;
margin: 0 0 0 12px; margin: 0 0 0 12px;
font-weight: 400; font-weight: 400;
}
} }
} }
}
.header-index-right { .header-index-right {
float: right; float: right;
height: 50px; height: 50px;
overflow: hidden; overflow: hidden;
}
} }
}
&.light { &.light {
background-color: #fff; background-color: #fff;
.header-index-wide { .header-index-wide {
.header-index-left { .header-index-left {
.logo { .logo {
h1 { h1 {
color: #002140; color: #002140;
}
} }
} }
} }
} }
} }
}
// 内容区
.layout-content {
margin: 24px 24px 0px;
height: 100%;
height: 50px;
padding: 0 12px 0 0;
}
}
// 内容区 .topmenu {
.layout-content { .page-header-index-wide {
margin: 24px 24px 0px; max-width: 1200px;
height: 100%; margin: 0 auto;
height: 50px; }
padding: 0 12px 0 0; }
}
// drawer-sider 自定义
.ant-drawer.drawer-sider {
.sider {
box-shadow: none;
} }
.topmenu { &.dark {
.page-header-index-wide { .ant-drawer-content {
max-width: 1200px; background-color: rgb(0, 21, 41);
margin: 0 auto;
} }
} }
// drawer-sider 自定义 &.light {
.ant-drawer.drawer-sider { box-shadow: none;
.sider {
box-shadow: none;
}
&.dark { .ant-drawer-content {
.ant-drawer-content { background-color: #fff;
background-color: rgb(0, 21, 41);
}
} }
}
&.light { .ant-drawer-body {
box-shadow: none; padding: 0;
}
}
.ant-drawer-content { // 菜单样式
background-color: #fff; .sider {
} box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
} position: relative;
z-index: 10;
.ant-drawer-body { &.ant-fixed-sidemenu {
padding: 0 position: fixed;
} height: 100%;
} }
// 菜单样式 .logo {
.sider { height: 50px;
//box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
position: relative; position: relative;
z-index: 10; line-height: 50px;
padding-left: 24px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
background: #002140;
overflow: hidden;
&.ant-fixed-sidemenu { img,
position: fixed; h1 {
height: 100%; display: inline-block;
vertical-align: middle;
} }
.logo { img {
height: 50px; height: 25px;
position: relative;
line-height: 50px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
background: #002140;
overflow: hidden;
img, h1 {
display: inline-block;
vertical-align: middle;
}
img {
height: 25px;
}
h1 {
color: #fff;
font-size: 16px;
margin: 0 0 0 12px;
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/*font-weight: 600;*/
}
} }
&.light { h1 {
background-color: #fff; color: #fff;
//box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05); font-size: 16px;
margin: 0 0 0 12px;
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont,
"Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
"Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol";
/*font-weight: 600;*/
}
}
.logo { &.light {
background: #fff; background-color: #fff;
//box-shadow: 1px 1px 0px 0px #e8e8e8; box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05);
h1 { .logo {
color: unset; background: #fff;
} box-shadow: 1px 1px 0px 0px #e8e8e8;
}
.ant-menu-light { h1 {
border-right-color: transparent; color: unset;
} }
} }
} .ant-menu-light {
border-right-color: transparent;
// 外置的样式控制
.user-dropdown-menu-wrapper.ant-dropdown-menu {
padding: 4px 0;
.ant-dropdown-menu-item {
width: 160px;
} }
}
}
.ant-dropdown-menu-item > .anticon:first-child, // 外置的样式控制
.ant-dropdown-menu-item > a > .anticon:first-child, .user-dropdown-menu-wrapper.ant-dropdown-menu {
.ant-dropdown-menu-submenu-title > .anticon:first-child padding: 4px 0;
.ant-dropdown-menu-submenu-title > a > .anticon:first-child {
min-width: 12px;
margin-right: 8px;
}
.ant-dropdown-menu-item {
width: 160px;
} }
// 数据列表 样式 .ant-dropdown-menu-item > .anticon:first-child,
.table-alert { .ant-dropdown-menu-item > a > .anticon:first-child,
margin-bottom: 16px; .ant-dropdown-menu-submenu-title
> .anticon:first-child
.ant-dropdown-menu-submenu-title
> a
> .anticon:first-child {
min-width: 12px;
margin-right: 8px;
} }
}
.table-page-search-wrapper { .table-page-search-wrapper {
.ant-form-inline {
.ant-form-inline { .ant-form-item {
display: flex;
.ant-form-item { margin-bottom: 24px;
display: flex; margin-right: 0;
margin-bottom: 24px;
margin-right: 0;
.ant-form-item-control-wrapper {
flex: 1 1;
display: inline-block;
vertical-align: middle;
}
> .ant-form-item-label { .ant-form-item-control-wrapper {
line-height: 32px; flex: 1 1;
padding-right: 8px; display: inline-block;
width: auto; vertical-align: middle;
} }
.ant-form-item-control { > .ant-form-item-label {
height: 32px; line-height: 32px;
line-height: 32px; padding-right: 8px;
} width: auto;
} }
}
.table-page-search-submitButtons { .ant-form-item-control {
display: block; height: 32px;
margin-bottom: 24px; line-height: 32px;
white-space: nowrap; }
} }
} }
.content { .table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
}
.table-operator { .content {
margin-bottom: 18px; .table-operator {
margin-bottom: 18px;
button { button {
margin-right: 8px; margin-right: 8px;
}
} }
} }
}
//富文本编辑框默认样式 //富文本编辑框默认样式
.ql-container { .ql-container {
min-height: 100px; min-height: 100px;
} }
.quill-editor {
margin-bottom: 10px;
}
/** /**
* 自动异常超长字段 * 自动异常超长字段
*/ */
.white-space-content { .white-space-content {
table-layout: fixed; table-layout: fixed;
max-width: 400px; max-width: 400px;
overflow:hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
white-space:nowrap; white-space: nowrap;
} }
/*.white-space-content:hover{*/ /*.white-space-content:hover{*/
/*max-width: 600px;*/ /*max-width: 600px;*/
/*white-space: normal;*/ /*white-space: normal;*/
/*overflow: visible;*/ /*overflow: visible;*/
/*}*/ /*}*/
/** /**
* 百度地图 * 百度地图
*/ */
#baiduMap { #baiduMap {
font-family: 'Avenir', Helvetica, Arial, sans-serif; font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
} }
#allmap{ #allmap {
height: 600px; height: 600px;
width: auto; width: auto;
overflow: hidden; overflow: hidden;
}
}
.ant-input-disabled {
color: rgba(109, 103, 103, 0.85) !important;
}
.ant-select-disabled {
color: rgba(109, 103, 103, 0.85) !important;
}
/*页码选中样式*/
#components-pagination-demo-mini .ant-pagination:not(:last-child) {
margin-bottom: 24px;
}
.bg-row {
background-color: lightgrey;
}
</style> </style>
\ No newline at end of file
src/defaultSettings.js
View file @ 2c1be876
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
export default { export default {
primaryColor: '#3A62D7', // primary color of ant design primaryColor: '#3A62D7', // primary color of ant design
navTheme: 'light', // theme for nav menu navTheme: 'dark', // theme for nav menu
layout: 'sidemenu', // nav menu position: sidemenu or topmenu layout: 'sidemenu', // nav menu position: sidemenu or topmenu
contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
fixedHeader: true, // sticky header fixedHeader: true, // sticky header
......
src/store/modules/app.js
View file @ 2c1be876
...@@ -18,7 +18,7 @@ const app = { ...@@ -18,7 +18,7 @@ const app = {
withoutAnimation: false withoutAnimation: false
}, },
device: 'desktop', device: 'desktop',
theme: '', theme: 'dark',
layout: '', layout: '',
contentWidth: '', contentWidth: '',
fixedHeader: false, fixedHeader: false,
......
src/views/user/Login.vue
View file @ 2c1be876
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
> >
<div style="width: 600px; margin-left: 150px"> <div style="width: 600px; margin-left: 150px">
<div class="aaa">欢迎使用</div> <div class="aaa">欢迎使用</div>
<div class="bbb">服务预约管理系统</div> <div class="bbb">城市匠人管理系统</div>
<div style="height: 50px"></div> <div style="height: 50px"></div>
<a-form class="user-layout-login" @submit="handleSubmit" :form="form"> <a-form class="user-layout-login" @submit="handleSubmit" :form="form">
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
{ {
initialValue: '', initialValue: '',
rules: [ rules: [
{ required: true, message: '请输入帐户名或邮箱地址' }, { required: true, message: '请输入用户名' },
{ validator: this.handleUsernameOrEmail }, { validator: this.handleUsernameOrEmail },
], ],
}, },
...@@ -74,14 +74,12 @@ ...@@ -74,14 +74,12 @@
import { mapActions } from "vuex"; import { mapActions } from "vuex";
import { initRouterTree } from "@/router/router.config"; import { initRouterTree } from "@/router/router.config";
import notification from "ant-design-vue/es/notification"; import notification from "ant-design-vue/es/notification";
// import {timeFix} from "../../util/util"
export default { export default {
data() { data() {
return { return {
customActiveKey: "tab1", customActiveKey: "tab1",
loginBtn: false, loginBtn: false,
// login type: 0 email, 1 username, 2 telephone
loginType: 1, loginType: 1,
form: this.$form.createForm(this), form: this.$form.createForm(this),
state: { state: {
......
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