262 lines
9.4 KiB
Vue
262 lines
9.4 KiB
Vue
|
<template>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="search-area">
|
|||
|
|
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
|||
|
|
<FormItem prop="user" label="站点名称：">
|
|||
|
|
<Input type="text" v-model="formInline.user" placeholder="" />
|
|||
|
|
</FormItem>
|
|||
|
|
<FormItem>
|
|||
|
|
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
|||
|
|
</FormItem>
|
|||
|
|
</Form>
|
|||
|
|
</div>
|
|||
|
|
<div class="action-btn">
|
|||
|
|
<Button type="primary" @click="show_modal = true">添加</Button>
|
|||
|
|
<!-- <Button type="error">删除</Button> -->
|
|||
|
|
</div>
|
|||
|
|
<div class="table-container">
|
|||
|
|
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
|||
|
|
<template #action="{ row, index }">
|
|||
|
|
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
|
|||
|
|
<Button type="error" size="small" @click="remove(index)">删除</Button>
|
|||
|
|
</template>
|
|||
|
|
</Table>
|
|||
|
|
<Page :total="total" show-total show-sizer class="page" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 添加、编辑 -->
|
|||
|
|
<Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok"
|
|||
|
|
@on-cancel="cancel">
|
|||
|
|
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
|||
|
|
<FormItem label="Name" prop="name">
|
|||
|
|
<Input v-model="formValidate.name" placeholder="Enter your name" />
|
|||
|
|
</FormItem>
|
|||
|
|
<FormItem label="E-mail" prop="mail">
|
|||
|
|
<Input v-model="formValidate.mail" placeholder="Enter your e-mail" />
|
|||
|
|
</FormItem>
|
|||
|
|
<FormItem label="City" prop="city">
|
|||
|
|
<Select v-model="formValidate.city" placeholder="Select your city">
|
|||
|
|
<Option value="beijing">New York</Option>
|
|||
|
|
<Option value="shanghai">London</Option>
|
|||
|
|
<Option value="shenzhen">Sydney</Option>
|
|||
|
|
</Select>
|
|||
|
|
</FormItem>
|
|||
|
|
<FormItem label="Date">
|
|||
|
|
<Row>
|
|||
|
|
<Col span="11">
|
|||
|
|
<DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
|
|||
|
|
</Col>
|
|||
|
|
<Col span="2" style="text-align: center">-</Col>
|
|||
|
|
<Col span="11">
|
|||
|
|
<TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</FormItem>
|
|||
|
|
<FormItem label="Gender" prop="gender">
|
|||
|
|
<RadioGroup v-model="formValidate.gender">
|
|||
|
|
<Radio label="male">Male</Radio>
|
|||
|
|
<Radio label="female">Female</Radio>
|
|||
|
|
</RadioGroup>
|
|||
|
|
</FormItem>
|
|||
|
|
<FormItem label="Hobby" prop="interest">
|
|||
|
|
<CheckboxGroup v-model="formValidate.interest">
|
|||
|
|
<Checkbox label="Eat"></Checkbox>
|
|||
|
|
<Checkbox label="Sleep"></Checkbox>
|
|||
|
|
<Checkbox label="Run"></Checkbox>
|
|||
|
|
<Checkbox label="Movie"></Checkbox>
|
|||
|
|
</CheckboxGroup>
|
|||
|
|
</FormItem>
|
|||
|
|
<FormItem label="Desc" prop="desc">
|
|||
|
|
<Input v-model="formValidate.desc" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
|
|||
|
|
placeholder="Enter something..." />
|
|||
|
|
</FormItem>
|
|||
|
|
<FormItem>
|
|||
|
|
<Button type="primary" @click="handleSubmit2('formValidate')">Submit</Button>
|
|||
|
|
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
|
|||
|
|
</FormItem>
|
|||
|
|
</Form>
|
|||
|
|
</Modal>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { GetPerPrice } from '@/api'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'charging_station',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
show_modal: false,
|
|||
|
|
total: 100,
|
|||
|
|
tableHeight: 500,
|
|||
|
|
formInline: {
|
|||
|
|
user: '',
|
|||
|
|
password: '',
|
|||
|
|
},
|
|||
|
|
ruleInline: {},
|
|||
|
|
columns: [
|
|||
|
|
{
|
|||
|
|
title: '站点名称',
|
|||
|
|
key: 'charge_station_name',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '电费',
|
|||
|
|
key: 'ElectricityFee',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '服务费',
|
|||
|
|
key: 'ServiceFee',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '操作',
|
|||
|
|
slot: 'action',
|
|||
|
|
width: 150,
|
|||
|
|
align: 'center',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
data: [],
|
|||
|
|
formValidate: {
|
|||
|
|
name: '',
|
|||
|
|
mail: '',
|
|||
|
|
city: '',
|
|||
|
|
gender: '',
|
|||
|
|
interest: [],
|
|||
|
|
date: '',
|
|||
|
|
time: '',
|
|||
|
|
desc: '',
|
|||
|
|
},
|
|||
|
|
ruleValidate: {
|
|||
|
|
name: [
|
|||
|
|
{ required: true, message: 'The name cannot be empty', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
mail: [
|
|||
|
|
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
|
|||
|
|
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
city: [
|
|||
|
|
{ required: true, message: 'Please select the city', trigger: 'change' },
|
|||
|
|
],
|
|||
|
|
gender: [
|
|||
|
|
{ required: true, message: 'Please select gender', trigger: 'change' },
|
|||
|
|
],
|
|||
|
|
interest: [
|
|||
|
|
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
|
|||
|
|
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' },
|
|||
|
|
],
|
|||
|
|
date: [
|
|||
|
|
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' },
|
|||
|
|
],
|
|||
|
|
time: [
|
|||
|
|
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' },
|
|||
|
|
],
|
|||
|
|
desc: [
|
|||
|
|
{ required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
|
|||
|
|
{ type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getList()
|
|||
|
|
this.calculateTableHeight()
|
|||
|
|
window.addEventListener('resize', this.calculateTableHeight)
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
window.removeEventListener('resize', this.calculateTableHeight)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
calculateTableHeight() {
|
|||
|
|
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
|||
|
|
const searchHeight = document.querySelector('.search-area').offsetHeight
|
|||
|
|
const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
|
|||
|
|
const pageHeight = 32 // 分页组件大约高度
|
|||
|
|
const margins = 40 // 上下边距总和
|
|||
|
|
this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
|
|||
|
|
},
|
|||
|
|
async getList() {
|
|||
|
|
await GetPerPrice({ page: 1 }).then((res) => {
|
|||
|
|
this.total = res.total
|
|||
|
|
|
|||
|
|
this.data = res.yuan
|
|||
|
|
this.page = res.current_page
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleSubmit(name) {
|
|||
|
|
this.$refs[name].validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
this.$Message.success('Success!')
|
|||
|
|
} else {
|
|||
|
|
this.$Message.error('Fail!')
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleReset(name) {
|
|||
|
|
this.$refs[name].resetFields()
|
|||
|
|
},
|
|||
|
|
handleSubmit2(name) {
|
|||
|
|
this.$refs[name].validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
this.$Message.success('Success!')
|
|||
|
|
} else {
|
|||
|
|
this.$Message.error('Fail!')
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
show(index) {
|
|||
|
|
this.$Modal.info({
|
|||
|
|
title: 'User Info',
|
|||
|
|
content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`,
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
remove(index) {
|
|||
|
|
this.data.splice(index, 1)
|
|||
|
|
},
|
|||
|
|
ok() {
|
|||
|
|
this.$Message.info('Clicked ok')
|
|||
|
|
},
|
|||
|
|
cancel() {
|
|||
|
|
this.$Message.info('Clicked cancel')
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
.container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 100vh;
|
|||
|
|
padding: 20px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
margin: 20px 0;
|
|||
|
|
background-color: white;
|
|||
|
|
padding: 20px;
|
|||
|
|
border: 1px solid #F3F7FD;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
button {
|
|||
|
|
margin-right: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-container {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
.search-area{
|
|||
|
|
background-color: white;
|
|||
|
|
padding-top: 20px;
|
|||
|
|
border: 1px solid #F3F7FD;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
}
|
|||
|
|
</style>
|