spc/src/views/process-inspection/query-form.vue
2023-02-02 09:01:28 +08:00

357 lines
11 KiB
Vue

<!--
* @Author: zwq
* @Date: 2022-09-15 10:44:29
* @LastEditors: zwq
* @LastEditTime: 2023-01-09 14:10:26
* @Description:
-->
<template>
<div>
<el-row
:gutter="6"
style="background-color:#e6f7ff;margin:-20px;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="dataForm.time"
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" v-if="false">
<el-form-item label="工厂" prop="field102">
<el-select
v-model="dataForm.field102"
placeholder="请选择工厂"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in field102Options"
:key="index"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="产品" prop="productId">
<el-select
v-model="dataForm.productId"
placeholder="请选择产品"
@change="getWorkingprocedureByProductId"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="item in optionArr.arr0"
:key="item.id"
: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="inspectionStage">
<el-select
v-model="dataForm.inspectionStage"
@change="getFeaturesList()"
placeholder="请选择检验类型"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="item in inspectionStageArr"
:key="item.name"
:label="item.name"
:value="item.value"
></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"
@change="$forceUpdate(), getFeaturesList()"
placeholder="请选择工序"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="item in optionArr.arr4"
:key="item.workingProcedureId"
: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="productFeaturesId">
<el-select
v-model="dataForm.productFeaturesId"
placeholder="请选择特性"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in optionArr.arr2"
:key="index"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" v-if="!groupTypeShow">
<el-form-item label="样本大小" prop="sampleSize">
<el-input-number
v-model="dataForm.sampleSize"
placeholder="样本大小"
:step="1"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="6" v-if="groupTypeShow">
<el-form-item label="分组" prop="groupType">
<el-radio-group v-model="dataForm.groupType">
<el-radio :label="1">年</el-radio>
<el-radio :label="2">月</el-radio>
<el-radio :label="3"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="groupTypeShow ? 6 : 12">
<el-form-item>
<el-button size="small" @click="getDataList()">
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
查询
</el-button>
<el-button v-if="showRaw" size="small" type="primary" @click="rawData()">
<svg class="icon-svg"><use xlink:href="#历史记录"></use></svg>
原始数据
</el-button>
<el-button size="small" type="primary" @click="exportHandle()">
<svg class="icon-svg">
<use xlink:href="#导出"></use>
</svg>
导出
</el-button>
<el-button v-if="!groupTypeShow" size="small" type="primary" @click="showScheme()">
<svg class="icon-svg"><use xlink:href="#方案管理"></use></svg>
配置分析方案
</el-button>
</el-form-item>
</el-col>
</el-form>
</el-row>
<!-- 弹窗, 新增 / 修改 -->
<interpretationScheme
v-if="SchemeVisible"
ref="Scheme"
@setScheme="setScheme"
></interpretationScheme>
</div>
</template>
<script>
import interpretationScheme from "./components/interpretationScheme";
export default {
props: {
pageName: {
type: String,
default: () => {
return "";
},
},
dataForm: {
type: Object,
default: () => {
return {};
},
},
groupTypeShow: {
type: Boolean,
default: false,
},
fType: {
type: Number,
default: 1,
},
showRaw: {
type: Boolean,
default: false,
}
},
components: {
interpretationScheme,
},
data() {
return {
SchemeVisible: false,
inspectionStageArr: [],
optionArrUrl: ["/basic/product/page"],
optionArr: {},
rules: {
productId: [
{
required: true,
message: "请选择产品",
trigger: "change",
},
],
productFeaturesId: [
{
required: true,
message: "请选择特性",
trigger: "change",
},
],
workingProcedureId: [
{
required: true,
message: "请选择工序",
trigger: "change",
},
],
time: [
{
required: true,
message: "请选择检验时间",
trigger: "change",
},
],
},
};
},
created() {},
methods: {
getWorkingprocedureByProductId(val) {
this.$set(this.dataForm, "inspectionStage", "");
this.$set(this.dataForm, "workingProcedureId", "");
this.getWorkingprocedureArr(val);
this.getFeaturesList();
},
getWorkingprocedureArr(val) {
if (val) {
const obj = this.optionArr.arr0.find((item) => {
return item.id === val;
});
const obj1 = { 1: "进货检验", 2: "过程检验", 3: "成品检验", 4: "出货检验" };
const inspectionStage = obj.inspectionStage.split(",");
this.inspectionStageArr = [];
inspectionStage.forEach((item) => {
this.inspectionStageArr.push({
value: item,
name: obj1[item],
});
});
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.inspectionStageArr = [];
this.$set(this.optionArr, "arr2", []);
this.$set(this.optionArr, "arr4", []);
}
},
getArr() {
this.optionArrUrl.forEach((item, index) => {
this.$http
.get(item, {
params: {
page: 1,
limit: 500,
},
})
.then(({ data: res }) => {
if (res.code !== 0) {
this.$set(this.optionArr, `arr${index}`, []);
return this.$message.error(res.msg);
}
this.$set(this.optionArr, `arr${index}`, res.data.list);
})
.catch(() => {});
});
},
getFeaturesList() {
this.$set(this.dataForm, "productFeaturesId", "");
this.$http
.post(
`/processInspection/inspectionSheet/getInspectionSheetFeaturesList?productId=${
this.dataForm.productId
}${
this.dataForm.inspectionStage ? "&inspectionStage=" + this.dataForm.inspectionStage : ""
}${
this.dataForm.workingProcedureId
? "&workingProcedureId=" + this.dataForm.workingProcedureId
: ""
}`
)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$set(this.optionArr, "arr2", []);
return this.$message.error(res.msg);
}
const arr = res.data.filter((item) => item.type === this.fType);
this.$set(this.optionArr, "arr2", arr);
})
.catch(() => {});
},
getDataList() {
this.dataForm.procedureName = this.optionArr.arr4.find((item) => {
return item.workingProcedureId === this.dataForm.workingProcedureId;
})?.workingProcedureName;
this.dataForm.begin =
this.dataForm.time && this.dataForm.time.length > 0 ? this.dataForm.time[0] : "";
this.dataForm.end =
this.dataForm.time && this.dataForm.time.length > 0 ? this.dataForm.time[1] : "";
this.$emit("getDataList");
},
showScheme() {
this.SchemeVisible = true;
this.$nextTick(() => {
this.$refs.Scheme.init();
});
},
setScheme(interpretationScheme) {
this.dataForm.interpretationScheme = interpretationScheme;
},
rawData() {
this.$emit("rawData");
},
exportHandle() {
this.$emit("exportHandle", this.pageName);
},
},
};
</script>
<style></style>