<template>
<el-container>
<el-header style="width: 100%; height: 80px;font-size: 12px">
<el-form :inline="true" label-width="65px" label-position="left">
<el-row>
<el-col :span="22">
<el-form-item label="月份:">
<el-date-picker v-model="queryParam.db" value-format="yyyy/MM" type="month" style="width: 80%;" />
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item style="float: right" >
<el-button type="success" @click="initList">查询</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10" :offset="14">
<el-form-item style="float: right" >
<el-button type="success" @click="qfxqTJ()" >提交</el-button>
<div style="float: right;margin-left: 5px" >
<el-upload
:action="uploadAction"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:data="uploadData"
:on-success="handleAvatarSuccess"
:disabled="filedis"
:headers="heads"
>
<el-button type="success" @click="uploadExcel" > Excel导入 </el-button>
</el-upload>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-header>
<el-container style="padding-top: 0px">
<el-container>
<el-main>
<div class="mytable">
<vxe-grid
id="id"
ref="xGrid"
border
resizable
keep-source
:align="'center'"
:height="height"
:auto-resize="true"
:columns="tableColumn"
highlight-current-row
:data="list"
:custom-config="{ storage: true }"
highlight-hover-row
show-overflow
show-header-overflow
>
</vxe-grid>
</div>
</el-main>
</el-container>
</el-container>
</el-container>
</template>
<script>
import {
getList,
qfxqTJ,
getCzxx
} from '@/api/jhzx/qfxq'
import { mapGetters } from 'vuex'
import XEUtils from 'xe-utils'
import { getToken } from '@/utils/auth'
import { startLoading, endLoading } from '@/utils'
import { Message } from 'element-ui'
export default {
name:'Qfxqwh',
data() {
return {
queryParam: {
db:'',
zt:'0'
},
list: [],
isupload:'02',
filedis:false,
uploadData:{
},
heads: { token: getToken() },
uploadAction: process.env.VUE_APP_BASE_API + '/dmQfxq/upload',
dictData:[],
height: '500px',
tableColumn: [
{ type: 'checkbox', width: 50 },
{ type: 'seq', width: 60, title: '序号' },
{ field: 'dcCh', title: '船号', width: 100,
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{ field: 'dcPl', title: '批量', width: 100,editRender: { name: 'input' },
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{ field: 'dcFd', title: '分段', width: 100, editRender: { name: 'input' },
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{ field: 'pscd', title: '配送场地', width: 120, editRender: { name: 'input' },
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{ field: 'cjzg', title: '车间主管', width: 120, editRender: { name: 'input' },
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{ field: 'db', title: '大板', width: 120, editRender: { name: 'input' },
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{ field: 'xc', title: '型材', width: 120, editRender: { name: 'input' },
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{ field: 'txc', title: 'T型材', width: 120, editRender: { name: 'input' },
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{ field: 'bz', title: '备注', width: 120, editRender: { name: 'input' },
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{ field: 'zt', title: '状态', width: 100,formatter: ['dictFormat','ZTLX']
},
{ field: 'bzry', title: '编制人员', width: 110, editRender: { name: 'input' },
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{ field: 'bzrq', title: '编制日期', width: 110, editRender: { name: 'input' },
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{ field: 'shry', title: '审核人员', width: 110, editRender: { name: 'input' },
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
},
{ field: 'shrq', title: '审核日期', width: 110, editRender: { name: 'input' },
filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
filterRender: { name: 'FilterCombination', },
}
]
}
},
computed: {
...mapGetters(['name', 'bmbm'])
},
created() {
window.addEventListener('resize', this.getHeight)
this.getHeight()
this.initBase()
},
methods: {
uploadExcel() {
this.uploadData.isupload = this.isupload
},
beforeAvatarUpload(file) {
// 文件类型
const isType = file.type === 'application/vnd.ms-excel'
const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
const fileType = isType || isTypeComputer
if (!fileType) {
this.$message.error('上传文件只能是xls/xlsx格式！')
return
}
startLoading()
return fileType
},
handleAvatarSuccess(res, file) {
endLoading()
if (res.success) {
this.$message({ message: '导入成功', type: 'success' })
this.initList();
} else {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
}
},
initBase(){
getCzxx({}).then(res=>{
this.dictData = res.data
})
},
initList() {
getList(this.queryParam).then((res) => {
this.list = res.data
if (this.$refs.xGrid) {
this.$refs.xGrid.loadData(this.list)
}
})
},
formatDate ({ cellValue }) {
return XEUtils.toDateString(cellValue, 'yyyy/MM/dd')
},
getHeight() {
this.height = window.innerHeight - 190
},
qfxqTJ() {
let obj=this.$refs.xGrid.getCheckboxRecords()
if(obj.length<=0){
return
}
qfxqTJ(obj).then(res=> {
if (res.success) {
this.initList()
}
})
}
}
}
</script>
<style lang="scss" scoped >
.el-header{margin:0;padding: 5px;height:auto;
.el-input{
width: 140px;
}
.el-select{
width: 140px;
}
}
.el-container{padding: 0;margin:0;}
.el-main{padding: 0;}
.el-col{padding: 0;height: 32px;}
.el-aside{background: #fff;padding: 0}
.el-container{padding: 0}
.el-row {}
.el-row:last-child {margin-bottom: 0; }
.tableStyles{
background: #0a76a4;
}
.my-dropdown {
width: 400px;
height: 400px;
background-color: #fff;
border: 1px solid #dcdfe6;
box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
font-size: 12px;
}
.mytable1{
}
.borderClass{
}
.vxe-input {
display: inline-block !important;
position: relative !important;
width: auto;
}
.el-input {
display: inline-block !important;
position: relative !important;
width: auto;
}
.keyword-lighten {
color: #000;
background-color: #FFFF00;
}
.vxe-textarea--inner {
line-height: inherit;
}
.el-form-item__label-wrap {
margin-left: 0px !important;
float: left;
}
.fontClass{
font-size: 12px;
font-weight: bold;
}
</style>