新增/弹窗

弹窗

下面展示一些 内联代码片。

<!--
  ==================== 说明 ====================
  一.命名方式：
    dialog_add_order === dialog:弹窗,add:新增,order:订单
  二.参数
    1.title 弹窗名
    2.dialogVisible 是否打开
    3.formValidate 具体参数
    4.loadingbtn 按钮状态
	三.方法
    1.init() 初始化组件 调用
    2.getInfo() 根据id 获取详情
    3.save() 保存
    4.modalPicTap() 调用 选择图片
    5.numberChange() 限制输入大小
 -->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="640px">
      <template>
        <el-form
          label-position="left"
          ref="ruleForm"
          :model="formValidate"
          class="demo-form-inline form_box"
          :rules="ruleValidate"
          label-width="100px">
          <el-form-item label="姓名：" prop="name">
            <el-input class="selWidth" clearable type="text" placeholder="请输入姓名" v-model="formValidate.name" maxlength="30" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="时间：" prop="time">
            <el-date-picker
              v-model="formValidate.time"
              class="selWidth" clearable
              format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
					<el-form-item label="图片(单张)：" prop="image">
						<div class="upLoadPicBox" @click="modalPicTap('image', '1')" title="250*250px">
						  <div v-if="formValidate.image" class="pictrue">
						    <img :src="formValidate.image"/>
						  </div>
						  <div v-else class="upLoad">
						    <i class="el-icon-camera cameraIconfont"/>
						  </div>
						</div>
					</el-form-item>
          <el-form-item label="图片(多张)：" prop="images">
            <div class="acea-row">
              <div v-for="(item,index) in formValidate.images"
                :key="index" class="pictrue" draggable="false"
                 @dragstart="handleDragStart('images', $event, item)"
                 @dragover.prevent="handleDragOver('images', $event, item)"
                 @dragenter="handleDragEnter('images', $event, item)"
                 @dragend="handleDragEnd('images', $event, item)">
                <img :src="item"/>
                <i class="el-icon-error btndel" @click="handleRemove('images', index)"/>
              </div>
              <div v-if="formValidate.images.length < 10" class="uploadCont" title="750*1334px">
                <div class="upLoadPicBox" @click="modalPicTap('images', '2')">
                  <div class="upLoad">
                    <i class="el-icon-camera cameraIconfont"/>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="数量：" prop="nums">
            <el-input clearable type="number" v-model="formValidate.nums"
              class="selWidth"
              @input="numberChange('nums',100000)"
              @change="numberChange('nums',100000)"
              placeholder="请输入数量">
              <template slot="append">张</template>
            </el-input>
          </el-form-item>
          <el-form-item label="排序：" prop="sort">
            <el-input-number v-model="formValidate.sort" :min="0" :max="9999" label="请输入排序"></el-input-number>
          </el-form-item>
        </el-form>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" :loading="loadingbtn" @click="save('ruleForm')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    detailBuild, // 详情
    addBuild, // 新增
    updateBuild, // 编辑
  } from "@/api/card-v";
  export default {
    components: {
    },
    data() {
      return {
        title: '新增',
        dialogVisible: false,
        listLoading: false,
        loadingbtn: false, // 按钮
        formValidate: {},
        ruleValidate: {
          name: [
            { required: true, message: "请输入姓名", trigger: "blur"},
          ],
          time: [
            { required: true, message: "请选择时间", trigger: "change", type: "array"},
          ],
          image: [
            { required: true, message: "请选择图片", trigger: "change" },
          ],
          images: [
            { required: true, message: "请选择图片(多)", trigger: "change", type: "array"},
          ],
          nums: [
            { required: true, message: "请输入数量", trigger: "blur"},
          ],
          sort: [
            { required: true, message: "请输入排序", trigger: "blur"},
          ]
        },
      }
    },
    methods: {
      // ========== 初始化 ==========
			init(val) {
				this.formValidate = {
					name: '', // 姓名
					time: [], // 时间
					image: '',
          images: [],
					nums: '', // 数量
					sort: 0, // 排序
				}
				if (val) {
					this.getInfo(val)
				}
			},
			// ========== 获取详情 ==========
			getInfo (val) {
				getInfoApi(val.id).then(res => {
					console.log('api获取详情', res.data)
					this.formValidate = res.data
				})
			},
			// ========== 保存 ==========
			save (form) {
        // 如果id存在则编辑，否则新增
        this.$refs[form].validate((valid) => {
          if (valid) {
            if ( this.formValidate.id ) {
              this.loadingbtn = true
              updateBuild(this.formValidate.id, this.formValidate).then(res => {
                this.$emit('saveInit')
                this.$message.success(res.message);
                this.loadingbtn = false
              }).catch(err => {
                this.$message.error(err.message);
                this.loadingbtn = false
              })
            } else {
              this.loadingbtn = true
              addBuild(this.formValidate).then(res => {
                this.$emit('save')
                this.$message.success(res.message);
                this.loadingbtn = false
              }).catch(err => {
                this.$message.error(err.message);
                this.loadingbtn = false
              })
            }
          }
        })
			},
			// ========== 新增图片 num: 1为单张 2为多张 ==========
			modalPicTap(key, num) {
			  this.$modalUpload((img) => {
          if ( num == 1 ) { this.formValidate[key] = img[0] }
          if ( num == 2 ) { this.formValidate[key] = this.formValidate[key].concat(img) }
			  }, num);
			},
      // ========== 删除图片 ==========
      handleRemove(key, i) {
        this.formValidate[key].splice(i, 1);
      },
			// ========== 限制数字输入限制范围  key:键， maxNum最大数量 ==========
			numberChange(key,maxNum) {
				this.$nextTick(()=>{
					if (Number(this.formValidate[key]) > maxNum) {
						this.formValidate[key] = maxNum
					} else if (Number(this.formValidate[key]) < 1) {
						this.formValidate[key] = 1
					}
				})
			},
      // ========== 移动 ==========
      handleDragStart(key, e, item) {
        this.dragging = item;
      },
      // ========== 移动 ==========
      handleDragEnd(key, e, item) {
        this.dragging = null;
      },
      // ========== 移动 ==========
      handleDragOver(key, e) {
        e.dataTransfer.dropEffect = "move";
      },
      // ========== 移动 ==========
      handleDragEnter(key, e, item) {
        e.dataTransfer.effectAllowed = "move";
        if (item === this.dragging) {
          return;
        }
        const newItems = [...this.formValidate[key]];
        const src = newItems.indexOf(this.dragging);
        const dst = newItems.indexOf(item);
        newItems.splice(dst, 0, ...newItems.splice(src, 1));
        this.formValidate[key] = newItems;
      },
    }
  }
</script>

<style scoped lang="scss">
  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>