proginn-frontend/pages/frontend/requirements/components/Form_yunduan.vue

<template>
<div class="form-xuqiu">
    <!-- <div class="form-title">当前类型：项目整包</div> -->

    <el-form ref="modalForm" :model="modalFormData" :rules="rules" size="medium" label-width="100px">

        <div class="form-label">1.您期望雇佣开发者的技术栈</div>
        <el-form-item label-width="0" prop="match_directions">
            <el-cascader :options="directionData" clearable @change="directionChange"></el-cascader>
        </el-form-item>

        <div class="form-label">2.开发者需要具备哪些核心技能标签？ (1-5个)</div>

        <el-form-item label-width="0" prop="skills">
            <el-select  v-model="modalFormData.skills" @change="skillChange" multiple filterable remote :reserve-keyword="false" placeholder="输入后根据提示选择关键词" :remote-method="remoteMethod" :loading="loading" :style="{width: '50%'}">
                <el-option v-for="item in skills" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>

        <div class="form-label">3.您需要全职开发者吗？</div>
        <el-form-item label-width="0" prop="full">
            <el-radio-group v-model="modalFormData.full" size="medium">
                <el-radio v-for="(item, index) in fullOptions" :key="index" :label="item.value" :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
            <div v-if="modalFormData.full == 2" class="form-tips">会导致可选开发者变少</div>
        </el-form-item>

        <div class="form-label">4.您需要开发者驻场开发吗？</div>
        <el-form-item label-width="0" prop="is_incompany">
            <el-radio-group v-model="modalFormData.is_incompany" size="medium">
                <el-radio v-for="(item, index) in fullOptions" :key="index" :label="item.value" :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
            <div v-if="modalFormData.is_incompany == 1" class="form-tips">会导致可选开发者变少</div>
            <template v-if="modalFormData.is_incompany == 1">
                <div class="">我需要开发者来自以下地区</div>
                <el-cascader :options="cityData" clearable @change="cityChange"></el-cascader>
            </template>

        </el-form-item>

        <!-- <el-form-item label-width="0" prop="city">

        </el-form-item> -->

        <div class="form-label">5.简短描述您的需求</div>
        <el-form-item label-width="0" prop="description">
            <el-input v-model="modalFormData.description" type="textarea" :placeholder="tips" show-word-limit :autosize="{ minRows: 10, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
        </el-form-item>

        <el-form-item label-width="0" prop="field103">
            <div class="form-label">
                <span style="margin-right:10px">我有附件要上传</span>
                <el-switch v-model="modalFormData.field103"></el-switch>
            </div>
        </el-form-item>
        <el-form-item label-width="0" prop="field104" v-show="modalFormData.field103">
            <el-upload class="upload-demo" :file-list="field104fileList" drag :show-file-list="true" action="/file/prepareUpload" :multiple="false" :http-request="uploadFile" :on-remove="remove">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                    将文件拖到此处，或<em>点击上传</em>传需求文档
                </div>
            </el-upload>
        </el-form-item>

        <div class="form-label">6.您每月的预算大概多少？</div>
        <el-form-item label-width="0" prop="ys_money_type">
            <el-select v-model="modalFormData.ys_money_type" placeholder="请选择计划合作的预算" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in ys_money_typeOptions" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label-width="0" prop="is_need_manager">
            <div class="form-label">
                <span style="margin-right:10px">我需要项目经理</span>
                <el-switch v-model="modalFormData.is_need_manager"></el-switch>

                <el-popover placement="right" width="250" trigger="hover">
                    <div class="form-tooltip">
                        合理的项目分析和规划将提高34.7%的项目成功率<br /><br />
                        预计将支出5-10%项目费用，具体费用将由客户经理和您沟通
                    </div>

                    <i class="el-icon-info form-info-icon" slot="reference"></i>
                </el-popover>

            </div>
        </el-form-item>

        <el-form-item size="large">
            <div class="form-submit-area">
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </el-form-item>
    </el-form>

    <Loading ref='loading'></Loading>
</div>
</template>

<script>
import uploadFile from "@/mixins/uploadFile";
import Loading from './Loading.vue'

function directionDataParse(arr) {

    arr = arr.sort(function (a, b) {
        return Number(a.display_order) - Number(b.display_order) > 0
    })
    let result = [];
    let len = arr.length
    for (let i = 0; i < len; i++) {
        let {
            children,
            ...other
        } = arr[i]
        let label = arr[i].occupation_name || arr[i].direction_name
        let value = arr[i].occupation_id || arr[i].direction_id
        let item
        if (children) {
            children = directionDataParse(children)
            item = {
                ...other,
                label,
                value,
                children
            }
        } else {
            item = {
                ...other,
                label,
                value
            }
        }
        result.push(item)
    }
    return result
}

