hefeihvac_web/src/views/business-data/mo/index.vue

213 lines
8.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<el-form ref="form4" :inline="true" :model="form4">
<el-form-item label="送货单ID">
<el-input v-model="query.deliveryHeaderId" clearable placeholder="请输入送货单ID" style="width: 170px;"
class="filter-item"
@keyup.enter.native="crud.toQuery"/>
</el-form-item>
<el-form-item label="Mo票">
<el-input v-model="query.labelNo" clearable placeholder="请输入Mo票" style="width: 170px;"
class="filter-item"
@keyup.enter.native="crud.toQuery"/>
</el-form-item>
<el-form-item label="物料编号">
<el-input v-model="query.itemCode" clearable placeholder="请输入物料编号" style="width: 170px;"
class="filter-item"
@keyup.enter.native="crud.toQuery"/>
</el-form-item>
<label class="el-form-item-label">接收日期</label>
<date-range-picker v-model="query.createTime" class="date-item" style="width: 100px"/>
<rrOperation :crud="crud"/>
<el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置
</el-button>
</el-form>
<div class="statusButton" style="border-bottom: solid lightgray 1px;">
<el-radio-group v-model="radio3" @change="clickChange" size="small">
<el-radio-button label="全部"> 全部</el-radio-button>
<el-radio-button label="PRINTED"> PRINTED</el-radio-button>
<el-radio-button label="STOCKIN"> STOCKIN</el-radio-button>
<el-radio-button label="其他"> 其他状态</el-radio-button>
</el-radio-group>
</div>
<!--如果想在工具栏加入更多按钮,可以使用插槽方式, slot = 'left' or 'right'-->
<crudOperation :permission="permission" :tableKey="this.$options.name"/>
<!--表单组件-->
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
:title="crud.status.title" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" show-summary height="400" v-loading="crud.loading" :data="crud.data" size="small"
style="width: 100%;"
@selection-change="crud.selectionChangeHandler"
:summary-method="getSummaries"
>
<el-table-column type="selection" width="55"/>
<el-table-column prop="index" align="center" label="序号" :resizable="false" type="index" width="50"/>
<el-table-column prop="deliveryHeaderId" label="送货单头ID" align="center" width="100"/>
<el-table-column prop="labelNo" label="MO票" align="center" width="150"/>
<el-table-column prop="itemCode" label="物料编码" align="center" width="150" :show-overflow-tooltip="true">
<template slot-scope="scope">
<div>{{ scope.row.item.code }}</div>
</template>
</el-table-column>
<el-table-column prop="itemName" label="物料描述" align="center" width="200" :show-overflow-tooltip="true">
<template slot-scope="scope">
<div>{{ scope.row.item.name }}</div>
</template>
</el-table-column>
<el-table-column prop="qty" label="可用数量" align="center" width="100"/>
<el-table-column prop="labelType" label="标签类型" align="center" width="100"/>
<el-table-column prop="deleteFlag" label="是否有效" align="center" width="100"/>
<el-table-column prop="labelState" label="标签状态" align="center" width="100"/>
<el-table-column prop="checkResult" label="检验状态" align="center" width="100"/>
<el-table-column prop="invCode" label="mls子库" align="center" width="100"/>
<!-- <el-table-column prop="workOrderName" label="工单名称"/>
<el-table-column prop="workOrderId" label="工单Id"/>
<el-table-column prop="selfWorkOrderId" label="自制件工单id"/>
<el-table-column prop="selfWorkOrderName" label="自制件工单编号"/>
-->
<el-table-column prop="datetimeStockin" label="mls入库时间" align="center" width="140"/>
<el-table-column prop="mlsUpdatetime" label="mls修改时间" align="center" width="140"/>
<el-table-column prop="mlsCreatetime" label="mls创建时间" align="center" width="140"/>
<el-table-column prop="createTime" label="wms接收时间" align="center" width="140"/>
<el-table-column prop="updateTime" label="wms修改时间" align="center" width="140"/>
<!-- <el-table-column v-if="checkPer(['admin','mo:edit','mo:del'])" label="操作" width="150px" align="center">
<template slot-scope="scope">
<udOperation
:data="scope.row"
:permission="permission"
/>
</template>
</el-table-column>-->
</el-table>
<!--分页组件-->
<div style="float:right">
<pagination/>
</div>
</div>
</div>
</template>
<script>
import crudMo from '@/api/mo'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import DateRangePicker from "@/components/DateRangePicker/index.vue";
const defaultForm = {
id: null,
}
export default {
name: 'Mo',
components: {DateRangePicker, pagination, crudOperation, rrOperation, udOperation},
mixins: [presenter(), header(), form(defaultForm), crud()],
cruds() {
return CRUD({
title: 'Mo票管理',
url: 'api/mo',
idField: 'id',
sort: 'labelNo,desc',
crudMethod: {...crudMo},
optShow: {
add: false,
edit: false,
del: false,
reset: false,
download: true
}
})
},
data() {
return {
form4: {},
radio3: '全部',
permission: {
add: ['admin', 'mo:add'],
edit: ['admin', 'mo:edit'],
del: ['admin', 'mo:del']
},
rules: {}
}
},
methods: {
// 钩子在获取表格数据之前执行false 则代表不获取数据
[CRUD.HOOK.beforeRefresh]() {
return true
},
clickChange(lab) {
if (lab === "全部") {
this.crud.resetQuery();
this.crud.toQuery();
} else if (lab === "PRINTED") {
this.query.labelState = 'PRINTED'
this.crud.toQuery();
}else if (lab === "STOCKIN") {
this.query.labelState = 'STOCKIN'
this.crud.toQuery();
}else {
this.query.labelState = '-'
this.crud.toQuery();
}
},
resetQuery() {
this.radio3 = '全部';
this.crud.resetQuery()
},
//合计
getSummaries(param) {
const {columns, data} = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
} else if (column.property === 'qty') {
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index];
}
}
});
return sums;
}
}
}
</script>
<style scoped>
</style>