cxyy-web2/src/views/center/parts/extOne.vue

<template>
  <div class="index">
    <div v-if="type == '1'">
      <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto" class="form" label-position="left">
        <el-form-item label="初审开始时间" prop="start_time">
          <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="form.start_time" type="date" placeholder="请选择初审开始时间" style="width: 100%" />
        </el-form-item>
        <el-col :span="24" class="button">
          <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
        </el-col>
      </el-form>
    </div>
    <div v-if="type == '2'">决赛准备</div>
    <div v-if="type == '3'">决赛开始</div>
    <div v-if="type == '4'">决赛结束</div>
  </div>
</template>
<script setup>
import { cloneDeep } from 'lodash-es'
const $checkRes = inject('$checkRes')
const id = ref('')
const props = defineProps({
  matchForm: { type: Object },
  type: { type: String }
})
const match = computed({
  get() {
    return props.matchForm
  }
})
const emits = defineEmits(['toClose'])
// 接口
import { MatchExtStore } from '@/store/api/platform/matchExt'
const store = MatchExtStore()

const form = ref({})
// 表单
const ruleFormRef = ref()
const rules = reactive({
  start_time: [{ required: true, message: '请选择初审开始时间', trigger: 'blur' }]
})
// 保存
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const data = cloneDeep(form.value)
      data.id = id.value
      const res = await store.firstStep(data)
      if ($checkRes(res, true)) {
        emits('toClose')
      } else ElMessage.error(res.message)
    } else {
      console.log('error submit!', fields)
    }
  })
}
watch(
  match,
  async (item) => {
    id.value = item.id
  },
  {
    immediate: true //初始化立即执行
  }
)
</script>
<style scoped lang="scss">
.index {
  .button {
    text-align: center;
  }
}
</style>