ebike-ui/ebike-operate/src/views/form/operateregion/OperateConfForm.vue

<template>
  <a-spin
    :spinning="spinning"
    :tip="tipContent"
  >
    <a-divider orientation="left">开关配置</a-divider>
    <SwitchConfigForm ref="switchForm"></SwitchConfigForm>

    <a-divider orientation="left">运营配置</a-divider>
    <OperateConfigForm ref="operateForm"></OperateConfigForm>

    <a-divider orientation="left">用车配置</a-divider>
    <UseCarConfigForm ref="useCarForm"></UseCarConfigForm>

    <a-divider orientation="left">锁车配置</a-divider>
    <LockCarConfigForm ref="lockCarForm"></LockCarConfigForm>

    <a-divider orientation="left">还车配置</a-divider>
    <ReturnCarConfigForm ref="returnCarForm"></ReturnCarConfigForm>

    <a-divider orientation="left">客服配置</a-divider>
    <CustomerServiceConfigForm ref="customerServiceForm"></CustomerServiceConfigForm>
  </a-spin>
</template>
  

<style scoped>
.a-tabs-card {
  position: relative;
}
</style>
<script setup>
import { ref, defineProps } from 'vue'
import { callOperate } from '@/apis/call.js'
import _ from 'lodash'
import SwitchConfigForm from './SwitchConfigForm.vue';
import UseCarConfigForm from './UseCarConfigForm.vue';
import LockCarConfigForm from './LockCarConfigForm.vue';
import ReturnCarConfigForm from './ReturnCarConfigForm.vue';
import CustomerServiceConfigForm from './CustomerServiceConfigForm.vue';
import OperateConfigForm from './OperateConfigForm.vue';


const props = defineProps({
  onCallBack: {
    type: Function,
    required: true
  },
});

const switchForm = ref(null);
const operateForm = ref(null);
const useCarForm = ref(null);
const lockCarForm = ref(null);
const returnCarForm = ref(null);
const customerServiceForm = ref(null);

const spinning = ref(false);
const tipContent = ref("加载中...");

const openForm = (params = {}) => {
  if (params['regionId']) {
    spinning.value = true;
    callOperate("/ebikesysrcostset/getRegionFeeConfigById?regionId="
      + params['regionId'], {}, "get").then(res => {
        spinning.value = false;

      })
  }
};

const formSave = (onCallBack) => {
  const forms = [switchForm, operateForm, useCarForm, lockCarForm, returnCarForm, customerServiceForm];
  let params = {};
  // 创建一个数组，保存所有表单的校验 Promise
  const validationPromises = forms.map(form => {
    if (form.value) {
      return form.value.validateForm().then(res => {
        const tableName = res['tableName'];
        if (tableName == "ebikeSysLinktelDto") {
          params['ebikeSysRoperatesetDto'] = { ...params['ebikeSysRoperatesetDto'], onlineService: res['onlineService'] };
          params[tableName] = res['customerServiceConfig'];
        } else {
          delete res['tableName'];
          params[tableName] = res;
        }
      }).catch((e) => {
        return Promise.reject(e);
      });
    }
  });
  // 使用 Promise.all 等待所有的表单校验完成
  Promise.all(validationPromises).then(() => {
    tipContent.value = "保存中..."
    spinning.value = true;
    callOperate("/ebikeSysRoperateset/save", params).then(res => {
      spinning.value = false;
      if (onCallBack) {
        res.data = params;
        onCallBack(res);
      }
    })
  }).catch(error => {
    console.log(error);
  });
};

defineExpose({ openForm, formSave });
</script>