data-marketing-platform/src/views/marketing/apps/form.vue

<template>
  <div class="apps-form">
    <el-dialog :title="'修改'" width="880" v-model="visible" :close-on-click-modal="false" :destroy-on-close="true" draggable>
        <el-form ref="menuDialogFormRef"
          :inline="true"
          :model="state.ruleForm"
          class="demo-form-inline"
          style="margin-bottom: -25px;"
          v-loading="loading">
        <el-form-item :label="'营销开关'" prop="isMarketing">
          <el-switch v-model="state.ruleForm.isMarketing" style="--el-switch-on-color: rgb(48, 185, 113);" inline-prompt :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item :label="'域名限制'" prop="isHttp">
          <el-switch v-model="state.ruleForm.isHttp" style="--el-switch-on-color: rgb(48, 185, 113);" inline-prompt :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>
      <div class="title">IP集合</div>
      <JCollapse />
      <div class="title">域名集合</div>
      <JCollapse />
      <div class="title">备注</div>
      <el-input
        :rows="4"
        type="textarea"
      ></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemMenuDialog">
import {useI18n} from 'vue-i18n';
import {save} from '/@/api/marketing/config';
import {useMessage} from '/@/hooks/message';
import JCollapse from '/@/components/JCollapse/index.vue';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const {t} = useI18n();

// 定义变量内容
const visible = ref(false);
const loading = ref(false);
const sign = ref('domain')
const add = ref(false);
const menuDialogFormRef = ref();

// 定义需要的数据
const state = reactive({
  ruleForm: {
    list: [''], 
    https: [''], // 域名集合
    ips: [''], // ip集合
  },
  appList: [] as any[], // 应用下拉框列表
});

// 分页参数
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 打开弹窗
const openDialog = async (type: string, row: any, str: string = 'domain') => {
  visible.value = true;
  sign.value = str;
  nextTick(() => {
    menuDialogFormRef.value?.resetFields();
  });
  state.ruleForm = JSON.parse(JSON.stringify(row));
  str === 'domain' ? state.ruleForm.list = row.https.map(e => ({val: e})) : state.ruleForm.list = row.ips.map(e => ({val: e}));
};

// 保存数据
const onSubmit = async () => {
  sign.value === 'domain' ? state.ruleForm.https = state.ruleForm.list.map(e => e.val) : state.ruleForm.ips = state.ruleForm.list.map(e => e.val);
  delete state.ruleForm.list;
  try {
    loading.value = true;
    await save(state.ruleForm);
    useMessage().success(t(state.ruleForm.id ? 'common.editSuccessText' : 'common.addSuccessText'));
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};

// 暴露变量 只有暴漏出来的变量 父组件才能使用
defineExpose({
  openDialog,
});
</script>
<style lang="scss">
.config-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  justify-content: start;
}
.config-actions {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.apps-loadmore.el-select-dropdown .el-scrollbar__wrap {
  height: 330px !important;
}
.apps-form {
  .el-overlay {
    .el-overlay-dialog {
      .el-dialog {
        .el-dialog__body {
          padding: 0 !important;
        }
      }
    }
  }
  .demo-form-inline .el-switch {
    margin-right: 50px;
  }
  .title {
    line-height: 20px;
    font-family: Source Han Sans SC;
    font-size: 14px;
    color: rgba(18, 18, 18, 1);
    margin: 30px 0 12px;
  }
}
</style>