<script setup>
|
|
import {onMounted, reactive, ref} from "vue";
|
import {useRouter} from 'vue-router'
|
import request from "@/utils/request";
|
import {ElMessage} from "element-plus";
|
import deepClone from "@/utils/deepClone";
|
import {changeFilterEvent,filterChanged} from "@/hook"
|
import {addListener,toolbarButtonClickEvent} from "@/hook/mouseMove";
|
|
let router = useRouter()
|
|
//定义页面总页数
|
let pageTotal=ref('')
|
//定义数据返回结果
|
let produceList = ref([])
|
//定义当前页数
|
let pageNum=$ref(1)
|
const xGrid = ref();
|
let cellArea = ref()
|
|
|
let filterData = ref({
|
|
})
|
|
|
//定义接收加载表头下拉数据
|
const titleSelectJson = ref({
|
})
|
|
//第一次调用
|
request.post(`/rework/getSelectRework/${pageNum}/100`,filterData.value).then((res) => {
|
|
if(res.code==200){
|
|
produceList = deepClone(res.data)
|
xGrid.value.loadData(produceList)
|
gridOptions.loading=false
|
}else{
|
ElMessage.warning(res.msg)
|
router.push("/login")
|
}
|
})
|
|
|
|
|
|
|
|
//表尾求和
|
const sumNum = (list, field) => {
|
let count = 0
|
list.forEach(item => {
|
count += Number(item[field])
|
})
|
return count.toFixed(2)
|
}
|
|
//子组件接收参数
|
|
const gridOptions = reactive({
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe: true,//斑马纹
|
rowConfig: {isCurrent: true, isHover: true, height: 30},//鼠标移动或选择高亮
|
id: 'CustomerList',
|
showFooter: true,//显示脚
|
printConfig: {},
|
importConfig: {},
|
exportConfig: {},
|
scrollY: {enabled: true},//开启虚拟滚动
|
showOverflow: true,
|
menuConfig: {
|
body: {
|
options: [
|
[
|
{ code: 'copyChecked', name: '选中相同', prefixIcon: 'vxe-icon-copy', visible: true, disabled: false },
|
]
|
]
|
}
|
},
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
filterConfig: { //筛选配置项
|
//remote: true
|
},
|
customConfig: {
|
storage: true
|
},
|
editConfig: {
|
trigger: 'click',
|
mode: 'row',
|
showStatus: true
|
},//表头参数
|
columns: [
|
{type: 'expand', fixed: "left", slots: {content: 'content'}, width: 50},
|
{field: 'select',type:'checkbox',title: '选择', width: 80,fixed:"left"},
|
{type: 'seq', fixed: "left", title: '自序', width: 50},
|
{field: 'reworkTeam', width: 120, title: '返工班组', slots: {default: 'responsibleTeam_default', edit: 'responsibleTeam'}, editRender: {}},
|
{field: 'orderId', width: 120, title: '销售单号', sortable: true, showOverflow: "ellipsis", filters: [{data: ''}], slots: {filter: 'num1_filter'},filterMethod:filterChanged},
|
{field: 'processId', width: 120, title: '流程卡号', sortable: true, filters: [{data: ''}], slots: {filter: 'num1_filter'},filterMethod:filterChanged},
|
{field: 'project', width: 120, title: '项目名称', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true,filterMethod:filterChanged},
|
{field: 'batch', width: 80, title: '批次', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }, showOverflow: "ellipsis",filterMethod:filterChanged},
|
{field: 'orderSort', width: 80, title: '序号', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
|
{field: 'productName', width: 120, title: '单片名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
|
{field: 'technologyNumber', width: 80, title: '标记', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }, showOverflow: "ellipsis",filterMethod:filterChanged},
|
{field: 'glassAddress', width: 90, title: '片标记', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
|
{field: 'breakageQuantity', width: 120, title: '次破数量', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
|
{field: 'reworkNum',width:120, title: '返工数量',editRender: { name: 'input', attrs: { placeholder: '' } },filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
|
{field: 'width', width: 80, title: '宽', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
|
{field: 'height', width: 80, title: '高', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
|
{field: 'shape', width: 80, title: '形状', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
|
{field: 'reworkProcesses', width: 100, title: '返工工序', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
|
{field: 'reworkType', width: 100, title: '返工类型', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
|
{field: 'reworkReason', width: 120, title: '返工原因', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
|
{field: 'responsibleEquipment', width: 120, title: '责任设备', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
|
{field: 'responsibleTeam', width: 120, title: '责任班组', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
|
{field: 'area', width: 120, title: '返工面积', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
|
{field: 'qualityInspector', width: 100, title: '质检员', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged}
|
],//表头按钮
|
|
toolbarConfig: {
|
buttons: [
|
{'code': 'add', 'name': '保存',status: 'primary',icon: 'vxe-icon-save'}
|
],
|
import: false,
|
export: true,
|
print: true,
|
zoom: true,
|
custom: true
|
},
|
//脚部求和
|
footerMethod({columns, data}) {//页脚函数
|
let footList = ['reworkNum', 'breakageQuantity']
|
return [
|
columns.map((column, columnIndex) => {
|
if (columnIndex === 0) {
|
return '合计:'
|
}
|
if (footList.includes(column.field)) {
|
return sumNum(data, column.field)
|
}
|
return ''
|
})
|
]
|
}
|
|
})
|
|
const gridEvents = {
|
async toolbarButtonClick({code}) {
|
const $grid = xGrid.value
|
if ($grid) {
|
switch (code) {
|
case 'add': {
|
const selectRecords = $grid.getCheckboxRecords()
|
|
if (selectRecords.length > 0) {
|
const errMap = await $grid.validate(selectRecords)
|
if (errMap) {
|
return
|
}
|
} else {
|
ElMessage.warning("未选中数据")
|
return
|
}
|
|
|
let flowData = ref({
|
rework: selectRecords
|
|
})
|
request.post("/rework/saveRework", flowData.value).then((res) => {
|
if(res.code==200){
|
ElMessage.success("返工单提交成功")
|
router.push({path:'/main/rework/AddRework',query:{random:Math.random()}})
|
}else{
|
ElMessage.warning(res.msg)
|
router.push("/login")
|
}
|
})
|
break
|
}
|
|
|
|
}
|
}
|
},
|
menuClick ({ menu, row, column }) {
|
const $grid = xGrid.value
|
if ($grid) {
|
switch (menu.code) {
|
|
case 'copyChecked' :{
|
let result = toolbarButtonClickEvent()
|
if(result){
|
const dataList = xGrid.value.getTableData().visibleData
|
let firstVal=null;
|
if(result.cell.indexOf('.')>-1){
|
firstVal = eval("dataList["+result.start +"]."+result.cell)
|
}else {
|
firstVal=dataList[result.start][result.cell];
|
}
|
dataList.forEach((item,index) =>{
|
if(index>=result.start && index<=result.end){
|
if(result.cell.indexOf('.')>-1){
|
const columnArr = result.cell.split('.')
|
item[columnArr[0]][columnArr[1]] = firstVal
|
}else{
|
item[result.cell] = firstVal
|
}
|
|
}
|
})
|
}
|
break
|
}
|
|
}
|
}
|
}
|
}
|
|
const selectOrderList = ()=>{
|
request.post(`/rework/SelectRework/${pageNum.value}/${total.pageSize}/${selectDate.value}`,filterData.value).then((res) => {
|
if(res.code==200){
|
selectDate.value = res.data.selectDate
|
|
produceList = deepClone(res.data.data)
|
xGrid.value.loadData(produceList)
|
gridOptions.loading=false
|
}else{
|
ElMessage.warning(res.msg)
|
router.push("/login")
|
}
|
})
|
}
|
|
|
//页脚跳转
|
const handlePageChange = ({ currentPage, pageSize }) => {
|
total.pageTotal = pageSize
|
pageNum.value=currentPage
|
|
selectOrderList()
|
}
|
|
/*数据校验*/
|
const validRules = ref({
|
reworkTeam: [
|
{ required: true, message: '请选择返工班组' }
|
],
|
|
reworkNum: [{
|
validator (e) {
|
if (e.row.reworkNum > e.row.breakageQuantity) {
|
return new Error('返工数量不能大于次破数量')
|
}else if (e.row.reworkNum ==="") {
|
return new Error('返工数量不能为空或者是0')
|
}
|
const regex = /^[1-9]\d*$/g
|
if ( !regex.test(e.row.reworkNum) ) {
|
return new Error('请输入正整数')
|
}
|
|
}
|
|
}]
|
|
})
|
|
|
onMounted(()=>{
|
//启用表格拖动选中
|
addListener(xGrid.value,gridOptions,cellArea.value)
|
})
|
|
|
|
|
|
</script>
|
|
<template>
|
<div class="main-div-customer">
|
<vxe-grid
|
max-height="100%"
|
class="mytable-scrollbar"
|
ref="xGrid"
|
v-bind="gridOptions"
|
v-on="gridEvents"
|
:edit-rules="validRules"
|
|
>
|
<!-- @toolbar-button-click="toolbarButtonClickEvent"-->
|
<!-- 下拉显示所有信息插槽-->
|
<template #content="{ row }">
|
<ul class="expand-wrapper">
|
<li v-for="(item,index) in gridOptions.columns" v-show="item.field!=undefined ">
|
<span style="font-weight: bold">{{ item.title + ': ' }}</span>
|
<span>{{ row[item.field] }}</span>
|
</li>
|
</ul>
|
</template>
|
|
<!--左边固定显示的插槽-->
|
<template #button_slot="{ row }">
|
<el-button @click="getTableRow(row,'edit')" link type="primary" size="small">保存</el-button>
|
|
</template>
|
|
<!-- 筛选插槽 -->
|
<template #num1_filter="{ column, $panel }">
|
<div>
|
<div v-for="(option, index) in column.filters" :key="index">
|
<input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
|
</div>
|
</div>
|
</template>
|
|
<!-- 返工班组-->
|
<template #responsibleTeam="{ row }">
|
<vxe-select v-model="row.reworkTeam" transfer >
|
<vxe-option v-for="item in row.basicCategory" :key="item.basicName" :label="item.basicName" :value="item.basicName"/>
|
</vxe-select>
|
</template>
|
<template #responsibleTeam_default="{ row }">
|
<span>{{ row.reworkTeam }}</span>
|
</template>
|
|
|
|
|
</vxe-grid>
|
</div>
|
<div class="vxe-table--cell-area" ref="cellArea" >
|
<span class="vxe-table--cell-main-area" ></span>
|
|
<span class="vxe-table--cell-active-area" ></span>
|
</div>
|
</template>
|
|
<style scoped>
|
.main-div-customer {
|
width: 99%;
|
height: 100%;
|
}
|
.vxe-grid {
|
/* 禁用浏览器默认选中 */
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
}
|
</style>
|
