qimall/addons/CloudStock/backend/views/double-copy-goods/index.php

<?php

use common\helpers\ComponentHelper;
$diyPath = dirname(__DIR__) . '/components';
ComponentHelper::loadComponentView('free-goods-choice', $diyPath);
?>

<div id="app" v-cloak>
    <el-card class="box-card" v-loading="cardLoading" shadow="never" style="border:0;min-width: 1250px;"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <span style="color: #409EFF;cursor: pointer" @click="$navigate({r:'double-copy/level/index'})">
                        二二复制商品
                    </span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-body">
            <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="160px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item>
                                <div style="max-height: 300px;overflow-y: auto">
                                    <el-table :data="ruleForm.goods_list" border style="width: 100%">
                                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                                        <el-table-column prop="id" label="商品id"  width="100"></el-table-column>
                                        <el-table-column prop="name,cover_pic" label="商品名称" >
                                            <template slot-scope="scope">
                                                <div flex="box:first">
                                                    <div style="padding-right: 10px;">
                                                        <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                                    </div>
                                                    <div flex="cross:top cross:center">
                                                        {{scope.row.name}}
                                                    </div>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="cloud_stock_goods_id" label="云库存商品id" >
                                        </el-table-column>
                                        <el-table-column prop="cloud_stock_goods_cover_pic,cloud_stock_goods_name" label="云库存商品名称" >
                                            <template slot-scope="scope">
                                                <div flex="box:first">
                                                    <div style="padding-right: 10px;">
                                                        <com-image mode="aspectFill" :src="scope.row.cloud_stock_goods_cover_pic"></com-image>
                                                    </div>
                                                    <div flex="cross:top cross:center">
                                                        {{scope.row.cloud_stock_goods_name}}
                                                    </div>
                                                </div>
                                            </template>
                                        </el-table-column>

                                        <el-table-column prop="num" label="数量" >
                                            <template slot-scope="scope">
                                                <el-input type="number" :min="0" v-model="scope.row.num" placeholder="">
                                                </el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column  label="操作">
                                            <template slot-scope="scope">
                                            <free-goods-choice :multiple="false"  @selected="goodsSelect2"
                                                               title="商品选择">
                                                <el-button type="primary" @click="clickFun(scope.$index)">选择商品</el-button>
                                            </free-goods-choice>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-button class="button-item" :loading="btnLoading" type="primary" @click="submitForm('ruleForm')"
                   size="small">保存
        </el-button>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                msg: 1,
                ruleForm: {
                    goods_list: [],
                },
                rules: {
                },
                btnLoading: false,
                cardLoading: false,
                index:0,
            };
        },
        mounted() {
            this.loadData();
        },
        methods: {
            // 获取显示的值
            loadData() {
                this.cardLoading = true;
                request({
                    params: {
                        r: 'cloud-stock/double-copy-goods/index',
                    },
                }).then(e => {
                    this.cardLoading = false;
                    if (e.data.code == 0) {
                        this.ruleForm.goods_list= e.data.data.goods_list
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },

            //提交表单
            submitForm(formName) {
                let self = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        request({
                            params: {
                                r: 'cloud-stock/double-copy-goods/index'
                            },
                            method: 'post',
                            data: self.ruleForm
                        }).then(e => {
                            self.btnLoading = true;
                            if (e.data.code == 0) {
                                self.$message.success('保存成功');
                                self.btnLoading = false;
                            } else {
                                self.$message.error(e.data.msg);
                                self.btnLoading = false;
                            }
                        }).catch(e => {
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            clickFun(index){
                this.index = index;
                console.log("=======",index)
            },
            goodsSelect2(param) {
                var k = this.index;
                this.ruleForm.goods_list[k]['cloud_stock_goods_id'] = param["goods_id"]
                this.ruleForm.goods_list[k]['cloud_stock_goods_cover_pic'] = param["cover_pic"]
                this.ruleForm.goods_list[k]['cloud_stock_goods_name'] = param["goods_name"]
            },
        }
    });
</script>

<style>
    .form-body {
        padding: 20px;
        background-color: #fff;
        margin-bottom: 20px;
        padding-right: 20%;
        min-width: 900px;
    }

    .form-button .el-form-item__content {
        margin-left: 0 !important;
    }

    .button-item {
        padding: 9px 25px;
    }

    .check-group {
        font-size: 14px !important;
    }

    .check-group .el-col {
        display: flex;
    }

    .check-group .el-input {
        margin: 0 5px;
    }

    .check-group .el-col .el-checkbox {
        display: flex;
        align-items: center;
    }

    .check-group .el-col .el-input {
        width: 100px;
    }

    .check-group .el-col .el-input .el-input__inner {
        height: 30px;
        width: 100px;
    }

    .el-checkbox-group .el-col {
        margin-bottom: 10px;
    }
    .my_reset input {
        height: 32px;
        line-height: 32px;
    }
    .my_reset .el-input-group__append {
        padding: 0px 10px;
    }
</style>