xg-vue/src/views/manage/task/lists/components/form.vue

<template>
    <el-drawer :title="titleMap[mode]" :append-to-body="true" v-model="visible" :size="1000" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')" :with-header="false">
        <el-container class="flex-column" v-loading="loading">
            <div class="drawer-detail-main">
                <div class="drawer-detail-header">
                    <div class="drawer-detail-header-body">
                        <div class="drawer-detail-header-left">{{ titleMap[mode] }}</div>
                        <div class="drawer-detail-header-left">
                            <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
                        </div>
                    </div>
                </div>
            </div>
            <el-main>
                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                    <el-form-item label="发布类型" prop="auto">
                        <el-radio-group v-model="formData.auto" @change="checkAuto">
                            <el-radio border :label="1">手动录入</el-radio>
                            <el-radio border :label="2">星川自动采集</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <template v-if="formData.auto==2">
                        <el-form-item label="任务ID" prop="job_id">
                            <el-input v-model="formData.job_id" clearable placeholder="任务ID">
                                <template #append v-if="mode=='add'">
                                    <el-button @click="getJobDetail">获取数据</el-button>
                                </template>
                            </el-input>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                    </template>
                    <template v-if="formData.auto==1 || autoState">
                        <el-form-item label="发布栏目" prop="category">
                            <el-select v-model="formData.category" clearable placeholder="请选择发布栏目" @change="checkCategory" :style="{width: '100%'}">
                                <el-option :value="item.sign" :label="item.name" v-for="(item,index) in categoryData" :key="index"></el-option>
                            </el-select>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                        <el-form-item label="任务标题" prop="title">
                            <el-input v-model="formData.title" clearable placeholder="任务标题"></el-input>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                        <fieldset>
                            <legend><el-tag>产品介绍</el-tag></legend>
                            <el-form-item label="所属行业" prop="category_detail">
                                <el-input v-model="formData.category_detail" clearable placeholder="所属行业"></el-input>
                                <div class="el-form-item-msg">直接输入即可，比如：女鞋</div>
                            </el-form-item>
                            <div class="goods-flex">
                                <div class="">
                                    <el-form-item label="商品图片" prop="product_cover_url">
                                        <sc-upload v-model="formData.product_cover_url"></sc-upload>
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                </div>
                                <div class="goods-right">
                                    <el-form-item label="商品标题" prop="product_name">
                                        <el-input v-model="formData.product_name" clearable placeholder="商品标题"></el-input>
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                    <el-form-item label="商品ID" prop="product_id">
                                        <el-input v-model="formData.product_id" clearable placeholder="商品ID"></el-input>
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                </div>
                            </div>
                            <el-form-item label="产品卖点" prop="product_selling_point">
                                <el-input v-model="formData.product_selling_point" type="textarea" rows="5" clearable placeholder="产品卖点"></el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-form-item label="目标人群" prop="target_audience">
                                <el-input v-model="formData.target_audience" type="textarea" rows="5" clearable placeholder="目标人群"></el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                        </fieldset>
                        <el-row :gutter="15">
                            <el-col :span="8">
                                <el-form-item label="投稿截止时间" prop="expiration_time_end">
                                    <div style="width: 100%;">
                                        <el-date-picker v-model="formData.expiration_time_end" placeholder="投稿截止时间" type="datetime" :style="{width: '100%'}" />
                                    </div>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="要求达人等级" prop="level">
                                    <el-select v-model="formData.level" clearable placeholder="要求达人等级" :style="{width: '100%'}">
                                        <el-option :value="item.id" :label="item.name" v-for="(item,index) in levelData" :key="index">
                                            <span style="float: left">{{ item.name }} ({{ item.start_format }} ~ {{ item.end_format }}元)</span>
                                            <span style="float: right;color: var(--el-text-color-secondary);font-size: 12px;">以上</span>
                                        </el-option>
                                    </el-select>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="平台要求等级" prop="sys_level">
                                    <el-select v-model="formData.sys_level" clearable placeholder="平台要求等级" :style="{width: '100%'}">
                                        <el-option :value="item.code" :label="item.name" v-for="(item,index) in dicData" :key="index">
                                            <span style="float: left">{{ item.name }}</span>
                                            <span style="float: right;color: var(--el-text-color-secondary);font-size: 12px;">以上</span>
                                        </el-option>
                                    </el-select>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="15">
                            <el-col :span="12">
                                <el-form-item label="招募人数" prop="need_number">
                                    <el-input v-model="formData.need_number" clearable placeholder="招募人数">
                                        <template #append>人</template>
                                    </el-input>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="预期消耗目标" prop="total_budget">
                                    <el-input v-model="formData.total_budget" clearable placeholder="预期消耗目标"></el-input>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="任务要求" prop="content" class="label-item">
                            <sc-editor v-model="formData.content" placeholder="请输入" :height="600" style="width: 100%;"></sc-editor>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                    </template>
                </el-form>
            </el-main>
            <el-footer style="text-align: right;">
                <el-button @click="visible=false" >取 消</el-button>
                <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
