houseworking/hksystem/src/views/product/edit.vue

<style lang="less">

</style>

<template>
    <div>
        <Row>
            <Col span="18">
                <Card>
                    <Form :label-width="80">
                        <FormItem label="产品名称">
                            <Input v-model="form.name" icon="android-list"/>
                        </FormItem>
                        <FormItem label="产品款色">
                            <Input v-model="form.color" icon="android-list"/>
                        </FormItem>
                        <FormItem label="产品价格">
                            <Input v-model="form.price" icon="android-list"/>
                        </FormItem>
                        <FormItem label="产品分类">
                            <Select v-model="form.classify">
                                <Option v-for="classify in classifys" :value="classify" :key="classify">{{classify}}</Option>
                            </Select>
                            <!-- <Input v-model="form.classify" icon="android-list"/> -->
                        </FormItem>
                        <FormItem label="产品状态">
                            <Select v-model="form.status" style="width: 150px">
                                <Option :value="0">上架</Option>
                                <Option :value="1">下架</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="产品信息">
                            <editor :editor-content="form.info"></editor>
                        </FormItem>
                    </Form>
                    <div class="submit">
                        <Button @click="handlePublish" :loading="publishLoading" icon="ios-checkmark" size="large" type="primary">发布</Button>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import tinymce from 'tinymce';
import editor from '../main-components/editor'
export default {
    name: 'edit',
    components: {
        editor
    },
    props: {
        formContent: Object
    },
    watch: {
        formContent() {
            if (!this.formContent.status) {
                this.formContent.status = 0;
            }
            this.form = this.formContent;
        }
    },
    data () {
        return {
            form: this.formContent,
            publishLoading: false,
            classifys: []
        };
    },
    methods: {
        handlePublish() {
            if (true) {
                this.publishLoading = true;
                let info = tinymce.activeEditor.getContent();
                let data = {
                    name: this.form.name,
                    info: info,
                    color: this.form.color,
                    price: parseFloat(this.form.price),
                    classify: this.form.classify,
                    status: this.form.status
                };
                if (this.form.id) {
                    data.id = this.form.id;
                }
                this.axios.post("/product/store", data).then((res) => {
                    if (res.data.status == 0) {
                        this.$Message.success('操作成功！');
                        this.publishLoading = false;
                        setTimeout(() => {
                            this.$emit("pub-success");
                        }, 1000);
                    }
                });
            } else {
                this.$Message.error('请完善所有信息！');
                this.publishLoading = false;
            }
        },
        getData() {
            this.axios.get("/product_classify")
                .then((res) => {
                    this.classifys = res.data.data;
                });
        }
    },
    mounted() {
        this.getData();
    }
};
</script>