fe.ems.vue3/src/views/tool/files/neConfigBackup/components/BackupModal.vue

<script setup lang="ts">
import { reactive, watch, toRaw } from 'vue';
import { ProModal } from 'antdv-pro-modal';
import useI18n from '@/hooks/useI18n';
import { Form, message } from 'ant-design-vue';
import { regExpIPv4 } from '@/utils/regular-utils';
import { getBackupFTP, updateBackupFTP } from '@/api/neData/backup';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
    required: true,
  },
});

/**对话框对象信息状态类型 */
type StateType = {
  /**框是否显示 */
  open: boolean;
  /**标题 */
  title: string;
  /**查看命令 */
  form: Record<string, any>;
  /**等待 */
  confirmLoading: boolean;
};

/**对话框对象信息状态 */
let state: StateType = reactive({
  open: false,
  title: '设置远程备份配置',
  form: {
    username: '',
    password: '',
    toIp: '',
    toPort: 22,
    enable: false,
    dir: '',
  },
  confirmLoading: false,
});

/**FTP对象信息内表单属性和校验规则 */
const stateFrom = Form.useForm(
  state.form,
  reactive({
    toIp: [
      {
        required: true,
        pattern: regExpIPv4,
        message: t('views.ne.neConfigBackup.backupModal.toIpPleace'),
      },
    ],
    username: [
      {
        required: true,
        trigger: 'blur',
        message: t('views.ne.neConfigBackup.backupModal.usernamePleace'),
      },
    ],
    dir: [
      {
        required: true,
        trigger: 'blur',
        message: t('views.ne.neConfigBackup.backupModal.dirPleace'),
      },
    ],
  })
);

/**对象保存 */
function fnModalOk() {
  stateFrom.validate().then(() => {
    state.confirmLoading = true;
    const from = toRaw(state.form);
    updateBackupFTP(from)
      .then(res => {
        if (res.code === RESULT_CODE_SUCCESS) {
          message.success(t('common.operateOk'), 3);
          fnModalCancel();
        } else {
          message.warning(t('common.operateErr'), 3);
        }
      })
      .finally(() => {
        state.confirmLoading = false;
      });
  });
}

/**
 * 对话框弹出关闭执行函数
 * 进行表达规则校验
 */
function fnModalCancel() {
  stateFrom.resetFields();
  state.open = false;
  emit('cancel');
  emit('update:open', false);
}

/**
 * 对话框弹出显示为 新增或者修改
 */
function fnModalVisible() {
  if (state.confirmLoading) return;
  const hide = message.loading(t('common.loading'), 0);
  state.confirmLoading = true;
  getBackupFTP()
    .then(res => {
      if (res.code === RESULT_CODE_SUCCESS && res.data) {
        state.form = Object.assign(state.form, res.data);
      }
    })
    .finally(() => {
      state.confirmLoading = false;
      hide();
      state.title = t('views.ne.neConfigBackup.backupModal.title');
      state.open = true;
    });
}

/**监听是否显示，初始数据 */
watch(
  () => props.open,
  val => {
    if (val) {
      fnModalVisible();
    }
  }
);
</script>

<template>
  <ProModal
    :drag="true"
    :width="520"
    :destroyOnClose="true"
    :keyboard="false"
    :mask-closable="false"
    :open="state.open"
    :title="state.title"
    :confirm-loading="state.confirmLoading"
    @ok="fnModalOk"
    @cancel="fnModalCancel"
  >
    <a-form
      name="modalStateFTPFrom"
      layout="horizontal"
      :label-col="{ span: 6 }"
      :label-wrap="true"
    >
      <a-form-item
        :label="t('views.ne.neConfigBackup.backupModal.enable')"
        name="enable"
      >
        <a-switch
          v-model:checked="state.form.enable"
          :checked-children="t('common.switch.open')"
          :un-checked-children="t('common.switch.shut')"
        />
      </a-form-item>

      <template v-if="state.form.enable">
        <a-form-item
          :label="t('views.ne.neConfigBackup.backupModal.toIp')"
          name="toIp"
          v-bind="stateFrom.validateInfos.toIp"
        >
          <a-input
            v-model:value="state.form.toIp"
            allow-clear
            :placeholder="t('common.inputPlease')"
          ></a-input>
        </a-form-item>
        <a-form-item
          :label="t('views.ne.neConfigBackup.backupModal.toPort')"
          name="toPort"
          v-bind="stateFrom.validateInfos.toPort"
        >
          <a-input-number
            v-model:value="state.form.toPort"
            allow-clear
            :placeholder="t('common.inputPlease')"
          ></a-input-number>
        </a-form-item>

        <a-form-item
          :label="t('views.ne.neConfigBackup.backupModal.username')"
          name="username"
          v-bind="stateFrom.validateInfos.username"
        >
          <a-input
            v-model:value="state.form.username"
            allow-clear
            :placeholder="t('common.inputPlease')"
          ></a-input>
        </a-form-item>
        <a-form-item
          :label="t('views.ne.neConfigBackup.backupModal.password')"
          name="password"
          v-bind="stateFrom.validateInfos.password"
        >
          <a-input-password
            v-model:value="state.form.password"
            allow-clear
            :placeholder="t('common.inputPlease')"
          ></a-input-password>
        </a-form-item>

        <a-form-item
          :label="t('views.ne.neConfigBackup.backupModal.dir')"
          name="dir"
          v-bind="stateFrom.validateInfos.dir"
        >
          <a-input
            v-model:value="state.form.dir"
            allow-clear
            :placeholder="t('common.inputPlease')"
          ></a-input>
        </a-form-item>
      </template>
    </a-form>
  </ProModal>
</template>

<style scoped></style>