商品管理系统 - 库存管理

<div id="app" @mousemove="handleMouseMove">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="查询分店">
            <el-select v-model="formInline.branchname" placeholder="请选择分店">
                <el-option :key="get.branchname" :label="get.branchname" :value="get.branchname" v-for="get in getname">
                    {{get.branchname}}
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit(row)">查询</el-button>
        </el-form-item>
    </el-form>
<pre><code>&lt;template&gt;
    &lt;el-button type=&quot;primary&quot; @click=&quot;refresh&quot;&gt;刷新&lt;/el-button&gt;
    &lt;el-table
            :data=&quot;tableData&quot;
            border
            style=&quot;width: 100%&quot;&gt;
        &lt;el-table-column
                prop=&quot;goodsid&quot;
                label=&quot;商品编号&quot;
                width=&quot;50&quot;&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
                label=&quot;图片&quot;
                width=&quot;100&quot;&gt;
            &lt;template slot-scope=&quot;scope&quot;&gt;
                &lt;img :src=&quot;scope.row.url&quot; alt=&quot;商品图片&quot; style=&quot;width: 100px; height: 50px;&quot;
                     @click=&quot;showImage(scope.row.url)&quot;&gt;
            &lt;/template&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
                prop=&quot;goodsname&quot;
                label=&quot;商品名称&quot;
                width=&quot;130&quot;&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
                prop=&quot;layout&quot;
                label=&quot;键盘布局&quot;
                width=&quot;80&quot;&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
                prop=&quot;keycapname&quot;
                label=&quot;键帽材质&quot;
                width=&quot;110&quot;&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
                prop=&quot;keyboardcolorname&quot;
                label=&quot;键盘颜色&quot;
                width=&quot;80&quot;&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
                prop=&quot;shaftchoose&quot;
                label=&quot;轴体颜色&quot;
                width=&quot;80&quot;&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
                prop=&quot;interfacetype&quot;
                label=&quot;接口信息&quot;
                width=&quot;100&quot;&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
                prop=&quot;cprice&quot;
                label=&quot;商品进价&quot;
                width=&quot;80&quot;&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
                prop=&quot;sprice&quot;
                label=&quot;商品出价&quot;
                width=&quot;80&quot;&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
                prop=&quot;branchname&quot;
                label=&quot;所属分店&quot;
                width=&quot;150&quot;&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
                prop=&quot;branchid&quot;
                label=&quot;分店编号&quot;
                width=&quot;100&quot;
                v-if=&quot;false&quot;&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
                prop=&quot;counts&quot;
                label=&quot;商品数量&quot;
                width=&quot;100&quot;&gt;
        &lt;/el-table-column&gt;

        &lt;el-table-column
                label=&quot;出库数量&quot;
                width=&quot;100px&quot;&gt;

            &lt;input type=&quot;text&quot; style=&quot;width: 70px;height: 30px;margin: 0;border: 0px&quot;
                   v-model=&quot;input&quot;&gt;


        &lt;/el-table-column&gt;
        &lt;el-table-column label=&quot;操作&quot; width=&quot;200px&quot;&gt;
            &lt;template slot-scope=&quot;scope&quot;&gt;
                &lt;el-button
                        :disabled=&quot;!isValidInput&quot;
                        size=&quot;mini&quot;
                        @click=&quot;handleEdit(scope.$index, scope.row)&quot;&gt;零售
                &lt;/el-button&gt;
                &lt;el-button
                        size=&quot;mini&quot;
                        @click=&quot;pingdiao(scope.$index, scope.row)&quot;&gt;平调
                &lt;/el-button&gt;
            &lt;/template&gt;
        &lt;/el-table-column&gt;
    &lt;/el-table&gt;

&lt;/template&gt;
&lt;div class=&quot;block&quot;&gt;
    &lt;el-pagination
            @size-change=&quot;handleSizeChange&quot;
            @current-change=&quot;handleCurrentChange&quot;
            :current-page.sync=&quot;pagenum&quot;
            :page-sizes=&quot;[5,10,20,50]&quot;
            :page-size=&quot;5&quot;
            layout=&quot;total, sizes, prev, pager, next, jumper&quot;
            :total=&quot;k&quot;&gt;
    &lt;/el-pagination&gt;
