merchant_feedov_web/src/views/admin/flowPool/components/forewarning.vue

<script setup>
import { ref, onMounted, toRefs, toRef, watch, defineExpose } from 'vue';
import { Message } from "@arco-design/web-vue";
import { Getdictionary } from '@/mixins/index.js'
import { createWarning, updateWarning } from '@/api/path/flowPool.api.js'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  FormDataList: {
    type: Object,
    default: () => ({})
  }
})
const modelValue = toRef(props, 'modelValue')
const FormDataList = toRef(props, 'FormDataList')
const emit = defineEmits(['update:modelValue', 'submit'])
const state = ref({
  formWarning: {
    "userId": null, // 用户ID
    "poolId": null, // 流量池ID
    "clientPooPc": null, // 客户端-池预警设置:端流量池预计
    "clientPooPcWarnSwitch": false, // 客户端-池预警设置:达量预警
    // "clientPooPcStop": "", // 客户端-池预警设置:达量停机
    // "clientPooPcStopSwitch": false, // 客户端-池预警设置:达量停机开关
    "clientPooPcStopNetwork": "", // 客户端-池预警设置:达量断网
    "clientPooPcStopNetworkSwitch": false, // 客户端-池预警设置:达量断网开关
    "clientNotifyNumber": null, // 客户端-池预警设置:通知次数 次/月
    "clientSingleCardWarn": "", // 客户端-单卡预警设置:单卡预警 M
    "clientSingleCardWarnSwitch": false, // 客户端-单卡预警设置:单卡预警 M 开关
    // "clientSingleCardWarnStop": "", // 客户端-单卡预警设置:达量停机
    // "clientSingleCardWarnStopSwitch": false, // 客户端-单卡预警设置:达量停机开关
    "clientSingleCardWarnStopNetwork": "", // 客户端-单卡预警设置:达量断网
    "clientSingleCardWarnStopNetworkSwitch": false, // 客户端-单卡预警设置:达量断网开关
    "manageWarn": null, // 管理端-预警设置:单卡预警 M
    "manageWarnSwitch": false, // 管理端-预警设置:单卡预警 M 开关
    // "manageWarnSwitchStop": "", // 管理端-预警设置:达量停机
    // "manageWarnSwitchStopSwitch": false, // 管理端-预警设置:达量停机开关
    "manageWarnStopNetwork": "", // 管理端-预警设置:达量断网
    "manageWarnStopNetworkSwitch": false // 管理端-预警设置:达量断网开关
  },
  formRef: null,
  earlyList: []
})

const { formWarning, formRef, earlyList } = toRefs(state.value)

const rules = {
  clientPooPc: [{ required: true, trigger: 'change', }],
  // clientPooPcStop: [{ required: true, trigger: 'change', }],
  clientPooPcStopNetwork: [{ required: true, trigger: 'change', }],
  clientNotifyNumber: [{ required: true, trigger: 'change', }],
  clientSingleCardWarn: [{ required: true, trigger: 'change', }],
  // clientSingleCardWarnStop: [{ required: true, trigger: 'change', }],
  clientSingleCardWarnStopNetwork: [{ required: true, trigger: 'change', }],
  manageWarn: [{ required: true, trigger: 'change', }],
  // manageWarnSwitchStop: [{ required: true, trigger: 'change', }],
  manageWarnStopNetwork: [{ required: true, trigger: 'change', }],
};

// 取消
const resetForm = () => {
  emit('update:modelValue', false)
  formWarning.value = {
    "userId": null, // 用户ID
    "clientPooPc": null, // 客户端-池预警设置:端流量池预计
    "clientPooPcWarnSwitch": false, // 客户端-池预警设置:达量预警
    // "clientPooPcStop": "", // 客户端-池预警设置:达量停机
    // "clientPooPcStopSwitch": false, // 客户端-池预警设置:达量停机开关
    "clientPooPcStopNetwork": "", // 客户端-池预警设置:达量断网
    "clientPooPcStopNetworkSwitch": false, // 客户端-池预警设置:达量断网开关
    "clientNotifyNumber": null, // 客户端-池预警设置:通知次数 次/月
    "clientSingleCardWarn": "", // 客户端-单卡预警设置:单卡预警 M
    "clientSingleCardWarnSwitch": false, // 客户端-单卡预警设置:单卡预警 M 开关
    // "clientSingleCardWarnStop": "", // 客户端-单卡预警设置:达量停机
    // "clientSingleCardWarnStopSwitch": false, // 客户端-单卡预警设置:达量停机开关
    "clientSingleCardWarnStopNetwork": "", // 客户端-单卡预警设置:达量断网
    "clientSingleCardWarnStopNetworkSwitch": false, // 客户端-单卡预警设置:达量断网开关
    "manageWarn": null, // 管理端-预警设置:单卡预警 M
    "manageWarnSwitch": false, // 管理端-预警设置:单卡预警 M 开关
    // "manageWarnSwitchStop": "", // 管理端-预警设置:达量停机
    // "manageWarnSwitchStopSwitch": false, // 管理端-预警设置:达量停机开关
    "manageWarnStopNetwork": "", // 管理端-预警设置:达量断网
    "manageWarnStopNetworkSwitch": false // 管理端-预警设置:达量断网开关
  }
  FormDataList.value = {}
}

