添加form_rules_validators 使用例子注释

long

2022-02-28 b350757df151c04f22d040eac001cb479d4a4776

 src/pages/system/banner.vue

@@ -1,4 +1,4 @@
// 设备管理
// 轮播图管理
<template>
  <div class="app-container">
    <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
@@ -22,8 +22,13 @@
          <el-image :src="scope.row.imgUrl" style="width:80px;height:80px" fit="contain" :preview-src-list="[scope.row.imgUrl]" />
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="排序号" align="center" min-width="120" />
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column prop="jumpType" label="跳转类型" align="center" min-width="120">
        <template slot-scope="scope">
          {{ ['不跳转','小程序页面','H5页面','其他小程序'][scope.row.jumpType] }}
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="排序号" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center" min-width="120" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100">
        <template slot-scope="scope">
          <el-button
@@ -53,30 +58,52 @@
    />

    <!-- 新增&编辑 -->
    <el-dialog :title="dialogData.type=='add'?'新增轮播图':'编辑轮播图'" width="500px" :visible.sync="isShowDialog" append-to-body :before-close="hideDialog">
      <el-form :ref="formName" :model="dialogData" label-width="100px" :rules="rules" size="small">
        <el-form-item label="排序号" prop="orderNum">
          <el-input v-model="dialogData.orderNum" placeholder="请输入排序号" />
    <el-dialog v-el-drag-dialog :title="dialogData.type=='add'?'新增轮播图':'编辑轮播图'" width="500px" :visible.sync="isShowDialog" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
      <el-form :ref="formName" :model="dialogData" label-width="120px" :rules="rules" size="small">
        <el-form-item label="排序号：" prop="orderNum">
          <el-input v-model="dialogData.orderNum" placeholder="请输入排序号" maxlength="10" />
        </el-form-item>
        <el-form-item ref="uploadFormItem" label="轮播图" prop="uploadImgs">
        <el-form-item ref="uploadFormItem" prop="uploadImgs">
          <span slot="label">
            <!-- 尺寸 -->
            轮播图：<br><span style="color: #999;font-size: 12px">(xxx*xxx像素)</span>
          </span>
          <!-- 上传图片组件(单图) -->
          <el-upload
          <UploadSingleImg
            ref="refUploadImg"
            accept="image/jpeg,image/jpg,image/gif,image/png"
            :auto-upload="false"
            list-type="picture-card"
            :class="{disabled:uploadDisabled}"
            action="#"
            :limit="1"
            :file-list="dialogData.uploadImgs"
            :on-change="addUploadImg"
            :on-remove="delUploadImg"
            :http-request="uploadImg"
            :on-preview="uploadPreview"
            :before-upload="beforeUploadImg"
            v-model="dialogData.uploadImgs"
            @change.capture="$refs[formName].clearValidate()"
          />
        </el-form-item>
        <el-form-item label="跳转类型：" prop="jumpType">
          <el-select
            v-model="dialogData.jumpType"
            clearable
            placeholder="请选择跳转类型"
            class="com-edit-input"
          >
            <i class="el-icon-plus" />
          </el-upload>
            <el-option v-for="item in jumpTypeOpt" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="dialogData.jumpType" label="跳转链接：" prop="jumpUrl">
          <el-input v-model="dialogData.jumpUrl" placeholder="请输入跳转链接" class="com-edit-input" maxlength="100" />
        </el-form-item>
        <el-form-item v-if="dialogData.jumpType===3" label="appId：" prop="jumpMpId">
          <el-input v-model="dialogData.jumpMpId" placeholder="请输入小程序appId" class="com-edit-input" maxlength="50" />
        </el-form-item>
        <el-form-item v-if="dialogData.jumpType===3" label="小程序版本：" prop="envVersion">
          <el-select
            v-model="dialogData.envVersion"
            clearable
            placeholder="请选择小程序版本"
            class="com-edit-input"
            @change="handleJumpTypeChange"
          >
            <el-option v-for="item in envVersionOpt" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="dialogData.jumpType===3" label="额外数据：" prop="extraData">
          <el-input v-model="dialogData.extraData" placeholder="请输入小程序额外数据" class="com-edit-input" maxlength="50" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
@@ -95,10 +122,12 @@
<script>

import mixin_Upload from '@/mixins/upload.js'

