27 changed files with 16587 additions and 61 deletions
File diff suppressed because it is too large
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
@ -0,0 +1,245 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<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 v-model="query.address" 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 v-model="query.address" 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 label="账户号码" prop="name"></el-table-column> |
||||
|
<el-table-column prop="address" label="申请人名称"></el-table-column> |
||||
|
<el-table-column prop="address" label="是否买家开户"></el-table-column> |
||||
|
<el-table-column prop="address" label="是否入驻商家"></el-table-column> |
||||
|
<el-table-column prop="address" label="是否第三方机构"></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> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleDelete(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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,246 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<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 v-model="query.address" 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 v-model="query.address" 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 label="账户号码" prop="name"></el-table-column> |
||||
|
<el-table-column prop="address" label="申请人名称"></el-table-column> |
||||
|
<el-table-column prop="address" label="是否买家开户"></el-table-column> |
||||
|
<el-table-column prop="address" label="是否第三方机构"></el-table-column> |
||||
|
|
||||
|
<el-table-column prop="date" label="审核人员"></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> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleDelete(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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,246 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-input placeholder="账户号码" class="handle-input mr10"></el-input> |
||||
|
<el-input placeholder="申请人名称" class="handle-input mr10"></el-input> |
||||
|
<el-select v-model="query.address" 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 v-model="query.address" 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 v-model="query.address" 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 label="账户号码" prop="name"></el-table-column> |
||||
|
<el-table-column prop="address" label="申请人名称"></el-table-column> |
||||
|
<el-table-column prop="address" label="是否入驻商家"></el-table-column> |
||||
|
<el-table-column prop="address" label="是否第三方机构"></el-table-column> |
||||
|
|
||||
|
<el-table-column prop="date" label="审核人员"></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> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleDelete(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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,250 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<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 v-model="query.address" 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 v-model="query.address" 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 v-model="query.address" 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 label="账户号码" prop="name"></el-table-column> |
||||
|
<el-table-column prop="address" label="申请人名称"></el-table-column> |
||||
|
<el-table-column prop="address" label="是否买家开户"></el-table-column> |
||||
|
<el-table-column prop="address" label="是否入驻商家"></el-table-column> |
||||
|
<el-table-column prop="address" label="是否第三方机构"></el-table-column> |
||||
|
<el-table-column prop="date" label="审核人员"></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> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleDelete(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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,245 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.name" placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<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 v-model="query.address" 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 v-model="query.address" 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 label="账户号码" prop="name"></el-table-column> |
||||
|
<el-table-column prop="address" label="申请人名称"></el-table-column> |
||||
|
<el-table-column prop="address" label="是否买家开户"></el-table-column> |
||||
|
<el-table-column prop="address" label="是否入驻商家"></el-table-column> |
||||
|
<el-table-column prop="date" label="审核人员"></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> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleDelete(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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,242 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input v-model="query.name" placeholder="标准编号" class="handle-input mr10"></el-input> |
||||
|
<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 v-model="query.address" 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 v-model="query.address" 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 label="资产名称" prop="name"></el-table-column> |
||||
|
<el-table-column prop="address" label="机构名称"></el-table-column> |
||||
|
<el-table-column prop="address" label="剩余数量"></el-table-column> |
||||
|
<el-table-column prop="address" label="资产状态"></el-table-column> |
||||
|
<el-table-column prop="address" label="审核状态"></el-table-column> |
||||
|
<el-table-column prop="date" label="审核人员"></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> |
||||
|
<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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,228 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input placeholder="资产名称" class="handle-input mr10"></el-input> |
||||
|
<el-input placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-input placeholder="法人名称" class="handle-input mr10"></el-input> |
||||
|
<el-select v-model="query.address" 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 v-model="query.address" 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 prop="address" label="法人名称"></el-table-column> |
||||
|
<el-table-column prop="address" label="审核状态"></el-table-column> |
||||
|
<el-table-column prop="date" label="审核人员"></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> |
||||
|
</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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,228 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input placeholder="资产名称" class="handle-input mr10"></el-input> |
||||
|
<el-input placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.name" placeholder="法人名称" class="handle-input mr10"></el-input> |
||||
|
<el-select v-model="query.address" 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 v-model="query.address" 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 prop="address" label="法人名称"></el-table-column> |
||||
|
<el-table-column prop="address" label="审核状态"></el-table-column> |
||||
|
<el-table-column prop="date" label="审核人员"></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> |
||||
|
</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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,229 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<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-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="操作" 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> |
||||
|
<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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,284 @@ |
|||||
|
<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"> |
||||
|
<div class="banner_title_item"> |
||||
|
<img src="../../../assets/img/photo.png" alt="" class="photo"> |
||||
|
<p>图片库</p> |
||||
|
</div> |
||||
|
<div class="banner_title_item"> |
||||
|
<img src="../../../assets/img/preview.png" alt="" class="preview"> |
||||
|
<p>效果预览</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="container banner_content"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片数量：</span> |
||||
|
<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> |
||||
|
</div> |
||||
|
<div class="feed_item"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片1：</span> |
||||
|
<el-input placeholder="请输入图片名称"></el-input> |
||||
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1">上移</span> |
||||
|
<span class="banner_num_span1">下移</span> |
||||
|
</div> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:rows="4" |
||||
|
placeholder="请输入文案" |
||||
|
v-model="textarea"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
<div class="feed_item"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片2：</span> |
||||
|
<el-input placeholder="请输入图片名称"></el-input> |
||||
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1">上移</span> |
||||
|
<span class="banner_num_span1">下移</span> |
||||
|
</div> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:rows="4" |
||||
|
placeholder="请输入文案" |
||||
|
v-model="textarea"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
<div class="feed_item"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片3：</span> |
||||
|
<el-input placeholder="请输入图片名称"></el-input> |
||||
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1">上移</span> |
||||
|
<span class="banner_num_span1">下移</span> |
||||
|
</div> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:rows="4" |
||||
|
placeholder="请输入文案" |
||||
|
v-model="textarea"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.feed_item{ |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
.banner_num{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.banner_num_span{ |
||||
|
display: inline-block; |
||||
|
width: 80px; |
||||
|
} |
||||
|
.banner_num_span1{ |
||||
|
color:#4E73E4 ; |
||||
|
text-decoration: underline; |
||||
|
display: inline-block; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.banner_num_input{ |
||||
|
width: 300px !important; |
||||
|
margin-right: 40px; |
||||
|
} |
||||
|
.banner_num .handle-select{ |
||||
|
width: 200px; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.banner_num .el-input{ |
||||
|
width: auto; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.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,257 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 运营管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>banner配置</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container banner_title"> |
||||
|
<div class="banner_title_item"> |
||||
|
<img src="../../../assets/img/photo.png" alt="" class="photo"> |
||||
|
<p>图片库</p> |
||||
|
</div> |
||||
|
<div class="banner_title_item"> |
||||
|
<img src="../../../assets/img/preview.png" alt="" class="preview"> |
||||
|
<p>效果预览</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="container banner_content"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片数量：</span> |
||||
|
<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> |
||||
|
</div> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片1：</span> |
||||
|
<el-input placeholder="请输入图片名称"></el-input> |
||||
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1">上移</span> |
||||
|
<span class="banner_num_span1">下移</span> |
||||
|
</div> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片2：</span> |
||||
|
<el-input placeholder="请输入图片名称"></el-input> |
||||
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1">上移</span> |
||||
|
<span class="banner_num_span1">下移</span> |
||||
|
</div> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片3：</span> |
||||
|
<el-input placeholder="请输入图片名称"></el-input> |
||||
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1">上移</span> |
||||
|
<span class="banner_num_span1">下移</span> |
||||
|
</div> |
||||
|
</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: 'basetable', |
||||
|
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_num{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
.banner_num_span{ |
||||
|
display: inline-block; |
||||
|
width: 80px; |
||||
|
} |
||||
|
.banner_num_span1{ |
||||
|
color:#4E73E4 ; |
||||
|
text-decoration: underline; |
||||
|
display: inline-block; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.banner_num_input{ |
||||
|
width: 300px !important; |
||||
|
margin-right: 40px; |
||||
|
} |
||||
|
.banner_num .handle-select{ |
||||
|
width: 200px; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.banner_num .el-input{ |
||||
|
width: auto; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.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,231 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input placeholder="机构名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.name" 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-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="操作" 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> |
||||
|
<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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,284 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="crumbs"> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item> |
||||
|
<i class="el-icon-lx-cascades"></i> 运营管理 |
||||
|
</el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>feed配置</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="container banner_title"> |
||||
|
<div class="banner_title_item"> |
||||
|
<img src="../../../assets/img/photo.png" alt="" class="photo"> |
||||
|
<p>图片库</p> |
||||
|
</div> |
||||
|
<div class="banner_title_item"> |
||||
|
<img src="../../../assets/img/preview.png" alt="" class="preview"> |
||||
|
<p>效果预览</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="container banner_content"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片数量：</span> |
||||
|
<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> |
||||
|
</div> |
||||
|
<div class="feed_item"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片1：</span> |
||||
|
<el-input placeholder="请输入图片名称"></el-input> |
||||
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1">上移</span> |
||||
|
<span class="banner_num_span1">下移</span> |
||||
|
</div> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:rows="4" |
||||
|
placeholder="请输入文案" |
||||
|
v-model="textarea"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
<div class="feed_item"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片2：</span> |
||||
|
<el-input placeholder="请输入图片名称"></el-input> |
||||
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1">上移</span> |
||||
|
<span class="banner_num_span1">下移</span> |
||||
|
</div> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:rows="4" |
||||
|
placeholder="请输入文案" |
||||
|
v-model="textarea"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
<div class="feed_item"> |
||||
|
<div class="banner_num"> |
||||
|
<span class="banner_num_span">图片3：</span> |
||||
|
<el-input placeholder="请输入图片名称"></el-input> |
||||
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
||||
|
<span class="banner_num_span1">上传图片</span> |
||||
|
<span class="banner_num_span1">打开图片库</span> |
||||
|
<span class="banner_num_span1">上移</span> |
||||
|
<span class="banner_num_span1">下移</span> |
||||
|
</div> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:rows="4" |
||||
|
placeholder="请输入文案" |
||||
|
v-model="textarea"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.feed_item{ |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
.banner_num{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.banner_num_span{ |
||||
|
display: inline-block; |
||||
|
width: 80px; |
||||
|
} |
||||
|
.banner_num_span1{ |
||||
|
color:#4E73E4 ; |
||||
|
text-decoration: underline; |
||||
|
display: inline-block; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.banner_num_input{ |
||||
|
width: 300px !important; |
||||
|
margin-right: 40px; |
||||
|
} |
||||
|
.banner_num .handle-select{ |
||||
|
width: 200px; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.banner_num .el-input{ |
||||
|
width: auto; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.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,236 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input placeholder="订单编号" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.name" placeholder="商家名称" class="handle-input mr10"></el-input> |
||||
|
<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 v-model="query.address" 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 prop="address" label="交易方式"></el-table-column> |
||||
|
<el-table-column prop="address" label="交易数量"></el-table-column> |
||||
|
<el-table-column prop="address" label="交易金额"></el-table-column> |
||||
|
<el-table-column prop="date" label="审核人员"></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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,236 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input placeholder="订单编号" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.name" placeholder="商家名称" class="handle-input mr10"></el-input> |
||||
|
<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 v-model="query.address" 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 prop="address" label="交易方式"></el-table-column> |
||||
|
<el-table-column prop="address" label="交易数量"></el-table-column> |
||||
|
<el-table-column prop="address" label="交易金额"></el-table-column> |
||||
|
<el-table-column prop="date" label="审核人员"></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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,236 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input placeholder="订单编号" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.name" placeholder="商家名称" class="handle-input mr10"></el-input> |
||||
|
<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 v-model="query.address" 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 prop="address" label="交易方式"></el-table-column> |
||||
|
<el-table-column prop="address" label="交易数量"></el-table-column> |
||||
|
<el-table-column prop="address" label="交易金额"></el-table-column> |
||||
|
<el-table-column prop="date" label="审核人员"></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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,236 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input placeholder="订单编号" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.name" placeholder="商家名称" class="handle-input mr10"></el-input> |
||||
|
<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 v-model="query.address" 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 prop="address" label="交易方式"></el-table-column> |
||||
|
<el-table-column prop="address" label="交易数量"></el-table-column> |
||||
|
<el-table-column prop="address" label="交易金额"></el-table-column> |
||||
|
<el-table-column prop="date" label="审核人员"></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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,241 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input placeholder="订单编号" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.name" placeholder="商家名称" class="handle-input mr10"></el-input> |
||||
|
<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 v-model="query.address" 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 v-model="query.address" 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 prop="address" label="交易方式"></el-table-column> |
||||
|
<el-table-column prop="address" label="交易数量"></el-table-column> |
||||
|
<el-table-column prop="address" label="交易金额"></el-table-column> |
||||
|
<el-table-column prop="address" label="交易状态"></el-table-column> |
||||
|
<el-table-column prop="date" label="审核人员"></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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,287 @@ |
|||||
|
<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"> |
||||
|
<p>昨日交易汇总</p> |
||||
|
<div class="banner_title_content"> |
||||
|
<div class="banner_title_item"> |
||||
|
<div class="banner_title_item_div banner_title_item_left">昨日成交金额</div> |
||||
|
<div class="banner_title_item_div banner_title_item_right">￥845,256,996.30</div> |
||||
|
</div> |
||||
|
<div class="banner_title_item"> |
||||
|
<div class="banner_title_item_div banner_title_item_left">昨日结算金额</div> |
||||
|
<div class="banner_title_item_div banner_title_item_right">￥845,256,996.30</div> |
||||
|
</div> |
||||
|
<div class="banner_title_item"> |
||||
|
<div class="banner_title_item_div banner_title_item_left">昨日退款金额</div> |
||||
|
<div class="banner_title_item_div banner_title_item_right">￥845,256,996.30</div> |
||||
|
</div> |
||||
|
<div class="banner_title_item"> |
||||
|
<div class="banner_title_item_div banner_title_item_left">昨日收益汇总</div> |
||||
|
<div class="banner_title_item_div banner_title_item_right">￥845,256,996.30</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="container banner_content"> |
||||
|
<div class="schart-box"> |
||||
|
<div class="content-title">本月收益汇总</div> |
||||
|
<schart class="schart" canvasId="line" :options="options2"></schart> |
||||
|
</div> |
||||
|
</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'; |
||||
|
import Schart from 'vue-schart'; |
||||
|
export default { |
||||
|
name: 'basetable', |
||||
|
components: { |
||||
|
Schart |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
options2: { |
||||
|
type: 'line', |
||||
|
bgColor: '#fbfbfb', |
||||
|
labels: ['6月', '7月', '8月', '9月', '10月'], |
||||
|
datasets: [ |
||||
|
{ |
||||
|
label: '家电', |
||||
|
data: [234, 278, 270, 190, 230] |
||||
|
}, |
||||
|
{ |
||||
|
label: '百货', |
||||
|
data: [164, 178, 150, 135, 160] |
||||
|
}, |
||||
|
{ |
||||
|
label: '食品', |
||||
|
data: [114, 138, 200, 235, 190] |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
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> |
||||
|
.schart{ |
||||
|
width: 50%; |
||||
|
height: 450px; |
||||
|
} |
||||
|
.banner_num{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
.banner_num_span{ |
||||
|
display: inline-block; |
||||
|
width: 80px; |
||||
|
} |
||||
|
.banner_num_span1{ |
||||
|
color:#4E73E4 ; |
||||
|
text-decoration: underline; |
||||
|
display: inline-block; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.banner_num_input{ |
||||
|
width: 300px !important; |
||||
|
margin-right: 40px; |
||||
|
} |
||||
|
.banner_num .handle-select{ |
||||
|
width: 200px; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.banner_num .el-input{ |
||||
|
width: auto; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.banner_content{ |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
/* .banner_title{ */ |
||||
|
/* padding-left: 80px; */ |
||||
|
/* } */ |
||||
|
.banner_content_p{ |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.banner_title_content{ |
||||
|
display: flex; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.banner_title_item { |
||||
|
border: 1px solid #D7D7D7; |
||||
|
height: 50px; |
||||
|
margin-right: 100px; |
||||
|
display: flex; |
||||
|
width: 350px; |
||||
|
} |
||||
|
.banner_title_item_div{ |
||||
|
height: 100%; |
||||
|
text-align: center; |
||||
|
line-height: 50px; |
||||
|
width: 50%; |
||||
|
} |
||||
|
.banner_title_item_left{ |
||||
|
background-color: #4E73E4; |
||||
|
color: white; |
||||
|
} |
||||
|
.banner_title_item_right{ |
||||
|
color:#849AE8 ; |
||||
|
} |
||||
|
.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,239 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input placeholder="商家信息" class="handle-input mr10"></el-input> |
||||
|
<el-input placeholder="买家信息" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.name" 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-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"></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="操作" 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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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,237 @@ |
|||||
|
<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"> |
||||
|
<div class="handle-box"> |
||||
|
<el-input placeholder="订单编号" class="handle-input mr10"></el-input> |
||||
|
<el-input placeholder="商家名称" class="handle-input mr10"></el-input> |
||||
|
<el-input v-model="query.name" 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-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"></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="操作" 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> |
||||
|
</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: 'basetable', |
||||
|
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> |
||||
|
.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> |
||||
Loading…
Reference in new issue