Yezhan/src/views/goodsManage/goodsList.vue

<template>
    <div class="app-container">
        <el-form :model="listQuery" size="small" :inline="true" label-position="top">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="商品名称">
                        <el-input clearable placeholder="商品名称" v-model="listQuery.productName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="商品简称">
                        <el-input clearable placeholder="商品简称" v-model="listQuery.productShortForm"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="商品类别">
                        <el-cascader clearable placeholder="商品类别" style="width: 100%" v-model="listQuery.categoryId"
                            :options="categoryOptions" :props="{
                                label: 'categoryName',
                                value: 'id',
                                emitPath: false,
                                checkStrictly: true
                            }" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="品牌">
                        <el-select v-model="listQuery.brandId" filterable placeholder="品牌" style="width: 100%">
                            <el-option v-for="item in brandOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="状态">
                        <el-select v-model="listQuery.status" clearable placeholder="状态" style="width: 100%">
                            <el-option :key="item.type" v-for="item in goodsStatusList" :label="item.name"
                                :value="item.type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="搜索">
                        <el-button style="width: 100%;" type="primary" icon="el-icon-search"
                            @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="重置">
                        <el-button style="width: 100%;" icon="el-icon-refresh" type="primary"
                            @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" class="editButton" size="small" icon="el-icon-plus"
                    @click="handleAdd">添加</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="info" icon="el-icon-upload2" size="small" @click="handleImport">导入</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-download" size="small" @click="handleDownLoad">导出</el-button>
            </el-col>
        </el-row>
        <div class="border-card">
             <!-- 查询结果 -->
        <el-table height="450" size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
            highlight-current-row>
            <el-table-column type="index" label="序号" header-align="center" align="center">
            </el-table-column>
            <el-table-column align="center" min-width="120px" label="商品编号" prop="productCode">
            </el-table-column>
            <el-table-column align="center" min-width="200px" label="商品名称" prop="productName">
            </el-table-column>
            <el-table-column align="center" min-width="80px" label="商品简称" prop="productShortForm">
            </el-table-column>
            <el-table-column align="center" min-width="80px" label="商品类别" prop="categoryName">
            </el-table-column>
            <el-table-column align="center" min-width="80px" label="品牌" prop="brandName">
            </el-table-column>
            <el-table-column align="center" min-width="100px" label="主图" prop="imgUrl">
                <template slot-scope="scope">
                    <img class="good-img" :src="scope.row.imgUrl ? scope.row.imgUrl : require('@/assets/avatar.gif')">
                </template>
            </el-table-column>
            <el-table-column align="center" min-width="80px" label="状态">
                <template slot-scope="props">
                    <span v-if="props.row.status == 0" style="color: #67C23A;font-weight: bold;">启用</span>
                    <span v-if="props.row.status == 1" style="color: #E6A23C;font-weight: bold;">停用</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button type="text" icon="el-icon-delete" class="deleteText" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        </div>
       
        <!-- 添加或修改对话框 -->
        <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible"
            width="70%">
            <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left"
                label-width="100px" style='margin: 0 50px;'>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="first">
                        <el-form-item label="商品名称" prop="productName">
                            <el-input v-model="dataForm.productName" placeholder="请输入商品名称"></el-input>
                        </el-form-item>
                        <el-form-item label="商品编号" prop="productCode">
                            <el-input placeholder="请输入商品编号" v-model="dataForm.productCode"></el-input>
                        </el-form-item>
                        <el-form-item label="商品简称" prop="productShortForm">
                            <el-input v-model="dataForm.productShortForm" placeholder="请输入商品简称"></el-input>
                        </el-form-item>


                        <el-form-item label="商品类别" prop="categoryId">
                            <el-cascader placeholder="请选择商品类别" style="width: 100%;" v-model="dataForm.categoryId"
                                :options="categoryOptions" :props="{
                                    label: 'categoryName',
                                    value: 'id',
                                    emitPath: false,
                                    checkStrictly: true
                                }" />
                            <!-- <treeselect default-expand-all v-model="dataForm.categoryId" :options="categoryOptions"
                                :normalizer="normalizer" placeholder="请选择商品类别" /> -->
                        </el-form-item>

                        <el-form-item label="品牌" prop="brandId">
                            <el-select style="width: 100%" v-model="dataForm.brandId" filterable placeholder="请选择品牌">
                                <el-option v-for="item in brandOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="零售价(元)" prop="price">
                            <el-input v-model="dataForm.price" placeholder="请输入零售价"></el-input>
                        </el-form-item>
                        <el-form-item label="销售价(元)" prop="salePrice">
                            <el-input v-model="dataForm.salePrice" placeholder="请输入销售价"></el-input>
                        </el-form-item>
                        <el-form-item label="成本价(元)" prop="costPrice">
                            <el-input v-model="dataForm.costPrice" placeholder="请输入成本价"></el-input>
                        </el-form-item>
                        <el-form-item label="重量(g)" prop="weight">
                            <!-- <el-input v-model="dataForm.weight" placeholder="请输入重量" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input> -->
                            <el-input-number v-model="dataForm.weight" :min="1" label="请输入重量"></el-input-number>
                        </el-form-item>
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="dataForm.status">
                                <el-radio :label="0">启用</el-radio>
                                <el-radio :label="1">停用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item style="width: 800px" label="商品图片" prop="imgUrl">
                            <el-upload :limit="1" :action="fileImgUrl" list-type="picture-card"
                                :file-list="dataForm.images" :on-success="handleImgSucess" :on-exceed="handleExceed"
                                :before-upload="beforeUploadImg" :on-remove="handleRemoveImg">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>

                    </el-tab-pane>
                    <el-tab-pane label="茶叶属性" name="second">
                        <!-- <el-form-item label="茶叶品牌">
                            <el-select v-model="dataForm.teaTypeId" filterable placeholder="请选择" style="width: 100%">
                                <el-option :key="item.dictLabel" v-for="item in tea_type" :label="item.dictLabel"
                                    :value="item.dictLabel">
                                </el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="茶叶级别">
                            <el-select v-model="dataForm.teaLevel" filterable placeholder="请选择茶叶级别" style="width: 100%">
                                <el-option :key="item.dictLabel" v-for="item in tea_level" :label="item.dictLabel"
                                    :value="item.dictLabel">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="茶叶系列">
                            <el-select v-model="dataForm.teaSeries" filterable placeholder="请选择茶叶系列"
                                style="width: 100%">
                                <el-option :key="item.dictLabel" v-for="item in tea_series" :label="item.dictLabel"
                                    :value="item.dictLabel">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="包装形式">
                            <el-select v-model="dataForm.teaPackageFormat" multiple filterable placeholder="请选择包装形式"
                                style="width: 100%">
                                <el-option :key="item.dictLabel" v-for="item in tea_package_format"
                                    :label="item.dictLabel" :value="item.dictLabel">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="产地">
                            <el-input v-model="dataForm.teaOrigin" placeholder="请输入产地"></el-input>
                        </el-form-item>
                        <el-form-item label="采摘季节">
                            <el-radio-group v-model="dataForm.teaGetSeason">
                                <el-radio v-for="item in tea_get_season" :key="item.dictLabel"
                                    :label="item.dictLabel"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="保质期">
                            <el-input placeholder="数值" v-model="dataForm.teaGuaranteeNumber"
                                onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" class="input-with-select">
                                <el-select style="width: 100px;" v-model="dataForm.teaGuaranteeUnit" slot="prepend"
                                    placeholder="请选择">
                                    <el-option label="年" value="年"></el-option>
                                    <el-option label="月" value="月"></el-option>
                                    <el-option label="日" value="日"></el-option>
                                </el-select>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="生产日期">
                            <el-date-picker style="width: 100%;" v-model="dataForm.productDate" type="date"
                                placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="年份">
                            <el-input v-model="dataForm.teaAgingYear" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                                placeholder="请输入年份"></el-input>
                        </el-form-item>
                        <el-form-item label="溯源信息" prop="teaFiles">
                            <el-upload :limit="1" :action="fileImgUrl" :file-list="dataForm.files"
                                :on-success="handleFileSuccess" :before-upload="beforeUploadFile"
                                :on-remove="handleRemoveFile">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                            <span style="color: #F56C6C;">备注：如有机认证、质检报告等</span>
                        </el-form-item>
                        <el-form-item label="存储要求">
                            <el-checkbox-group v-model="dataForm.teaStorageRequire">
                                <el-checkbox v-for="item in tea_storage_require" :key="item.dictLabel"
                                    :label="item.dictLabel" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
                <el-button v-else type="primary" @click="updateData">确定</el-button>
            </div>
        </el-dialog>
        <!-- 商品导入对话框 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
                :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
                :on-success="handleProductTemplate" :auto-upload="false" drag>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip text-center" slot="tip">
                    <span>仅允许导入xls、xlsx格式文件。</span>
                    <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                        @click="importTemplate">下载模板</el-link>
                </div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import { createItem, updateItem, goodsList, removeItem } from "@/api/goodsManage";
