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

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

const props = defineProps({
  editMobileDialogVisible: {
    type: Boolean,
    default: false,
    required: true,
  },
  editMobileId: {
    type: Number,
    required: true,
  },
  outboundMobile: {
    type: String,
    required: true,
  },
  isType: {
    type: String,
    default: "",
  },
});

const selectValue = ref("86");

const optionsMobile = ref([
  { value: "+86", key: "86" },
  { value: "+852", key: "852" },
  { value: "+886", key: "886" },
  { value: "+1", key: "1" },
  { value: "+65", key: "65" },
]);
const modelKey = ref("");

watch(
  () => props.editMobileDialogVisible,
  (newval) => {
    if (newval) {
      activitySignupSignupDetail();
    }
  }
);
async function activitySignupSignupDetail() {
  const res = props.isType ? await "" : await raiInterface.activitySignupSignupDetail({ Id: props.editMobileId });
  if (res.Ret === 200) {
    selectValue.value = res.Data.CountryCode ? res.Data.CountryCode : "86";
    modelKey.value = res.Data.OutboundMobile;
  }
}

const $emit = defineEmits(["getsDataList"]);
function handleClose() {
  selectValue.value = "86";
  modelKey.value = "";
  $emit("update:editMobileDialogVisible", false);
  $emit("update:outboundMobile", "");
}
async function btnOk() {
  const res = props.isType
    ? await raiSpecial.outboundMobileEdit({
        CountryCode: selectValue.value,
        OutboundMobile: modelKey.value,
        Id: props.editMobileId,
      })
    : await raiInterface.outboundMobileEdit({
        CountryCode: selectValue.value,
        OutboundMobile: modelKey.value,
        Id: props.editMobileId,
      });

  if (res.Ret !== 200) return;
  ElMessage.success("操作成功");
  selectValue.value = "86";
  modelKey.value = "";
  $emit("update:editMobileDialogVisible", false);
  $emit("update:outboundMobile", "");
  $emit("getsDataList");
}
</script>

<template>
  <div class="container-editMobile">
    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center :append-to-body="true" width="40%" v-model="props.editMobileDialogVisible" :before-close="handleClose">
      <template #header>
        <div style="display: flex; align-items: center">
          <img :src="$icons.edit_garden" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
          <span style="font-size: 16px">修改外呼号码</span>
        </div>
      </template>
      <div class="content-box" style="margin-top: 20px; margin-bottom: 60px">
        <el-select style="width: 90px" v-model="selectValue" placeholder="请选择">
          <el-option v-for="item in optionsMobile" :key="item.key" :label="item.value" :value="item.key"> </el-option>
        </el-select>
        <el-input style="width: 368px" v-model="modelKey" placeholder="请输入手机号或座机号" />
        <p style="margin-top: 15px">座机号请填写区号，分机号用"-"分隔，例：02150509999-8888</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="btnOk">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss">
.el-select {
  .el-input,
  .el-input__wrapper {
    width: 100% !important;
  }
}
</style>
<style scoped lang="scss">
.container-editMobile {
  .content-box {
    margin-top: 20px;
    margin-bottom: 60px;
    display: flex;
  }
}
</style>