&lt;/div&gt;
&lt;el-dialog title=&quot;平调&quot; :visible.sync=&quot;dialogFormVisible&quot;&gt;
    &lt;el-form :model=&quot;form&quot;&gt;

        &lt;el-form-item label=&quot;选择平调仓库&quot; :label-width=&quot;formLabelWidth&quot;&gt;
            &lt;el-select v-model=&quot;from1.branchname&quot; placeholder=&quot;请选择活动区域&quot;&gt;
                &lt;el-option :label=&quot;name.branchname&quot; :value=&quot;name.branchname&quot; v-for=&quot;name in getname&quot;&gt;
                    {{name.branchname}}
                &lt;/el-option&gt;

            &lt;/el-select&gt;
        &lt;/el-form-item&gt;
    &lt;/el-form&gt;
    &lt;div slot=&quot;footer&quot; class=&quot;dialog-footer&quot;&gt;
        &lt;el-button @click=&quot;dialogFormVisible = false&quot;&gt;取 消&lt;/el-button&gt;
        &lt;el-button type=&quot;primary&quot; @click=&quot;pingdia&quot;&gt;确 定&lt;/el-button&gt;
    &lt;/div&gt;
&lt;/el-dialog&gt;
&lt;!--图片放大--&gt;
&lt;el-dialog :visible.sync=&quot;dialogVisible&quot; width=&quot;80%&quot;&gt;
    &lt;img :src=&quot;selectedImageUrl&quot; alt=&quot;放大图片&quot; style=&quot;width: 100%;&quot;&gt;
&lt;/el-dialog&gt;
</code></pre>
</div>
<script type="module">
    const instance = axios.create({
        baseURL: 'http://localhost:8080',
        timeout: 1000,
    })