</template>

<script>
import { defineAsyncComponent } from 'vue';
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
export default {
    components: {
        scEditor
    },
    data() {
        return {
            categoryData:[],
            loading: false,
            mode:"add",
            visible: false,
            isSaveing: false,
            autoState:false,
            titleMap:{
                add:"发布新任务",
                edit:"编辑新任务"
            },
            levelData:[],
            dicData:[],
            rules:{
                level:[
                    {required: true, message: '请选择'}
                ],
                sys_level:[
                    {required: true, message: '请选择'}
                ],
                auto:[
                    {required: true, message: '请选择'}
                ],
                expiration_time_end:[
                    {required: true, message: '请选择'}
                ],
                need_number:[
                    {required: true, message: '请输入'}
                ],
                total_budget:[
                    {required: true, message: '请输入'}
                ],
                job_id:[
                    {required: true, message: '请输入'}
                ],
                title: [
                    {required: true, message: '请输入'}
                ],
                category: [
                    {required: true, message: '请选择'}
                ],
                content: [
                    {required: true, message: '请输入'}
                ],
            },
            formData:{}
        }
    },
    methods: {
        checkCategory(data){
            
        },
        checkAuto(data){
            if (data == 2) {
                this.autoState = false;
            }
        },
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            this.getCategory();
            if (mode == 'add') {
                this.formData = {
                    auto:2,
                    category:"douyin"
                }
            }
            return this
        },
        async getJobDetail(){
            if (!this.formData.job_id) {
                return this.$message.error("请输入任务ID")
            }
            // var loading = this.$loading();
            this.loading = true;
            var resp = await this.$API.task.job.get(this.formData);
            this.loading = false;
            // loading.close()
            this.autoState = true;
            if (resp.code == 0) {
                this.$message.error(resp.msg)
                return ;
            }
            this.formData = resp.data;
        },
        //表单注入数据
        setData(data){
            this.formData = JSON.parse(JSON.stringify(data));
            if (this.formData.auto == 2) {
                this.autoState = true;
            }
        },
        async getCategory(){
            var resp = await this.$API.task.param.get({"type":this.formData.category});
            if (resp.code == 0) {
                return this.$message.error(resp.msg)
            }
            this.categoryData = resp.data.category;
            this.levelData = resp.data.level;
            this.dicData = resp.data.dic;
        },
        async submit(){
            var validate = await this.$refs.dialogForm.validate().catch(()=>{});
            if(!validate){ return false }
            if (this.formData.auto == 2 && !this.autoState) {
                return this.$message.error("请先完成数据获取")
            }
            if (this.formData.expiration_time_end) {
                this.formData.expiration_time_end = this.$TOOL.dateFormat(this.formData.expiration_time_end)
            }
            this.isSaveing = true;
            var resp = await this.$API.task.save.post(this.formData);
            this.isSaveing = false;
            if (resp.code == 0) {
                return this.$message.error(resp.msg);
            }
            this.$message.success(resp.msg);
            this.visible = false;
            this.formData = {};
            this.autoState = false;
            this.$emit("success");
        }
    }
}
</script>

<style>
.goods-flex{display: flex;align-items: start;gap: 15px;}
.goods-flex .goods-right{flex: 1;}
</style>