尚品汇后台管理——Day3

一、表单验证

1、From

表单当中 <el-form style="width:80%" :model="tmForm" :rules="rules">

  <el-form ref="ruleForm" style="width:80%" :model="tmForm" :rules="rules">
        <el-form-item label="品牌名称" label-width="100px" prop="tmName">
          <el-input v-model="tmForm.tmName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
          <!-- 不能用v-model收集，因为不是表单元素
          on-success上传成功执行   :before-upload上传之前执行 -->
          <el-upload
            class="avatar-uploader"
            action="/dev-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>



在data中添加
// 表单验证规则
      rules: {
        // 品牌名称的验证规则
        tmName: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' }
        ],
        // logo的验证规则
        region: [
          { required: true, message: '请选择品牌的图片' }
        ]
      }


ref="ruleForm" 绑定
rules：表单验证规则
prop：需要校验的字段
trigger:用户行为设置   blue：失焦  change:文本发生改变

调整AddOrUpdateTradeMark

 addOrUpdateTradeMark() {
      // 当全部验证字段通过，再书写业务逻辑
      this.$refs.ruleForm.validate(async(success) => {
        if (success) {
          this.dialogFormVisible = false
          const result = await this.$API.trademark.reqAddOrUpdateTradeMark(this.tmForm)
          if (result.code === 200) {
            this.$message({
              type: 'success',
              message: this.tmForm.id ? '修改产品成功' : '添加产品成功'
            })
            // 添加、修改产品成功以后，需要再次获取品牌列表进行展示
            // 添加新品留在当前页
            this.getPageList(this.tmForm.id ? this.page : 1)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

 2、删除

绑定 @click="deleteTradeMark(row)"

添加模板并修改提示

deleteTradeMark(row) {
      // console.log(row)
      // 弹框
      this.$confirm(`确定删除${row.tmName}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

收集输入的属性值———:model="attrInfo" 和v-model="attrInfo.attrName"，attrInfo中的attrName数据。

<div v-show="!isShowTable">
        <el-form ref="form" :inline="true" label-width="80px" :model="attrInfo">
          <el-form-item label="属性名">
            <el-input v-model="attrInfo.attrName" placeholder="请输入属性名" />
          </el-form-item>
        </el-form>
        <el-button type="primary" icon="el-icon-plus">添加属性值</el-button>
        <el-button @click="isShowTable=true">取消</el-button>
        <el-table border style="width: 100%;margin: 20px 0px;">
          <el-table-column type="index" label="序号" width="80" align="center" />
          <el-table-column prop="prop" label="属性值名称" width="width" />
          <el-table-column prop="" label="操作" width="width" />
        </el-table>
        <el-button type="primary">保存</el-button>
        <el-button @click="isShowTable=true">取消</el-button>
</div>

有数组有对象————深拷贝

只有一种————浅拷贝

点击外面，回车，输入框取消

 <template slot-scope="{row}">
              <!-- span和input来回切换 -->
              <el-input
                v-if="flag"
                v-model="row.valueName"
                placeholder="请输入属性名称"
                size="mini"
                @blur="flag=false"
                @keyup.native.enter="flag=false"
              />
              <span v-else @click="flag=true">{{ row.valueName }}</span>
            </template>


每一次都加一个TRUE
 // 添加属性值回调
    addAttrValue() {
      this.attrInfo.attrValueList.push({
        attrId: this.attrInfo.id,
        valueName: '',
        flag: true
      })
    },

 

 

 

 

 ​​​​​​​​​​​​​​