【无标题】

这段代码展示了用于食物搭配管理的一个界面,包括食物名称、类型、搭配食材、图片上传、视频内容、发布日期、烹饪方法和搭配内容等字段。用户可以输入食物信息,选择类型,添加食材,上传图片和视频,并记录烹饪方法和搭配建议。编辑和查看模式下显示方式有所不同,提供了一种完整的食品管理交互体验。
摘要由CSDN通过智能技术生成

 

 

 

食物搭配管理界面图

以下是食物搭配代码;

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wx_zhuyanbishe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值