const handleSubmit = ({ values, error }) => {
  formRef.value.validate(async (errors) => {
    if (!errors) {
      Object.keys(formWarning.value).forEach(key => {
        if (typeof formWarning.value[key] === 'boolean') {
          formWarning.value[key] = formWarning.value[key] ? "1" : "2";
        }
      });
      formWarning.value.clientPooPc = Number(formWarning.value.clientPooPc)
      formWarning.value.clientNotifyNumber = Number(formWarning.value.clientNotifyNumber)
      formWarning.value.manageWarn = Number(formWarning.value.manageWarn)
      formWarning.value.clientSingleCardWarn = String(formWarning.value.clientSingleCardWarn)
      let res = formWarning.value.id ? await updateWarning(formWarning.value) : await createWarning(formWarning.value)
      if (res.code === 200) {
        Message.success(t('setting.ControlsSuccess'))
        emit('update:modelValue', false)
        emit('submit', true)
        resetForm()
      }
    } else {
      console.error('Validation failed', errors);
    }
  })
}

const handleDictValue = async () => {
  earlyList.value = await Getdictionary('forewarning')
}


const detaile = (val)=>{
  formWarning.value.userId = val.userId;
  formWarning.value.poolId = val.id;

  if (val.alert && val.alert.id !== '') {
    Object.keys(formWarning.value).forEach(key => {
      if (typeof formWarning.value[key] === 'boolean') {
        formWarning.value[key] = val.alert[key] == 1;
      } else {
        formWarning.value[key] = val.alert[key];
      }
    });
    formWarning.value.clientSingleCardWarn = Number(formWarning.value.clientSingleCardWarn)
  }
  if (val.alert.id !== '') {
    formWarning.value.id = val.alert.id
  }
}

defineExpose({detaile})

onMounted(() => {
  handleDictValue()
})
</script>

