【vue】组件通过ref传值，一个组件实现新增/编辑弹窗的动态切换

实现一个新增/编辑弹窗效果，利用ref进行组件传值

父组件代码：

<noticeFrom ref="form" :is-add="isAdd" @refreshList="getAdd"></noticeFrom>

子组件的弹窗是新增还是编辑，由父组件的isAdd变量控制

父组件点击编辑按钮代码：

 updateList(item){
      this.isAdd = false;
      const _this = this.$refs.form;
      _this.form=item
      _this.pictureUpload=item.file.url
      _this.dialog = true;

    },

父组件点击新增按钮代码：

    add: function () {
      this.isAdd = true;
      const _this = this.$refs.form;
      _this.resetForm();
      _this.dialog = true;
    },

父组件的getAdd函数：

    getAdd(){
      this.search();//刷新此页数据代码
    },

子组件代码：

<template>
  <el-dialog
    :append-to-body="true"
    :visible.sync="dialog"
    width="60%"
    :title="isAdd ? '消息(新增)' : '消息(修改)'"
    :before-close="handleClose"
  >
    <el-form
      v-if="dialog"
      ref="form"
      :model="form"
      size="small"
      label-width="100px"
    >
      <el-row :gutter="20">
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="消息类型">
            <el-select v-model.number="form.type" placeholder="消息类型">
              
              <el-option label="防治信息" :value="0" />
              <el-option label="虫害监测" :value="1" />
              <el-option label="易发病害" :value="2" />
              <el-option label="易发虫害" :value="3" />
            </el-select>
          </el-form-item>
        </el-col>
       
      </el-row>
      <el-row :gutter="20">
        
        <el-col :span="10">
          <el-form-item label="消息名称（标题）">
            <el-input v-model="form.title" placeholder="请输入名称(标题)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="消息日期">
            <el-date-picker
              v-model="form.time"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          
          <el-form-item
            label="上传图片"
            prop="pictureUrl"
            v-model="form.fileId"
          >
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              list-type="picture-card"
              :action="uploadImgUrl"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                style="width: 146px; height: 146px"
                v-if="reFresh"
                :src="getPictureUrl(pictureUpload)"
                class="avatar"
              />

              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="内容" v-model="form.content">
            <!-- <el-input v-model="form.content" placeholder="请输入公示内容" type="textarea" rows="3"></el-input> -->
            <vue-editor v-model="form.content" />

            <!-- <div id="editor"></div> -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="dosubmit"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import {
  accessToken,
  DeviceList,
  GetPicturesBaPage,
  GetPicturesBaPageByTime,
  GetPicturesBaPageTotal,
  GetpictureInfo,
  GetToken,
  DeviceListScd,
  AdjustLight,
  DeviceStatus,
  WebDisplayInsert,
  WebDisplayUpdate
} from "@/api/user";
import defaultSettings from "@/settings";
import { add, edit } from "@/api/Notice";
import { getAllCities } from "@/api/common.js";
import E from "wangeditor";
export default {
  props: {
    isAdd: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      pageIndex:1,
      pageSize:12,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/MinioFile/upload",
      loading: false,
      dialog: false,
      isShowSelect: false,
      inputType: "",
      options: [],
      optionProps: {
        value: "cityId",
        label: "name",
        children: "children",
        emitPath: false,
        checkStrictly: true,
      },
      form: {
        type: 0,
        title: "",
        fileId: "",
        content: "",
        time: "",
        // pictureUrl: "",
        // pictureUrl: "",
        // minioFileId:'',
      },
      pictureUpload: "",
      reFresh: false,
      // form: {
      //   cityId: 0,
      //   name: "",
      //   township: "",
      //   startTime: "",
      //   endTime: "",
      //   noticeTypeId: "",
      //   state: "",
      //   grade: "",
      //   content: "",
      //   remarks: "",
      //   pictureUrl: "",
      //   minioFileId:'',
      // },

      landGrade: [
        { id: "1", value: "一级" },
        { id: "2", value: "二级" },
        { id: "3", value: "三级" },
        { id: "4", value: "四级" },
        { id: "5", value: "五级" },
        { id: "6", value: "六级" },
        { id: "7", value: "七级" },
        { id: "8", value: "八级" },
      ],
    };
  },
  created() {
    this.chooseAddress();
  },
  watch: {
    pictureUpload() {
      console.log("上传图片的地址对吗");
      this.reFresh = false;
      this.$nextTick(() => {
        this.reFresh = true;
      });
    },
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.resetForm();
        })
        .catch((_) => {});
    },
    getPictureUrl(pictureUrl) {
      console.log(
        "tu",
        defaultSettings.staticResourceLocation + `file/` + pictureUrl
      );
      return defaultSettings.staticResourceLocation + `file/` + pictureUrl;
    },
    handleAvatarSuccess(res, file) {
      console.log("上传的文件测试1", file, res);
      //this.form.pictureUrl = res.body.url;
      this.form.fileId = res.body.id;
      this.pictureUpload = res.body.url;
      
    },
    beforeAvatarUpload(file) {
      //console.log('上传的文件测试',file)
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    // 选择企业地址
    changeAddress(val) {
      console.log(val);
      this.form.cityId = val;
    },
    //创建富文本编辑器
    opened() {
      
      this.editor = new E("#editor");
      this.editor.config.onchange = (html) => {
        this.form.content = html;
      };
      this.editor.create();
      this.editor.txt.html(this.form.content);
    },
    close() {
      this.editor.destroy();
    },
    //省市区地址 选择
    chooseAddress() {
      //调用接口 省市区地址
      getAllCities().then((res) => {
        //console.log(res, 'ppppppppppppp')
        this.options = res.body;
        this.options = this.formatData(res.body);
      });
    },
    //处理级联选择器最后一列无数据空白问题
    formatData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          data[i].children = undefined;
        } else {
          this.formatData(data[i].children);
        }
      }
      return data;
    },
    handleNodeClick(ev) {
      this.treeData = {
        id: ev.label,
        label: ev.label,
      };
      this.$refs.selectform.blur();
    },
    resetForm() {
      this.dialog = false;
      this.form = {
        type: 0,
        title: "",
        fileId: "",
        content: "",
      };
      this.pictureUpload = "";
      this.reFresh = false;
    },
    dosubmit() {
      this.$refs["form"].validate((r) => {
        if (r) {
          if (this.isAdd) {
            this.doAdd();
          } else this.doEdit();
        } else {
        }
      });
    },
    doAdd: function () {
      // this.form.township = this.form.cityId;
      // this.form.time = "2024-02-20T02:54:25.072Z";
      console.log("新增的数据", this.form);
      // WebDisplayInsert(this.form).then((res) => {
      //   console.log("添加成功吗", res);
      // });
      WebDisplayInsert(this.form)
        .then((res) => {
          this.resetForm();
          this.$notify({
            title: "添加成功",
            type: "success",
            duration: 2500,
          });
          // this.loading = false;
          this.$emit("refreshList");
        })
        .catch((err) => {
          this.loading = false;
          //console.log(err.response.data.message)
        });
    },
    doEdit: function () {
      // this.form.township = this.form.cityId;
      // this.form={
        
      // }
      WebDisplayUpdate(this.form)
        .then((res) => {
          this.resetForm();
          this.$notify({
            title: "修改成功",
            type: "success",
            duration: 2500,
          });
          this.loading = false;
          this.$emit("refreshList");
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    cancel() {
      this.resetForm();
    },
  },
};
</script>

<style></style>