Yezhan/src/views/goodsManage/goodsList.vue

<template>
    <div class="app-container calendar-list-container">

        <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input clearable class="filter-item" style="width: 200px;" placeholder="商品名称"
                v-model="listQuery.productName"></el-input>
            <el-input clearable class="filter-item" style="width: 200px;" placeholder="商品简称"
                v-model="listQuery.productShortForm"></el-input>

            <!-- <treeselect class="filter-item" default-expand-all v-model="listQuery.categoryId" :options="categoryOptions"
                :normalizer="normalizer" placeholder="商品类别" style="width: 200px" /> -->
                 <el-cascader
                 clearable
                 class="filter-item"
                 placeholder="商品类别"
                 style="width: 200px"
                  v-model="listQuery.categoryId"
                  :options="categoryOptions"
                  :props="{
                    label: 'categoryName',
                    value: 'id',
                    emitPath: false,
                    checkStrictly: true
                  }"
                />
            <el-select class="filter-item" style="width: 200px" v-model="listQuery.brandId" filterable placeholder="品牌">
                <el-option v-for="item in brandOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="listQuery.status" clearable placeholder="状态" class="filter-item" style="width: 200px;">
                <el-option :key="item.type" v-for="item in goodsStatusList" :label="item.name" :value="item.type">
                </el-option>
            </el-select>

            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search"
                @click="handleQuery">查找</el-button>
                <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            <el-button class="filter-item" type="primary" @click="handleAdd" icon="el-icon-plus">添加</el-button>
            <el-button class="filter-item" v-waves icon="el-icon-download" @click="handleDownLoad">导出</el-button>
        </div>

        <!-- 查询结果 -->
        <el-table 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="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button type="danger" 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>
        <!-- 添加或修改对话框 -->
        <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>
                            <span style="color: #F56C6C;">备注：如有机认证、质检报告等</span>
                        </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>
                        </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>

    </div>
</template>
<script>
import { createItem, updateItem, goodsList, removeItem } from "@/api/goodsManage";
import { listDept } from "@/api/goodsTypeList";
import { listBrand } from '@/api/brand';
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 {
            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" }
                ],
                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: {
        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>