食物搭配管理界面图
以下是食物搭配代码;
<div v-else>
<el-form-item class="input" label="食物名称" prop="shiwumingcheng">
<el-input v-model="ruleForm.shiwumingcheng"
placeholder="食物名称" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<el-form-item class="select" v-if="type!='info'" label="食物类型" prop="shiwuleixing">
<el-select :disabled="ro.shiwuleixing" v-model="ruleForm.shiwuleixing" placeholder="请选择食物类型">
<el-option
v-for="(item,index) in shiwuleixingOptions"
v-bind:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<div v-else>
<el-form-item class="input" label="食物类型" prop="shiwuleixing">
<el-input v-model="ruleForm.shiwuleixing"
placeholder="食物类型" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<el-form-item class="input" v-if="type!='info'" label="搭配食材" prop="dapeishicai">
<el-input v-model="ruleForm.dapeishicai"
placeholder="搭配食材" clearable :readonly="ro.dapeishicai"></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="搭配食材" prop="dapeishicai">
<el-input v-model="ruleForm.dapeishicai"
placeholder="搭配食材" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="24">
<el-form-item class="upload" v-if="type!='info' && !ro.tupian" label="图片" prop="tupian">
<file-upload
tip="点击上传图片"
action="file/upload"
:limit="3"
:multiple="true"
:fileUrls="ruleForm.tupian?ruleForm.tupian:''"
@change="tupianUploadChange"
></file-upload>
</el-form-item>
<div v-else>
<el-form-item v-if="ruleForm.tupian" label="图片" prop="tupian">
<img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.tupian.split(',')" :src="$base.url+item" width="100" height="100">
</el-form-item>
</div>
</el-col>
<el-col :span="24">
<el-form-item class="upload" v-if="type!='info'&& !ro.shipinneirong" label="视频内容" prop="shipinneirong">
<file-upload
tip="点击上传视频内容"
action="file/upload"
:limit="1"
:multiple="true"
:fileUrls="ruleForm.shipinneirong?ruleForm.shipinneirong:''"
@change="shipinneirongUploadChange"
></file-upload>
</el-form-item>
<div v-else>
<el-form-item v-if="ruleForm.shipinneirong" label="视频内容" prop="shipinneirong">
<el-button type="text" size="small" @click="download(ruleForm.shipinneirong)">预览</el-button>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<el-form-item class="date" v-if="type!='info'" label="发布日期" prop="faburiqi">
<el-date-picker
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
v-model="ruleForm.faburiqi"
type="date"
placeholder="发布日期">
</el-date-picker>
</el-form-item>
<div v-else>
<el-form-item class="input" v-if="ruleForm.faburiqi" label="发布日期" prop="faburiqi">
<el-input v-model="ruleForm.faburiqi"
placeholder="发布日期" readonly></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item class="textarea" v-if="type!='info'" label="烹饪方法" prop="pengrenfangfa">
<el-input
style="min-width: 200px; max-width: 600px;"
type="textarea"
:rows="8"
placeholder="烹饪方法"
v-model="ruleForm.pengrenfangfa" >
</el-input>
</el-form-item>
<div v-else>
<el-form-item v-if="ruleForm.pengrenfangfa" label="烹饪方法" prop="pengrenfangfa">
<span>{{ruleForm.pengrenfangfa}}</span>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item v-if="type!='info'" label="搭配内容" prop="dapeineirong">
<editor
style="min-width: 200px; max-width: 600px;"
v-model="ruleForm.dapeineirong"
class="editor"
action="file/upload">
</editor>
</el-form-item>
<div v-else>
<el-form-item v-if="ruleForm.dapeineirong" label="搭配内容" prop="dapeineirong">
<span v-html="ruleForm.dapeineirong"></span>
</el-form-item>
</div>