```

feat(workflowTrade): 添加工作流交易发布表单功能

- 新增工作流类型树形选择组件，替换原有的输入框
- 重构表单字段，将name字段改为对应的业务字段(title、background、
  requirements等)
- 添加预算下限、预算上限、报名截止时间等表单字段
- 添加联系方式相关字段验证(手机号、邮箱格式校验)
- 集成工作流发布API，实现表单提交功能
- 优化表单验证逻辑，添加错误提示功能
- 调整样式以适配日期选择器和下拉选择器的高度
- 在workflowTrade页面添加需求状态筛选边框样式
```

src/api/category.js

@@ -0,0 +1,6 @@
+import request from './request.js'
+
+// 查询分类信息（返回树状结构）categoryId
+export function getCategoryListTree(data = {}) {
+  return request.get('/category/listTree',data)
+}

src/api/workflowTrade.js

@@ -0,0 +1,6 @@
+import request from './request.js'
+
+// 新增需求工作流
+export function questAdd(data = {}) {
+  return request.post('/quest',data)
+}

src/pages/workflowTrade/workflowTrade.vue

@@ -27,7 +27,7 @@
             <div class="font_size14 typeItem active" v-for="item in 5" :key="item">全部</div>
           </div>
         </div>
-        <div class="typeList flex-between">
+        <div class="typeList flex-between typeborder">
           <div class="gray font_size14 typeName">需求状态：</div>
           <div class="flex_1 gap10">
             <div class="font_size14 typeItem active" v-for="item in 5" :key="item">全部</div>

src/pages/workflowTrade/workflowTradeAdd.vue

@@ -15,21 +15,32 @@
               <div class="font_size20 bold">基本信息</div>
             </div>
             <div class="mt10">
-              <el-form-item label="" prop="name">
+              <el-form-item label="" prop="title">
                 <div>
                   <span class="color_required font_size16">*</span>
                   <span class="font_size16 bold">需求标题</span>
                   <span class="font_size14 gray999 ml20">一个好的标题能吸引更多专业人士关注</span>
                 </div>
-                <el-input v-model="ruleForm.name" placeholder="请输入工作流标题"  maxlength="50"/>
+                <el-input v-model="ruleForm.title" placeholder="请输入工作流标题"  maxlength="50"/>
               </el-form-item>
-              <el-form-item label="" prop="name">
+              <el-form-item label="" prop="categoryId3">
                 <div>
                   <span class="color_required font_size16">*</span>
                   <span class="font_size16 bold">工作流类型</span>
                   <span class="font_size14 gray999 ml20">选择最贴合的工作流分类</span>
                 </div>
-                <el-input v-model="ruleForm.name" placeholder="请输入工作流标题"  maxlength="50"/>
+                <!-- 树形选择 -->
+                <el-tree-select 
+                  v-model="ruleForm.categoryId3"
+                  :data="categoryListTree"
+                  :render-after-expand="false"
+                  placeholder="请选择工作流类型"
+                  :props="{
+                    label: 'categoryName',
+                    value: 'categoryId',
+                    children: 'children',
+                  }"
+                />
               </el-form-item>
             </div>
           </div>
@@ -40,11 +51,11 @@
               <div class="font_size20 bold">详细内容</div>
             </div>
             <div class="mt10">
-              <el-form-item label="需求背景" prop="name">
-                <el-input v-model="ruleForm.name" placeholder="说明您的需求来源和目的"  maxlength="500" type="textarea" show-word-limit/>
+              <el-form-item label="需求背景" prop="background">
+                <el-input v-model="ruleForm.background" placeholder="说明您的需求来源和目的"  maxlength="500" type="textarea" show-word-limit/>
               </el-form-item>
-              <el-form-item label="具体要求" prop="name">
-                <el-input v-model="ruleForm.name" 
+              <el-form-item label="具体要求" prop="requirements">
+                <el-input v-model="ruleForm.requirements" 
                 rows="7"
                 placeholder="详细描述功能要求、技术要求等（50-2000字）
 建议分点说明：
@@ -65,30 +76,28 @@
             <div class="mt10">
               <el-row :gutter="20">
                 <el-col :span="12">
-                  <el-form-item label="" prop="name">
+                  <el-form-item label="">
                     <div>
-                      <span class="color_required font_size16">*</span>
                       <span class="font_size16 bold">预算下限(元)</span>
                       <span class="font_size14 gray999 ml20">选填，有助于吸引合适的服务者</span>
                     </div>
-                    <el-input v-model="ruleForm.name" placeholder="最低预算"  maxlength="11" type="number" />
+                    <el-input v-model="ruleForm.budgetMin" placeholder="最低预算"  maxlength="11" type="number" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item label="" prop="name">
+                  <el-form-item label="">
                     <div>
-                      <span class="color_required font_size16">*</span>
                       <span class="font_size16 bold">预算上限(元)</span>
                       <span class="font_size14 gray999 ml20">选填，有助于吸引合适的服务者</span>
                     </div>
-                    <el-input v-model="ruleForm.name" placeholder="最高预算"  maxlength="11" type="number" />
+                    <el-input v-model="ruleForm.budgetMax" placeholder="最高预算"  maxlength="11" type="number" />
                   </el-form-item>
                 </el-col>
               </el-row>
-              <el-form-item label="报名截止时间" prop="name">
+              <el-form-item label="报名截止时间" prop="deadline">
                 <!-- 只能选择之后的时间 -->
                 <el-date-picker
-                  v-model="ruleForm.name"
+                  v-model="ruleForm.deadline"
                   type="date"
                   value-format="YYYY-MM-DD"
                   placeholder="选择报名截止时间"
@@ -104,14 +113,14 @@
               <div class="font_size20 bold">联系方式</div>
             </div>  
             <div class="mt10">
-              <el-form-item label="手机号" prop="name">
-                <el-input v-model="ruleForm.name" placeholder="请输入手机号"  maxlength="11" type="number" />
+              <el-form-item label="手机号" prop="phone">
+                <el-input v-model="ruleForm.phone" placeholder="请输入手机号"  maxlength="11" type="number" />
               </el-form-item>
               <el-form-item label="微信">
-                <el-input v-model="ruleForm.name" placeholder="请输入手机号"  maxlength="50"/>
+                <el-input v-model="ruleForm.wechat" placeholder="请输入微信号"  maxlength="50"/>
               </el-form-item>
-              <el-form-item label="邮箱">
-                <el-input v-model="ruleForm.name" placeholder="请输入手机号"  maxlength="50"/>
+              <el-form-item label="邮箱" prop="email">
+                <el-input v-model="ruleForm.email" placeholder="请输入邮箱"  maxlength="50"/>
               </el-form-item>
             </div>
           </div>
@@ -164,51 +173,112 @@
 </template>
 
 <script setup>
-  import riliIcon from '@/assets/imgs/rili.png'
-  import biaoqianIcon from '@/assets/imgs/biaoqian.png'
-  import yuangong from '@/assets/imgs/yuangong.png'
-  import zaixianbaomingIcon from '@/assets/imgs/zaixianbaoming.png'
-  import dianhuaIcon from '@/assets/imgs/dianhua.png'
-  import weixinIcon from '@/assets/imgs/weixin.png'
-  import youxiangIcon from '@/assets/imgs/youxiang.png'
+import riliIcon from '@/assets/imgs/rili.png'
+import biaoqianIcon from '@/assets/imgs/biaoqian.png'
+import yuangong from '@/assets/imgs/yuangong.png'
+import zaixianbaomingIcon from '@/assets/imgs/zaixianbaoming.png'
+import dianhuaIcon from '@/assets/imgs/dianhua.png'
+import weixinIcon from '@/assets/imgs/weixin.png'
+import youxiangIcon from '@/assets/imgs/youxiang.png'
+import DGTMessage from '@/utils/message'
+
+import { questAdd } from '@/api/workflowTrade.js'
+import { getCategoryListTree } from '@/api/category.js'
 
 
-  import { useRouter, useRoute } from 'vue-router'
-  const router = useRouter()
-  const route = useRoute()
-  console.log(router,route)
-  import { ref, computed, reactive } from 'vue'
-  import { useAppStore } from '@/pinia/appStore'
-  const appStore = useAppStore()
+import { useRouter, useRoute } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+console.log(router,route)
+import { ref, computed, reactive, onMounted } from 'vue'
+import { useAppStore } from '@/pinia/appStore'
+const appStore = useAppStore()
 
-  //获取参数
-  const query = route.query;
-  // 表单实例
+//获取参数
+const query = route.query;
+// 分类列表树
+const categoryListTree = ref([]);
+// 表单实例
 const ruleFormRef = ref(null)
 const ruleForm = reactive({
-  name: '',
+  title: '',
+  categoryId3: '',
+  background: '',
+  requirements: '',
+  budgetMin: '',
+  budgetMax: '',
+  deadline: '',
+  phone: '',
+  wechat: '',
+  email: '',
 })
 // 校验规则
 const rules = reactive({
-  name: [
+  title: [
     { required: true, message: '请输入需求标题', trigger: 'blur' },
   ],
+  categoryId3: [
+    { required: true, message: '请选择工作流类型', trigger: 'change' },
+  ],
+  background: [
+    { required: true, message: '请输入需求背景', trigger: 'blur' },
+  ],
+  requirements: [
+    { required: true, message: '请输入具体要求', trigger: 'blur' },
+  ],
+  budgetMin: [
+    { required: true, message: '请输入预算下限', trigger: 'blur' },
+  ],
+  budgetMax: [
+    { required: true, message: '请输入预算上限', trigger: 'blur' },
+  ],
+  deadline: [
+    { required: true, message: '请选择报名截止时间', trigger: 'change' },
+  ],
+  phone: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { validator: (rule, value, callback) => /^1[3456789]\d{9}$/.test(value), message: '请输入正确的手机号', trigger: 'blur' },
+  ],
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { validator: (rule, value, callback) => /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(value), message: '请输入正确的邮箱', trigger: 'blur' },
+  ],
 });
 
+onMounted(() => {
+  // 查询分类信息（返回树状结构）
+  getCategoryListTreeFn()
+})
+
 // 提交表单
 const submitForm = async () => {
-  await ruleFormRef.value.validate((valid, fields) => {
-    console.log(valid, fields)
+  await ruleFormRef.value.validate((valid, fields,name) => {
+    console.log(valid, fields,name)
     if (!valid) {
-      DGTMessage.warning(fields.name[0].message)
+      //报错第一个key
+      let firstKey = Object.keys(fields)[0]
+      DGTMessage.warning(fields[firstKey][0].message)
       return
     }
-    DGTMessage.success('表单提交成功')
+    // 新增需求工作流
+    questAdd(ruleForm).then(res => {
+      console.log(res)
+      if(res.code === 200){
+        DGTMessage.success('发布成功')
+        goBack();
+      }
+    })
   })
 };
 const goBack = () => {
   router.back()
-}
+};
+const getCategoryListTreeFn = () => {
+  getCategoryListTree().then(res => {
+    console.log(res)
+    categoryListTree.value = res.rows || [];
+  })
+};
 
 </script>
 

src/styles/index.scss

@@ -675,7 +675,7 @@ wx-image{
       line-height: 44px !important;
     }
   }
-	.el-date-editor.el-input{
+	.el-date-editor.el-input, .el-select__wrapper{
 		height: 44px !important;
     line-height: 44px !important;
 		width: 100% !important;