function cityDataParse(arr) {
    let result = [];
    let len = arr.length
    for (let i = 0; i < len; i++) {
        let {
            child,
            ...other
        } = arr[i]
        let label = arr[i].name
        let value = arr[i].id || arr[i].id
        let item
        if (child && child.length > 0) {
            let children = cityDataParse(child)
            item = {
                ...other,
                label,
                value,
                children
            }
        } else {
            item = {
                ...other,
                label,
                value
            }
        }
        result.push(item)
    }
    return result
}
export default {
    components: {
        Loading
    },
    props: [],
    data() {
        return {
            modalFormData: {
                match_directions: "",
                direction_id: "",
                skills: [],

                description: "",
                field103: false,
                field104: null,
                is_need_manager: false,
                budget: "",
                full: 0,
                is_incompany: 0,

                city: "",
                province_id: "",
                city_id: "",
                ys_money_type: "",

            },
            rules: {
                description: [{
                    required: true,
                    message: "请输入您的需求",
                    trigger: "blur"
                }],
                ys_money_type: [{
                    required: true,
                    message: "请选择您的预算",
                    trigger: "blur"
                }],
                match_directions: [{
                    required: true,
                    message: "请选择开发者的技术栈",
                    trigger: "blur"
                }],
                skills: [{
                    required: false,
                    message: "请选择核心技能标签",
                    trigger: "blur"
                }],

            },
            field104Action: "",
            field104fileList: [],

            fullOptions: [{
                "label": "不需要",
                "value": 0
            }, {
                "label": "需要",
                "value": 1
            }],

            ys_money_typeOptions: [{
                "label": "1-6K",
                "value": 1
            }, {
                "label": "6-12K",
                "value": 2
            }, {
                "label": "12-18K",
                "value": 3
            }, {
                "label": "18K以上",
                "value": 4
            }],

            directionData: [],
            cityData: [],
            skills: [],
            loading: false,
            tips: `可参考以下内容：\n1、您的产品/公司/业务的简短介绍\n2、需求的核心工作内容\n3、对开发者的其他需求`,
        };
    },
    computed: {},
    watch: {
        modalFormData: {
            deep: true,
            handler: function (val) {
                if (!val.field103) {
                    this.field104fileList = []
                }
                this.$emit("formChange", 2, "process");
            }
        }
    },
    created() {},
    mounted() {
        this.$emit("formChange", 2, "process");
        this.fetchDirectionData()
        this.fetchCityData()
    },
    mixins: [uploadFile],
    methods: {
        submitForm() {
            this.$refs["modalForm"].validate(valid => {
                if (!valid) return;
                // TODO 提交表单
                this.requestSubmit();
            });
        },
        resetForm() {
            this.$refs["modalForm"].resetFields();
        },
        uploadFile(file, type) {
            this.uploading = true;
            this.apiPrepareUpload(
                file.file,
                res => {
                    if (res.data && res.data.status === 1) {
                        let uploadId = res.data.data._upload_id;
                        let url = res.data.data.url;

                        this.field104fileList.push({
                            data: {
                                ...res.data.data
                            },
                            name: res.data.data.name,
                            url: url,
                            uploadId: uploadId
                        });
                        this.$message.success("上传成功");
                    } else {
                        this.$message.error("上传失败");
                    }
                },
                4
            );
            return false;
        },
        remove(file, fileList) {
            this.field104fileList = [...fileList];
        },

        fetchDirectionData() {
            this.$axios
                .$post(
                    "/api/direction/get_all_data"
                )
                .then(res => {
                    // console.log(res)
                    let aa = directionDataParse(res.data);
                    this.directionData = [...aa]
                })
        },
        directionChange(selectedOption) {
            this.modalFormData.match_directions = selectedOption[0]
            this.modalFormData.direction_id = selectedOption[1]
        },

        fetchCityData() {
            this.$axios
                .$post(
                    "/wapi/pub/getAllCity"
                )
                .then(res => {
                    // console.log(res)
                    let aa = cityDataParse(res.data.list);
                    this.cityData = [...aa]
                })
        },
        cityChange(selectedOption) {
            this.modalFormData.province_id = selectedOption[0]
            this.modalFormData.city_id = selectedOption[1]
        },

        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;

                this.$axios.$post("/wapi/work/getSkill", {
                    keyword: query
                }).then(res => {
                    this.loading = false;
                    let list = res.data;
                    this.skills = list.map((item) => {
                        return {
                            ...item,
                            value: item.id,
                            label: item.name,
                        }
                    })
                })
            } else {
                this.skills = [];
            }
        },
        skillChange(a, b) {
            console.log(111, a, b)
        },
        async requestSubmit() {
            let form = this.modalFormData
            let params = {
                match_directions: form.match_directions,
                direction_id: form.direction_id,
                match_skills: form.skills.join(','),
                description: form.description,
                ys_money_type: form.ys_money_type,
                province_id: form.province_id,
                city_id: form.city_id,
                is_appoint_freelance:form.full,
                publish_present_hire:form.is_incompany,
                is_need_manager: form.is_need_manager ? 1 : 0

            };
            if (this.field104fileList.length > 0) {
                let arr = this.field104fileList.map(item => {
                    return {
                        ...item.data
                    };
                });
                params["job_files"] = JSON.stringify(arr);
            }

            this.$axios
                .$post(
                    "/api/job/publish3", {
                        ...params
                    }
                )
                .then(async (res) => {

                    if (Number(res.status) === 1) {
                        this.$message.success("提交成功");
                        let id = res.data.id
                        await this.$refs['loading'].start()
                        this.$emit('formSubmit', 2, id)
                    } else {
                        this.$message.error("提交失败");
                    }
                })
        }

    }
};
</script>

<style lang="scss">
.form-xuqiu {
    margin: 80px 80px 0;
}

.form-title {
    font-size: 22px;
    font-weight: 500;
    color: #0b121a;
    line-height: 30px;
    margin-bottom: 40px;
}

.form-label {
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: #19222e;
}

.form-submit-area {
    text-align: center;
}

.form-info-icon {
    color: #409EFF;
    font-size: 18px;
    cursor: pointer;
    position: relative;
    top: 5px;
}

.form-tooltip {
    // width: 200px;
    line-height: 2em;
}

.form-tips {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #E6A23C;
    line-height: 17px;
    display: inline-block;
}
</style>