import { listDept } from "@/api/goodsTypeList";
import { listBrand } from '@/api/brand';
import { getToken } from '@/utils/auth' // getToken from cookie
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { dataTypeList } from "@/api/public";
import waves from "@/directive/waves"; // 水波纹指令

export default {
    name: 'goodsList',
    components: { Treeselect },
    directives: { waves },
    data() {
        return {
            // 商品导入参数
            upload: {
                // 是否显示弹出层（商品导入）
                open: false,
                // 弹出层标题（商品导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.BASE_API + "/product/import"
            },
            tea_type: [],
            tea_level: [],
            tea_series: [],
            tea_package_format: [],
            tea_get_season: [],
            tea_storage_require: [],
            // 树选项
            categoryOptions: [],
            activeName: 'first',
            brandOptions: [],
            goodsStatusList: [
                {
                    type: 0,
                    name: '启用'
                },
                {
                    type: 1,
                    name: '停用'
                },
            ],
            list: [],
            total: 0,
            listLoading: false,
            listQuery: {
                page: 1,
                limit: 10,
                productName: '',
                productShortForm: '',
                categoryId: undefined,
                brandId: '',
                status: '',
            },
            listBrandQuery: {
                limit: 1000,
                sort: '+id'
            },
            dataForm: {
                productName: undefined,
                productCode: undefined,
                productShortForm: undefined,
                categoryId: undefined,
                brandId: undefined,
                price: undefined,
                salePrice: undefined,
                costPrice: undefined,
                weight: 1,
                status: 0,
                imgUrl: undefined,
                teaTypeId: undefined,
                teaLevel: undefined,
                teaSeries: undefined,
                teaPackageFormat: [],
                teaOrigin: undefined,
                teaGetSeason: undefined,
                teaGuaranteeNumber: undefined,
                teaGuaranteeUnit: '年',
                productDate: undefined,
                teaAgingYear: undefined,
                teaFiles: undefined,
                files: [],
                teaStorageRequire: [],
            },
            dialogFormVisible: false,
            dialogStatus: '',
            textMap: {
                update: "编辑商品",
                create: "添加商品",
            },
            rules: {
                productName: [{ required: true, message: "请填写商品名称", trigger: "blur" }],
                productCode: [
                    { required: true, message: "请填写商品编号", trigger: "blur" },
                    // { min: 14, max: 14, message: "商品编号必须为14位", trigger: "blur" },
                    // { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{14,}$/, message: "商品编号必须为14位字母加数字", trigger: "blur" }
                ],
                productShortForm: [{ required: true, message: "请填写商品简称", trigger: "blur" }],
                categoryId: [{ required: true, message: "请选择商品类别", trigger: "blur" }],
                price: [
                    { required: true, message: "请填写零售价", trigger: "blur" },
                    {
                        pattern: /^(([1-9]{1}\d{0,9})|(0{1}))(\.\d{1,2})?$/,
                        message: "请输入合法的金额数字，最多两位小数",
                        trigger: "blur"
                    }
                ],
                salePrice: [
                    { required: true, message: "请填写销售价", trigger: "blur" },
                    {
                        pattern: /^(([1-9]{1}\d{0,9})|(0{1}))(\.\d{1,2})?$/,
                        message: "请输入合法的金额数字，最多两位小数",
                        trigger: "blur"
                    }
                ],
                costPrice: [
                    { required: true, message: "请填写成本价", trigger: "blur" },
                    {
                        pattern: /^(([1-9]{1}\d{0,9})|(0{1}))(\.\d{1,2})?$/,
                        message: "请输入合法的金额数字，最多两位小数",
                        trigger: "blur"
                    }
                ],
                weight: [
                    { required: true, message: "请填写重量", trigger: "blur" },

                ],
                status: [{ required: true, message: "请选择状态", trigger: "blur" }],
            },
            dialogListVisible: false,
            fileImgUrl: this.upLoadUrl,
        }
    },
    created() {
        this.getListCategory();
        this.getBrandList();
        this.getDictType();
        this.getList();
    },
    methods: {
        /** 导入按钮操作 */
        handleImport() {
            this.upload.title = "商品导入";
            this.upload.open = true;
        },
        /** 下载模板操作 */
        importTemplate() {
            window.location.href = process.env.BASE_API + '/product/down/productTemplate';
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleProductTemplate(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.data + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
            this.getList();
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        },
        handleDownLoad() {
            window.location.href = process.env.BASE_API + '/product/export?productName=' + this.listQuery.productName + '&productShortForm=' + this.listQuery.productShortForm;
        },
        getListCategory() {
            listDept().then(response => {
                this.categoryOptions = this.handleTree(response.data.data, "id");
            });
        },
        /** 转换证书数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.categoryName,
                children: node.children
            };
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        getDictType() {
            //茶叶品牌tea_type
            dataTypeList({ dictType: 'tea_type' }).then(response => {
                this.tea_type = response.data.data;
            });
            //茶叶级别tea_level
            dataTypeList({ dictType: 'tea_level' }).then(response => {
                this.tea_level = response.data.data;
            });
            //茶叶系列tea_series
            dataTypeList({ dictType: 'tea_series' }).then(response => {
                this.tea_series = response.data.data;
            });
            //包装形式tea_package_format
            dataTypeList({ dictType: 'tea_package_format' }).then(response => {
                this.tea_package_format = response.data.data;
            });
            //采摘季节tea_get_season
            dataTypeList({ dictType: 'tea_get_season' }).then(response => {
                this.tea_get_season = response.data.data;
            });
            //存储要求tea_storage_require
            dataTypeList({ dictType: 'tea_storage_require' }).then(response => {
                this.tea_storage_require = response.data.data;
            });
        },
        handleRemoveFile(file, fileList) {
            console.log(file, fileList);
            let teaFiles = [];
            for (let i in fileList) {
                let id = fileList[i].response.data.id;
                teaFiles.push(id);
            }
            this.dataForm.teaFiles = teaFiles.join(",");
        },
        beforeUploadFile(file) {
            console.log(file);
            const size = file.size / 1024 / 1024;
            console.log(size);
            if (size > 10) {
                this.$message.error("文件大小不能超过10MB！");
                return false;
            }
        },
        handleFileSuccess(res, file, fileList) {
            console.log(file, fileList);
            console.log("------", "==========");
            console.log("res = ", res);

            let teaFiles = [];
            for (let i in fileList) {
                let response = fileList[i].response;
                if (response.errno && response.errno != "0") {
                    this.$message.error("该文件上传失败,已被移除,请重新上传!");
                    // 上传失败移除该 file 对象
                    fileList.splice(i, 1);
                } else {
                    let id = fileList[i].response.data.id;
                    teaFiles.push(id);
                }
            }
            this.dataForm.teaFiles = teaFiles.join(",");
        },
        handleRemoveImg(file, fileList) {
            console.log(file, fileList);
            let images = [];
            for (let i in fileList) {
                let response = fileList[i].response;
                let url = response.data.url;
                images.push(url);
                this.dataForm.imgUrl = images.join(",");
            }
        },
        beforeUploadImg(file) {
            const isJPGs = file.type === "image/jpeg";
            console.log(isJPGs);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件！，共选择了 ${files.length + fileList.length
                } 个文件`
            );
        },
        handleImgSucess(res, file, fileList) {
            this.dataForm.imgUrl = ""; // 清空画廊图片数组

            let images = [];
            for (let i in fileList) {
                let response = fileList[i].response;
                if (response.errno && response.errno != "0") {
                    this.$message.error("该图片上传失败,已被移除,请重新上传!");
                    // 上传失败移除该 file 对象
                    fileList.splice(i, 1);
                } else {
                    let url = response.data.url;
                    images.push(url);
                }
            }

            this.dataForm.imgUrl = images.join(",");
        },
        resetForm() {
            this.dataForm = {
                productName: undefined,
                productCode: undefined,
                productShortForm: undefined,
                categoryId: undefined,
                brandId: undefined,
                price: undefined,
                salePrice: undefined,
                costPrice: undefined,
                weight: 1,
                status: 0,
                imgUrl: undefined,
                images: [],
                teaTypeId: undefined,
                teaLevel: undefined,
                teaSeries: undefined,
                teaPackageFormat: [],
                teaOrigin: undefined,
                teaGetSeason: undefined,
                teaGuaranteeNumber: undefined,
                teaGuaranteeUnit: '年',
                productDate: undefined,
                teaAgingYear: undefined,
                teaFiles: undefined,
                files: [],
                teaStorageRequire: [],
            };
        },
        handleAdd() {
            this.activeName = 'first';
            this.resetForm();

            this.dialogFormVisible = true;
            this.dialogStatus = "create";

            this.$nextTick(() => {
                this.$refs["dataForm"].clearValidate();
            });
        },
        createData() {
            this.$refs["dataForm"].validate((valid) => {
                if (valid) {
                    console.log(this.dataForm);
                    createItem(this.dataForm)
                        .then((response) => {
                            this.getList();
                            this.dialogFormVisible = false;
                            this.$notify({
                                title: "成功",
                                message: "创建成功",
                                type: "success",
                                duration: 2000,
                            });
                            this.reload();
                        })
                        .catch(() => { });
                }
            });
        },
        handleUpdate(row) {
            this.activeName = 'first';
            this.dataForm = Object.assign({}, row);
            if (this.dataForm.imgUrl) {
                let images = this.dataForm.imgUrl.split(",");
                this.dataForm.images = [];
                for (let i in images) {
                    let url = images[i];
                    let name = "image_" + i;

                    this.dataForm.images.push({
                        name: name,
                        url: url,
                        response: { error: "0", data: { url: url } },
                    });
                }
            }
            if (this.dataForm.teaFiles) {
                let files = this.dataForm.files;
                this.dataForm.files = [];
                for (let i in files) {
                    let url = files[i].url;
                    let name = files[i].oldName;
                    let id = files[i].id;

                    this.dataForm.files.push({
                        name: name,
                        url: url,
                        response: { error: "0", data: { url: url, id: id } },
                    });
                }
            }
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        updateData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    updateItem(this.dataForm).then(() => {
                        this.dialogFormVisible = false
                        this.$notify({
                            title: '成功',
                            message: '更新成功',
                            type: 'success',
                            duration: 2000
                        })
                        this.getList()
                    })

                }

            })
        },
        handleDelete(id) {
            this.$confirm('确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeItem({ id: id }).then(response => {
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.getList();
                })
            }).catch(() => {

            })

        },
        getBrandList() {
            // 获取品牌信息
            listBrand(this.listBrandQuery).then(response => {
                this.brandOptions = response.data.data.items.map((item) => {
                    return { value: item.id, label: item.name }
                });
            }).catch(() => {
                this.brandOptions = [];
            })
        },
        getList() {
            this.listLoading = true
            goodsList(this.listQuery).then(response => {
                this.list = response.data.data.items
                this.total = response.data.data.total
                this.listLoading = false
            }).catch(() => { })
        },

        handleQuery() {
            this.listQuery.page = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.listQuery = {
                page: 1,
                limit: 10,
                productName: '',
                productShortForm: '',
                categoryId: '',
                brandId: '',
                status: '',
            };
            this.handleQuery();
        },
        handleSizeChange(val) {
            this.listQuery.limit = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.listQuery.page = val
            this.getList()
        },
    }
}
</script>
<style>
.good-img {
    width: 50px;
    height: 50px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>