四大金刚(循环写法渲染页面)

<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>

  

推荐这些技术文章:

maven打可执行jar包的几种build写法

1、指定Main方法,依赖jar放进另一个文件夹中,并将该文件夹设为classpath

<build>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
...

页面结构分析

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2&g...

datalist标签配合input实现输入框历史记录提示

<form>
//list与datalist的id关联
<input list="b" />
//注意是datalist不是details
<datalist id="b">
//注意是未闭合单标签
<option value="1">
<option value="...

【Vue】基础系列(五)绑定样式-条件渲染

一、绑定样式

class样式
写法:class="xxx" xxx可以是字符串、对象、数组。

<!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br...

vue中v-for循环时增加校验

html:

<el-form-item v-if="['1','2'].includes(form.themeType)" label="文案">
<div class="picTopic">
<template v-if="form.contentList.length!==0">
...

MbUnit 的Row属性问题请教

问题
<P>我的test方法</P>
<P>[RowTest]</P>
<P>[Row(1,?)]//这里的第二个参数我怎么给它赋值啊,好像只有简单类型可以赋值吗?</P>
<P>public void A(int i,PCConfig)</P>
<P>{&l...

HTML实战:个人信息登记表

效果展示:

代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>个人信息登记表</h3>...

vue.esm.js?efeb:628 [Vue warn]: Failed to mount component: template or render function not defined. found in ---> <Login> at src/views/Login.vue <App> at src/App.vue <Root>

解决方法
我在网上看到好多解决方案,但都没有找到解决方法。我是第一次接触element-ui。怎么引用组件也不清楚,问题就出现在引入组件上
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-...

output标签,form表单 + <input type="range"> + output

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">100
+
<input type="number" id="b" value="50">
=
<output name="x" for="a b...

python测试开发django -142.Bootstrap 表单(form)

前言
HTML 表单用于收集不同类型的用户输入。boostrap中表单有几种样式

基本垂直表单
内联表单 form-inline
水平排列表单 form-horizontal

基本表单实例
单独的表单控件会被自动赋予一些全局样式。在输入框外面定义一个div标签,class属性设置.form-group
<input>、<textarea> 和 <select&g...

文章标题:四大金刚(循环写法渲染页面)
文章链接:https://www.dianjilingqu.com/51460.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>