proginn-frontend/pages/frontend/requirements/components/Form_zhengbao.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="pro_name">
          <el-input  maxlength="20" v-model="modalFormData.pro_name" type="text" placeholder="请输入项目名称，1-20字以内"  :style="{ width: '100%' }"></el-input>
        </el-form-item>

        <div class="form-label">2、简短描述您的需求</div>
        <el-form-item label-width="0" prop="pro_descrption">
            <el-input v-model="modalFormData.pro_descrption" 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">3.您的预算大概多少？</div>
        <el-row :gutter="15">

            <el-col :span="6">
                <el-form-item label-width="0" prop="budget">
                    <el-input v-model="modalFormData.budget" placeholder="请输入预算" clearable :style="{width: '100%'}">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <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>
</div>
</template>

<script>
import uploadFile from "@/mixins/uploadFile";
export default {
    components: {},
    props: [],
    data() {
        return {
            modalFormData: {
                pro_descrption: "",
                field103: false,
                field104: null,
                is_need_manager: false,
                budget: ""
            },
            rules: {
                pro_descrption: [{
                    required: true,
                    message: "请输入您的需求",
                    trigger: "blur"
                }]
            },
            field104Action: "",
            field104fileList: [],

            successUploadFileMap: {},

            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");
    },
    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];
            // console.log(111,file, fileList)
        },

        async requestSubmit() {
            let params = {
                is_package: 1,
                // hotsale_id:0,
                pro_name: "",
                // budget:0,
                pro_descrption: "",
                budget: 0,
                projectfiles: []
            };
            if (this.field104fileList.length > 0) {
                let arr = this.field104fileList.map(item => {
                    return {
                        ...item.data
                    };
                });
                params["projectfiles"] = JSON.stringify(arr);
            }
            params["pro_name"] = this.modalFormData.pro_name;
            params["pro_descrption"] = this.modalFormData.pro_descrption;
            params["budget"] = this.modalFormData.budget;
            params["is_need_manager"] = this.modalFormData.is_need_manager == 1 ? 1 : 0;

            let that = this;
            this.$axios
                .$post(
                    "/api/project/publish", {
                        ...params
                    }
                )
                .then(res => {
                    if (Number(res.status) === 1) {
                        this.$message.success("提交成功");
                        this.$emit('formSubmit', 2, res.data)
                    } 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;
}
</style>