crm_front_v3/src/views/rai_manage/components/mapDialog.vue

<script setup>
import { ref } from "vue";
import { raiInterface } from "@/api/api.js";
import { ElMessage } from "element-plus";

const props = defineProps({
  isShowDia: Boolean,
  title: String,
  nodeData: Object,
});

const emit = defineEmits(["over", "cancel"]);
const add_name = ref("");

/* 保存 */
const saveHandle = () => {
  switch (title) {
    case "add":
      addNode();
      break;
    case "edit":
      editNode();
      break;
    case "del":
      delNode();
      break;
  }
};

/* 新增节点 */
const addNode = () => {
  if (add_name) {
    raiInterface
      .addNode({
        IndustryMapId: props.nodeData.id,
        IndustryMapName: add_name,
        Level: props.nodeData.level,
      })
      .then((res) => {
        if (res.Ret === 200) {
          emit("over");
          ElMessage.success(res.Msg);
        }
      });
  } else {
    ElMessage.warning("子级名称不能为空");
  }
};

/* 修改 */
const editNode = () => {
  raiInterface
    .editNode({
      IndustryMapId: props.nodeData.id,
      IndustryMapName: props.nodeData.name,
    })
    .then((res) => {
      if (res.Ret === 200) {
        emit("over");
        ElMessage.success(res.Msg);
      }
    });
};

/* 删除节点 */

const delNode = () => {
  raiInterface
    .delNode({
      IndustryMapId: props.nodeData.id,
    })
    .then((res) => {
      if (res.Ret === 200) {
        ElMessage.success("已删除");
        emit("over");
      }
    });
};

/* 取消 */
const cancelHandle = () => {
  add_name.value = "";
  emit("cancel");
};
</script>

<template>
  <el-dialog draggable v-model="props.isShowDia" :close-on-click-modal="false" :modal-append-to-body="false" @close="cancelHandle" custom-class="map_dialog" width="450px">
    <template #header>
      <span style="font-size: 16px">{{ props.title == "add" ? "新增子级" : "edit" ? "编辑" : "删除" }}</span>
    </template>

    <div class="dialog_cont">
      <!-- 新增子级 -->
      <template v-if="props.title == 'add'">
        <div class="node_name">父级名称:&nbsp;{{ nodeData.name }}</div>
        <el-input v-model="add_name" placeholder="请输入子级名称" class="node_ipt" @keyup.enter.native="saveHandle"> </el-input>
      </template>
      <!-- 编辑 -->
      <el-input v-model="nodeData.name" placeholder="请输入名称" class="node_ipt" v-else-if="props.title == 'edit'" @keyup.enter.native="saveHandle"> </el-input>
      <!-- 删除 -->
      <div class="node_name" v-else-if="props.title == 'del'">确定要删除此节点吗？</div>
    </div>
    <div style="display: flex; justify-content: center; margin-top: 40px">
      <el-button type="primary" style="width: 80px; marginright: 24px" @click="saveHandle">确定</el-button>
      <el-button type="primary" plain style="width: 80px" @click="cancelHandle">取消</el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.dialog_cont {
  display: flex;
  padding: 0 10px;
  .node_name {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 15px;
  }
}
</style>