四大金刚（循环写法渲染页面）
<template>
<div>
<a-card size="small" :title="titlename2" style="margin-top:20px;">
<a-form-model
ref="ruleForm"
:model="form"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<div class="">
<h4 class="item-paragraph">Process Information</h4>
<a-row :gutter="24">
<a-col
:span="6"
v-for="(itempr, indexpr) in form.prInformationArr"
:key="indexpr"
>
<a-form-model-item
:ref="itempr.ref"
:label="itempr.label"
:prop="itempr.prop"
>
<a-input-number
v-if="itempr.type == 'inputnumber'"
:min="1"
:step="1"
:formatter="(value) => `${value}`"
:parser="(value) => value.replace('', '')"
style="width:100%"
v-model="form.prInformationArr[indexpr].value"
/>
<a-input-search v-else-if="itempr.type == 'inputsearch'"
placeholder="" :loading="itempr.loading"
@search="onSearch"
v-model="form.prInformationArr[indexpr].value" />
<a-input v-else v-model="form.prInformationArr[indexpr].value" />
</a-form-model-item>
</a-col>
</a-row>
<h4 class="item-paragraph">Measure Information</h4>
<a-row :gutter="24">
<a-col
:span="6"
v-for="(itempr, indexpr) in form.meInformationArr"
:key="indexpr"
>
<a-form-model-item
:ref="itempr.ref"
:label="itempr.label"
:prop="itempr.prop"
>
<a-input v-model="form.meInformationArr[indexpr].value" />
</a-form-model-item>
</a-col>
</a-row>
<h4 class="item-paragraph">Smart Smapling Group Rule</h4>
<a-row :gutter="24">
<a-col
:span="6"
v-for="(itempr, indexpr) in form.smaplingGroupRuleArr"
:key="indexpr"
>
<a-form-model-item
:ref="itempr.ref"
:label="itempr.label"
:prop="itempr.prop"
>
<a-input-number
v-if="itempr.type == 'inputnumber'"
:min="1"
:step="1"
:formatter="(value) => `${value}`"
:parser="(value) => value.replace('', '')"
style="width:100%"
v-model="form.smaplingGroupRuleArr[indexpr].value"
/>
<a-textarea v-else-if="itempr.type == 'textarea'" v-model="form.smaplingGroupRuleArr[indexpr].value" :auto-size="{ minRows: 2, maxRows: 6 }" />
<a-input v-else v-model="form.smaplingGroupRuleArr[indexpr].value" />
</a-form-model-item>
</a-col>
</a-row>
</div>
<div class="attachment-box">
<h4 class="item-paragraph">Attachment</h4>
<attach-ment
@UpLoadAttachment="UpLoadAttachment"
:attachments="attachments"
:caseNo="attachmentCaseNo"
:isEdit="isEdit"
:rejcetFlag="rejcetFlag"
></attach-ment>
</div>
<a-row type="flex" justify="center">
<a-col>
<div class="smapling-select flex-btn">
<a-button type="primary" block @click="onSubmit"> Submit </a-button>
<a-button style="margin-left: 15px" block>Cancel</a-button>
<a-button type="danger" style="margin-left: 15px" block>
Save Draft
</a-button>
</div>
</a-col>
</a-row>
</a-form-model>
</a-card>
</div>
</template>
<script>
import attachMent from "@/components/attachment/Attachment.vue"
export default {
components:{
attachMent
},
data() {
return {
attachments:[],
attachmentCaseNo:"0001",
rejcetFlag:true,
isEdit:false,
titlename2: "Applicaton Information",
labelCol: { span: 10 },
wrapperCol: { span: 14 },
rules: {
productName:[
{required: true,message: '请填写Product name',}
],
processStepSEQ:[
{required: true,message: '请填写Process Step SEQ',}
],
totalChamberCount:[
{required: true,message: '请填写大于0 的整数',}
],
aVGChamberCount:[
{required: true,message: '请填写大于0 的整数',}
],
selectWaferCount:[
{required: true,message: '请填写大于0 的整数',}
],
},
form: {
prInformationArr: [
{
label: "Product Name",
ref: "productName",
prop: "productName",
type: "",
value: "",
},
{
label: "processStepSEQ",
ref: "processStepSEQ",
prop: "processStepSEQ",
type: "inputsearch",
value: "",
loading:false,
},
{
label: "Process Step DESC",
ref: "processStepDESC",
prop: "processStepDESC",
type: "",
value: "",
},
{
label: "Process Recipe",
ref: "processRecipe",
prop: "processRecipe",
type: "",
value: "",
},
{
label: "Process Capability",
ref: "processCapability",
prop: "processCapability",
type: "",
value: "",
},
{
label: "Module",
ref: "module",
prop: "module",
type: "",
value: "",
},
{
label: "Total Chamber Count",
ref: "totalChamberCount",
prop: "totalChamberCount",
type: "inputnumber",
value: "",
},
{
label: "AVG Chamber Count",
ref: "aVGChamberCount",
prop: "aVGChamberCount",
type: "inputnumber",
value: "",
},
],
meInformationArr: [
{
label: "Measure Step SEQ",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Recipe",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Stage",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Steo DESC",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Capability",
ref: "",
prop: "",
type: "",
value: "",
},
],
smaplingGroupRuleArr: [
{
label: "Time InterVal",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Total lot Count",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Total Wafer Count",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "select Wafer Count",
ref: "selectWaferCount",
prop: "selectWaferCount",
type: "inputnumber",
value: "",
},
{
label: "Sample Ratio",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Comment",
ref: "",
prop: "",
type: "textarea",
value: "",
}
],
},
};
},
methods: {
UpLoadAttachment(val){
console.log("Attachment",val)
},
onSubmit() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
alert('submit!');
} else {
console.log(this.form)
console.log('error submit!!');
return false;
}
});
},
onSearch(val){
console.log(val)
}
},
};
</script>
<style lang="less" scoped>
.gutter-example {
.ant-row {
.gutter-box {
display: flex;
padding: 5px 0;
border: 0;
}
}
}
.item-paragraph {
height: 32px;
line-height: 32px;
font-size: 14px;
}
.smapling-select {
display: flex;
}
.flex-btn {
width: 350px;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.attachment-box{
border-top: solid 1px #f0f0f0;
margin-bottom: 10px;
}
</style>
以上是newSmartSmapling.vue
<template>
<div>
<!-- <a-card size="small" :title="titlename">
<div class="gutter-example">
<a-row :gutter="16">
<a-col
class="gutter-row"
:span="6"
v-for="(item, index) in basicInformationArr"
:key="index"
>
<div class="gutter-box">
<div>{{ item.key }}：</div>
<div>{{ item.val }}</div>
</div>
</a-col>
</a-row>
<a-row :gutter="16">
<div class="smapling-select">
<div>Smapling Type：</div>
<div>
<a-select style="width: 160px" @change="newSmaplingChange">
<a-select-option
v-for="(val, itemindex) in smaplingTypeArr"
:value="val.key"
:key="itemindex"
>{{ val.name }}</a-select-option
>
</a-select>
</div>
</div>
</a-row>
</div>
</a-card> -->
<a-card size="small" :title="titlename2" style="margin-top: 20px">
<a-form-model
ref="ruleForm"
:model="form"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<div class="">
<h4 class="item-paragraph">Process Information</h4>
<a-row :gutter="24">
<a-col
:span="6"
v-for="(itempr, indexpr) in prInformationArr"
:key="indexpr"
>
<a-form-model-item
:ref="itempr.ref"
:label="itempr.label"
:prop="itempr.prop"
>
<a-input v-model="prInformationArr[indexpr].value" />
</a-form-model-item>
</a-col>
</a-row>
<h4 class="item-paragraph">Measure Information</h4>
<a-row :gutter="24">
<a-col
:span="6"
v-for="(itempr, indexpr) in meInformationArr"
:key="indexpr"
>
<a-form-model-item
:ref="itempr.ref"
:label="itempr.label"
:prop="itempr.prop"
>
<a-input v-model="meInformationArr[indexpr].value" />
</a-form-model-item>
</a-col>
</a-row>
<h4 class="item-paragraph">Smart Smapling Group Rule</h4>
<a-row :gutter="24">
<a-col
:span="6"
v-for="(itempr, indexpr) in smaplingGroupRuleArr"
:key="indexpr"
>
<a-form-model-item
:ref="itempr.ref"
:label="itempr.label"
:prop="itempr.prop"
>
<a-input-number
v-if="itempr.type == 'inputnumber'"
:min="1"
:step="1"
:formatter="(value) => `${value}`"
:parser="(value) => value.replace('', '')"
style="width:100%"
/>
<a-textarea v-else-if="itempr.type == 'textarea'" v-model="smaplingGroupRuleArr[indexpr].value" :auto-size="{ minRows: 2, maxRows: 6 }" />
<a-input v-else v-model="smaplingGroupRuleArr[indexpr].value" />
</a-form-model-item>
</a-col>
</a-row>
<h4 class="item-paragraph">Applicatin Information</h4>
<a-row :gutter="24">
<a-col
:span="6"
v-for="(itempr, indexpr) in apInformationArr"
:key="indexpr"
>
<a-form-model-item
:ref="itempr.ref"
:label="itempr.label"
:prop="itempr.prop"
>
<a-input v-model="apInformationArr[indexpr].value" />
</a-form-model-item>
</a-col>
</a-row>
</div>
<div class="attachment-box">
<h4 class="item-paragraph">Attachment</h4>
<attach-ment
@UpLoadAttachment="UpLoadAttachment"
:attachments="attachments"
:caseNo="attachmentCaseNo"
:isEdit="isEdit"
:rejcetFlag="rejcetFlag"
></attach-ment>
</div>
<a-row type="flex" justify="center">
<a-col>
<div class="smapling-select flex-btn">
<a-button type="primary" block> Submit </a-button>
<a-button style="margin-left: 15px" block>Cancel</a-button>
<a-button type="danger" style="margin-left: 15px" block>
Save Draft
</a-button>
</div>
</a-col>
</a-row>
</a-form-model>
</a-card>
</div>
</template>
<script>
import attachMent from "@/components/attachment/Attachment.vue"
export default {
components:{
attachMent
},
data() {
return {
attachments:[],
attachmentCaseNo:"0001",
rejcetFlag:true,
isEdit:false,
titlename: "Basic Information",
titlename2: "Applicaton Information",
basicInformationArr: [
{
key: "CaseNo",
val: "caseNo",
},
{
key: "Case Status",
val: "caseStatus",
},
{
key: "create Date",
val: "createDate",
},
{
key: "Applicant",
val: "applicant",
},
{
key: "Org",
val: "org",
},
{
key: "Company",
val: "company",
},
],
smaplingTypeArr: [
{
name: "Smart Smapling",
key: "smartSmapling",
},
{
name: "Fix",
key: "fix",
},
],
labelCol: { span: 10 },
wrapperCol: { span: 14 },
rules: {
productName:[
{required: true,message: '请填写Product name'}
],
processStepSEQ:[
{required: true,message: '请填写Process Step SEQ'}
],
selectWaferCount:[
{required: true,message: '请填写大于0 的整数'}
],
},
form: {},
prInformationArr: [
{
label: "Product Name",
ref: "productName",
prop: "productName",
type: "",
value: "",
},
{
label: "Process Step SEQ",
ref: "processStepSEQ",
prop: "processStepSEQ",
type: "",
value: "",
},
{
label: "Process Step DESC",
ref: "",
prop: "processStepDESC",
type: "",
value: "",
},
{
label: "Process Recipe",
ref: "",
prop: "processRecipe",
type: "",
value: "",
},
{
label: "Process Capability",
ref: "",
prop: "processCapability",
type: "",
value: "",
},
{
label: "Module",
ref: "",
prop: "module",
type: "",
value: "",
},
{
label: "Total Chamber Count",
ref: "",
prop: "totalChamberCount",
type: "",
value: "",
},
{
label: "AVG run Chamber Count",
ref: "",
prop: "aVGrunChamberCount",
type: "",
value: "",
},
],
meInformationArr: [
{
label: "Measure Step SEQ",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Recipe",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Stage",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Steo DESC",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Capability",
ref: "",
prop: "",
type: "",
value: "",
},
],
smaplingGroupRuleArr: [
{
label: "Time InterVal",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Total lot Count",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Total Wafer Count",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "select Wafer Count",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "AVG MEA Wafer Count",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Sample Ratio",
ref: "",
prop: "",
type: "",
value: "",
},
],
apInformationArr: [
{
label: "Time InterVal",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Total lot Count",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Total Wafer Count",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "select Wafer Count",
ref: "selectWaferCount",
prop: "selectWaferCount",
type: "inputnumber",
value: "",
},
{
label: "AVG MEA Wafer Count",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Sample Ratio",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Comment",
ref: "",
prop: "",
type: "textarea",
value: "",
}
],
};
},
methods: {
UpLoadAttachment(val){
console.log("Attachment",val)
},
newSmaplingChange(e) {},
},
};
</script>
<style lang="less" scoped>
.gutter-example {
.ant-row {
.gutter-box {
display: flex;
padding: 5px 0;
border: 0;
}
}
}
.item-paragraph {
height: 32px;
line-height: 32px;
font-size: 14px;
}
.smapling-select {
display: flex;
}
.flex-btn {
width: 350px;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.attachment-box{
border-top: solid 1px #f0f0f0;
margin-bottom: 10px;
}
</style>
以上是changeSmartSmapling.vue
<template>
<div>
<!-- <a-card size="small" :title="titlename">
<div class="gutter-example">
<a-row :gutter="16">
<a-col
class="gutter-row"
:span="6"
v-for="(item, index) in basicInformationArr"
:key="index"
>
<div class="gutter-box">
<div>{{ item.key }}：</div>
<div>{{ item.val }}</div>
</div>
</a-col>
</a-row>
<a-row :gutter="16">
<div class="smapling-select">
<div>Smapling Type：</div>
<div>
<a-select style="width: 160px" @change="newSmaplingChange">
<a-select-option
v-for="(val, itemindex) in smaplingTypeArr"
:value="val.key"
:key="itemindex"
>{{ val.name }}</a-select-option
>
</a-select>
</div>
</div>
</a-row>
</div>
</a-card> -->
<a-card size="small" :title="titlename2" style="margin-top:20px;">
<a-form-model
ref="ruleForm"
:model="form"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<div class="">
<a-row :gutter="24">
<a-col
:span="6"
v-for="(itempr, indexpr) in apInformationArr"
:key="indexpr"
>
<a-form-model-item
:ref="itempr.ref"
:label="itempr.label"
:prop="itempr.prop"
>
<a-input v-model="apInformationArr[indexpr].value" />
</a-form-model-item>
</a-col>
</a-row>
</div>
<div class="attachment-box">
<h4 class="item-paragraph">Attachment</h4>
<attach-ment
@UpLoadAttachment="UpLoadAttachment"
:attachments="attachments"
:caseNo="attachmentCaseNo"
:isEdit="isEdit"
:rejcetFlag="rejcetFlag"
></attach-ment>
</div>
<a-row type="flex" justify="center">
<a-col>
<div class="smapling-select flex-btn">
<a-button type="primary" block> Submit </a-button>
<a-button style="margin-left: 15px" block>Cancel</a-button>
<a-button type="danger" style="margin-left: 15px" block>
Save Draft
</a-button>
</div>
</a-col>
</a-row>
</a-form-model>
</a-card>
</div>
</template>
<script>
import attachMent from "@/components/attachment/Attachment.vue"
export default {
components:{
attachMent
},
data() {
return {
attachments:[],
attachmentCaseNo:"0001",
rejcetFlag:true,
isEdit:false,
titlename: "Basic Information",
titlename2: "Applicaton Information",
basicInformationArr: [
{
key: "CaseNo",
val: "caseNo",
},
{
key: "Case Status",
val: "caseStatus",
},
{
key: "create Date",
val: "createDate",
},
{
key: "Applicant",
val: "applicant",
},
{
key: "Org",
val: "org",
},
{
key: "Company",
val: "company",
},
],
smaplingTypeArr: [
{
name: "Smart Smapling",
key: "smartSmapling",
},
{
name: "Fix",
key: "fix",
},
],
labelCol: { span: 10 },
wrapperCol: { span: 14 },
rules: {},
form: {},
apInformationArr: [
{
label: "Product ID",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Plan ID",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Step SQE",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Wafer Count",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Recipe",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Stage",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Step DESC",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Capabilty",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "BaseLine SUBID",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Scan Lot(s)",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Sample Ratio",
ref: "",
prop: "",
type: "",
value: "",
},
],
};
},
methods: {
newSmaplingChange(e) {},
},
};
</script>
<style lang="less" scoped>
.gutter-example {
.ant-row {
.gutter-box {
display: flex;
padding: 5px 0;
border: 0;
}
}
}
.item-paragraph {
height: 32px;
line-height: 32px;
font-size: 14px;
}
.smapling-select {
display: flex;
}
.flex-btn {
width: 350px;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.attachment-box{
border-top: solid 1px #f0f0f0;
margin-bottom: 10px;
}
</style>
以上是newFix.vue
<template>
<div>
<a-card size="small" :title="titlename" v-if="headshow">
<div class="gutter-example">
<a-row :gutter="16">
<a-col
class="gutter-row"
:span="6"
v-for="(item, index) in basicInformationArr"
:key="index"
>
<div class="gutter-box">
<div>{{ item.key }}：</div>
<div>{{ item.val }}</div>
</div>
</a-col>
</a-row>
<a-row :gutter="16">
<div class="smapling-select">
<div>Smapling Type：</div>
<div>
<a-select style="width: 160px" @change="newSmaplingChange">
<a-select-option
v-for="(val, itemindex) in smaplingTypeArr"
:value="val.key"
:key="itemindex"
>{{ val.name }}</a-select-option
>
</a-select>
</div>
</div>
</a-row>
</div>
</a-card>
<a-form-model
ref="ruleForm"
:model="form"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<div class="">
<a-card size="small" :title="titlename2" style="margin-top: 20px">
<a-row :gutter="24">
<a-col
:span="6"
v-for="(itempr, indexpr) in cInfoInformationArr"
:key="indexpr"
>
<a-form-model-item
:ref="itempr.ref"
:label="itempr.label"
:prop="itempr.prop"
>
<a-input v-model="cInfoInformationArr[indexpr].value" />
</a-form-model-item>
</a-col>
</a-row>
</a-card>
<a-card size="small" :title="titlename3" style="margin-top: 20px">
<a-row :gutter="24">
<a-col
:span="6"
v-for="(itempr, indexpr) in apInformationArr"
:key="indexpr"
>
<a-form-model-item
:ref="itempr.ref"
:label="itempr.label"
:prop="itempr.prop"
>
<a-input v-model="apInformationArr[indexpr].value" />
</a-form-model-item>
</a-col>
</a-row>
<div class="attachment-box">
<h4 class="item-paragraph">Attachment</h4>
<attach-ment
@UpLoadAttachment="UpLoadAttachment"
:attachments="attachments"
:caseNo="attachmentCaseNo"
:isEdit="isEdit"
:rejcetFlag="rejcetFlag"
></attach-ment>
</div>
<div style="background: #fff">
<a-row type="flex" justify="center">
<a-col>
<div class="smapling-select flex-btn">
<a-button type="primary" block> Submit </a-button>
<a-button style="margin-left: 15px" block>Cancel</a-button>
<a-button type="danger" style="margin-left: 15px" block>
Save Draft
</a-button>
</div>
</a-col>
</a-row>
</div>
</a-card>
</div>
</a-form-model>
</div>
</template>
<script>
import attachMent from "@/components/attachment/Attachment.vue"
export default {
components:{
attachMent
},
data() {
return {
attachments:[],
attachmentCaseNo:"0001",
rejcetFlag:true,
isEdit:false,
headshow:false,
titlename: "Basic Information",
titlename2: "Current Info Information",
titlename3: "Applicaton Information",
basicInformationArr: [
{
key: "CaseNo",
val: "",
},
{
key: "Case Status",
val: "",
},
{
key: "create Date",
val: "",
},
{
key: "Applicant",
val: "",
},
{
key: "Org",
val: "",
},
{
key: "Company",
val: "",
},
],
smaplingTypeArr: [
{
name: "Smart Smapling",
key: "smartSmapling",
},
{
name: "Fix",
key: "fix",
},
],
labelCol: { span: 10 },
wrapperCol: { span: 14 },
rules: {
productId:[
{required: true,message: '请填写Product id'}
],
planId:[
{required: true,message: '请填写plan id'}
],
measureStepSeq:[
{required: true,message: '请填写Measure Step SEQ'}
],
},
form: {},
cInfoInformationArr: [
{
label: "Product ID",
ref: "productId",
prop: "productId",
type: "",
value: "",
},
{
label: "Plan ID",
ref: "planId",
prop: "planId",
type: "",
value: "",
},
{
label: "Measure Step SEQ",
ref: "measureStepSeq",
prop: "measureStepSeq",
type: "",
value: "",
},
{
label: "Wafer Count",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Recipe",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Stage",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Step DESC",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Measure Capability",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Baseline SUBID",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Scan Lot(s)",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Sample Ratio",
ref: "",
prop: "",
type: "",
value: "",
},
],
apInformationArr: [
{
label: "Baseline SUBID",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Scan Lost(s)",
ref: "",
prop: "",
type: "",
value: "",
},
{
label: "Sample Ratio",
ref: "",
prop: "",
type: "",
value: "",
},
],
};
},
methods: {
UpLoadAttachment(val){
console.log("Attachment",val)
},
newSmaplingChange(e) {},
},
};
</script>
<style lang="less" scoped>
.gutter-example {
.ant-row {
.gutter-box {
display: flex;
padding: 5px 0;
border: 0;
}
}
}
.item-paragraph {
height: 32px;
line-height: 32px;
font-size: 14px;
}
.smapling-select {
display: flex;
}
.flex-btn {
width: 350px;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.attachment-box{
border-top: solid 1px #f0f0f0;
margin-bottom: 10px;
}
</style>
以上上是changeFix.vue
//主页面来了
<template>
<div>
<a-card size="small" :title="titlename">
<div class="gutter-example">
<a-row :gutter="16">
<a-col
class="gutter-row"
:span="6"
v-for="(item, index) in basicInformationArr"
:key="index"
>
<div class="gutter-box">
<div>{{ item.key }}：</div>
<div>{{ item.val }}</div>
</div>
</a-col>
<a-col
:span="6"
>
<div class="gutter-box">
<div>Smapling Type：</div>
<div><com-type
:smaplingTypeArr="smaplingTypeArr"
@newSmaplingChange="newSmaplingChange"
></com-type></div>
</div>
</a-col>
</a-row>
</div>
</a-card>
<!-- -->
<newsmart-smapling></newsmart-smapling>
<!-- -->
<!-- <changesmart-smapling></changesmart-smapling> -->
<!-- -->
<!-- <new-fix></new-fix> -->
<!-- -->
<!-- <changeFix></changeFix> -->
</div>
</template>
<script>
import { mapState } from "vuex";
import { serialNumber } from "@/utils/tableIndex"; //表格indx序号
import { inputRule, selectRule, dateRule } from "@/utils/rule";
import Cookie from "js-cookie";
import newsmartSmapling from "@/pages/csos/newApplication/commonPage/newSmartSmapling";
import changesmartSmapling from "@/pages/csos/newApplication/commonPage/changeSmartSmapling";
import newFix from "@/pages/csos/newApplication/commonPage/newFix.vue";
import changeFix from "@/pages/csos/newApplication/commonPage/changeFix.vue";
import comType from "@/pages/csos/newApplication/commonPage/comType";
import { queryHeaderInfo } from "@/pages/csos/newApplication/CreateApplicant/api.js";
function headStyle() {
return {
style: {
background: "lightcyan",
},
};
}
export default {
name: "CreateApplicant",
components: {
newsmartSmapling,
changesmartSmapling,
newFix,
changeFix,
comType,
},
data() {
return {
keyword: "create",
titlename: "Basic Information",
basicInformationArr: [
{
key: "CaseNo",
val: "",
},
{
key: "Case Status",
val: "",
},
{
key: "create Date",
val: "",
},
{
key: "Applicant",
val: "",
},
{
key: "Company",
val: "",
},
{
key: "Org",
val: "",
},
],
smaplingTypeArr: [
{
name: "Smart Smapling",
key: "smartSmapling",
},
{
name: "Fix",
key: "fix",
}, //new
],
form: this.$form.createForm(this, { name: "create_form" }),
labelCol: {
span: 8,
},
wrapperCol: {
span: 16,
},
inputRule: inputRule,
selectRule: selectRule,
};
},
computed: {
...mapState("account", {
currUser: "user",
}),
...mapState("setting", ["pageMinHeight"]),
},
created() {
this.userCode = Cookie.get(process.env.VUE_APP_PROJECT_NAME + "userId");
console.log(this.userCode);
let operation = this.keyword;
this.queryHeaderInfoFun(this.userCode, operation);
},
mounted() {},
methods: {
// RET smaer sampling
//PIPE fix
//
async queryHeaderInfoFun(userId, operation) {
let res = await queryHeaderInfo(userId, operation);
console.log(res);
if (res.data.success) {
let { caseNo, applicant, company, createDate, organization } =
res.data.data;
this.basicInformationArr[0].val = caseNo;
this.basicInformationArr[1].val = "draft";
this.basicInformationArr[2].val = createDate;
this.basicInformationArr[3].val = applicant;
this.basicInformationArr[4].val = company;
this.basicInformationArr[5].val = organization;
} else {
this.$message.error(res.data.message);
}
},
newSmaplingChange(e) {},
},
};
</script>
<style lang="less" scoped>
@import "@/theme/formStyle.less";
.buttonItem > ::v-deep.ant-col-16 {
width: 100% !important;
.ant-form-item-control {
width: 100% !important;
}
}
.gutter-example {
.ant-row {
.gutter-box {
display: flex;
padding: 5px 0;
border: 0;
}
}
}
.smapling-select {
display: flex;
}
</style>
浙公网安备 33010602011771号