qyjj-admin/src/components/goods/goodsExt.vue

<template>
    <div class="goodsExt">
        <div class="inline-left">
            <p style="width:70px;margin-left:40px">商品类型</p>
            <el-select
                size="mini"
                v-model="extType"
                :disabled="enterType == 'detail'"
                placeholder="请选择"
                @change="changeType"
            >
                <el-option
                    v-for="item in extList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
            </el-select>
        </div>
        <el-form size="mini" label-width="100px" v-if="extType == 2">
            <el-form-item label="规格明细" v-if="tableData.length > 0">
                <table border="1">
                    <tr>
                        <th v-for="(item, index) in Attr" :key="index">
                            {{ item.name }}
                        </th>
                        <th><span>*</span> 选择音频</th>
                    </tr>
                    <tr v-for="(item, index) in tableData" :key="index">
                        <td v-for="(item1, index1) in item.attr" :key="index1">
                            {{ item1 }}
                        </td>
                        <td class="upImg">
                            <el-select
                                size="mini"
                                :disabled="enterType == 'detail'"
                                v-model="typeList[index]"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item2 in mediaList"
                                    :key="item2.pack_id"
                                    :label="item2.name"
                                    :value="item2.pack_id"
                                >
                                </el-option>
                            </el-select>
                            <!-- <img :src="item.pic" class="mainImg" />
                            <input
                                type="file"
                                class="file"
                                :name="index"
                                @change="changeImg"
                            /> -->
                        </td>
                    </tr>
                </table>
            </el-form-item>
        </el-form>
    </div>
</template>

<script type="text/ecmascript-6">
    import { mapGetters } from 'vuex';
    export default {
        name: 'goodsExt',
        props: {
            enterType: {
                type: String,
                default: 'edit'
            },
            goodsId: {
                type: String
            },
            Info: {
                type: Object
            }
        },
        data() {
            return {
                extList: [
                    {
                        name: '其它商品',
                        id: '0'
                    },
                    {
                        name: '视频课程',
                        id: '1'
                    },
                    {
                        name: '音频课程',
                        id: '2'
                    },
                    {
                        name: '课程周边',
                        id: '3'
                    }
                ],
                tableData: [],
                typeList: [],
                mediaInfo: {},
                inputSize: 'mini',
                extType: '0',
                baseRules: {},
                mediaList: [],
                Attr: [],
                roleList: [], // 身份列表
                isInit: true
            };
        },
        computed: {
            ...mapGetters(['attrTable', 'tableHead']),
            attrTable1() {
                return this.attrTable;
            },
            tableHead1() {
                return this.tableHead;
            }
        },
        async created() {
            this.tableData = this.attrTable;
            this.Attr = this.tableHead;
            this.getMediaList();
        },
        mounted() {},
        methods: {
            changeType(val) {
                this.extType = val;
                this.$emit('changeType', val);
            },
            getMediaList() {
                this.httpPost(this.$root.mediaList).then(
                    res => {
                        this.mediaList = res.list;
                        this.loading = false;
                    },
                    () => {
                        this.loading = false;
                    }
                );
            }
        },
        watch: {
            Info: {
                handler(val) {
                    // 编辑
                    if (!this.isInit) {
                        return false;
                    }
                    console.log(22222, val);
                    this.mediaInfo = JSON.parse(JSON.stringify(val));
                    this.extType = this.mediaInfo.goods_type;
                    this.tableData = this.mediaInfo.media_info;
                    this.typeList = this.mediaInfo.media_info.map(
                        item => item.pack_id
                    );
                },
                deep: true
            },
            attrTable1: {
                handler(val) {
                    this.tableData = val;
                },
                deep: true
            },
            tableHead1: {
                handler(val) {
                    console.log(444444, val);
                    this.Attr = val;
                },
                deep: true
            },
            typeList: {
                handler(val) {
                    // 选择音频时向父组件传递
                    let media = [];
                    let list = this.typeList.slice(0);
                    this.tableData.forEach((item, i) => {
                        media.push({
                            attr: item.attr,
                            pack_id: list[i]
                        });
                    });
                    this.$emit('editMedia', media);
                },
                deep: true
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';

    .el-input {
        width: 100px !important;
    }

    .basic {
        width: 100%;
        height: 30px;
        background: bk;
        border-radius(3px);
        padding: 0 15px;
        overflow: hidden;

        h1 {
            word(14px);
            font-weight: bold;
            line-height: 30px;
        }
    }

    .upImg {
        position: relative;

        .mainImg {
            width: 60px;
            height: 60px;
            margin-top: 10px;
        }

        input {
            width: 60px;
            height: 60px;
            opacity: 0;
            position: absolute;
            left: 20px;
            top: 10px;
        }
    }

    table {
        border: 1px solid border-color;
        width: 100%;

        tr {
            height: 40px;
            line-height: 40px;
            text-align: left;
        }

        th {
            span {
                color: red;
            }

            font-weight: normal;
            color: gray3;
            padding-left: 20px;
        }

        td {
            padding-left: 20px;
            bor-top();
            bor-bottom();
            color: gray9;
            width: 80px;
        }
    }

    .el-form {
        margin-top: 10px;
        padding-left: 20px;
    }

    .el-input {
        width: 300px;
    }

    .el-button {
        margin-left: 10px;
        margin-bottom: 10px;
    }
</style>