11 changed files with 903 additions and 5 deletions
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
@ -0,0 +1,212 @@ |
|||
<template> |
|||
<div> |
|||
<div class="crumbs"> |
|||
<el-breadcrumb separator="/"> |
|||
<el-breadcrumb-item> |
|||
<i class="el-icon-lx-cascades"></i> 平台管理 |
|||
</el-breadcrumb-item> |
|||
<el-breadcrumb-item>运营账号管理</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</div> |
|||
<div class="container banner_title"> |
|||
<router-link to="/operationAccountManagement"> |
|||
<div class="banner_title_item"> |
|||
<img src="../../../../assets/img/accountList.png" alt="" class="photo"> |
|||
<p>账号列表</p> |
|||
</div> |
|||
</router-link> |
|||
<div class="banner_title_item"> |
|||
<img src="../../../../assets/img/creatAccount.png" alt="" class="preview"> |
|||
<p>创建账号</p> |
|||
</div> |
|||
<router-link to="/operationAccountManagement/operationalRole"> |
|||
<div class="banner_title_item"> |
|||
<img src="../../../../assets/img/operationalRole.png" alt="" class="preview"> |
|||
<p>运营角色</p> |
|||
</div> |
|||
</router-link> |
|||
<router-link to="/operationAccountManagement/roleSet"> |
|||
<div class="banner_title_item"> |
|||
<img src="../../../../assets/img/roleSet.png" alt="" class="preview"> |
|||
<p>角色权限</p> |
|||
</div> |
|||
</router-link> |
|||
</div> |
|||
<div class="container banner_content"> |
|||
<router-view></router-view> |
|||
</div> |
|||
<!-- 编辑弹出框 --> |
|||
<el-dialog title="编辑" :visible.sync="editVisible" width="30%"> |
|||
<el-form ref="form" :model="form" label-width="70px"> |
|||
<el-form-item label="用户名"> |
|||
<el-input v-model="form.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="地址"> |
|||
<el-input v-model="form.address"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="editVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="saveEdit">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { fetchData } from '../../../../api/index'; |
|||
export default { |
|||
name: 'operationAccountManagement', |
|||
data() { |
|||
return { |
|||
query: { |
|||
address: '', |
|||
name: '', |
|||
pageIndex: 1, |
|||
pageSize: 10 |
|||
}, |
|||
tableData: [], |
|||
multipleSelection: [], |
|||
delList: [], |
|||
editVisible: false, |
|||
pageTotal: 0, |
|||
form: {}, |
|||
idx: -1, |
|||
id: -1, |
|||
pickerOptions: { |
|||
shortcuts: [ |
|||
{ |
|||
text: "最近一周", |
|||
onClick(picker) { |
|||
const end = new Date(); |
|||
const start = new Date(); |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|||
picker.$emit("pick", [start, end]); |
|||
}, |
|||
}, |
|||
{ |
|||
text: "最近一个月", |
|||
onClick(picker) { |
|||
const end = new Date(); |
|||
const start = new Date(); |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|||
picker.$emit("pick", [start, end]); |
|||
}, |
|||
}, |
|||
{ |
|||
text: "最近三个月", |
|||
onClick(picker) { |
|||
const end = new Date(); |
|||
const start = new Date(); |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
|||
picker.$emit("pick", [start, end]); |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
// 获取 easy-mock 的模拟数据 |
|||
getData() { |
|||
fetchData(this.query).then(res => { |
|||
// console.log(res); |
|||
this.tableData = res.list; |
|||
this.pageTotal = res.pageTotal || 50; |
|||
}); |
|||
}, |
|||
// 触发搜索按钮 |
|||
handleSearch() { |
|||
this.$set(this.query, 'pageIndex', 1); |
|||
this.getData(); |
|||
}, |
|||
// 删除操作 |
|||
handleDelete(index, row) { |
|||
// 二次确认删除 |
|||
this.$confirm('确定要删除吗？', '提示', { |
|||
type: 'warning' |
|||
}) |
|||
.then(() => { |
|||
this.$message.success('删除成功'); |
|||
this.tableData.splice(index, 1); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
// 多选操作 |
|||
handleSelectionChange(val) { |
|||
this.multipleSelection = val; |
|||
}, |
|||
// 编辑操作 |
|||
handleEdit(index, row) { |
|||
this.idx = index; |
|||
this.form = row; |
|||
this.editVisible = true; |
|||
}, |
|||
// 保存编辑 |
|||
saveEdit() { |
|||
this.editVisible = false; |
|||
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
|||
this.$set(this.tableData, this.idx, this.form); |
|||
}, |
|||
// 分页导航 |
|||
handlePageChange(val) { |
|||
this.$set(this.query, 'pageIndex', val); |
|||
this.getData(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
.banner_content{ |
|||
margin-top: 20px; |
|||
} |
|||
.banner_title{ |
|||
display: flex; |
|||
padding-left: 80px; |
|||
} |
|||
.banner_title_item { |
|||
text-align: center; |
|||
margin-right: 100px; |
|||
} |
|||
.photo{ |
|||
width: 60px; |
|||
height: 55px; |
|||
} |
|||
.preview{ |
|||
width: 60px; |
|||
height: 60px; |
|||
} |
|||
.handle-box { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.handle-select { |
|||
width: 120px; |
|||
} |
|||
|
|||
.handle-input { |
|||
width: 150px; |
|||
display: inline-block; |
|||
} |
|||
.table { |
|||
width: 100%; |
|||
font-size: 14px; |
|||
} |
|||
.red { |
|||
color: #ff0000; |
|||
} |
|||
.mr10 { |
|||
margin-right: 10px; |
|||
} |
|||
.table-td-thumb { |
|||
display: block; |
|||
margin: auto; |
|||
width: 40px; |
|||
height: 40px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,238 @@ |
|||
<template> |
|||
<div> |
|||
<div class="handle-box"> |
|||
<el-input placeholder="请输入机构名称" class="handle-input mr10"></el-input> |
|||
<el-input placeholder="请输入登录账号" class="handle-input mr10"></el-input> |
|||
<el-select placeholder="部门名称" class="handle-select mr10"> |
|||
<el-option key="1" label="广东省" value="广东省"></el-option> |
|||
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
|||
</el-select> |
|||
<el-select placeholder="职位名称" class="handle-select mr10"> |
|||
<el-option key="1" label="广东省" value="广东省"></el-option> |
|||
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
|||
</el-select> |
|||
<el-select placeholder="账号角色" class="handle-select mr10"> |
|||
<el-option key="1" label="广东省" value="广东省"></el-option> |
|||
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
|||
</el-select> |
|||
<el-select placeholder="账号状态" class="handle-select mr10"> |
|||
<el-option key="1" label="广东省" value="广东省"></el-option> |
|||
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
|||
</el-select> |
|||
<el-date-picker |
|||
class="mr10" |
|||
v-model="query.time" |
|||
type="datetimerange" |
|||
:picker-options="pickerOptions" |
|||
range-separator="至" |
|||
value-format="yyyy-MM-dd h:m:s" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
align="right" |
|||
> |
|||
</el-date-picker> |
|||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
|||
</div> |
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
class="table" |
|||
ref="multipleTable" |
|||
header-cell-class-name="table-header" |
|||
@selection-change="handleSelectionChange" |
|||
> |
|||
<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column> |
|||
<el-table-column prop="name" label="创建时间"></el-table-column> |
|||
<el-table-column label="账户名称" prop="name"></el-table-column> |
|||
<el-table-column prop="address" label="登录账号"></el-table-column> |
|||
<el-table-column label="部门名称" prop="name"></el-table-column> |
|||
<el-table-column label="职位名称" prop="name"></el-table-column> |
|||
<el-table-column label="账号角色" prop="name"></el-table-column> |
|||
<el-table-column label="账号状态" prop="name"> |
|||
<template> |
|||
<el-switch |
|||
v-model="value1" |
|||
> |
|||
</el-switch> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="280" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="text" |
|||
@click="handleEdit(scope.$index, scope.row)" |
|||
>信息变更</el-button> |
|||
<el-button |
|||
type="text" |
|||
@click="handleDelete(scope.$index, scope.row)" |
|||
>重置密码</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="pagination"> |
|||
<el-pagination |
|||
background |
|||
layout="total, prev, pager, next" |
|||
:current-page="query.pageIndex" |
|||
:page-size="query.pageSize" |
|||
:total="pageTotal" |
|||
@current-change="handlePageChange" |
|||
></el-pagination> |
|||
</div> |
|||
|
|||
<!-- 编辑弹出框 --> |
|||
<el-dialog title="编辑" :visible.sync="editVisible" width="30%"> |
|||
<el-form ref="form" :model="form" label-width="70px"> |
|||
<el-form-item label="用户名"> |
|||
<el-input v-model="form.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="地址"> |
|||
<el-input v-model="form.address"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="editVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="saveEdit">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { fetchData } from '../../../../api/index'; |
|||
export default { |
|||
name:'operationList', |
|||
data() { |
|||
return { |
|||
query: { |
|||
address: '', |
|||
name: '', |
|||
pageIndex: 1, |
|||
pageSize: 10 |
|||
}, |
|||
value1:true, |
|||
tableData: [], |
|||
multipleSelection: [], |
|||
delList: [], |
|||
editVisible: false, |
|||
pageTotal: 0, |
|||
form: {}, |
|||
idx: -1, |
|||
id: -1, |
|||
pickerOptions: { |
|||
shortcuts: [ |
|||
{ |
|||
text: "最近一周", |
|||
onClick(picker) { |
|||
const end = new Date(); |
|||
const start = new Date(); |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|||
picker.$emit("pick", [start, end]); |
|||
}, |
|||
}, |
|||
{ |
|||
text: "最近一个月", |
|||
onClick(picker) { |
|||
const end = new Date(); |
|||
const start = new Date(); |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|||
picker.$emit("pick", [start, end]); |
|||
}, |
|||
}, |
|||
{ |
|||
text: "最近三个月", |
|||
onClick(picker) { |
|||
const end = new Date(); |
|||
const start = new Date(); |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
|||
picker.$emit("pick", [start, end]); |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
// 获取 easy-mock 的模拟数据 |
|||
getData() { |
|||
fetchData(this.query).then(res => { |
|||
// console.log(res); |
|||
this.tableData = res.list; |
|||
this.pageTotal = res.pageTotal || 50; |
|||
}); |
|||
}, |
|||
// 触发搜索按钮 |
|||
handleSearch() { |
|||
this.$set(this.query, 'pageIndex', 1); |
|||
this.getData(); |
|||
}, |
|||
// 删除操作 |
|||
handleDelete(index, row) { |
|||
// 二次确认删除 |
|||
this.$confirm('确定要删除吗？', '提示', { |
|||
type: 'warning' |
|||
}) |
|||
.then(() => { |
|||
this.$message.success('删除成功'); |
|||
this.tableData.splice(index, 1); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
// 多选操作 |
|||
handleSelectionChange(val) { |
|||
this.multipleSelection = val; |
|||
}, |
|||
// 编辑操作 |
|||
handleEdit(index, row) { |
|||
this.idx = index; |
|||
this.form = row; |
|||
this.editVisible = true; |
|||
}, |
|||
// 保存编辑 |
|||
saveEdit() { |
|||
this.editVisible = false; |
|||
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
|||
this.$set(this.tableData, this.idx, this.form); |
|||
}, |
|||
// 分页导航 |
|||
handlePageChange(val) { |
|||
this.$set(this.query, 'pageIndex', val); |
|||
this.getData(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.handle-box { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.handle-select { |
|||
width: 120px; |
|||
} |
|||
|
|||
.handle-input { |
|||
width: 150px; |
|||
display: inline-block; |
|||
} |
|||
.table { |
|||
width: 100%; |
|||
font-size: 14px; |
|||
} |
|||
.red { |
|||
color: #ff0000; |
|||
} |
|||
.mr10 { |
|||
margin-right: 10px; |
|||
} |
|||
.table-td-thumb { |
|||
display: block; |
|||
margin: auto; |
|||
width: 40px; |
|||
height: 40px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,265 @@ |
|||
<template> |
|||
<div> |
|||
<el-page-header @back="goBack" content="运营角色"></el-page-header> |
|||
<div class="body"> |
|||
<div class="body_left"> |
|||
<p class="body_left_title">部门名称</p> |
|||
<div class="body_left_content"> |
|||
<div class="body_left_content_item"> |
|||
<el-input placeholder="请输入机构名称" class="handle-input mr10"></el-input> |
|||
<i class="el-icon-remove-outline" style="color:red"></i> |
|||
</div> |
|||
<button class="body_add">+</button> |
|||
</div> |
|||
</div> |
|||
<div class="body_right"> |
|||
<div class="body_right_title"> |
|||
<div class="body_right_title_left">职位名称</div> |
|||
<div class="body_right_title_right">权限角色</div> |
|||
</div> |
|||
<div> |
|||
<div class="body_right_item"> |
|||
<el-input placeholder="请输入机构名称" class="handle-input mr10"></el-input> |
|||
<el-select placeholder="账号状态" class="handle-select mr10"> |
|||
<el-option key="1" label="广东省" value="广东省"></el-option> |
|||
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
|||
</el-select> |
|||
<i class="el-icon-remove-outline" style="color:red"></i> |
|||
</div> |
|||
</div> |
|||
<button class="body_add body_add1">+</button> |
|||
</div> |
|||
</div> |
|||
<el-button type="primary">保存</el-button> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { fetchData } from '../../../../api/index'; |
|||
export default { |
|||
name:'operationalRole', |
|||
data() { |
|||
return { |
|||
query: { |
|||
address: '', |
|||
name: '', |
|||
pageIndex: 1, |
|||
pageSize: 10 |
|||
}, |
|||
value1:true, |
|||
tableData: [], |
|||
multipleSelection: [], |
|||
delList: [], |
|||
editVisible: false, |
|||
pageTotal: 0, |
|||
form: {}, |
|||
idx: -1, |
|||
id: -1, |
|||
pickerOptions: { |
|||
shortcuts: [ |
|||
{ |
|||
text: "最近一周", |
|||
onClick(picker) { |
|||
const end = new Date(); |
|||
const start = new Date(); |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|||
picker.$emit("pick", [start, end]); |
|||
}, |
|||
}, |
|||
{ |
|||
text: "最近一个月", |
|||
onClick(picker) { |
|||
const end = new Date(); |
|||
const start = new Date(); |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|||
picker.$emit("pick", [start, end]); |
|||
}, |
|||
}, |
|||
{ |
|||
text: "最近三个月", |
|||
onClick(picker) { |
|||
const end = new Date(); |
|||
const start = new Date(); |
|||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
|||
picker.$emit("pick", [start, end]); |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
goBack(){ |
|||
this.$router.go(-1); |
|||
}, |
|||
// 获取 easy-mock 的模拟数据 |
|||
getData() { |
|||
fetchData(this.query).then(res => { |
|||
// console.log(res); |
|||
this.tableData = res.list; |
|||
this.pageTotal = res.pageTotal || 50; |
|||
}); |
|||
}, |
|||
// 触发搜索按钮 |
|||
handleSearch() { |
|||
this.$set(this.query, 'pageIndex', 1); |
|||
this.getData(); |
|||
}, |
|||
// 删除操作 |
|||
handleDelete(index, row) { |
|||
// 二次确认删除 |
|||
this.$confirm('确定要删除吗？', '提示', { |
|||
type: 'warning' |
|||
}) |
|||
.then(() => { |
|||
this.$message.success('删除成功'); |
|||
this.tableData.splice(index, 1); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
// 多选操作 |
|||
handleSelectionChange(val) { |
|||
this.multipleSelection = val; |
|||
}, |
|||
// 编辑操作 |
|||
handleEdit(index, row) { |
|||
this.idx = index; |
|||
this.form = row; |
|||
this.editVisible = true; |
|||
}, |
|||
// 保存编辑 |
|||
saveEdit() { |
|||
this.editVisible = false; |
|||
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
|||
this.$set(this.tableData, this.idx, this.form); |
|||
}, |
|||
// 分页导航 |
|||
handlePageChange(val) { |
|||
this.$set(this.query, 'pageIndex', val); |
|||
this.getData(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.el-button{ |
|||
width: 100px; |
|||
height: 35px; |
|||
margin-top: 20px; |
|||
} |
|||
.body_right_item >>> .mr10{ |
|||
margin-right: 0; |
|||
} |
|||
.body_right_item>>>.handle-input .el-input__inner{ |
|||
border-right: none; |
|||
border-radius: 4px 0px 0 4px; |
|||
} |
|||
.body_right_item>>>.el-select{ |
|||
width: 170px; |
|||
margin-right: 20px; |
|||
} |
|||
.body_right_item>>>.el-select .el-input--small .el-input__inner{ |
|||
height: 40px; |
|||
border-radius: 0px 4px 4px 0px; |
|||
} |
|||
.body_right_item{ |
|||
margin-bottom: 15px; |
|||
} |
|||
.body_right_title_left{ |
|||
width: 300px; |
|||
} |
|||
.body_right_title_right{ |
|||
width: 170px; |
|||
} |
|||
.body_right_title{ |
|||
display: flex; |
|||
margin-bottom: 15px; |
|||
} |
|||
.body_right_title>div{ |
|||
text-align: center; |
|||
} |
|||
.body_right{ |
|||
width: 600px; |
|||
padding: 20px 45px; |
|||
} |
|||
|
|||
.body_add{ |
|||
width: 300px; |
|||
height: 20px; |
|||
background: #CED7F6; |
|||
color: #4E73E4; |
|||
border: 1px solid #4E73E4; |
|||
} |
|||
.body_add1{ |
|||
width: 470px; |
|||
} |
|||
.body{ |
|||
border: 1px solid #D7D7D7; |
|||
margin-top: 20px; |
|||
display: flex; |
|||
width: 960px; |
|||
} |
|||
.body>div{ |
|||
min-height: 550px; |
|||
box-sizing: border-box; |
|||
} |
|||
.body_left{ |
|||
width: 360px; |
|||
border-right: 1px solid #D7D7D7; |
|||
padding: 20px 15px; |
|||
} |
|||
.body_left_title{ |
|||
text-align: center; |
|||
} |
|||
.body_left_content{ |
|||
margin-top: 15px; |
|||
} |
|||
.body_left_content_item{ |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 15px; |
|||
} |
|||
.body_left_content_item i,.body_right i{ |
|||
font-size: 20px; |
|||
} |
|||
.el-page-header>>> .el-page-header__left{ |
|||
color: #4E73E6; |
|||
} |
|||
.handle-box { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.handle-select { |
|||
width: 120px; |
|||
} |
|||
|
|||
.handle-input { |
|||
width: 300px; |
|||
height: 40px; |
|||
display: inline-block; |
|||
} |
|||
.handle-input>>> .el-input__inner{ |
|||
height: 40px; |
|||
} |
|||
.table { |
|||
width: 100%; |
|||
font-size: 14px; |
|||
} |
|||
.red { |
|||
color: #ff0000; |
|||
} |
|||
.mr10 { |
|||
margin-right: 10px; |
|||
} |
|||
.table-td-thumb { |
|||
display: block; |
|||
margin: auto; |
|||
width: 40px; |
|||
height: 40px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,133 @@ |
|||
<template> |
|||
<div> |
|||
<el-page-header @back="goBack" content="运营角色"></el-page-header> |
|||
<div class="form-box"> |
|||
<el-form ref="form" :model="form" label-width="80px"> |
|||
<el-form-item label="角色权限:"> |
|||
<el-select v-model="form.region" placeholder="请选择"> |
|||
<el-option key="bbk" label="步步高" value="bbk"></el-option> |
|||
<el-option key="xtc" label="小天才" value="xtc"></el-option> |
|||
<el-option key="imoo" label="imoo" value="imoo"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="账户名称:"> |
|||
<el-input v-model="form.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="登录账号:"> |
|||
<span>18083135555</span> |
|||
</el-form-item> |
|||
<el-form-item label="绑定手机:"> |
|||
<el-input v-model="form.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="账户类型:"> |
|||
<el-select v-model="form.region" placeholder="请选择"> |
|||
<el-option key="bbk" label="步步高" value="bbk"></el-option> |
|||
<el-option key="xtc" label="小天才" value="xtc"></el-option> |
|||
<el-option key="imoo" label="imoo" value="imoo"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="账号状态:"> |
|||
<el-select v-model="form.region" placeholder="请选择"> |
|||
<el-option key="bbk" label="步步高" value="bbk"></el-option> |
|||
<el-option key="xtc" label="小天才" value="xtc"></el-option> |
|||
<el-option key="imoo" label="imoo" value="imoo"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="onSubmit">保存</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
options: [ |
|||
{ |
|||
value: 'guangdong', |
|||
label: '广东省', |
|||
children: [ |
|||
{ |
|||
value: 'guangzhou', |
|||
label: '广州市', |
|||
children: [ |
|||
{ |
|||
value: 'tianhe', |
|||
label: '天河区' |
|||
}, |
|||
{ |
|||
value: 'haizhu', |
|||
label: '海珠区' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
value: 'dongguan', |
|||
label: '东莞市', |
|||
children: [ |
|||
{ |
|||
value: 'changan', |
|||
label: '长安镇' |
|||
}, |
|||
{ |
|||
value: 'humen', |
|||
label: '虎门镇' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
value: 'hunan', |
|||
label: '湖南省', |
|||
children: [ |
|||
{ |
|||
value: 'changsha', |
|||
label: '长沙市', |
|||
children: [ |
|||
{ |
|||
value: 'yuelu', |
|||
label: '岳麓区' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
], |
|||
form: { |
|||
name: '', |
|||
region: '', |
|||
date1: '', |
|||
date2: '', |
|||
delivery: true, |
|||
type: ['步步高'], |
|||
resource: '小天才', |
|||
desc: '', |
|||
options: [] |
|||
} |
|||
}; |
|||
}, |
|||
methods: { |
|||
goBack(){ |
|||
this.$router.go(-1); |
|||
}, |
|||
onSubmit() { |
|||
this.$message.success('提交成功！'); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.form-box{ |
|||
margin-top: 20px; |
|||
} |
|||
.el-input,.el-select{ |
|||
width: 300px; |
|||
} |
|||
.el-page-header{ |
|||
color: #4E73E6; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue