factory_web/src/views/qm/testItem_form.vue

330 lines
8.0 KiB
Vue

<template>
<el-dialog
:title="titleMap[mode]"
v-model="visible"
:size="1000"
destroy-on-close
@closed="$emit('closed')"
>
<el-container v-loading="loading">
<el-main style="padding: 0 20px 20px 20px">
<el-form
ref="dialogForm"
:model="form"
:rules="rules"
label-position="right"
label-width="100px"
style="padding: 0 10px"
>
<el-row>
<el-col :md="12" :sm="24">
<el-form-item label="名称" prop="name">
<el-input
v-model="form.name"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="编号">
<el-input
v-model="form.number"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="字段类型">
<el-select
v-model="form.field_type"
placeholder="字段类型"
clearable
style="width: 100%"
@change="changeFieldType"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24" v-if="type!=='cz'">
<el-form-item label="关联检测项">
<xtSelect
:apiObj="apiObj"
:options="itemOptions"
v-model="form.affects"
v-model:label="form.affects_name"
style="width:100%"
:multiple="true"
>
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="描述" prop="description"></el-table-column>
</xtSelect>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24" v-if="type=='cz'">
<el-form-item label="关联工序">
<el-select
v-model="form.process"
placeholder="关联工序"
clearable
style="width: 100%"
>
<el-option
v-for="item in processOptions"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="描述">
<el-input
v-model="form.description"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="排序">
<el-input-number
v-model="form.sort"
clearable
></el-input-number>
</el-form-item>
</el-col>
<el-col v-if="type!=='cz'">
<el-form-item label="检验类型">
<el-checkbox-group v-model="form.tags">
<el-checkbox
v-for="item in tagsOptions"
:key="item.value"
:label="item.name"
:value="item.value"/>
</el-checkbox-group>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="是否只读">
<el-switch v-model="form.readonly"></el-switch>
</el-form-item>
</el-col>
<el-col v-if="form.readonly">
<el-form-item label="计算公式">
<el-input
v-model="form.formula"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="24" v-if="mcateTagsOptions.length>0">
<el-form-item label="物料系列标签">
<el-checkbox-group v-model="form.mcate_tags">
<el-checkbox
v-for="item in mcateTagsOptions"
:key="item"
:label="item"
:value="item"/>
</el-checkbox-group>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.field_type == 'select-text'||form.field_type == 'selects-text'">
<el-col :span="24">
<el-form-item label="选项">
<el-button icon="el-icon-circle-plus" text @click="addComponent">
添加
</el-button>
</el-form-item>
</el-col>
<template
v-for="(item, $index) in form.choices"
:key="$index"
>
<el-col :md="7" :sm="10">
<el-form-item label-width="80px">
<el-input
v-model="form.choices[$index]"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :md="1" :sm="2">
<div style="text-align: center">
<el-button type="danger" icon="el-icon-remove" text @click="delComponent($index)"></el-button>
</div>
</el-col>
</template>
</el-row>
</el-form>
</el-main>
<el-footer>
<el-button type="primary" :loading="isSaveing" @click="submit"
>保存</el-button
>
<el-button @click="visible = false">取消</el-button>
</el-footer>
</el-container>
</el-dialog>
</template>
<script>
const defaultForm = {
type:10,
name: "",
description: "",
sort: 1,
tags: [],
formula:"",
readonly:false,
affects:[],
mcate_tags: [],
choices: [""],
process:''
};
export default {
emits: ["success", "closed"],
props: {
type: {
type: String,
default: "",
},
},
data() {
return {
apiObj: this.$API.qm.testitem.list,
loading: false,
mode: "add",
titleMap: {
add: "新增",
edit: "编辑",
show: "查看",
},
//表单数据
form: Object.assign(defaultForm),
//验证规则
rules: {
name: [
{ required: true, message: "请输入名称", trigger: "blur" },
],
},
// itemOptions:null,
visible: false,
isSaveing: false,
options: [
{value:"input-int",name:"整数"},
{value:"input-number",name:"小数"},
{value:"input-text",name:"文本"},
{value:"select-text",name:"单选"},
{value:"selects-text",name:"多选"},
],
tagsOptions: [
{value:"purin",name:"入厂检验"},
{value:"process",name:"过程检验"},
{value:"first",name:"首件检验"},
{value:"prod",name:"成品检验"},
{value:"performance",name:"性能检验"},
],
mcateTagsOptions: [],
processOptions: [],
setFiltersVisible: false,
};
},
mounted() {
if(this.type=="cz"){
this.form.type=20;
this.getProcess();
}
},
methods: {
getProcess(){
let that = this;
that.$API.mtm.process.list.req({page:0}).then(res=>{
that.processOptions = res;
})
},
async getmcateTagsOptions() {
let that = this;
await that.$API.mtm.material.cates.req().then((res) => {
if(res&&res.length>0){
that.mcateTagsOptions = res;
}
});
},
addComponent() {
this.form.choices.push("");
},
delComponent(index) {
this.form.choices.splice(index, 1);
},
//显示
open(mode = "add") {
this.mode = mode;
this.visible = true;
this.form = {};
Object.assign(this.form, defaultForm);
return this;
},
//表单注入数据
setData(data) {
Object.assign(this.form, data);
},
changeFieldType(){
if(this.form.field_type == 'select-text'||this.form.field_type == 'selects-text'){}else{
this.form.choices = [];
}
},
//表单提交方法
submit() {
let that = this;
console.log(that.form);
that.$refs.dialogForm.validate(async (valid) => {
if (valid) {
that.isSaveing = true;
if (that.mode === "add") {
that.$API.qm.testitem.create
.req(that.form)
.then((res) => {
that.isSaveing = false;
that.visible = false;
that.$emit("success");
})
.catch((res) => {
that.isSaveing = false;
});
} else {
res = that.$API.qm.testitem.update
.req(that.form.id, that.form)
.then((res) => {
that.isSaveing = false;
that.visible = false;
that.$emit("success");
})
.catch((res) => {
that.isSaveing = false;
});
}
}
});
},
//设置过滤项
setFilters(filters) {
this.selectionFilters = filters;
this.setFiltersVisible = true;
},
},
};
</script>
<style></style>