import mixin_bannerOpts from '@/mixins/bannerOpts.js' // 通用轮播图下拉选项
import UploadSingleImg from '@/components_simple/UploadSingleImg'
export default {
  name: 'Equipment',
  mixins: [mixin_Upload],
  components: { UploadSingleImg },
  mixins: [mixin_Upload, mixin_bannerOpts],
  data() {
    return {
      list: [], // 设备列表
@@ -109,6 +138,19 @@
      pageSize: 20,
      // 分页 ↑↑↑↑↑↑↑↑↑↑

      jumpTypeOpt: [
        { label: '不跳转', value: 0 },
        { label: '小程序页面', value: 1 },
        { label: 'H5页面', value: 2 },
        { label: '其它小程序', value: 3 }
      ],

      envVersionOpt: [
        { label: '开发版', value: 'develop' },
        { label: '体验版', value: 'trial' },
        { label: '正式版', value: 'release' }
      ],

      // 显示弹窗
      isShowDialog: false,

@@ -118,7 +160,19 @@
          { required: true, message: '排序号不能为空', trigger: 'change' }
        ],
        uploadImgs: [
          { required: true, message: '请选择轮播图片', trigger: 'change' }
          { required: true, message: '轮播图片不能为空', trigger: 'change' }
        ],
        jumpType: [
          { required: true, message: '跳转类型不能为空', trigger: 'change' }
        ],
        jumpUrl: [
          { required: true, message: '跳转链接不能为空', trigger: 'change' }
        ],
        jumpMpId: [
          { required: true, message: '跳转小程序appId不能为空', trigger: 'change' }
        ],
        envVersion: [
          { required: true, message: '跳转小程序版本不能为空', trigger: 'change' }
        ]
      },

@@ -132,81 +186,14 @@

    }
  },
  computed: {
    // 上传禁用
    uploadDisabled() {
      return this.dialogData.uploadImgs.length > 0
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      // this.id = this.$route.query.id || ''
      this.getList()
    },

    // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    // 上传前确认格式
    beforeUploadImg(file) {
      const isImg = file.type.indexOf('image/') > -1
      if (!isImg) {
        this.$message.error('必须是选择图片文件')
      }
      return isImg
    },
    // 增加图片
    addUploadImg(file, fileList) {
      this.$refs.uploadFormItem.resetField()
      this.dialogData.uploadImgs = fileList
    },
    // 删除图片
    delUploadImg(file, fileList) {
      this.dialogData.uploadImgs = fileList
    },
    // 执行上传商品图
    runUploadImg(suc_cb) {
      if (this.checkNeedUpload(this.dialogData.uploadImgs)) {
        this.$refs.refUploadImg.submit()
      } else {
        suc_cb && suc_cb()
      }
    },
    // 上传商品图
    uploadImg(res) {
      console.log(res)
      const file = res.file
      const formData = new FormData()
      formData.append('file', file)
      console.log(formData)
      this.postFN({
        url: 'admin/image/upload',
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {
          code: 100,
          msg: '',
          data: {
            imgUrl: 'xxxx'
          }
        }
      }, (inf) => {
        console.log('上传图片成功')

        // 替换掉未上传的图片
        this.dialogData.uploadImgs[0] = { url: inf.imgUrl, status: 'success' }
        this.dialogData.uploadImgs = JSON.parse(JSON.stringify(this.dialogData.uploadImgs))
        this.$set(this.dialogData, 'imgUrl', inf.imgUrl)

        console.log('上传图片结束')

        // 提交
        this.submit(this.dialogData.type)
      })
    },
    // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

    // 获取列表
    getList() {
@@ -272,6 +259,15 @@
    handleEdit(item) {
      this.showDialog('edit', item)
    },
    // 跳转类型为【不跳转】时，清空其余跳转字段
    handleJumpTypeChange() {
      if (this.dialogData.jumpType === 0) {
        this.dialogData.jumpUrl = ''
        this.dialogData.jumpMpId = ''
        this.dialogData.envVersion = ''
        this.dialogData.extraData = ''
      }
    },
    // 显示弹框
    showDialog(type, item) {
      let dialogData = {}
@@ -306,7 +302,8 @@
      this.$refs[this.formName].validate((valid) => {
        if (valid) {
          // 上传图片
          this.runUploadImg(() => {
          this.$refs.refUploadImg.runUploadImg((imgUrl) => {
            imgUrl && this.$set(this.dialogData, 'imgUrl', imgUrl)
            this.submit(type)
          })
        }
@@ -317,8 +314,14 @@
      const dialogData = this.dialogData
      const params = {
        orderNum: dialogData.orderNum,
        imgUrl: dialogData.imgUrl
        imgUrl: dialogData.imgUrl,
        jumpType: dialogData.jumpType
      }
      if (dialogData.jumpUrl) params.jumpUrl = dialogData.jumpUrl
      if (dialogData.jumpMpId) params.jumpMpId = dialogData.jumpMpId
      if (dialogData.envVersion) params.envVersion = dialogData.envVersion
      if (dialogData.extraData) params.extraData = dialogData.extraData

      if (dialogData.type === 'edit') {
        params.id = dialogData.id
      }
@@ -333,7 +336,7 @@
      }, inf => {
        this.$messageSuc('保存成功')
        this.hideDialog()
        this.getList()
        type === 'add' ? this.reGetList() : this.getList()
      })
    }
  }