品规管理及model页布局构建
张鑫
5 years ago
parent
21e881b5e3
commit
27fac4e6af
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="button-box">
|
||||
<a-button type="primary" class="add" @click="showModel('add','')">
|
||||
新增
|
||||
</a-button>
|
||||
<a-upload
|
||||
name="file"
|
||||
:multiple="true"
|
||||
accept=".xlsx"
|
||||
:action="uploadProps.action"
|
||||
:showUploadList = 'false'
|
||||
@change="handleChange"
|
||||
ref="table"
|
||||
>
|
||||
<a-button type="primary" class="plc" >
|
||||
导入
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:row-key="record => record.id"
|
||||
:data-source="data"
|
||||
:pagination="pagination"
|
||||
@change="handleGetCameraIoList"
|
||||
>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="showModel('edit',record)">
|
||||
编辑
|
||||
</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm
|
||||
title="是否删除?"
|
||||
@confirm="() => delDosage(record)"
|
||||
>
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</a-table>
|
||||
<Model
|
||||
:visible.sync="visible"
|
||||
:modelType="modelType"
|
||||
:modelData.sync="modelData"
|
||||
@sure="submit"
|
||||
@close="closeModel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import Model from "./model.vue"
|
||||
import { importExcelUrl } from "@/api/importExcel";
|
||||
const columns = [
|
||||
{
|
||||
title: '序号',
|
||||
// dataIndex: 'id',
|
||||
customRender: (text, record, index) => {
|
||||
return (
|
||||
(record.pageNumber - 1) * 10 + index + 1
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '品类',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '子类',
|
||||
dataIndex: 'child',
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
dataIndex: 'updateTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
},
|
||||
];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageNum:1,
|
||||
pageSize:10,
|
||||
data: [],
|
||||
pagination:{
|
||||
total:0,
|
||||
current:1,
|
||||
defaultPageSize:10, // 默认每页显示数量
|
||||
showTotal: total => `共 ${total} 条数据`, // 显示总数
|
||||
showSizeChanger:true, // 显示可改变每页数量
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
|
||||
},
|
||||
loading: false,
|
||||
columns,
|
||||
visible:false,
|
||||
modelType:'',
|
||||
modelData:[],
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
uploadProps() {
|
||||
return {
|
||||
action: 'dddddd'//上传Excel文件的路径
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.handleGetCameraIoList()
|
||||
},
|
||||
methods: {
|
||||
handleChange(data) {
|
||||
console.log(data)
|
||||
// if (data.file.status == "done") { // 导入表格之后成功的回调
|
||||
// this.$message.success(data.file.response.message)
|
||||
// this.handleGetCameraIoList();
|
||||
// } else if(data.file.status == 'error'){ // 导入表格之后失败的回调
|
||||
// this.$message.error(data.file.response.message)
|
||||
// }
|
||||
},
|
||||
handleGetCameraIoList(pagination) {
|
||||
console.log(pagination)
|
||||
if(pagination){
|
||||
this.pagination.current = pagination.current;
|
||||
this.pagination.pageSize = pagination.pageSize;
|
||||
this.pageNum = pagination.current;
|
||||
this.pageSize = pagination.pageSize;
|
||||
}
|
||||
this.request();
|
||||
},
|
||||
request(){
|
||||
// this.$api.httpApi.getCameraIoList({
|
||||
// data: {
|
||||
// page:this.pageNum,
|
||||
// size:this.pageSize,
|
||||
// }
|
||||
// }).then(res => {
|
||||
// const pagination = { ...this.pagination };
|
||||
// pagination.total = res.data.total;
|
||||
// this.data = res.data.list;
|
||||
// this.pagination = pagination;
|
||||
// res.data.list.forEach((value,index) => {
|
||||
// value.pageNumber = this.pagination.current
|
||||
// });
|
||||
// }).catch(err => {
|
||||
//
|
||||
// });
|
||||
},
|
||||
showModel(type,data){
|
||||
this.visible = true
|
||||
console.log(type)
|
||||
this.modelType = type
|
||||
this.modelData = data
|
||||
},
|
||||
submit(visible){
|
||||
this.visible = visible
|
||||
this.handleGetCameraIoList()
|
||||
},
|
||||
closeModel(visible,data){
|
||||
this.visible = visible
|
||||
this.modelData=data
|
||||
},
|
||||
delDosage(data){
|
||||
// console.log(data.id)
|
||||
// var id=data.id
|
||||
// this.$axios.delete('/camera/config/'+id, {
|
||||
// data: {}
|
||||
// }).then(res => {
|
||||
// if(res.code==200){
|
||||
// this.$message.success('删除球机IO成功');
|
||||
// this.handleGetCameraIoList()
|
||||
// }
|
||||
// }).catch(err => {
|
||||
//
|
||||
// })
|
||||
},
|
||||
},
|
||||
components:{
|
||||
Model
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.button-box{
|
||||
position: absolute;
|
||||
top:0;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.add{
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue