ali_ai_learn_web/src/pages/workflowTrade/workflowTradeAdd.vue

<template>
  <div class="workflowTradeDetail container-height">
    <Breadcrumb />
    <div class="flex-column-center">
      <div class="font_size30 bold">发布工作流需求</div>
      <div class="gray font_size20">填写以下信息，让更多专业人士了解您的需求</div>
    </div>
    <div class="flex-between mt10">
      <div class="flex_1 mr20">
        <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-position="top" class="page-add">
          <!-- 基本信息 -->
          <div class="padding16 bg_color_fff border_radius_10 box_shadow_card">
            <div class="gap10">
              <div class="line_vertical"></div>
              <div class="font_size20 bold">基本信息</div>
            </div>
            <div class="mt10">
              <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.title" placeholder="请输入工作流标题"  maxlength="50"/>
              </el-form-item>
              <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">选择最贴合的工作流分类{{ruleForm.categoryId3}}</span>
                </div>
                <!-- 树形选择 -->
                <el-cascader 
                  v-model="categoryIdList"
                  :options="categoryListTree"
                  placeholder="请选择工作流类型"
                  style="width:100%"
                  :props="{
                    label: 'categoryName',
                    value: 'categoryId',
                    children: 'children',
                  }"
                />
              </el-form-item>
            </div>
          </div>
          <!-- 详细内容 -->
          <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
            <div class="gap10">
              <div class="line_vertical"></div>
              <div class="font_size20 bold">详细内容</div>
            </div>
            <div class="mt10">
              <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="requirements">
                <el-input v-model="ruleForm.requirements" 
                rows="7"
                placeholder="详细描述功能要求、技术要求等（50-2000字）
建议分点说明：
1.功能需求
2.技术要求
3.经验要求
4.其他说明
                "  maxlength="2000" type="textarea" show-word-limit/>
              </el-form-item>
            </div>
          </div>
          <!-- 项目信息 -->
          <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
            <div class="gap10">
              <div class="line_vertical"></div>
              <div class="font_size20 bold">项目信息</div>
            </div>
            <div class="mt10">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="" prop="budgetMin">
                    <div>
                      <span class="font_size16 bold">预算下限(元)</span>
                      <span class="font_size14 gray999 ml20">选填，有助于吸引合适的服务者</span>
                    </div>
                    <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="budgetMax">
                    <div>
                      <span class="font_size16 bold">预算上限(元)</span>
                      <span class="font_size14 gray999 ml20">选填，有助于吸引合适的服务者</span>
                    </div>
                    <el-input v-model="ruleForm.budgetMax" placeholder="最高预算"  maxlength="11" type="number" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="报名截止时间" prop="deadline">
                <!-- 只能选择之后的时间 -->
                <el-date-picker
                  v-model="ruleForm.deadline"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="选择报名截止时间"
                  :disabled-date="time => time.getTime() < Date.now() - 8.64e7"
                />
              </el-form-item>
            </div>
          </div>
          <!-- 联系方式 -->
          <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
            <div class="gap10">
              <div class="line_vertical"></div>
              <div class="font_size20 bold">联系方式</div>
            </div>  
            <div class="mt10">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="请输入手机号"  maxlength="11"/>
              </el-form-item>
              <el-form-item label="微信">
                <el-input v-model="ruleForm.wechat" placeholder="请输入微信号"  maxlength="50"/>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" placeholder="请输入邮箱"  maxlength="50"/>
              </el-form-item>
            </div>
          </div>
          <div class="mt20">
            <el-button type="primary" class="font_size16 gradient" @click="submitForm" size="large">
              <el-icon><Promotion /></el-icon>
              <span class="ml10">发布需求</span>
            </el-button>
            <el-button class="font_size16" @click="goBack"  size="large">
              <el-icon><Close /></el-icon>
              <span class="ml10">取消</span>
            </el-button>
          </div>
        </el-form>
      </div>
      <!-- 发布提示 -->
      <div class="detail_right">
        <div class="detail_right_content detail_right">
          <div class="padding16 bg_color_fff border_radius_16 box_shadow_card">
            <div class="gap10">
              <div class="line_vertical"></div>
              <div class="font_size20 bold">发布提示</div>
            </div>
            <!-- 无序列表 -->
            <ul class="font_size16">
              <li>标题要简洁明了，突出核心需求</li>
              <li>详细描述需求背景和具体要求</li>
              <li>明确交付标准和验收方式</li>
              <li>合理设置预算范围</li>
              <li>添加相关标签提高匹配度</li>
            </ul>
          </div>
          <div class="padding16 bg_color_fff border_radius_16 mt20 box_shadow_card">
            <div class="gap10">
              <div class="line_vertical"></div>
              <div class="font_size20 bold">发布规则</div>
            </div>
            <!-- 有序列表 -->
            <ol class="font_size16">
              <li>这里是发布规则文字说明</li>
              <li>这里是发布规则文字说明</li>
              <li>这里是发布规则文字说明</li>
              <li>这里是发布规则文字说明</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</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 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, onMounted, watchEffect } from 'vue'
import { useAppStore } from '@/pinia/appStore'
const appStore = useAppStore()

//获取参数
const query = route.query;
// 分类列表树
const categoryListTree = ref([]);
// 选择的分类id列表
const categoryIdList = ref([])

// 表单实例
const ruleFormRef = ref(null)
const ruleForm = reactive({
  title: '',
  categoryId1: '',
  categoryId2: '',
  categoryId3: '',
  background: '',
  requirements: '',
  budgetMin: '',
  budgetMax: '',
  deadline: '',
  phone: '',
  wechat: '',
  email: '',
})
watchEffect(() => {
  // 将选择的分类id列表赋值给表单的categoryId1、categoryId2、categoryId3
  ruleForm.categoryId1 = categoryIdList.value[0] || ''
  ruleForm.categoryId2 = categoryIdList.value[1] || ''
  ruleForm.categoryId3 = categoryIdList.value[2] || ''
})
// 校验规则
const rules = reactive({
  title: [
    { required: true, message: '请输入需求标题', trigger: 'blur' },
  ],
  categoryId3: [
    { required: true, message: '请选择工作流类型', trigger: 'blur' },
  ],
  background: [
    { required: true, message: '请输入需求背景', trigger: 'blur' },
  ],
  requirements: [
    { required: true, message: '请输入具体要求', trigger: 'blur' },
  ],
  budgetMin: [
    // { required: true, message: '请输入预算下限', trigger: 'blur' },
    { validator: (rule, value, callback) => /^\d+(\.\d{1,2})?$/.test(value), message: '请输入正确的预算下限（最多两位小数）', trigger: 'blur' },
  ],
  budgetMax: [
    // { required: true, message: '请输入预算上限', trigger: 'blur' },
    { validator: (rule, value, callback) => /^\d+(\.\d{1,2})?$/.test(value), 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,name) => {
    console.log(valid, fields,name)
    if (!valid) {
      //报错第一个key
      let firstKey = Object.keys(fields)[0]
      DGTMessage.warning(fields[firstKey][0].message)
      return
    }
    // 新增需求工作流
    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>

<style scoped lang="scss">
  .workflowTradeDetail{
    
  }

</style>