<template>
  <a-modal :title="$t('forewarning.forewarning')" v-model:visible="modelValue" @cancel="resetForm" centered
    :maskClosable="false" :footer="null" width="55%">
    <a-tabs>
      <a-tab-pane key="1" :title="$t('forewarning.PoolEarlyWarning')">
        <a-form :model="formWarning" direction="inline" ref="formRef" :rules="rules">
          <div class="form-pool-tit">
            <div class="pool-icon"></div>
            {{ $t('forewarning.clientWarning') }}
          </div>
          <a-form-item field="clientPooPc" :label="$t('forewarning.TakeUpOf')">
            <a-input-number v-model="formWarning.clientPooPc" :style="{ width: '320px' }"
              :placeholder="$t('forewarning.PleaseEnter')" allow-clear hide-button>
              <template #suffix>
                %
              </template>
            </a-input-number>
            <a-checkbox v-model="formWarning.clientPooPcWarnSwitch">{{ $t('forewarning.reach') }}</a-checkbox>
          </a-form-item>
          <!-- <a-form-item field="clientPooPcStop" :label="$t('forewarning.ShutDown')">
            <a-select v-model="formWarning.clientPooPcStop" :placeholder="$t('forewarning.PleaseEnter')" :style="{ width: '320px' }" allow-clear>
              <a-option v-for="item in earlyList" :key="item.value" :value="item.value" :label="item.label" />
            </a-select>
            <a-checkbox v-model="formWarning.clientPooPcStopSwitch">{{ $t('forewarning.ShutDown') }}</a-checkbox>
          </a-form-item> -->
          <a-form-item field="clientArriveStopNetwork" :label="$t('forewarning.NetworkOutage')">
            <a-select v-model="formWarning.clientPooPcStopNetwork" :placeholder="$t('forewarning.PleaseSelect')"
              :style="{ width: '320px' }" allow-clear>
              <a-option v-for="item in earlyList" :key="item.value" :value="item.value" :label="item.label" />
            </a-select>
            <a-checkbox v-model="formWarning.clientPooPcStopNetworkSwitch">{{ $t('forewarning.NetworkOutage')
              }}</a-checkbox>
          </a-form-item>
          <a-form-item field="clientNotifyNumber" :label="$t('forewarning.ReminderTimes')">
            <a-input-number v-model="formWarning.clientNotifyNumber" :style="{ width: '320px' }"
              :placeholder="$t('forewarning.PleaseEnter')" allow-clear hide-button>
              <template #suffix>
                {{ $t('forewarning.TimesMonth') }}
              </template>
            </a-input-number>
          </a-form-item>
          <div class="form-pool-tit">
            <div class="pool-icon"></div>
            {{ $t('forewarning.SingleCard') }}
          </div>
          <a-form-item field="clientSingleCardWarn" :label="$t('forewarning.SingleCardUsage')">
            <a-input-number v-model="formWarning.clientSingleCardWarn" :style="{ width: '320px' }"
              :placeholder="$t('forewarning.PleaseEnter')" allow-clear hide-button>
              <template #suffix>
                %
              </template>
            </a-input-number>
            <a-checkbox v-model="formWarning.clientSingleCardWarnSwitch">{{ $t('forewarning.reach') }}</a-checkbox>
          </a-form-item>
          <!-- <a-form-item field="clientSingleCardWarnStop" :label="$t('forewarning.ShutDown')">
            <a-select v-model="formWarning.clientSingleCardWarnStop" :placeholder="$t('forewarning.PleaseSelect')" :style="{ width: '320px' }"
              allow-clear>
              <a-option v-for="item in earlyList" :key="item.value" :value="item.value" :label="item.label" />
            </a-select>
            <a-checkbox v-model="formWarning.clientSingleCardWarnStopSwitch">{{$t('forewarning.ShutDown')}}</a-checkbox>
          </a-form-item> -->
          <a-form-item field="clientSingleCardWarnStopNetwork" :label="$t('forewarning.NetworkOutage')">
            <a-select v-model="formWarning.clientSingleCardWarnStopNetwork"
              :placeholder="$t('forewarning.PleaseSelect')" :style="{ width: '320px' }" allow-clear>
              <a-option v-for="item in earlyList" :key="item.value" :value="item.value" :label="item.label" />
            </a-select>
            <a-checkbox
              v-model="formWarning.clientSingleCardWarnStopNetworkSwitch">{{ $t('forewarning.NetworkOutage') }}</a-checkbox>
          </a-form-item>
          <div class="form-pool-tit">
            <div class="pool-icon"></div>
            {{ $t('forewarning.ManagementSide') }}
          </div>
          <a-form-item field="manageWarn" :label="$t('forewarning.consumed')">
            <a-input-number v-model="formWarning.manageWarn" :style="{ width: '320px' }"
              :placeholder="$t('forewarning.PleaseEnter')" allow-clear hide-button>
              <template #suffix>
                %
              </template>
            </a-input-number>
            <a-checkbox v-model="formWarning.manageWarnSwitch">{{ $t('forewarning.reach') }}</a-checkbox>
          </a-form-item>
          <!-- <a-form-item field="manageWarnSwitchstop" :label="$t('forewarning.ShutDown')">
            <a-select v-model="formWarning.manageWarnSwitchStop" :placeholder="$t('forewarning.PleaseSelect')" :style="{ width: '320px' }"
              allow-clear>
              <a-option v-for="item in earlyList" :key="item.value" :value="item.value" :label="item.label" />
            </a-select>
            <a-checkbox v-model="formWarning.manageWarnSwitchStopSwitch">{{ $t('forewarning.ShutDown') }}</a-checkbox>
          </a-form-item> -->
          <a-form-item field="manageWarnStopNetwork" :label="$t('forewarning.NetworkOutage')">
            <a-select v-model="formWarning.manageWarnStopNetwork" :placeholder="$t('forewarning.PleaseSelect')"
              :style="{ width: '320px' }" allow-clear>
              <a-option v-for="item in earlyList" :key="item.value" :value="item.value" :label="item.label" />
            </a-select>
            <a-checkbox v-model="formWarning.manageWarnStopNetworkSwitch">{{ $t('forewarning.NetworkOutage')
              }}</a-checkbox>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSubmit" style="margin-right: 10px;">{{
              $t('form.Confirm')
            }}
            </a-button>
            <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <!-- <a-tab-pane key="2" title="卡预警">

      </a-tab-pane> -->
    </a-tabs>
  </a-modal>
</template>

<style scoped lang="less">
.form-pool-tit {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .pool-icon {
    margin-right: 10px;
    width: 4px;
    height: 16px;
    background: #1B5DF8;
    font-size: 14px;
    color: #6C6E70;
    font-family: PingFang SC;

  }
}
</style>