样式修改

This commit is contained in:
zzyuan 2025-03-07 17:24:51 +08:00
parent 0601e94429
commit c0dad068ad
1 changed files with 209 additions and 208 deletions

View File

@ -7,230 +7,231 @@
:close-on-click-modal="false" :close-on-click-modal="false"
:destroy-on-close="true" :destroy-on-close="true"
@close="handleClose" @close="handleClose"
> >
<el-tabs v-model="activeTab"> <div style="width: 100%;height: 600px;overflow-y: auto;">
<el-tab-pane label="基础信息" name="basic"> <el-tabs v-model="activeTab">
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-tab-pane label="基础信息" name="basic">
<el-row> <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-col :span="12"> <el-row>
<el-form-item label="原料名称" prop="materialName"> <el-col :span="12">
<el-input <el-form-item label="原料名称" prop="materialName">
v-model="form.materialName" <el-input
placeholder="请输入原料名称" v-model="form.materialName"
maxlength="40" placeholder="请输入原料名称"
show-word-limit maxlength="40"
/> show-word-limit
</el-form-item> />
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="所属区域" prop="region"> <el-col :span="12">
<el-select v-model="form.region" placeholder="请选择所属区域" style="width: 100%"> <el-form-item label="所属区域" prop="region">
<el-option label="宏源大厦" value="宏源大厦" /> <el-select v-model="form.region" placeholder="请选择所属区域" style="width: 100%">
</el-select> <el-option label="宏源大厦" value="宏源大厦" />
</el-form-item> </el-select>
</el-col> </el-form-item>
</el-row> </el-col>
</el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="原料类别" prop="materialType"> <el-form-item label="原料类别" prop="materialType">
<el-select v-model="form.materialType" placeholder="请选择原料类别" style="width: 100%"> <el-select v-model="form.materialType" placeholder="请选择原料类别" style="width: 100%">
<el-option label="蔬菜类-宏源大厦" value="蔬菜类-宏源大厦" /> <el-option label="蔬菜类-宏源大厦" value="蔬菜类-宏源大厦" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="计量类型" prop="measureType"> <el-form-item label="计量类型" prop="measureType">
<el-select v-model="form.measureType" placeholder="请选择计量类型" style="width: 100%"> <el-select v-model="form.measureType" placeholder="请选择计量类型" style="width: 100%">
<el-option label="按份" value="按份" /> <el-option label="按份" value="按份" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="原料单位" prop="unit"> <el-form-item label="原料单位" prop="unit">
<el-select v-model="form.unit" placeholder="请选择原料单位" style="width: 100%"> <el-select v-model="form.unit" placeholder="请选择原料单位" style="width: 100%">
<el-option label="条" value="条" /> <el-option label="条" value="条" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="原料进价" prop="purchasePrice"> <el-form-item label="原料进价" prop="purchasePrice">
<el-input <el-input
v-model="form.purchasePrice" v-model="form.purchasePrice"
placeholder="请输入原料进价" placeholder="请输入原料进价"
@input="handleNumericInput('purchasePrice', $event)" @input="handleNumericInput('purchasePrice', $event)"
@blur="formatNumericValue('purchasePrice')" @blur="formatNumericValue('purchasePrice')"
> >
<template slot="append"></template> <template slot="append"></template>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="条码" prop="barcode"> <el-form-item label="条码" prop="barcode">
<el-input <el-input
v-model="form.barcode" v-model="form.barcode"
placeholder="请输入条码" placeholder="请输入条码"
maxlength="20" maxlength="20"
show-word-limit show-word-limit
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="营养信息类别" prop="phoneticType"> <el-form-item label="营养信息类别" prop="phoneticType">
<el-select v-model="form.phoneticType" placeholder="请选择营养信息类别" style="width: 100%"> <el-select v-model="form.phoneticType" placeholder="请选择营养信息类别" style="width: 100%">
<el-option label="植物油/植物油" value="植物油/植物油" /> <el-option label="植物油/植物油" value="植物油/植物油" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="营养信息" prop="phoneticInfo"> <el-form-item label="营养信息" prop="phoneticInfo">
<el-select v-model="form.phoneticInfo" placeholder="请选择营养信息" style="width: 100%"> <el-select v-model="form.phoneticInfo" placeholder="请选择营养信息" style="width: 100%">
<el-option label="辣椒油" value="辣椒油" /> <el-option label="辣椒油" value="辣椒油" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="保质期" prop="shelfLife"> <el-form-item label="保质期" prop="shelfLife">
<el-input-number <el-input-number
v-model="form.shelfLife" v-model="form.shelfLife"
:min="0" :min="0"
:max="999" :max="999"
style="width: 120px" style="width: 120px"
/> />
<el-select v-model="form.shelfLifeUnit" style="width: 100px; margin-left: 10px"> <el-select v-model="form.shelfLifeUnit" style="width: 100px; margin-left: 10px">
<el-option label="按年" value="年" /> <el-option label="按年" value="年" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="采购上限价格" prop="maxPrice"> <el-form-item label="采购上限价格" prop="maxPrice">
<el-input <el-input
v-model="form.maxPrice" v-model="form.maxPrice"
placeholder="请输入采购上限价格" placeholder="请输入采购上限价格"
@input="handleNumericInput('maxPrice', $event)" @input="handleNumericInput('maxPrice', $event)"
@blur="formatNumericValue('maxPrice')" @blur="formatNumericValue('maxPrice')"
> >
<template slot="append"></template> <template slot="append"></template>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否需要检测" prop="needInspection"> <el-form-item label="是否需要检测" prop="needInspection">
<el-select v-model="form.needInspection" placeholder="请选择是否需要检测" style="width: 100%"> <el-select v-model="form.needInspection" placeholder="请选择是否需要检测" style="width: 100%">
<el-option label="是" value="是" /> <el-option label="是" value="是" />
<el-option label="否" value="否" /> <el-option label="否" value="否" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="供应资格证书" prop="qualificationCert"> <el-form-item label="供应资格证书" prop="qualificationCert">
<el-select v-model="form.qualificationCert" placeholder="请选择供应资格证书" style="width: 100%"> <el-select v-model="form.qualificationCert" placeholder="请选择供应资格证书" style="width: 100%">
<el-option label="请选择供应资格证书" value="" /> <el-option label="请选择供应资格证书" value="" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="要求检测机构" prop="inspectionOrg"> <el-form-item label="要求检测机构" prop="inspectionOrg">
<el-select v-model="form.inspectionOrg" placeholder="请选择要求检测机构" style="width: 100%"> <el-select v-model="form.inspectionOrg" placeholder="请选择要求检测机构" style="width: 100%">
<el-option label="自检" value="自检" /> <el-option label="自检" value="自检" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="要求检测项目" prop="inspectionItems"> <el-form-item label="要求检测项目" prop="inspectionItems">
<el-select v-model="form.inspectionItems" placeholder="请选择要求检测项目" style="width: 100%"> <el-select v-model="form.inspectionItems" placeholder="请选择要求检测项目" style="width: 100%">
<el-option label="农残" value="农残" /> <el-option label="农残" value="农残" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="加工方法" prop="processingMethods"> <el-form-item label="加工方法" prop="processingMethods">
<div class="method-input-group"> <div class="method-input-group">
<div v-for="(method, index) in form.processingMethods" :key="index" class="method-input-item"> <div v-for="(method, index) in form.processingMethods" :key="index" class="method-input-item">
<el-input <el-input
v-model="form.processingMethods[index]" v-model="form.processingMethods[index]"
:placeholder="'请输入加工方法' + (index + 1)" :placeholder="'请输入加工方法' + (index + 1)"
> >
<template slot="append"> <template slot="append">
<el-button v-if="index === form.processingMethods.length - 1" @click="addProcessingMethod">增加</el-button> <el-button v-if="index === form.processingMethods.length - 1" @click="addProcessingMethod">增加</el-button>
<el-button v-else @click="removeProcessingMethod(index)" type="danger">删除</el-button> <el-button v-else @click="removeProcessingMethod(index)" type="danger">删除</el-button>
</template> </template>
</el-input> </el-input>
</div>
</div> </div>
</div> </el-form-item>
</el-form-item> </el-col>
</el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="切配方法" prop="cuttingMethods"> <el-form-item label="切配方法" prop="cuttingMethods">
<div class="method-input-group"> <div class="method-input-group">
<div v-for="(method, index) in form.cuttingMethods" :key="index" class="method-input-item"> <div v-for="(method, index) in form.cuttingMethods" :key="index" class="method-input-item">
<el-input <el-input
v-model="form.cuttingMethods[index]" v-model="form.cuttingMethods[index]"
:placeholder="'请输入切配方法' + (index + 1)" :placeholder="'请输入切配方法' + (index + 1)"
> >
<template slot="append"> <template slot="append">
<el-button v-if="index === form.cuttingMethods.length - 1" @click="addCuttingMethod">增加</el-button> <el-button v-if="index === form.cuttingMethods.length - 1" @click="addCuttingMethod">增加</el-button>
<el-button v-else @click="removeCuttingMethod(index)" type="danger">删除</el-button> <el-button v-else @click="removeCuttingMethod(index)" type="danger">删除</el-button>
</template> </template>
</el-input> </el-input>
</div>
</div> </div>
</div> </el-form-item>
</el-form-item> </el-col>
</el-col> </el-row>
</el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<h3>营养信息</h3> <h3>营养信息</h3>
<el-row :gutter="20" class="nutrition-info"> <el-row :gutter="20" class="nutrition-info">
<el-col :span="12" v-for="(item, index) in nutritionFields" :key="index"> <el-col :span="12" v-for="(item, index) in nutritionFields" :key="index">
<el-form-item :label="item.label" :prop="'nutrition.' + item.prop"> <el-form-item :label="item.label" :prop="'nutrition.' + item.prop">
<el-input <el-input
v-model="form.nutrition[item.prop]" v-model="form.nutrition[item.prop]"
:placeholder="'请输入' + item.label" :placeholder="'请输入' + item.label"
@input="handleNumericInput('nutrition.' + item.prop, $event)" @input="handleNumericInput('nutrition.' + item.prop, $event)"
@blur="formatNumericValue('nutrition.' + item.prop)" @blur="formatNumericValue('nutrition.' + item.prop)"
> >
<template slot="append">{{item.unit}}</template> <template slot="append">{{item.unit}}</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="原料识别注册图" name="image">
<!-- 这里添加图片上传组件 -->
</el-tab-pane>
</el-tabs>
<el-tab-pane label="原料识别注册图" name="image">
<!-- 这里添加图片上传组件 -->
</el-tab-pane>
</el-tabs>
</div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button> <el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button> <el-button @click="cancel"> </el-button>