jiangping
2024-01-26 a76c5c86ac9af71da45bf78c825a2c7aa843b4c8
platform/src/components/business/selectProductItem.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,183 @@
<template>
    <GlobalWindow :title="title" width="70%" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm">
        <div class="head">
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
                </el-form-item>
                <el-form-item label="类别" prop="categoryId">
                    <el-select v-model="form.categoryId" disabled placeholder="请选择">
                        <el-option
                            v-for="item in categoryList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tab">
            <el-table
            :data="tableData"
            stripe
            border
            @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="商品ID" min-width="100px"></el-table-column>
                <el-table-column prop="name" label="商品名称/型号" show-overflow-tooltip min-width="200px">
                    <template slot-scope="{row}">
                    <div style="display: flex; align-items: center;">
                        <div style="width: 70px; height: 70px; flex-shrink: 0;">
                        <el-image
                            v-if="row.imgurl"
                            style="width: 70px; height: 70px"
                            :src="row.fullImgUrl"
                            fit="cover"></el-image>
                        </div>
                        {{ row.name }}
                    </div>
                    </template>
                </el-table-column>
                <el-table-column prop="brandName" label="品牌" show-overflow-tooltip min-width="100px"></el-table-column>
                <el-table-column prop="categoryName" label="类别" show-overflow-tooltip min-width="100px"></el-table-column>
                <el-table-column prop="zdPrice" label="指导价(元)" show-overflow-tooltip min-width="100px"></el-table-column>
                <el-table-column prop="price" label="采购价(元)" show-overflow-tooltip min-width="100px"></el-table-column>
                <el-table-column label="入手价(元)" show-overflow-tooltip min-width="100px">
                    <template slot-scope="{row}">
                        <el-input v-model="row.purchasePrice" placeholder="请输入"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </GlobalWindow>
</template>
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import { baseCategoryList } from '@/api/business/category.js'
import { pageT } from '@/api/business/goods'
import { createPlat } from '@/api/business/goods'
export default {
    name: 'OperaBrandWindow',
    extends: BaseOpera,
    components: { GlobalWindow },
    data() {
        return {
            // è¡¨å•数据
            form: {
                categoryId: '',
                type: 0,
                rate: '',
                name: '',
                goodsParamList: []
            },
            pageSize: 10,
            page: 1,
            total: 0,
            tableData: [],
            categoryList: []
        }
    },
    created() {
        this.config({
            api: '/business/anchor',
            'field.id': 'id'
        })
    },
    methods: {
        getList() {
            pageT({
                capacity: this.pageSize,
                model: {
                    categoryId: this.form.categoryId,
                    name: this.form.name
                },
                page: this.page
            }).then(res => {
                res.records.forEach(item => {
                    item.purchasePrice = item.price * this.form.rate
                })
                this.tableData = res.records
                this.total = res.total
            })
        },
        handleCurrentChange(e) {
            this.page = e
            this.getList()
        },
        handleSizeChange(e) {
            this.pageSize = e
            this.getList()
        },
        handleSelectionChange(e) {
            let arr = []
            e.forEach(item => {
                arr.push({ goodsId: item.id, price: item.purchasePrice })
            })
            this.form.goodsParamList = arr
            console.log(arr)
        },
        confirm() {
            // è°ƒç”¨æ–°å»ºæŽ¥å£
            this.isWorking = true
            createPlat({
                categoryId: this.form.categoryId,
                goodsParamList: this.form.goodsParamList,
                rate: this.form.rate,
                type: this.form.type
            }).then(res => {
                this.visible = false
                this.$tip.apiSuccess('操作成功')
                // this.$emit('success')
                this.$emit('result')
            })
            .catch(e => {
                this.$tip.apiFailed(e)
            })
            .finally(() => {
                this.isWorking = false
            })
        },
        /**
         * æ‰“开窗口
         * @title çª—口标题
         * @target ç¼–辑的对象
         */
        open(title, target) {
            this.title = title
            this.visible = true
            this.form.categoryId = target.categoryId
            this.form.rate = Number(target.rate)
            this.form.type = target.type
            // èŽ·å–åˆ†ç±»åˆ—è¡¨
            baseCategoryList({})
                .then(res => {
                    this.categoryList = res
                })
            this.getList()
        }
    }
}
</script>
<style lang="scss" scoped>
    .head {
        width: 100%;
    }
</style>