fe-manage/src/views/pages/rule.vue

<template>
  <Group style="height: 100%;">
    <el-tabs v-model="activeName"  @tab-click="handleClick">
      <el-tab-pane :label="$t('primaryField')" name="primaryField">
        <Ruleform @getPageData="getPageData" :formData="pageData[0]" />
      </el-tab-pane>
      <el-tab-pane :label="$t('intermediateField')" name="intermediateField">
        <Ruleform @getPageData="getPageData" :formData="pageData[1]" />
      </el-tab-pane>
      <el-tab-pane :label="$t('higherOrderField')" name="higherOrderField">
        <Ruleform @getPageData="getPageData" :formData="pageData[2]" />
      </el-tab-pane>
      <el-tab-pane :label="$t('customRoom')" name="customRoom">
        <el-form :model="formData" ref="formRef" label-suffix=":">
          <el-form-item>
            <span style="width: 360px;">{{$t('customizeRoom')}}：</span>
          </el-form-item>
          <el-form-item prop="pokerRoomTicket" :rules="[
          { required: true, message: $t('fieldRequired'), trigger: 'blur' },
          { type:'number',min:0.1,message: $t('greaterThanZero'), trigger: 'blur' }
        ]">
            <div class="row">
              <span style="color: red;">*</span><span style="width: 460px;">{{$t('customizeRoomRates')}}：</span>
              <el-input v-model.number="formData.pokerRoomTicket" :placeholder="$t('pleaseEnter')" />
            </div>
          </el-form-item>
          <el-form-item>
            <span style="width: 360px;">{{$t('configuration')}}：</span>
          </el-form-item>
          <el-form-item prop="pokerRoomDuration" :rules="[
          { required: true, message: $t('lengthRequired'), trigger: 'blur' },
          { type:'number',min:0.1,message: $t('greaterThanZero'), trigger: 'blur' }
        ]">
            <div class="row">
              <span style="color: red;">*</span><span style="width: 580px;">{{$t('roomLength')}}：</span>
              <el-input v-model.number="formData.pokerRoomDuration" :placeholder="$t('pleaseEnter')" />
            </div>
          </el-form-item>
        </el-form>
        <div style="display: flex;justify-content: flex-end;">
          <el-button  type="primary" @click="handleSubmit">{{$t('save')}}</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </Group>
</template>

<script setup name="user">
import { ref, reactive, onMounted, computed} from 'vue';
import Group from '@/components/group.vue';
import Ruleform from '@/components/ruleform.vue';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';
import i18n from '@/utils/i18n'
const pageData = ref([{}, {}, {}]);
const formRef = ref(null)
const activeName = ref('primaryField')
const formData = reactive({
  roomNumber: ''
});

const getPageData = async () => {
  try {
    const res = await request('get', '/admin/poker/getPokerGameInfoList');
    if (res.code === 200) {
      pageData.value = res.data;
    } 
  } catch (error) {
    console.error('error:', error);
  }
};
const handleSubmit = async() => {
  formRef.value.validate(async (valid)=>{
    if(valid){
      const res = await request('post', 'admin/updateSystemConfigure', {...formData,roomNumber:'customRoom'})
      if (res.code === 200) {
        ElMessage.success(i18n.global.t('successfulOperation'))
        getPageData()
      }
    }
  })
}
const handleClick = async(tab) => {
  if (tab.paneName === 'customRoom') {
    const res = await request('get', 'admin/getSystemConfigure')
    if (res.code === 200) {
      Object.assign(formData, res.data)
    }
  }
  
}
onMounted(() => {
  getPageData();
});
</script>

<style lang="scss" scoped>
.deafault {
  display: flex;
  align-items: center;
}
.row {
  display: flex;
  margin-right: 16px;
}
::v-deep .el-input__wrapper{
  background-color: #fffdef !important;
}
</style>