vue中新增和编辑两个功能共用一个弹窗和弹窗确定按钮，调用接口的处理方式（二）---父子vue页面

目标：点击增加按钮出现弹窗，弹窗中多选框的名称是通过其他接口获取的；点击编辑按钮出现弹窗，且该行的数据已被传递到该弹窗中，增加和编辑接口均是点击弹窗中的确定按钮进行调用的。

1.api的js接口文件中：

// 编辑
export function rulesUpdate(param) {
    return request({
        url: "/xxx/xxxx/update",
        method: "post",
        headers: {
            "Content-Type": "application/json" // 如果写成contentType会报错
        },
        data: param
    });
}

// 增加
export function rulesInsert(param) {
    return request({
        url: "/xxx/xxx/insert",
        method: "post",
        headers: {
            "Content-Type": "application/json" // 如果写成contentType会报错
        },
        data: param
    });
}

2.后端的swagger中：

3.前端页面

父页面--整个表单数据的页面

子页面--弹窗，（点击新增时出现的也是该弹窗，所有数据为空）

 4.vue文件--父页面

父页面中包含弹窗子页面，在template中体现

        <RulesAdd
          v-if="showAddRulesData"
          :formFieldArr="propArr"
          ref="dMRulesAddDialog"
          :tableName="$route.query.md5num"
          @refreshRulesData="refreshRulesData"
          :editRuleDataObj="editRuleDataObj"
          :ifRuleEdit="ifRuleEdit"
        />

import RulesAdd from "../xxx/RulesAdd";

components: { RulesAdd },

data中：

showAddRulesData: false,
rulesMultipleSelection: [],
editRuleDataObj: {},
ifRuleEdit: 0 // 1表示添加，0表示编辑

methods中：

// 点击增加按钮
    addRulesData(row) {
      if (row) {
        this.ifRuleEdit = 0;
        this.editRuleDataObj = row;
      } else {
        this.ifRuleEdit = 1;
        this.editRuleDataObj = {};
      }
      this.$refs.dMRulesAddDialog.dialogVisible = true;
    },

// 刷新页面
    refreshRulesData() {
      this.listRuleChange();
    },

5.vue文件--子页面

<template>
  <div class="rules-dialog-wrap">
    <el-dialog
      :title="'添加规则'"
      :visible.sync="dialogVisible"
      :show-close="true"
      width="38%"
      :close-on-click-modal="false"
      center
    >
      <div class="dialog-main">
        <div class="main-row">
          <div class="add-field">
            规则名称：
            <span class="add-field-input"
              ><el-input
                v-model="nameValue"
                placeholder="请输入规则名称"
              ></el-input
            ></span>
          </div>
          <div class="not-null-check">
            <div class="not-null-check-title">必填项：</div>
            <div class="checkboxs">
              <el-checkbox-group
                v-model="selArr"
                style="margin-right: 15px;width:520px"
              >
                <el-checkbox
                  v-for="(item, index) in newArr"
                  :label="item.field"
                  :key="index"
                ></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="confirmDataInfo">确定</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { rulesInsert, rulesUpdate } from "@/api/cimApi/rules";

export default {
  props: {
    formFieldArr: {
      type: Array,
      default() {
        return [];
      }
    },
    tableName: {
      type: String,
      default: ""
    },
    editRuleDataObj: {
      type: Object,
      default() {
        return {};
      }
    },
    ifRuleEdit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogVisible: false,
      input: "",
      newArr: [],
      nameValue: "",
      selArr: []
    };
  },
  mounted() {
    this.formFieldArr.forEach(item => {
      if (
        item.field !== "序号" &&
        item.field !== "创建人" &&
        item.field !== "创建时间" &&
        item.field !== "修改时间"
      ) {
        let obj = item;
        this.$set(obj, "value", ""); //给obj对象的新增value属性赋值
        this.newArr.push(obj);
      }
    });
  },

  watch: {
    dialogVisible(newValue) {
      if (newValue) {
        if (this.ifRuleEdit == 0) {
          // 如果为编辑，将数据写入
          this.nameValue = this.editRuleDataObj.name;
          // split(",")将字符串用逗号隔开后赋值给数组
          this.selArr = this.editRuleDataObj.notNull.split(",");
        } else {
          this.nameValue = "";
          this.selArr = [];
        }
      }
    }
  },

  methods: {
    confirmDataInfo() {
      // 将数组重组为字符串，并以 , 进行分割
      let notnulls = this.selArr.join(",");
      // 整理参数
      let param = {
        name: this.nameValue,
        notNull: notnulls,
        tableName: this.tableName
      };
      if (this.ifRuleEdit == 1) {
        // 增加规则
        rulesInsert(param).then(res => {
          if (res.data.code == 200) {
            this.$message.success("规则增加成功");
            this.dialogVisible = false;
            // 刷新页面
            this.$emit("refreshRulesData");
          } else {
            this.$message.error("规则增加失败");
          }
        });
      } else {
        // 编辑规则
        param.id = this.editRuleDataObj.id;
        rulesUpdate(param).then(res => {
          if (res.data.code == 200) {
            this.$message.success("规则编辑成功");
            this.dialogVisible = false;
            //刷新页面
            this.$emit("refreshRulesData");
          } else {
            this.$message.error("规则编辑失败");
          }
        });
      }
    }
  }
};
</script>

这样就实现在父子vue页面中新增和编辑两个功能共用一个弹窗和弹窗确定按钮并调用接口。若在同一个vue页面中实现这个功能，可参考：vue中新增和编辑两个功能共用一个弹窗和弹窗确定按钮，调用接口的处理方式（一）--- 同一个vue页面_刚刚好ā的博客-CSDN博客