修改

src/views/innovation/detail.vue

@@ -82,12 +82,17 @@
         </div>
       </el-col>
     </el-row>
+    <el-dialog v-model="dialog" title="报名参赛" :destroy-on-close="true" @close="toClose">
+      <data-form></data-form>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { get } from 'lodash-es'
+import { get, cloneDeep } from 'lodash-es'
 const $checkRes = inject('$checkRes')
+// 组件
+import dataForm from './parts/index.vue'
 // 接口
 import { DictDataStore } from '@/store/api/system/dictData'
 import { MatchStore } from '@/store/api/platform/match'
@@ -120,6 +125,20 @@ const menuList = ref([
   { title: '赛事联络', label: 'rules11' },
   { title: '赛事交流', label: 'rules12' }
 ])
+// 弹框
+const form = ref({})
+const rules = reactive({
+  name: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
+  field: [{ required: true, message: '请选择行业领域', trigger: 'change' }],
+  urgent: [{ required: true, message: '请选择需求紧急度', trigger: 'change' }],
+  method: [{ required: true, message: '请选择合作方式', trigger: 'change' }],
+  money: [{ required: true, message: '请输入价格', trigger: 'blur' }],
+  area: [{ required: true, message: '请选择需求地区', trigger: 'change' }],
+  time: [{ required: true, message: '请选择起始时间', trigger: 'change' }],
+  is_use: [{ required: true, message: '请选择是否使用', trigger: 'change' }],
+  brief: [{ required: true, message: '请输入简介', trigger: 'blur' }]
+})
+const dialog = ref(false)
 // 请求
 onMounted(async () => {
   loading.value = true
@@ -170,8 +189,28 @@ const selectOpen = (key, keyPath) => {
 }
 // 报名参赛
 const toSign = () => {
-  console.log('报名参赛')
+  dialog.value = true
+}
+const toClose = () => {
+  dialog.value = false
+  form.value = {}
+}
+// 报名
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      const data = cloneDeep(form.value)
+      console.log(data)
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
 }
+// provide
+provide('form', form)
+provide('rules', rules)
+provide('submitForm', submitForm)
 </script>
 <style scoped lang="scss">
 .main {

src/views/innovation/parts/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-form
+            label-position="top"
+            ref="ruleFormRef"
+            :model="form"
+            :rules="rules"
+            label-width="80px"
+            class="form"
+          >
+            <el-form-item label="姓名" prop="name">
+              <el-input v-model="form.name" placeholder="请输入姓名"> </el-input>
+            </el-form-item>
+            <el-form-item label="简介" prop="brief">
+              <el-input
+                v-model="form.brief"
+                :autosize="{ minRows: 2, maxRows: 8 }"
+                type="textarea"
+                placeholder="请输入简介"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-col :span="24" class="button">
+                <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
+              </el-col>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+const form = inject('form')
+const rules = inject('rules')
+const submitForm = inject('submitForm')
+</script>
+<style scoped lang="scss">
+.main {
+  .one {
+    .button {
+      text-align: center;
+    }
+  }
+}
+</style>