xiaoshi_system/src/views/product/components/dialog/addEditProduct.vue

<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="600px">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="所属产品类别" prop="category">
          <el-input v-model="form.category" placeholder="请输入所属产品类别"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入产品名称"></el-input>
        </el-form-item>
        <el-form-item label="上市时间" prop="marketTime">
          <el-date-picker
            v-model="form.marketTime"
            type="date"
            placeholder="请选择上市时间"
            value-format="yyyy-MM-dd"
            style="width: 100%;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="form.company" :disabled="form.isTheCompany=='1'" placeholder="请输入所属公司"></el-input>
        </el-form-item>
        <el-form-item label="参考许可费率" prop="rate">
          <el-input v-model="form.rate" placeholder="请输入参考许可费率(介于 0 ~ 1 之间)"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="">
          <el-upload ref="upload" action="#" :auto-upload="false" :on-change="handleChange" list-type="picture"
            :show-file-list="false">
            <span v-if="form.pictures && form.pictures.length > 0" class="avatar">
              <span class="deleteImg">
                <span>
                  <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview"></i>
                  <i class="el-icon-delete" @click.stop="handleRemove"></i>
                </span>
              </span>
              <el-image ref="image" style="width:100%;height: 100%;"
                :src="form.pictures[0].id ? $p2 + form.pictures[0].url : form.pictures[0].url"
                :preview-src-list="form.pictures ? form.pictures.map(item => { return item.id ? $p2 + item.url : item.url }) : []"></el-image>
            </span>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="产品说明" prop="">
          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入产品说明"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      dialogVisible: false,
      form: {},
      rules: {
        category: [{ required: true, message: '请输入所属产品类别', trigger: 'blur' },],
        name: [{ required: true, message: '请输入产品名称', trigger: 'blur' },],
      },
    };
  },
  mounted() { },
  methods: {
    // 上传的change
    handleChange(file, fileList) { },
    // 点击已上传的文件
    handlePictureCardPreview(file) { },
    // 文件列表移除文件
    handleRemove(file) { },
    // 打开弹窗
    open(row) {
      this.form = JSON.parse(JSON.stringify(row))
      if (this.form.id) {
        this.title = '编辑产品类别'
      } else {
        if (this.form.isTheCompany=='1') {
          this.title = '新增本公司产品'
        } else {
          
          this.title = '新增外公司产品'
        }
      }
      this.dialogVisible = true;
    },
    // 弹窗确定
    submit() { 
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.handleClose()
        } else {
          
        }
      })
    },
    // 弹窗取消/关闭
    handleClose() {
      this.$refs.ruleForm.resetFields()
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss">
.el-table__row{
  border: 1px solid black !important;
}
</style>
<style lang="scss" scoped>
.avatar-uploader-icon {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}

.avatar {

  position: relative;
  width: 148px;
  height: 148px;
  display: block;
}

.avatar:hover .deleteImg {
  display: block;
}

.deleteImg {
  display: none;
  font-size: 30px;
  width: 148px;
  height: 148px;
  background-color: black;
  opacity: 0.6;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 999;
}

.deleteImg span i {
  margin-left: 10px;
  color: #fff;
}

.deleteImg span {
  display: flex;
  align-items: center;
  /*垂直居中*/
  justify-content: center;
  /*水平居中*/
  width: 100%;
  height: 100%;
}</style>