bwj_web/Desktop/buwanjia/src/components/HomePage/Supply/PulishDemand.vue

<template>
    <div class="pulishDemand">
        <AccountCenterTop/>
        <div class="pulishDemandMain">
            <divTitle h_title="发布供需"/>
            <el-form :model="demandData"
            :rules="rules"
            ref="demandFormRefs"
            hide-required-asterisk
             label-width="180px" 
             label-position="right">
                <el-form-item label="需求分类" prop="ftype" >
                    <el-select v-model="demandData.ftype" placeholder="请选择" @focus="openClass">
                        <el-option
                        v-for="item in supplyClass"
                        :key="item.ttypedetailid"
                        :label="item.ftype"
                        :value="item.ftype">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="需求标题" prop="ftitle">
                    <el-input v-model="demandData.ftitle" placeholder="请填写消息标题"></el-input>
                </el-form-item>
                <el-form-item label="需求内容" prop="fcontent">
                    <el-input type="textarea" v-model="demandData.fcontent" placeholder="请填写需求内容"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                </el-form-item>
                <el-form-item label="下架日期">
                    <el-date-picker
                    type="date"
                    v-model="demandData.fenddate"
                    placeholder="请选择下架日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    class="input-class"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="operate">
                <el-button class="operate_reset " @click="resetMsg">重置</el-button>
                <el-button class="operate_update themeButton" @click="updateMsg">保存</el-button>
            </div>
        </div>

        <SystemLoginCopyBottom bgc_blue="background: #4DC2D4"/>
    </div>
</template>

<script type='text/javascript'>
    import AccountCenterTop from "../../../commonCmp/AccountCenter/AccountCenterTop.vue"
    import SystemLoginCopyBottom from "../../../commonCmp/WesiteInherentInfo/SystemLoginCopyBottom.vue"
    import divTitle from "../../../commonCmp/AccountCenter/divTitle.vue"
    export default {
        name: "PulishDemand",
        components: {
            AccountCenterTop,
            SystemLoginCopyBottom,
            divTitle
        },
        data() {
            return {
                demandData: {
                    ftype: "",
                    ftitle: "",
                    fcontent: "",
                    fenddata: "",
                    fissupply: 0
                },

                rules: {
                    ftype: [{ required: true, message: "分类不能为空", trigger: "blur"}],
                    ftitle: [{ required: true, message: "标题不能为空", trigger: "blur"}],
                    fcontent: [{required: true, message: "内容不能为空", trigger: "blur"}]
                },
                supplyClass: [],
            }
        },
        methods: {
            resetMsg() {
                this.demandData = {
                    ftype: "",
                    ftitle: "",
                    fcontent: "",
                    fenddata: "",
                    fissupply: 0
                }
            },
            updateMsg() {
                // 表单验证
                this.$refs.demandFormRefs.validate( async valid => {
                    if (!valid) return;
                    const res = await this.$http.post("", this.getFullItfUpdateSupply())
                    if (res.status >= 300 && res.status < 200) return;
                    const res1 = await this.$http.post("", this.getFullItfPulishSupply(res.data.data[0].tsupplyanddemandid));
                    if (res1.status >= 300 && res1.status < 200) return;
                    this.$router.back();
                })
            },
            // 提交修改信息
            async openClass() {
                const res = await this.$http.post("", this.getFullItfSupplyClass())
                if (res.status >= 300 && res.status < 200) return;
                this.supplyClass = res.data.data;
            },

            // 发送获取分类请求体
            getFullItfSupplyClass() {
                this.$store.commit("getTokenInterfaceBaseType", {
                    classname: 'enterprise.system.supplyanddemand',
                    method: 'query_typeselectList'
                })

                const interfaceType = this.$store.state.interfaceData;
                interfaceType.content = {};

                return interfaceType;
            },

            // 新增修改供需信息
            getFullItfUpdateSupply() {
                this.$store.commit("getTokenInterfaceBaseType", {
                    classname: 'customer.supplyanddemand.supplyanddemand',
                    method: 'insertormodify'
                })

                const interfaceType = this.$store.state.interfaceData;
                interfaceType.content = this.demandData;

                return interfaceType;
            },

            // 发布供需信息请求体
            getFullItfPulishSupply(tsupplyanddemandid) {
                this.$store.commit("getTokenInterfaceBaseType", {
                    classname: 'customer.supplyanddemand.supplyanddemand',
                    method: 'updatesupplyanddemandstatus'
                })

                const interfaceType = this.$store.state.interfaceData;
                interfaceType.content = {
                    tsupplyanddemandid,
                    fstatus: "发布"
                }

                return interfaceType;
            }
        }
    }
</script>

<style lang='scss' scoped>
        /deep/ .el-select-dropdown {
        position: absolute;
        top: 28rem;
        left: 36.1rem;
    }
    .pulishDemand {
        position: relative;
        .el-select {
            /deep/ .el-input__inner {
                font-size: 1.8rem;
            }
        }
        // label样式
        /deep/ .el-form-item__label {
            position: relative;
            font-size: 1.8rem;
            color: #000000;
            opacity: 50%;
        }

        // 输入框背景
        /deep/ .el-input__inner {
            width: 27.5rem;
            height: 4.5rem;
            margin-left: .9rem;
            background: #F4F4F4;
        }

        // 提示小绿星
        /deep/ .el-form-item__label::after {
            position: absolute;
            content: "*";
            top: -16%;
            color: #4BBECF;

        }
        /*textarea深度改变*/
        /deep/ .el-textarea__inner {
            width: 126.2rem;
            height: 27.2rem;
            font-size: 1.8rem;
            padding-top: 1.4rem;
            background: #F4F4F4;
            margin-left: .9rem;
            resize: none
        }
        // 输入框提示错误位置
        /deep/.el-form-item__error {
            top: 100%;
            left: 1%;
        }


        .pulishDemandMain {
            margin-top: 2.5rem;
            position: relative;
            left: 50%;
            width: 156.8rem;
            height: 100.7rem;
            transform: translate(-50%);
            background-color: #FFF;
            .el-form {
                margin-top: 6rem;
                .el-form-item {
                    margin-bottom: 2.5rem;
                    .el-input {
                        font-size: 1.8rem;
                    }
                }
            }
            .operate {
                position: absolute;
                bottom: 20%;
                left: 50%;
                transform: translate(-50%);
                .operate_reset, .operate_update {
                    width: 23.6rem;
                    height: 5.2rem;
                    font-size: 2.4rem;
                    color: #fff;
                    border-radius: 1rem;
                }
                .operate_reset {
                    color:#4CBECF;
                    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
                    border: 2px solid #4CBECF;
                }
            }
        }
    }
</style>