<template>
|
<a-modal :title="modalTitle" :width="modalWidth" :visible="visible" :footer="null" @cancel="visible=false"
|
destroyOnClose>
|
<a-form layout="inline" @keyup.enter.native="loadData(1)">
|
<a-form-item label="工段">
|
<a-select default-value="" style="width: 200px" @select="handleSelectChange">
|
<a-select-option key="">全部</a-select-option>
|
<a-select-option v-for="item in selectList" :key="item.id">{{item.productionName}}</a-select-option>
|
</a-select>
|
</a-form-item>
|
<a-form-item>
|
<a-button type="primary" @click="loadData(1)">查询</a-button>
|
</a-form-item>
|
</a-form>
|
<a-table :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
|
@change="handleTableChange" style="margin-top: 20px" rowKey="id">
|
<template slot="qualifiedStatus" slot-scope="text, record">
|
<span :style="{color:text==='未完成'?'#f00':'#89D961',fontWeight:'bold'}">{{text}}</span>
|
</template>
|
</a-table>
|
</a-modal>
|
</template>
|
|
<script>
|
import signageApi from '@/api/signage'
|
import { filterObj } from '@/utils/util'
|
|
export default {
|
name: 'SignageModal',
|
components: {},
|
props: {
|
modalWidth: {
|
type: Number,
|
default: 1048
|
},
|
modalTitle: {
|
type: String
|
},
|
productionId: {
|
type: String
|
}
|
},
|
watch: {
|
visible: {
|
handler(newVal) {
|
// 打开弹窗时数据回到第一页且每页显示最大条数恢复为最小值
|
if (newVal) {
|
this.getSectionListByApi()
|
this.searchReset()
|
this.ipagination.pageSize = +this.ipagination.pageSizeOptions[0]
|
}
|
}
|
}
|
},
|
data() {
|
return {
|
visible: false,
|
selectList: [],
|
queryParam: {},
|
loading: false,
|
/* 分页参数 */
|
ipagination: {
|
current: 1,
|
pageSize: 10,
|
pageSizeOptions: ['10', '20', '30'],
|
showTotal: (total, range) => {
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
},
|
showQuickJumper: true,
|
showSizeChanger: true,
|
total: 0
|
},
|
dataSource: [],
|
columns: [
|
{
|
align: 'center',
|
title: '工厂名称',
|
dataIndex: 'workshop',
|
key: 'workshop'
|
},
|
{
|
align: 'center',
|
title: '工段名称',
|
dataIndex: 'dept',
|
key: 'dept'
|
},
|
{
|
align: 'center',
|
title: '零件编号',
|
dataIndex: 'mdsItemCode',
|
key: 'mdsItemCode'
|
},
|
{
|
align: 'center',
|
title: '下达任务量',
|
key: 'batchNum',
|
dataIndex: 'batchNum'
|
},
|
{
|
align: 'center',
|
title: '完成任务量',
|
key: 'qualifiedQty',
|
dataIndex: 'qualifiedQty'
|
},
|
{
|
align: 'center',
|
title: '完成百分比',
|
key: 'qualifiedRate',
|
dataIndex: 'qualifiedRate'
|
},
|
{
|
align: 'center',
|
title: '是否完成',
|
key: 'qualifiedStatus',
|
dataIndex: 'qualifiedStatus',
|
scopedSlots: { customRender: 'qualifiedStatus' }
|
}
|
]
|
}
|
},
|
methods: {
|
// 获取车间对应工段列表
|
getSectionListByApi() {
|
const that = this
|
signageApi.getSectionListApi(this.productionId)
|
.then(res => {
|
console.log('res--------', res)
|
if (res.success) that.selectList = res.result
|
})
|
},
|
|
loadData(arg) {
|
//加载数据 若传入参数1则加载第一页的内容
|
if (arg === 1) this.ipagination.current = 1
|
const params = this.getQueryParams()//查询条件
|
params.productionId = this.productionId
|
if (!params) return false
|
this.loading = true
|
signageApi.getMesProductionListApi(params)
|
.then((res) => {
|
if (res.success) {
|
this.dataSource = res.result.records || res.result
|
if (res.result.total) {
|
this.ipagination.total = res.result.total
|
} else {
|
this.ipagination.total = 0
|
}
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
.finally(() => {
|
this.loading = false
|
})
|
},
|
|
/**
|
* 工段选择变化时触发
|
* @param value 选择后key
|
*/
|
handleSelectChange(value) {
|
this.queryParam.proChildId = value
|
},
|
|
getQueryParams() {
|
//获取查询条件
|
let sqp = {}
|
const param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
|
param.field = this.getQueryField()
|
param.pageNo = this.ipagination.current
|
param.pageSize = this.ipagination.pageSize
|
return filterObj(param)
|
},
|
|
getQueryField() {
|
let str = 'id,'
|
this.columns.forEach(function(value) {
|
str += ',' + value.dataIndex
|
})
|
return str
|
},
|
|
searchReset() {
|
this.queryParam = {}
|
this.dataSource = []
|
this.loadData(1)
|
},
|
|
/**
|
* 分页变化时触发
|
* @param pagination 分页参数
|
*/
|
handleTableChange(pagination) {
|
this.ipagination = pagination
|
this.loadData()
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/deep/ .ant-modal-content, /deep/ .ant-modal-header,
|
/deep/ .ant-table-placeholder, /deep/ .ant-pagination-item-active {
|
background-color: #000;
|
}
|
|
/deep/ .ant-modal-title, /deep/ .ant-pagination-total-text,
|
/deep/ .ant-modal-close, /deep/ .ant-form-item-label label,
|
/deep/ .ant-table-placeholder .ant-empty-description, /deep/ .ant-pagination-options-quick-jumper {
|
color: #fff;
|
}
|
|
/deep/ .ant-input, /deep/ .ant-pagination-item a,
|
/deep/ .ant-pagination-item-link, /deep/ .ant-select-selection--single,
|
/deep/ .ant-pagination-options-quick-jumper input, /deep/ .ant-select-dropdown-menu-item {
|
color: #fff;
|
background-color: #000;
|
}
|
|
/deep/ .ant-table-thead th {
|
background-color: #5C5C5C;
|
color: #fff;
|
}
|
|
/deep/ .ant-table-tbody td {
|
background-color: #262626;
|
color: #fff;
|
}
|
|
/deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
|
background: #7E7E7E;
|
}
|
|
/deep/ .ant-pagination-item-link:hover {
|
color: #1890FF;
|
border-color: #1890FF;
|
}
|
|
/deep/ .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
|
background-color: #1890FF;
|
}
|
</style>
|