<pre><code>new Vue({
    el: '#app',
    dataType: 'json',
    data: {
        isValidInput: false,
        name: '',
        dialogVisible: false,
        selectedImageUrl: '',
        from1: {
            branchname: ''
        },
        dialogFormVisible: false,
        num: '',
        total: '',
        pagenum: 1,
        index: 1,
        size: 5,
        yc: true,
        input: '',
        getname: [],
        formInline: {
            branchname: ''
        },
        coun: '',
        k: 0,
        from: [],
        branchname: '',
        tableData: [],
        dialogFormVisible: false,
        title: '添加部门',
        show: false,
        form: {
            branchname: ''
        },
        formLabelWidth: '120px'
    },

    methods: {
        handleMouseMove(){
            if (this.input!=''){
                this.isValidInput = true
            }else {
                this.isValidInput=false
            }
        },
        showImage(url) {
            this.selectedImageUrl = url;
            this.dialogVisible = true;
        },
        /*点击平调获取参数*/
        pingdiao(index, row) {
            if (this.input==''||this.input.length==0){
                this.$message({
                    showClose: true,
                    message: '格式错误',
                    type: 'warning'
                });
                return;
            }else {
                if (row.counts &gt;= this.input &amp; this.input != 0) {
                    console.log(row.branchname)
                    if (this.name != row.branchname) {
                        this.$message({
                            showClose: true,
                            message: '您不是本店员工，无法进行操作',
                            type: 'warning'
                        });
                        return;
                    }
                    if (this.input &lt;= 5) {
                        this.$message({
                            showClose: true,
                            message: '平调数量不能小于5',
                            type: 'warning'
                        });
                        return
                    }
                    this.dialogFormVisible = true
                    this.coun = row.counts
                    this.num = this.input
                    this.total = row.sprice * this.input
                    row.counts = row.counts - this.input;
                    var a = row.counts;
                    this.from = {
                        count: a,
                        goodsid: row.goodsid,
                        branchid: row.branchid,
                        num: this.num,
                        total: this.total,
                        branchname: '',
                        coun: this.coun

                    }
                    this.input = ''

                }

            }


        },
        /*点击平调确认向后端传参*/
        pingdia() {
            this.from.branchname = this.from1.branchname
            instance.put(`/goods?count=${this.from.count}&amp;goodsid=${this.from.goodsid}&amp;branchid=${this.from.branchid}`).then(res =&gt; {
                if (res.data.code == 0) {
                    instance.get(&quot;/goods&quot;)
                        .then(function (res) {
                            this.tableData = res.data.data.list;
                            this.k = res.data.data.total
                        })
                    this.input = ''
                    instance.post(`/goods/post2`, this.from).then(res =&gt; {

                    })
                    instance.put(`/outfers/shu?coun=${this.from.coun}&amp;goodsid=${this.from.goodsid}&amp;branchid=${this.from.branchid}`).then(res =&gt; {
                    })
                    this.input = ''
                    this.dialogFormVisible = false
                    this.handleCurrentChange(this.index)
                }
            })


        },
        /*刷新到第一页*/
        refresh() {
            this.handleCurrentChange(1)
        },
        /*零售*/
        handleEdit: function (index, row) {
         if (this.input==''||this.input.length==0){
             this.$message({
                 showClose: true,
                 message: '格式错误',
                 type: 'warning'
             });
             return;
         }else {
             if (row.counts &gt;= this.input &amp; this.input != 0) {
                 if (this.name != row.branchname) {
                     this.$message({
                         showClose: true,
                         message: '您不是本店员工，无法进行操作',
                         type: 'warning'
                     });
                     return;
                 }
                 if (this.input &gt; 5) {
                     this.$message({
                         showClose: true,
                         message: '零售数量不能大于5',
                         type: 'warning'
                     });
                     return
                 }
                 this.coun = row.counts
                 this.num = this.input
                 this.total = row.sprice * this.input
                 row.counts = row.counts - this.input;
                 var a = row.counts;
                 instance.put(`/goods?count=${a}&amp;goodsid=${row.goodsid}&amp;branchid=${row.branchid}`).then(res =&gt; {
                     if (res.data.code == 0) {
                         instance.get(&quot;/goods&quot;)
                             .then(function (res) {
                                 this.tableData = res.data.data.list;
                                 this.k = res.data.data.total
                             })
                         this.input = ''
                         instance.post(`/goods/post?branchid=${row.branchid}&amp;goodsid=${row.goodsid}&amp;num=${this.num}&amp;total=${this.total}`).then(res =&gt; {

                         })
                         instance.put(`/outfers/shu?coun=${this.coun}&amp;goodsid=${row.goodsid}&amp;branchid=${row.branchid}`).then(res =&gt; {

                         })
                     }
                 })
                 this.handleCurrentChange(this.index)
                 this.input = ''

             }
         }



        },
        /*查询*/
        onSubmit(row) {
            this.handleCurrentChange(1)
        },
        /*分页*/
        handleSizeChange(val) {
            this.size = val
            this.pages()
            /* instance.get(`/goods?size=${this.size}&amp;index=${this.index}`, {params: this.formInline}).then(res =&gt; {
                 this.tableData = res.data.data.list;
                 this.pagenum = res.data.data.pageNum
                 this.k = res.data.data.total
             })*/
        },
        /*分页*/
        handleCurrentChange(val) {
            this.index = val
            this.pages()
            /* instance.get(`/goods?index=${val}`, {params: this.formInline}).then(res =&gt; {
                 this.tableData = res.data.data.list;
                 this.pagenum = res.data.data.pageNum
                 this.k = res.data.data.total
             })*/
        },
        pages() {
            instance.get(`/goods?size=${this.size}&amp;index=${this.index}`, {params: this.formInline}).then(res =&gt; {
                this.tableData = res.data.data.list;
                this.pagenum = res.data.data.pageNum
                this.k = res.data.data.total
            })
        }
    },
    created() {

        var jl = this;
        instance.get(&quot;/logincontroller/getStaff&quot;)
            .then(res =&gt; {
                console.log(res.data.data)
                jl.name = res.data.data.branchname; // 将获取到的员工姓名赋值给name变量

            });
        instance.get(&quot;/goods&quot;)
            .then(function (res) {
                jl.tableData = res.data.data.list;
                jl.k = res.data.data.total
            })
            .catch(function (res) {
                console.log(res);
            });
        /*获取店铺名称*/
        instance.get(&quot;/goods/getname&quot;)
            .then(function (res) {
                jl.getname = res.data.data;
            })
    },
    watch: {
        input: function (newVal) {
            this.isValidInput = newVal !== null;
        }
    }
});
</code></pre>
</script>