spc/src/views/process-inspection/generalOperation.vue
2023-04-23 14:55:15 +08:00

333 lines
9.1 KiB
Vue

<!--
* @Author: zwq
* @Date: 2022-09-15 10:44:29
* @LastEditors: zwq
* @LastEditTime: 2023-04-20 10:58:45
* @Description:
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<el-row :gutter="6" style="background-color:#e6f7ff;padding-top:10px;margin-bottom:0">
<el-form ref="dataForm" :model="dataForm" :rules="rules" size="small" label-width="80px">
<el-col :span="6">
<el-form-item label="检验时间" prop="time">
<el-date-picker
type="daterange"
v-model="time"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:style="{ width: '100%' }"
start-placeholder="开始日期"
end-placeholder="结束日期"
range-separator="-"
clearable
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检验站点" prop="inspectionSite">
<el-input
size="small"
v-model="dataForm.inspectionSite"
clearable
placeholder="请输入检验站点"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="产品" prop="productId">
<el-select
v-model="dataForm.productId"
@change="getWorkingprocedureByProductId"
placeholder="请选择产品"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in optionArr.arr0"
:key="index"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="工序" prop="workingProcedureId">
<el-select
v-model="dataForm.workingProcedureId"
placeholder="请选择工序"
filterable
clearable
@change="$forceUpdate()"
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in optionArr.arr4"
:key="index"
:label="item.workingProcedureName"
:value="item.workingProcedureId"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="机台号" prop="machineId">
<el-select
v-model="dataForm.machineId"
placeholder="请选择机台号"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in optionArr.arr1"
:key="index"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="批次号" prop="batchNumber">
<el-input
size="small"
v-model="dataForm.batchNumber"
clearable
placeholder="请输入批次号"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检验单号" prop="id">
<el-input size="small" v-model="dataForm.id" clearable placeholder="请输入检验单号" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="订单号" prop="orderNumber">
<el-input
size="small"
v-model="dataForm.orderNumber"
clearable
placeholder="请输入订单号"
/>
</el-form-item>
</el-col>
<el-col :span="12" :offset="12">
<el-form-item style="float:right;padding-right:20px">
<el-button size="small" @click="getDataList()">
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
查询
</el-button>
<el-button size="small" type="primary" @click="addOrUpdateHandle()">
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
登记
</el-button>
<el-button size="small" type="primary" @click="exportHandle('通用作业')">
<svg class="icon-svg">
<use xlink:href="#导出"></use>
</svg>
导出
</el-button>
</el-form-item>
</el-col>
</el-form>
</el-row>
<base-table
:table-props="tableProps"
:page="listQuery.page"
:limit="listQuery.limit"
:table-data="tableData"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="150"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
</base-table>
<pagination
:limit.sync="listQuery.limit"
:page.sync="listQuery.page"
:total="listQuery.total"
@pagination="getDataList"
/>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
:optionArr="optionArr"
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@successSubmit="getDataList"
></add-or-update>
</el-card>
</template>
<script>
import basicPage from "@/mixins/basic-page";
import AddOrUpdate from './components/generalOperation-add'
import basicFilter from "@/filters/basic-filter";
const tableProps = [
{
prop: "id",
label: "检验单号",
},
{
prop: "batchNumber",
label: "批次号",
},
{
prop: "inspectionStage",
label: "检验阶段",
filter: basicFilter("inspectionStage"),
},
{
prop: "productName",
label: "产品名称",
},
{
prop: "machineName",
label: "机台",
},
{
prop: "workingProcedureName",
label: "工序",
},
{
prop: "createTime",
label: "检验时间",
},
{
prop: "shiftName",
label: "班次",
},
{
prop: "numberOfSamples",
label: "抽样数量",
},
{
prop: "numberOfDefects",
label: "缺陷数量",
},
{
prop: "defectiveQuantity",
label: "不良数量",
},
{
prop: "remark",
label: "备注",
},
];
const tableBtn = [
{
type: "edit",
btnName: "编辑",
},
{
type: "delete",
btnName: "删除",
},
];
export default {
mixins: [basicPage],
data() {
return {
urlOptions: {
getDataListURL: "/processInspection/inspectionSheet/page",
deleteURL: "/processInspection/inspectionSheet",
exportUrl: "/processInspection/inspectionSheet/export",
},
optionArrUrl: [
"/basic/product/page",
"/basic/machine/page",
"/basic/shift/page",
"/sys/user/page",
],
tableProps,
tableBtn,
tableData: [],
optionArr: {},
time: [],
rules: {},
};
},
components: {
AddOrUpdate,
},
created() {},
activated() {
this.getArr();
},
methods: {
getArr() {
this.optionArrUrl.forEach((item, index) => {
this.$http
.get(item, {
params: {
page: 1,
limit: 500,
},
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$set(this.optionArr, `arr${index}`, res.data.list);
})
.catch(() => {});
});
},
getWorkingprocedureByProductId(val) {
this.dataForm.workingProcedureId = ''
if (val) {
this.$http
.get(`/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${val}`)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$set(this.optionArr, "arr4", res.data);
})
.catch(() => {});
}else{
this.$set(this.optionArr, "arr4", []);
}
},
getDataList() {
this.dataListLoading = true;
this.$http
.get(this.urlOptions.getDataListURL, {
params: {
page: this.listQuery.page,
limit: this.listQuery.limit,
startTime: this.time && this.time.length > 0 ? this.time[0] : "",
endTime: this.time && this.time.length > 0 ? this.time[1] : "",
...this.dataForm,
},
})
.then(({ data: res }) => {
this.dataListLoading = false;
if (res.code !== 0) {
this.tableData = [];
this.listQuery.total = 0;
return this.$message.error(res.msg);
}
this.tableData = res.data.list;
this.listQuery.total = res.data.total;
})
.catch(() => {
this.dataListLoading = false;
});
},
},
};
</script>
<style></style>