<template>
<div class="container">
<div class="sel">
<el-form ref="queryForm" :model="queryForm" :inline="true" size="small" label-width="100px">
<el-form-item label="供应商类别:" prop="type">
<el-input v-model="queryForm.type"/>
</el-form-item>
<el-form-item label="供应商名称:" prop="name">
<el-input v-model="queryForm.name"/>
</el-form-item>
<el-form-item label="联系人:" prop="contacts">
<el-input v-model="queryForm.contacts"/>
</el-form-item>
<el-form-item label="电话号码:" prop="mobile">
<el-input v-model="queryForm.mobile"/>
</el-form-item>
<el-form-item label="联系地址:" prop="address">
<el-input v-model="queryForm.address"/>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="btn_query">查询</el-button>
<el-button size="small" type="warning" @click="show_add('add',null)">新增</el-button>
<upload-excel-component
:on-success="handleSuccess"
:before-upload="beforeUpload"
style="display: inline-block"/>
<el-button size="small" type="info" @click="get_xls">下载导入模版</el-button>
<el-button size="small" @click="reset('queryForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="table">
<el-table
v-loading="listLoading"
:data="filterDataList"
stripe
element-loading-text="加载中..."
border
fit
size="small"
highlight-current-row>
<el-table-column label="操作">
<template slot-scope="scope">
<div>
<el-button type="primary" size="mini" @click="show_add('edit',scope.row)">编辑</el-button>
</div>
<div style="margin-top: 2px">
<el-button type="danger" size="mini" @click="show_delete(scope.row)">删除</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="供应商编号" align="center">
<template slot-scope="scope">
{{ scope.row.id }}
</template>
</el-table-column>
<el-table-column label="供应商类别" align="center">
<template slot-scope="scope">
{{ scope.row.type }}
</template>
</el-table-column>
<el-table-column label="供应商名称" align="center">
<template slot-scope="scope">
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column label="联系人" align="center">
<template slot-scope="scope">
{{ scope.row.contacts }}
</template>
</el-table-column>
<el-table-column label="电话号码" align="center">
<template slot-scope="scope">
{{ scope.row.mobile }}
</template>
</el-table-column>
<el-table-column label="联系地址" align="center">
<template slot-scope="scope">
{{ scope.row.address }}
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
<template slot-scope="scope">
<div> {{ scope.row.createdAt | split }}</div>
<div> {{ scope.row.createdAt | Split }}</div>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center">
<template slot-scope="scope">
<div> {{ scope.row.updatedAt | split }}</div>
<div> {{ scope.row.updatedAt | Split }}</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination">
<el-pagination
:current-page="pageParams.page"
:page-size="pageParams.limit"
:total="pageParams.totalCount"
layout="total, prev, pager, next, jumper"
@current-change="handleCurrentChange"
/>
<el-button
:loading="downloadLoading"
type="primary"
size="small"
style="float: right;margin-right: 20px;"
class="xls"
@click="excldownload">
导出
</el-button>
</div>
<!--新增对话框-->
<el-dialog
:visible="dia_add_visi"
center
title="确认下线"
width="40%"
@close="dia_add_visi=false">
<span slot="title">
<div class="wrap_line_txt">
<div class="line"/>
<div
class="txt">
<span v-show="!addForm.id">新增</span><span v-show="addForm.id">编辑</span>
</div>
</div>
</span>
<el-form ref="addForm" :model="addForm" :inline="true" size="small" label-width="100px" label-position="left">
<el-form-item style="display: none" label="供应商ID：" prop="id">
<el-input v-model="addForm.id"/>
</el-form-item>
<el-form-item label="供应商类别：" prop="type">
<el-input v-model="addForm.type"/>
</el-form-item>
<el-form-item label="供应商名称:" prop="name">
<el-input v-model="addForm.name"/>
</el-form-item>
<el-form-item label="联系人：" prop="contacts">
<el-input v-model="addForm.contacts"/>
</el-form-item>
<el-form-item label="电话号码：" prop="mobile">
<el-input v-model="addForm.mobile"/>
</el-form-item>
<el-form-item label="联系地址：" prop="address">
<el-input v-model="addForm.address"/>
</el-form-item>
<el-form-item>
<el-button size="small" type="warning" @click="add(addForm)"><span v-show="!addForm.id">新增</span><span
v-show="addForm.id">编辑</span></el-button>
<el-button size="small" @click="reset('addForm')">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- 删除 弹出框 -->
<el-dialog
:visible.sync="dia_delete_visi"
title="提示"
width="25%"
@close="dia_delete_visi=false">
<span/>
<span slot="title">
<div class="wrap_line_txt">
<div class="line"/>
<div
class="txt">
提示
</div>
</div>
</span>
<span>是否删除该条数据</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="delete1">确定</el-button>
<el-button type="info" size="small" @click="dia_delete_visi=false">取消</el-button>
</span>
</el-dialog>
<!--批量导入 弹出框-->
<el-dialog
:visible.sync="dia_batch_visi"
title="提示"
width="70%"
@close="dia_batch_visi=false">
<span/>
<span slot="title">
<div class="wrap_line_txt">
<div class="line"/>
<div
class="txt">
提示
</div>
</div>
</span>
<span>是否批量导入下列数据？</span>
<el-table
v-loading="listLoading"
:data="batchDataList"
stripe
element-loading-text="加载中..."
border
fit
size="small"
highlight-current-row>
<el-table-column label="供应商类别" align="center">
<template slot-scope="scope">
{{ scope.row.供应商类别 }}
</template>
</el-table-column>
<el-table-column label="供应商名称" align="center">
<template slot-scope="scope">
{{ scope.row.供应商名称 }}
</template>
</el-table-column>
<el-table-column label="联系人" align="center">
<template slot-scope="scope">
{{ scope.row.联系人 }}
</template>
</el-table-column>
<el-table-column label="电话号码" align="center">
<template slot-scope="scope">
{{ scope.row.电话号码 }}
</template>
</el-table-column>
<el-table-column label="联系地址" align="center">
<template slot-scope="scope">
{{ scope.row.联系地址 }}
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="batch">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { axiosPostForm } from '@/api/static'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { parseTime } from '@/utils'
export default {
name: 'Supplier',
components: { UploadExcelComponent },
data() {
return {
dia_batch_visi: false,
batchDataList: [],
batchDataHeader: [],
downloadLoading: false,
dia_add_visi: false,
dia_delete_visi: false,
queryForm: {
type: '',
name: '',
mobile: '',
contacts: '',
address: ''
},
addForm: {
id: '',
type: '',
name: '',
mobile: '',
contacts: '',
address: ''
},
dataList: null,
listLoading: false,
// 分页参数
pageParams: {
totalPage: 0, // 数据总页数
limit: 20, // 每页条数
page: 1, // 当前页
jumpPage: 1, // 跳转页
totalCount: 0, // 数据总条数
start: 0 // 给后台的开始数
}
}
},
computed: {
filterDataList() {
if (this.dataList === null) return
const dataList = this.dataList
return dataList.filter(item => {
return true
})
}
},
mounted() {
this.btn_query()
},
methods: {
batch() {
console.log('导入')
axiosPostForm('/api/supplier/batch', {
content: JSON.stringify(this.batchDataList),
title: JSON.stringify(this.batchDataHeader)
}).then(response => {
this.$message.success('导入成功')
this.search()
}).catch(err => {
console.log(err)
})
this.dia_batch_visi = false
},
excldownload() { // 导出
const _this = this
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['供应商编号', '供应商类别', '供应商名称', '联系人', '电话号码', '联系地址', '创建时间', '更新时间']
const filterVal = ['id', 'type', 'name', 'contacts', 'mobile', 'address', 'createdAt', 'updatedAt']
axiosPostForm('/api/supplier/list', {}).then(response => {
const list = response.data.data
const data = _this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: '供应商列表',
autoWidth: true,
bookType: 'xlsx'
})
this.downloadLoading = false
}).catch(err => {
console.log(err)
this.downloadLoading = false
})
})
},
get_xls() { // 导出模版
const _this = this
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['供应商类别', '供应商名称', '联系人', '电话号码', '联系地址']
const filterVal = ['type', 'name', 'contacts', 'mobile', 'address']
const list = [{
type: '供应商类别xx',
name: '供应商xx',
contacts: '供应商联系人xx',
mobile: '18978457845xx',
address: '地址xx'
}]
const data = _this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: '供应商列表',
autoWidth: true,
bookType: 'xlsx'
})
this.downloadLoading = false
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
if (j === 'timestamp') {
return parseTime(v[j])
} else {
return v[j]
}
}))
},
beforeUpload(file) { // 导入
const isLt1M = file.size / 1024 / 1024 < 1
if (isLt1M) {
return true
}
this.$message({
message: 'Please do not upload files larger than 1m in size.',
type: 'warning'
})
return false
},
handleSuccess({ results, header }) {
this.batchDataList = results
this.batchDataHeader = header
this.dia_batch_visi = true
console.log(this.batchDataList)
console.log(this.batchDataHeader)
},
show_add(operation, item) {
this.dia_add_visi = true
if (operation === 'add') {
this.addForm = {
type: '',
name: '',
mobile: '',
contacts: '',
address: ''
}
} else {
this.addForm = item
}
},
show_delete(item) {
this.dia_delete_visi = true
this.addForm = item
},
delete1() {
axiosPostForm('/api/supplier/delete', { id: this.addForm.id }).then(response => {
this.$message.success('删除成功')
this.search()
}).catch(err => {
console.log(err)
})
this.dia_delete_visi = false
},
add(form) {
console.log(form)
axiosPostForm('/api/supplier/save', {
id: form.id,
name: form.name,
contacts: form.contacts,
mobile: form.mobile,
type: form.type,
address: form.address
}).then(response => {
if (form.id) {
this.$message.success('编辑成功')
} else {
this.$message.success('添加成功')
}
this.search()
}).catch(err => {
console.log(err)
})
this.dia_add_visi = false
},
btn_query() {
this.pageParams.page = 1
this.search()
},
getParams() {
const queryData = {
page: this.pageParams.page,
pageSize: this.pageParams.limit
}
// 选择框验证方法
queryData.type = this.queryForm.type
queryData.name = this.queryForm.name
queryData.contacts = this.queryForm.contacts
queryData.mobile = this.queryForm.mobile
queryData.address = this.queryForm.address
return queryData
},
search() {
// 进行查询接口请求
this.listLoading = true
axiosPostForm('/api/supplier/list', this.getParams()).then(response => {
this.listLoading = false
this.dataList = response.data.data // 赋予表格数据
this.pageParams.totalCount = Number(response.data.total) // 赋予总条数
}).catch(err => {
console.log(err)
this.listLoading = false
})
},
// 当前页改变方法
handleCurrentChange(val) {
this.pageParams.page = val
this.search()
},
reset(formName) {
this.$refs[formName].resetFields()
},
changeCity(city) {
console.log(city)
this.queryForm.cityCode = city
}
}
}
</script>
<style lang="scss" scoped>
/deep/ .status-col .cell {
white-space: pre;
background-color: red;
}
.wrap_line_txt {
display: flex;
align-items: center;
.line {
width: 2px;
height: 16px;
background: #1389EE;
line-height: 20px;
margin-right: 20px;
}
.txt {
font-size: 16px;
color: #707070;
}
}
.container {
background-color: #F2F4F6;
width: 98%;
margin: 0 auto;
.sel {
background-color: #ffffff;
width: 100%;
border-radius: 5px;
padding-left: 20px;
padding-top: 15px;
/deep/ .el-input__inner {
width: 200px;
}
/deep/ .el-form.my_city {
width: 200px;
}
/deep/ .el-form-item {
height: 32px;
}
/deep/ .el-form-item {
margin-bottom: 15px;
}
/deep/ .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
width: 200px;
}
}
.table {
background-color: blue;
width: 100%;
margin-top: 10px;
}
.pagination {
background-color: #ffffff;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
