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

<template>
  <div class="apps-form">
    <el-dialog :title="(!state.ruleForm.id ? '批量' : '')+'修改营销配置'" width="880" v-model="visible" :close-on-click-modal="false" :destroy-on-close="true"
      draggable>
      <el-form ref="appDialogFormRef" :rules="dataRules" :model="state.ruleForm" class="demo-form-inline" v-loading="loading">
        <el-form-item v-if="state.ruleForm.appName" :label="'应用名称'" prop="appName">
          <el-input style="width: 200px;" v-model="state.ruleForm.appName" disabled />
        </el-form-item>
        <el-row :gutter="20" style="margin-bottom: 15px;">
          <el-col :span="12">
            <el-form-item :label="'营销开关'" prop="launch">
              <el-switch v-model="state.ruleForm.launch" style="--el-switch-on-color: rgb(48, 185, 113);"
                inline-prompt :active-value="true" :inactive-value="false" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'域名限制'" prop="domainLimit">
              <el-switch v-model="state.ruleForm.domainLimit" style="--el-switch-on-color: rgb(48, 185, 113);"
                inline-prompt :active-value="true" :inactive-value="false" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="'触发频率'" prop="triggerNum">
              <el-input style="width: 200px;" v-model="state.ruleForm.triggerNum" :placeholder="'请输入触发频率'" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'触发规则'" prop="triggerRule">
              <el-select style="width: 200px;" v-model="state.ruleForm.triggerRule" placeholder="">
                <el-option v-for="item in triggerRules" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="mt-7">
          <IpCollapse :data=state.ruleForm.ips></IpCollapse>
        </div>
        <div class="mt-7">
          <DomainCollapse :data=state.ruleForm.domains @domains="updateDomains" @delDomains="updateDelDomains"></DomainCollapse>
        </div>
        <div class="title">备注</div>
        <el-form-item>
          <el-input :rows="4" v-model="state.ruleForm.remark" type="textarea" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <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 { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
const DomainCollapse = defineAsyncComponent(() => import('./domainCollapse.vue'));
const IpCollapse = defineAsyncComponent(() => import('./ipCollapse.vue'));

interface IpItem {
  id: String;
  ipMode: Number;
  ipType: Number;
  sourceType: Number; // 1:分组 2:具体Ip(段)
  startIp: String;
  endIp: String;
  groupId: String;
  groupName: String;
}

interface DomianItem {
  id: String;
  domain: String;
  sourceType: Number; // 1:分组 2:具体域名
  groupId: String;
  groupName: String;
}

interface Form {
  id: String;
  appId: String;
  appName: String;
  appImg: String;
  appUrl: String;
  backUpUrl: String;
  domainType: String;
  domainLimit: Boolean;
  launch: Boolean;
  triggerRule: Number;
  triggerNum: Number;
  remark: String;
  ips: IpItem[];
  domains: DomianItem[];
}

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

// 定义变量内容
const visible = ref(false);
const loading = ref(false);
const appDialogFormRef = ref();
const domains = ref();
const delDomains = ref<String[]>([]);

const triggerRules = [
  {
    label: '仅一次',
    value: 1,
  },
  {
    label: '多次',
    value: 2,
  },
]

// 定义需要的数据
const state = reactive({
  ruleForm: {} as Form,
});

watch(() => state.ruleForm, async (val) => {
  console.log('val', val);
})

const updateDomains = (data: DomianItem[])=>{
  domains.value = data;
}
const updateDelDomains = (data: String[]) => {
  delDomains.value = data;
}

// 打开弹窗
const openDialog = async (type: string, row: any, str: string = 'domain') => {
  visible.value = true;
  state.ruleForm = row;
  domains.value = [];
  delDomains.value = [];
  console.log(row);
};

// 表单校验规则
const dataRules = reactive({
	triggerNum: [
    { required: true, message: '触发频率不能为空', trigger: 'blur' },
    {
      pattern: /^(10000|[1-9]\d{0,3}|0)$|^(100%|[1-9]?\d%|0%)$/,
      message: '请输入 0-10000 的正整数或 0%-100% 的百分比',
      trigger: 'blur',
    },
  ],
});

// 保存数据
const onSubmit = async () => {
  console.log({
    ...state.ruleForm,
    domains: domains.value,
    delDomains: delDomains.value
  });
  ElMessage.success('提交成功！');

  visible.value = false;
  // 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">
.apps-form {
  .collapse-group {
    display: flex;
    justify-content: start;
    align-items: first baseline;
  }

  .tag-content {
    flex: 1;
  }

  .el-overlay {
    .el-overlay-dialog {
      .el-dialog {
        .el-dialog__body {
          padding: 0 !important;
        }
      }
    }
  }

  .title {
    line-height: 20px;
    font-family: Source Han Sans SC;
    font-size: 14px;
    color: rgba(18, 18, 18, 1);
    margin: 25px 0 12px;
  }
}
</style>