工单看板功能实现
This commit is contained in:
@@ -37,4 +37,13 @@ export function GetWorkOrderBoardData(workOrderId) {
|
|||||||
method: 'get',
|
method: 'get',
|
||||||
params: workOrderId,
|
params: workOrderId,
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取质量检测工单，生产线数据列表
|
||||||
|
export function GetWorkOrderFqcTableData(query) {
|
||||||
|
return request({
|
||||||
|
url: '/mes/qc/FQC/common/getWorkOrderFqcTableData',
|
||||||
|
method: 'post',
|
||||||
|
data: query,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
209
src/views/kanbanManagement/FqcWorkOrderBoard/index.vue
Normal file
209
src/views/kanbanManagement/FqcWorkOrderBoard/index.vue
Normal file
@@ -0,0 +1,209 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- :model属性用于表单验证使用 比如下面的el-form-item 的 prop属性用于对表单值进行验证操作 -->
|
||||||
|
<el-form :model="queryParams" size="small" label-position="right" inline ref="queryForm" :label-width="labelWidth" v-show="showSearch" @submit.native.prevent>
|
||||||
|
<el-form-item label="工单号" prop="workOrderId">
|
||||||
|
<el-input v-model.trim="queryParams.workOrderId" :clearable="true" placeholder="请输入工单号" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="零件号" prop="partnumber">
|
||||||
|
<el-input v-model.trim="queryParams.partnumber" :clearable="true" placeholder="请输入零件号" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="工单描述" prop="customName">
|
||||||
|
<el-input v-model.trim="queryParams.description" :clearable="true" placeholder="工单描述,颜色,规格" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="工单排单日期" prop="startTime">
|
||||||
|
<el-date-picker v-model="queryParams.startTime" :clearable="false" type="date" placeholder="选择日期" :picker-options="pickerOptions">
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<!-- 工具区域 -->
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-tag>工单数:{{total}}</el-tag>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-tag type="success">完成标签打印工单数:{{finishTotal}}</el-tag>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-tag type="danger">未完成标签打印工单数:{{notFinishTotal}}</el-tag>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 数据区域 -->
|
||||||
|
<el-table :data="dataList" v-loading="loading" ref="table" border highlight-current-row>
|
||||||
|
<el-table-column type="index" width="50" align="center" />
|
||||||
|
<el-table-column prop="workOrderId" label="工单号" align="center" min-width="120" :show-overflow-tooltip="true" v-if="checkColumnsShow('workOrderId')" />
|
||||||
|
<el-table-column prop="partnumber" label="零件号" align="center" min-width="120" :show-overflow-tooltip="true" v-if="checkColumnsShow('partnumber')" />
|
||||||
|
<el-table-column prop="description" label="描述" align="center" :show-overflow-tooltip="true" v-if="checkColumnsShow('description')" />
|
||||||
|
<el-table-column prop="color" label="颜色" align="center" :show-overflow-tooltip="true" v-if="checkColumnsShow('color')" />
|
||||||
|
<el-table-column prop="specification" label="规格" align="center" :show-overflow-tooltip="true" v-if="checkColumnsShow('specification')" />
|
||||||
|
<el-table-column prop="isFinish" label="是否打完" align="center" v-if="checkColumnsShow('isFinish')">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag v-if="scope.row.isFinish" type="success">已打完</el-tag>
|
||||||
|
<el-tag v-else type="danger">未打完</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="workOrderPackageCount" label="首检合格" align="center" :show-overflow-tooltip="true" v-if="checkColumnsShow('workOrderPackageCount')" />
|
||||||
|
<el-table-column prop="workOrderFinishPackageNum" label="已打标签" align="center" :show-overflow-tooltip="true" v-if="checkColumnsShow('workOrderFinishPackageNum')" />
|
||||||
|
<el-table-column prop="workOrderNotFinishPackageNum" label="未打标签" align="center" :show-overflow-tooltip="true" v-if="checkColumnsShow('workOrderNotFinishPackageNum')" />
|
||||||
|
<el-table-column prop="team" label="班组" align="center" :show-overflow-tooltip="true" v-if="checkColumnsShow('team')" />
|
||||||
|
<el-table-column prop="startTime" label="工单开始" align="center" :show-overflow-tooltip="true" v-if="checkColumnsShow('startTime')" />
|
||||||
|
<el-table-column prop="endTime" label="工单结束" align="center" :show-overflow-tooltip="true" v-if="checkColumnsShow('endTime')" />
|
||||||
|
<el-table-column prop="status" label="工单状态" align="center" v-if="checkColumnsShow('status')">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag v-if="scope.row.status === 0" effect="dark" type="info">未上线</el-tag>
|
||||||
|
<el-tag v-if="scope.row.status === 1" effect="dark" type="warning">已上线</el-tag>
|
||||||
|
<el-tag v-if="scope.row.status === 2" effect="dark" type="success">已完成</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="remark" label="备注" align="center" :show-overflow-tooltip="true" v-if="checkColumnsShow('remark')" />
|
||||||
|
<!-- <el-table-column label="操作" align="center" width="140">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button size="mini" v-hasPermi="['wmsManagement:wmcustom:edit']" type="success" icon="el-icon-edit" title="编辑" @click="handleUpdate(scope.row)"></el-button>
|
||||||
|
<el-button size="mini" v-hasPermi="['wmsManagement:wmcustom:delete']" type="danger" icon="el-icon-delete" title="删除" @click="handleDelete(scope.row)"></el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column> -->
|
||||||
|
</el-table>
|
||||||
|
<!-- <pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { GetWorkOrderFqcTableData } from '@/api/qualityManagement/commonFQC.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'FqcWorkOrderBoard',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
labelWidth: '100px',
|
||||||
|
formLabelWidth: '100px',
|
||||||
|
// 遮罩层
|
||||||
|
loading: false,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
workOrderId: "",
|
||||||
|
partnumber: "",
|
||||||
|
description: "",
|
||||||
|
startTime: new Date(),
|
||||||
|
status: -1
|
||||||
|
},
|
||||||
|
pickerOptions: {
|
||||||
|
disabledDate(time) {
|
||||||
|
return time.getTime() > Date.now();
|
||||||
|
},
|
||||||
|
shortcuts: [{
|
||||||
|
text: '今天',
|
||||||
|
onClick(picker) {
|
||||||
|
picker.$emit('pick', new Date());
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '昨天',
|
||||||
|
onClick(picker) {
|
||||||
|
const date = new Date();
|
||||||
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||||
|
picker.$emit('pick', date);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '一周前',
|
||||||
|
onClick(picker) {
|
||||||
|
const date = new Date();
|
||||||
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||||
|
picker.$emit('pick', date);
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{ index: 0, key: 'id', label: `主键`, checked: true },
|
||||||
|
{ index: 1, key: 'workOrderId', label: `工单号`, checked: true },
|
||||||
|
{ index: 2, key: 'partnumber', label: `零件号`, checked: true },
|
||||||
|
{ index: 3, key: 'description', label: `描述`, checked: true },
|
||||||
|
{ index: 4, key: 'color', label: `颜色`, checked: true },
|
||||||
|
{ index: 5, key: 'specification', label: `规格`, checked: true },
|
||||||
|
{ index: 6, key: 'isFinish', label: `是否打完`, checked: true },
|
||||||
|
{ index: 7, key: 'workOrderPackageCount', label: `首检合格`, checked: true },
|
||||||
|
{ index: 8, key: 'workOrderFinishPackageNum', label: `已打标签`, checked: true },
|
||||||
|
{ index: 9, key: 'workOrderNotFinishPackageNum', label: `未打标签`, checked: true },
|
||||||
|
{ index: 10, key: 'team', label: `班组`, checked: true },
|
||||||
|
{ index: 11, key: 'startTime', label: `工单开始`, checked: true },
|
||||||
|
{ index: 12, key: 'endTime', label: `工单结束`, checked: true },
|
||||||
|
{ index: 13, key: 'status', label: `工单状态`, checked: true },
|
||||||
|
{ index: 14, key: 'remark', label: `备注`, checked: true },
|
||||||
|
],
|
||||||
|
// 数据列表
|
||||||
|
dataList: [],
|
||||||
|
// 总记录数
|
||||||
|
total: 0,
|
||||||
|
timer1: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
finishTotal() {
|
||||||
|
return this.dataList.filter(item => item.isFinish).length;
|
||||||
|
},
|
||||||
|
notFinishTotal() {
|
||||||
|
return this.dataList.filter(item => !item.isFinish).length;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 列表数据查询
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.createTimer();
|
||||||
|
},
|
||||||
|
unmounted() {
|
||||||
|
this.clearTimer();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 查询数据
|
||||||
|
getList() {
|
||||||
|
this.loading = true
|
||||||
|
GetWorkOrderFqcTableData(this.queryParams).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
this.dataList = res.data.result
|
||||||
|
this.total = res.data.totalNum
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 重置查询操作
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm('queryForm')
|
||||||
|
this.handleQuery()
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
/** 检查列表是否显示 */
|
||||||
|
checkColumnsShow(key) {
|
||||||
|
for (let item of this.columns) {
|
||||||
|
if (key === item.key) {
|
||||||
|
return item.checked;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
// 自动获取数据
|
||||||
|
clearTimer() {
|
||||||
|
clearInterval(this.timer1)
|
||||||
|
this.timer1 = null
|
||||||
|
},
|
||||||
|
createTimer() {
|
||||||
|
this.clearTimer();
|
||||||
|
this.timer1 = setInterval(() => {
|
||||||
|
getList()
|
||||||
|
}, 3600000)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user