spc/src/views/spc-basic/components/productList-three-add.vue
2022-12-13 16:41:37 +08:00

302 lines
8.4 KiB
Vue

<!--
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2022-12-12 15:51:58
* @Description:
-->
<template>
<el-dialog
:title="!threeDataForm.id ? '新增' : '修改'"
append-to-body
:visible.sync="threeVisible"
>
<el-row :gutter="10">
<el-form
:model="threeDataForm"
:rules="dataRule"
ref="threeDataForm"
@keyup.enter.native="dataFormSubmit()"
label-width="80px"
>
<el-col :span="8">
<el-form-item label="编码" prop="code">
<el-input v-model="threeDataForm.code" placeholder="编码"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="名称" prop="name">
<el-input v-model="threeDataForm.name" placeholder="名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="特性类型" prop="type">
<el-select
v-model="threeDataForm.type"
@change="numIsblack"
:style="{ width: '100%' }"
filterable
placeholder="请选择特性类型"
>
<el-option
v-for="item in typeArr"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="缺陷等级" prop="defectLevel">
<el-select
:disabled="threeDataForm.type === 2"
v-model="threeDataForm.defectLevel"
:style="{ width: '100%' }"
filterable
placeholder="请选择缺陷等级"
>
<el-option
v-for="item in defectLevelArr"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="量具" prop="measureToolId">
<el-select
:disabled="threeDataForm.type === 2"
v-model="threeDataForm.measureToolId"
placeholder="请选择单位"
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in measureToolArr"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="单位" prop="unitId">
<el-select
:disabled="threeDataForm.type === 2"
v-model="threeDataForm.unitId"
placeholder="请选择单位"
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in unitArr"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="规格" prop="specifications">
<el-input
:disabled="threeDataForm.type === 2"
v-model="threeDataForm.specifications"
placeholder="规格"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="LSL" prop="lsl">
<el-input-number
:disabled="threeDataForm.type === 2"
v-model="threeDataForm.lsl"
placeholder="LSL"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="SL" prop="sl">
<el-input-number
:disabled="threeDataForm.type === 2"
v-model="threeDataForm.sl"
placeholder="SL"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="USL" prop="usl">
<el-input-number
:disabled="threeDataForm.type === 2"
v-model="threeDataForm.usl"
placeholder="USL"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="备注" prop="remark">
<el-input v-model="threeDataForm.remark" placeholder="备注"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="threeVisible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
threeVisible: false,
threeDataForm: {
id: "",
productId: "",
code: "",
name: "",
type: "",
defectLevel: "",
measureToolId: "",
unitId: "",
specifications: "",
lsl: "",
sl: "",
usl: "",
remark: "",
},
typeArr: [
{
name: "计数",
value: 2,
},
{
name: "计量",
value: 1,
},
],
defectLevelArr: [
{
name: "致命缺陷",
value: 1,
},
{
name: "严重缺陷",
value: 2,
},
{
name: "轻微缺陷",
value: 3,
},
],
measureToolArr: [],
unitArr: [],
dataRule: {
code: [{ required: true, message: "编码不能为空", trigger: "blur" }],
name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
},
};
},
created() {
this.getArr();
},
methods: {
init(id, productId) {
this.threeDataForm.id = id || "";
this.threeDataForm.productId = productId;
this.threeVisible = true;
this.$nextTick(() => {
this.$refs["threeDataForm"].resetFields();
if (this.threeDataForm.id) {
this.$http
.get(`/basic/productFeatures/${this.threeDataForm.id}`)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.threeDataForm = res.data;
})
.catch(() => {});
}
});
},
getArr() {
this.$http
.get("/basic/unit/page", {
params: {
page: 1,
limit: 500,
},
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.unitArr = res.data.list;
})
.catch(() => {});
this.$http
.get("/basic/measureTool/page", {
params: {
page: 1,
limit: 500,
},
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.measureToolArr = res.data.list;
})
.catch(() => {});
},
numIsblack(val){
if(val===2){
this.threeDataForm.defectLevel= ""
this.threeDataForm.measureToolId= ""
this.threeDataForm.unitId= ""
this.threeDataForm.specifications= ""
this.threeDataForm.lsl= 0
this.threeDataForm.sl= 0
this.threeDataForm.usl= 0
}
},
// 表单提交
dataFormSubmit() {
this.$refs["threeDataForm"].validate((valid) => {
if (!valid) {
return false;
}
this.$http[!this.threeDataForm.id ? "post" : "put"](
"/basic/productFeatures/",
this.threeDataForm
)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$message({
message: this.$t("prompt.success"),
type: "success",
duration: 500,
onClose: () => {
this.threeVisible = false;
this.$emit("refreshThreeDataList");
},
});
})
.catch(() => {});
});
},
},
};
</script>