wms-vue/src/views/wms/basic/product/index.vue

<template>
    <div class="app-container">
        <el-card>
            <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
                <el-form-item label="商品编号" prop="itemCode">
                    <el-input v-model="queryParams.itemCode" placeholder="请输入商品编号" clearable @keyup.enter="handleQuery"/>
                </el-form-item>
                <el-form-item label="商品名称" prop="itemName">
                    <el-input v-model="queryParams.itemName" placeholder="请输入商品名称" clearable @keyup.enter="handleQuery"/>
                </el-form-item>
                <el-form-item label="商品品牌" prop="itemBrand">
                    <el-select v-model="queryParams.itemBrand" clearable filterable>
                        <el-option
                            v-for="item in useWmsStore().itemBrandList"
                            :key="item.id"
                            :label="item.brandName"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="商品类型" prop="type">
                    <el-select v-model="queryParams.type" clearable filterable>
                        <el-option value="1" label="成品"></el-option>
                        <el-option value="2" label="原料"></el-option>
                        <el-option value="3" label="包材"></el-option>
                    </el-select>
                </el-form-item>-->
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="mt20">
            <div style="display: flex;align-items: start">
                <div>
                    <div style="display: flex;align-items: center;justify-content: space-between">
                        <span style="font-size: 18px;line-height: 18px">商品分类</span>
                        <el-button class="mr10" style="font-size:12px;line-height: 14px" plain
                                   @click="handleAddType(false)"
                                   type="primary" icon="Plus">新增分类
                        </el-button>
                    </div>
                    <el-tree
                        :data="itemCategoryTreeOptionsList"
                        :props="{ value: 'id', label: 'label', children: 'children' }"
                        value-key="id"
                        style="width: 400px;"
                        class="mr10 mt10"
                        @nodeClick="handleQueryType"
                        :default-expand-all="true"
                        :highlight-current="true"
                        node-key="label"
                        current-node-key="全部"
                        draggable
                        :allow-drop="collapse"
                        @node-drop="handleNodeDrop"
                        :expand-on-click-node="false"
                    >
                        <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span>
                <el-button type="primary" @click.stop="append(data)" link
                           v-if="data.label !== '全部' && node.level < 2" icon="Plus" style="font-size: 12px">新增子分类</el-button>
                <el-button type="primary" @click.stop="remove(node, data)" link
                           v-if="data.label !== '全部'" icon="Delete" style="font-size: 12px">删除</el-button>
                <el-button type="primary" icon="Edit" @click.stop="edit(node, data)" link
                           v-if="data.label !== '全部'" style="font-size: 12px">修改</el-button>
              </span>
            </span>
                        </template>
                    </el-tree>
                </div>
                <div style="width: 100%;position: relative">
                    <div style="display: flex;align-items: start;justify-content: space-between">
                        <span class="mr10" style="font-size: 18px;">商品列表</span>
                        <el-button type="primary" plain icon="Plus" @click="handleAdd" class="mb10">新增商品</el-button>
                    </div>
                    <el-table :data="itemList" @selection-change="handleSelectionChange" :span-method="spanMethod" border empty-text="暂无商品" v-loading="loading" cell-class-name="my-cell">
                        <el-table-column label="商品信息" prop="itemId">
                            <template #default="{ row }">
                                <div>{{ row.item.itemName + (row.item.itemCode ? ('(' +  row.item.itemCode + ')') : '') }}</div>
                                <div v-if="row.item.itemBrand">{{ row.item.itemBrand ? ('品牌：' + useWmsStore().itemBrandMap.get(row.item.itemBrand)?.brandName) : '' }}</div>
                                <div v-if="row.item.itemCategory">{{ row.item.itemCategory ? ('分类：' + useWmsStore().itemCategoryMap.get(row.item.itemCategory)?.categoryName) : '' }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="规格信息" prop="skuName" align="left">
                            <template #default="{ row }">
                                <div>{{ row.itemSku.skuName }}</div>
                                <div v-if="row.itemSku.skuCode">编号：{{ row.itemSku.skuCode }}</div>
                                <div v-if="row.itemSku.barcode">条码：{{ row.itemSku.barcode }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="金额(元)" width="160" align="left">
                            <template #default="{ row }">
                                <div v-if="row.itemSku.costPrice" class="flex-space-between">
                                    <span>成本价：</span>
                                    <div>{{ (row.itemSku.costPrice || row.itemSku.costPrice === 0) ? row.itemSku.costPrice : '' }}</div>
                                </div>
                                <div v-if="row.itemSku.sellingPrice" class="flex-space-between">
                                    <span>销售价：</span>
                                    <div>{{ (row.itemSku.sellingPrice || row.itemSku.sellingPrice === 0) ? row.itemSku.sellingPrice : '' }}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="重量(kg)" width="160" align="left">
                            <template #default="{ row }">
                                <div v-if="row.itemSku.netWeight" class="flex-space-between">
                                    <span>净重：</span>
                                    <div>
                                        {{ (row.itemSku.netWeight || row.itemSku.netWeight === 0) ? row.itemSku.netWeight : '' }}
                                    </div>
                                </div>
                                <div v-if="row.itemSku.grossWeight" class="flex-space-between">
                                    <span>毛重：</span>
                                    <div>
                                        {{ (row.itemSku.grossWeight || row.itemSku.grossWeight === 0) ? row.itemSku.grossWeight : '' }}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="物料清单" align="right" width="250">
                            <template #default="{ row }">
                                <div style="color: #409eff; cursor: pointer" @click="handleShowProduct(row)">{{ row.itemSku.quantity }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="right" width="200">
                            <template #default="{ row }">
                                <el-button link type="primary" @click="handleShowProduct(row)" icon="Delete">物料清单</el-button>
                                <el-button link type="primary" @click="configurate(row, 1)" icon="Edit">BOM配置</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
                                v-model:limit="queryParams.pageSize" @pagination="getList"/>
                </div>
            </div>
        </el-card>
        <!-- 添加或修改物料对话框 -->
        <el-drawer :title="dialog.title" v-model="dialog.visible" size="80%" append-to-body :close-on-click-modal="false">
            <div v-loading="skuLoading">
                <el-card>
                    <el-form ref="itemFormRef" :model="form" :rules="rules" label-width="108px">
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="商品名称" prop="itemName">
                                    <el-input v-model="form.itemName" placeholder="请输入名称"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="商品分类" prop="itemCategory">
                                    <el-tree-select
                                        ref="treeRef"
                                        v-model="form.itemCategory"
                                        :data="itemCategoryTreeSelectList"
                                        :props="{ value: 'id', label: 'label', children: 'children' }"
                                        value-key="id"
                                        placeholder="请选择分类"
                                        check-strictly
                                        style="width: 100%!important;"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <el-button link icon="Plus" type="primary" style="height: 32px!important;line-height: 32px!important;"
                                           @click="handleAddType(true)">新增分类
                                </el-button>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="商品类型" prop="type">
                                    <el-select v-model="form.type" clearable filterable style="width: 100%">
                                        <el-option value="1" label="成品"></el-option>
                                        <el-option value="2" label="原料"></el-option>
                                        <el-option value="3" label="包材"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="商品编号" prop="itemCode">
                                    <el-input v-model="form.itemCode" placeholder="请输入编号"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="商品单位" prop="unit">
                                    <el-input v-model="form.unit" placeholder="请输入单位类别"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="商品品牌" prop="itemBrand">
                                    <el-select v-model="form.itemBrand" clearable filterable style="width: 100%!important;">
                                        <el-option
                                            v-for="item in useWmsStore().itemBrandList"
                                            :key="item.id"
                                            :label="item.brandName"
                                            :value="item.id"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>
                <el-card class="mt20">
                    <template #header>
                        <div class="card-header">
                            <span>规格</span>
                        </div>
                    </template>
                    <el-form :model="skuForm" :rules="skuRules" ref="skuFormRef" :show-message="false">
                        <el-table :data="skuForm.itemSkuList" border cell-class-name="my-cell">
                            <el-table-column label="规格名称" prop="skuName">
                                <template #default="scope">
                                    <el-form-item :prop="'itemSkuList.' + scope.$index + '.skuName'" :rules="skuRules.skuName"
                                                  style="margin-bottom: 0!important;">
                                        <el-input v-model="scope.row.skuName" placeholder="请输入规格名称"/>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column label="编号/条码" width="250">
                                <template #default="scope">
                                    <div class="flex-center">
                                        <span class="mr5" style="width: 50px">编号</span>
                                        <el-input v-model="scope.row.skuCode" />
                                    </div>
                                    <div class="flex-center mt5">
                                        <span class="mr5" style="width: 50px">条码</span>
                                        <el-input v-model="scope.row.barcode" />
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="计量单位" width="250">
                                <template #default="scope">
                                    <div class="flex-center">
                                        <el-select :disabled="scope.row.many" v-model="scope.row.unitType">
                                            <el-option value="1" label="单位1"></el-option>
                                        </el-select>
                                    </div>
                                    <div class="flex-center mt5">
                                        <el-checkbox v-model="scope.row.many" @change="handleManyUnit">多单位</el-checkbox>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="长/宽/高(cm)" width="200">
                                <template #default="scope">
                                    <div class="flex-center">
                                        <span class="mr5">长</span>
                                        <el-input-number :controls="false" :min="0" :precision="1" class="mr5" v-model="scope.row.length" />
                                    </div>
                                    <div class="flex-center mt5">
                                        <span class="mr5">宽</span>
                                        <el-input-number :controls="false" :min="0" :precision="1" class="mr5" v-model="scope.row.width" />
                                    </div>
                                    <div class="flex-center mt5">
                                        <span class="mr5">高</span>
                                        <el-input-number :controls="false" :min="0" :precision="1" v-model="scope.row.height" />
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="净重/毛重(kg)" width="240">
                                <template #default="scope">
                                    <div class="flex-center">
                                        <span class="mr5">净重</span>
                                        <el-input-number :controls="false" :min="0" :precision="3" v-model="scope.row.netWeight"/>
                                    </div>
                                    <div class="flex-center mt5">
                                        <span class="mr5">毛重</span>
                                        <el-input-number :controls="false" :min="0" :precision="3" v-model="scope.row.grossWeight"/>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="成本价/销售价(元)" width="240">
                                <template #default="scope">
                                    <div class="flex-center">
                                        <span class="mr5">成本价</span>
                                        <el-input-number :controls="false" :min="0" :precision="2" v-model="scope.row.costPrice"/>
                                    </div>
                                    <div class="flex-center mt5">
                                        <span class="mr5">销售价</span>
                                        <el-input-number :controls="false" :min="0" :precision="2" v-model="scope.row.sellingPrice"/>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" class-name="small-padding fixed-width" width="80" align="right">
                                <template #default="scope">
                                    <el-button link icon="Delete" type="primary" @click="handleDeleteItemSku(scope.row, scope.$index)">删除</el-button>
                                </template>
                            </el-table-column>
                            <template #append v-if="skuForm.itemSkuList.length">
                                <div style="padding: 6px 2px 6px 2px;text-align: center;">
                                    <el-button text class="add-btn" icon="Plus" type="primary" @click="onAppendBtnClick">添加商品规格
                                    </el-button>
                                </div>
                            </template>
                            <template #empty>
                                <div style="padding: 2px 2px 6px 2px;text-align: center;width: 100%!important;">
                                    <el-button text class="add-btn" icon="Plus" type="primary" @click="onAppendBtnClick">添加商品规格
                                    </el-button>
                                </div>
                            </template>
                        </el-table>
                    </el-form>
                </el-card>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-drawer>
        <!-- 添加或修改物料类型对话框 -->
        <el-dialog :title="categoryDialog.title" v-model="categoryDialog.visible" width="500px" append-to-body
                   :close-on-click-modal="false">
            <el-form ref="itemCategoryFormRef" :model="categoryForm" :rules="typeRules" label-width="128px" @submit.native.prevent>
                <el-form-item label="上级分类" prop="parentId">
                    <el-tree-select
                        v-model="categoryForm.parentId"
                        :data="itemCategoryTreeSelectList"
                        :props="{ value: 'id', label: 'label', children: 'children' }"
                        value-key="id"
                        placeholder="上级分类"
                        check-strictly
                        style="width: 100%!important;"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="商品分类名称" prop="categoryName">
                    <el-input v-model="categoryForm.categoryName" placeholder="请输入商品分类名称" @keyup.enter="submitCategoryForm"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button :loading="buttonLoading" type="primary" @click="submitCategoryForm">确 定</el-button>
                    <el-button @click="cancelType">取 消</el-button>
                </div>
            </template>
            <div id="qrcode"></div>
        </el-dialog>
        <el-drawer title="物料清单" v-model="productShow" size="80%" append-to-body :close-on-click-modal="false">
            <el-form :model="BOMForm" label-width="120">
                <el-form-item label="BOM版本">
                    <el-select v-model="BOMForm.version" @change="changeBom">
                        <el-option v-for="item in BOMList" :value="item.id" :label="item.version"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-table :data="productList">

                <el-table-column prop="itemName" label="商品名称"></el-table-column>
                <el-table-column prop="itemCode" label="商品编号"></el-table-column>
                <el-table-column prop="itemBrand" label="商品品牌"></el-table-column>
                <el-table-column prop="skuName" label="规格名称"></el-table-column>
                <el-table-column prop="version" label="BOM版本"></el-table-column>
                <el-table-column prop="f" label="价格"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
                <el-table-column label="重量">
                    <template #default="{ row }">
                        <div v-if="row.netWeight" class="flex-space-between">
                            <span>净重：</span>
                            <div>
                                {{ (row.netWeight || row.netWeight === 0) ? row.netWeight : '' }}
                            </div>
                        </div>
                        <div v-if="row.grossWeight" class="flex-space-between">
                            <span>毛重：</span>
                            <div>
                                {{ (row.grossWeight || row.grossWeight === 0) ? row.grossWeight : '' }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="长宽高">
                    <template #default="{ row }">
                        {{ `${row.length?row.length:0}*${row.width?row.width:0}*${row.height?row.height:0}` }}
                    </template>
                </el-table-column>
<!--                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button size="small" @click="configurate(row)">BOM配置</el-button>
                    </template>
                </el-table-column>-->
            </el-table>
        </el-drawer>
        <el-drawer title="BOM配置" v-model="configurateShow" size="80%" append-to-body :close-on-click-modal="false">
            <el-form :model="BOMDataForm" label-width="80">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="BOM版本">
                            <el-input v-model="BOMDataForm.version" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="商品名称">
                            <el-input disabled v-model="BOMDataForm.itemName" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="商品编号">
                            <el-input disabled v-model="BOMDataForm.itemCode" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="商品类型">
                            <el-select disabled v-model="BOMDataForm.itemType" clearable filterable style="width: 100%">
                                <el-option value="1" label="成品"></el-option>
                                <el-option value="2" label="原料"></el-option>
                                <el-option value="3" label="包材"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="商品规格">
                            <el-input disabled v-model="BOMDataForm.skuName" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table :data="BOMDataList">
                <el-table-column label="商品信息">
                    <template #default="{ row }">
                        <div>{{ row.item.itemName + (row.item.itemCode ? ('(' +  row.item.itemCode + ')') : '') }}</div>
                        <div v-if="row.item.itemBrand">{{ row.item.itemBrand ? ('品牌：' + useWmsStore().itemBrandMap.get(row.item.itemBrand)?.brandName) : '' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="itemType" label="类型"></el-table-column>
                <el-table-column label="规格信息">
                    <template #default="{ row }">
                        <div>{{ row.itemSku.skuName }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="价格（元）">
                    <template #default="{ row }">
                        <div v-if="row.itemSku.costPrice" class="flex-space-between">
                            <span>成本价：</span>
                            <div>{{ (row.itemSku.costPrice || row.itemSku.costPrice === 0) ? row.itemSku.costPrice : '' }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="quantity" label="数量">
                    <template #default="{ row }">
                        <el-input v-model="row.quantity" />
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位">
                    <template #default="{ row }">
                        <el-select v-model="row.unit">
                            <el-option :value="item.value" :label="item.label" v-for="(item, index) in conventional_units"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <div class="btns">
                    <div class="left">
                        <el-button @click="handleAddUnit">添加物料</el-button>
                    </div>
                    <div class="right">
                        <el-button @click="handleBOMDataCancel">取消</el-button>
                        <el-button type="primary" @click="handleBOMDataConfirm">确定</el-button>
                    </div>
                </div>
            </template>
        </el-drawer>
        <el-dialog title="添加物料" v-model="addShow">
            <el-form :model="addForm" label-width="80">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item prop="itemName" label="商品名称">
                            <el-input v-model="addForm.itemName" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="itemCode" label="商品编码">
                            <el-input v-model="addForm.itemCode" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="skuName" label="规格名称">
                            <el-input v-model="addForm.skuName" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="itemType" label="商品类型">
                            <el-select v-model="addForm.itemType" clearable filterable style="width: 100%">
                                <el-option value="1" label="成品"></el-option>
                                <el-option value="2" label="原料"></el-option>
                                <el-option value="3" label="包材"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-table
                :data="materialList"
                @selection-change="handleSelectChange"
            >
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="商品信息">
                    <template #default="{ row }">
                        <div>{{ row.item.itemName + (row.item.itemCode ? ('(' +  row.item.itemCode + ')') : '') }}</div>
                        <div v-if="row.item.itemBrand">{{ row.item.itemBrand ? ('品牌：' + useWmsStore().itemBrandMap.get(row.item.itemBrand)?.brandName) : '' }}</div>
                        <div v-if="row.item.itemCategory">{{ row.item.itemCategory ? ('分类：' + useWmsStore().itemCategoryMap.get(row.item.itemCategory)?.categoryName) : '' }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="规格信息">
                    <template #default="{ row }">
                        <div>{{ row.itemSku.skuName }}</div>
                        <div v-if="row.itemSku.skuCode">编号：{{ row.itemSku.skuCode }}</div>
                        <div v-if="row.itemSku.barcode">条码：{{ row.itemSku.barcode }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="价格（元）">
                    <template #default="{ row }">
                        <div v-if="row.itemSku.costPrice" class="flex-space-between">
                            <span>成本价：</span>
                            <div>{{ (row.itemSku.costPrice || row.itemSku.costPrice === 0) ? row.itemSku.costPrice : '' }}</div>
                        </div>
                        <div v-if="row.itemSku.sellingPrice" class="flex-space-between">
                            <span>销售价：</span>
                            <div>{{ (row.itemSku.sellingPrice || row.itemSku.sellingPrice === 0) ? row.itemSku.sellingPrice : '' }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="重量（Kg）">
                    <template #default="{ row }">
                        <div v-if="row.itemSku.netWeight" class="flex-space-between">
                            <span>净重：</span>
                            <div>
                                {{ (row.itemSku.netWeight || row.itemSku.netWeight === 0) ? row.itemSku.netWeight : '' }}
                            </div>
                        </div>
                        <div v-if="row.itemSku.grossWeight" class="flex-space-between">
                            <span>毛重：</span>
                            <div>
                                {{ (row.itemSku.grossWeight || row.itemSku.grossWeight === 0) ? row.itemSku.grossWeight : '' }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="长宽高（cm）">
                    <template #default="{ row }">
                        <div>{{ getVolumeText(row.itemSku) }}</div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    v-model:current-page="addForm.pageNum"
                    v-model:page-size="addForm.pageSize"
                    background
                    small
                    :total="addTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
            <template #footer>
                <div class="btn">
                    <el-button @click="handleSelectCancel">取消</el-button>
                    <el-button type="primary" @click="handleSelectConfirm">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>

import {getItem, delItem, addItem, updateItem, listItemPage, bomList, listItem} from '@/api/wms/item';
import {computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs} from 'vue';
import {ElForm, ElMessage, ElTree, ElTreeSelect} from 'element-plus';
import {
    updateItemCategory,
    addItemCategory,
    delItemCategory,
    updateOrderNum
} from "@/api/wms/itemCategory";
import {getRowspanMethod} from "@/utils/getRowSpanMethod";
import {listItemSkuPage, delItemSku, listItemSku} from "@/api/wms/itemSku";
import {useRoute} from "vue-router";
import Qrcode from 'qrcode'
import JSBarcode from 'jsbarcode'
import {useWmsStore} from '@/store/modules/wms'
import {addBom, BOMVersion} from "@/api/production/task";

const barcode = ref(null)
const route = useRoute()
const {proxy} = getCurrentInstance();
const { conventional_units } = proxy.useDict('conventional_units')
console.log(1231232, conventional_units)
const itemList = ref([]);
const itemCategoryTreeSelectList = computed(() => useWmsStore().itemCategoryTreeList);
const itemCategoryTreeOptionsList = computed(() => {
    let data = [...itemCategoryTreeSelectList.value];
    data.unshift({
        id: -1,
        label: '全部',
        children: []
    });
    return data;
});
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const skuLoading = ref(false)
const queryFormRef = ref(ElForm);
const itemFormRef = ref(ElForm);
const itemCategoryFormRef = ref(ElForm);
const spanMethod = computed(() => getRowspanMethod(itemList.value, rowSpanArray.value))
const rowSpanArray = ref(['itemId'])
const qrcode = ref(null)
const append = (data) => {
    // resetType();
    categoryForm.value.categoryName = undefined;
    categoryForm.value.parentId = data.id;
    categoryDialog.visible = true;
}

const remove = async (node, data) => {
    const ids = data.id
    await proxy?.$modal.confirm('确认删除分类【' + data.label + '】吗？');
    await delItemCategory(ids);
    proxy?.$modal.msgSuccess("删除成功");
    useWmsStore().getItemCategoryList();
    useWmsStore().getItemCategoryTreeList();
}
const edit = (node, data) => {
    if (node.level > 1) {
        categoryForm.value.parentId = node.parent.data.id
    }
    categoryForm.value.id = data.id;
    // resetType();
    categoryForm.value.categoryName = data.label;
    categoryDialog.title = "修改商品分类";
    categoryDialog.visible = true;
}
const dialog = reactive({
    visible: false,
    title: ''
});
const categoryDialog = reactive({
    visible: false,
    title: ''
});
const showParent = ref(false)
const initFormData = {
    id: undefined,
    itemCode: undefined,
    itemName: undefined,
    itemCategory: undefined,
    unit: undefined,
    itemBrand: undefined,
    remark: undefined,
}
const initCategoryFormData = {
    id: undefined,
    parentId: undefined,
    ancestors: undefined,
    categoryName: undefined,
    orderNum: 0,
    status: undefined,
}
const data = reactive({
    form: {...initFormData},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        itemCode: undefined,
        itemName: undefined,
        itemType: 1,
    },
    rules: {
        id: [
            {required: true, message: "不能为空", trigger: "blur"}
        ],
        itemName: [
            {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        itemCategory: [
            {required: true, message: "分类不能为空", trigger: "blur"}
        ],
        warehouseId: [
            {required: true, message: "所属仓库不能为空", trigger: "blur"}
        ],
        quantity: [
            {required: true, message: "安全库存不能为空", trigger: "blur"}
        ],
        remark: [
            {required: true, message: "备注不能为空", trigger: "blur"}
        ],
        type: [
            {required: true, message: "商品类型不能为空", trigger: "change"}
        ]
    }
});
const categoryData = reactive({
    form: {...initCategoryFormData},
    queryParams: {
        pageNum: 1,
        pageSize: 1000,
        parentId: undefined,
        categoryName: undefined,
        orderNum: undefined,
        status: undefined,
        itemType: 1,
    },
    rules: {
        id: [
            {required: true, message: "商品分类id不能为空", trigger: "blur"}
        ],
        // parentId: [
        //   {required: true, message: "父物料类型id不能为空", trigger: "blur"}
        // ],
        categoryName: [
            {required: true, message: "商品分类名称不能为空", trigger: "blur"}
        ],
        status: [
            {required: true, message: "商品分类状态不能为空", trigger: "change"}
        ],
    }
});
const {queryParams, form, rules} = toRefs(data);

const {queryParams: typeQueryParams, form: categoryForm, rules: typeRules} = toRefs(categoryData);
const currentType = ref()
/** 查询物料列表 */
const getList = async () => {
    loading.value = true;
    const res = await listItemSkuPage(queryParams.value);
    const content = [...res.rows];
    itemList.value = content.map((it) => ({...it, id: it.skuId,itemId: it?.item?.id}));
    total.value = res.total;
    loading.value = false;
}
const handleAddType = (show) => {
    categoryDialog.title = "新增商品分类";
    showParent.value = show
    categoryDialog.visible = true;
    if (show) {
        categoryForm.value.parentId = undefined
    }
    nextTick(() => {
        categoryForm.value.categoryName = undefined;
    });
}
const skuForm = reactive({
    itemSkuList: []
})
const skuFormRef = ref(ElForm)
const skuRules = {
    skuName: [{required: true, message: '规格名称不能为空', trigger: 'blur'}]
}
// sku 管理
const resetItemSkuList = () => {
    skuForm.itemSkuList = []
    skuForm.itemSkuList.push({
        id: '',
        itemId: '',
        barcode: '',
        inPrice: null,
        outPrice: null,
        skuName: '',
        quantity: null,
    })
}

const onAppendBtnClick = () => {
    skuForm.itemSkuList.push({
        id: '',
        itemId: '',
        barcode: '',
        inPrice: null,
        outPrice: null,
        skuName: '',
        quantity: null,
    })
}
const handleDeleteItemSku = async (row, index) => {
    if (!row.id) {
        skuForm.itemSkuList.splice(index, 1);
        return
    }
    if (skuForm.itemSkuList.length === 1) {
        return proxy?.$modal.msgError("至少包含一个商品规格");
    }
    await proxy?.$modal.confirm('确认删除规格【' + row.skuName + '】吗？');
    loading.value = true;
    await delItemSku(row.id).finally(()=> loading.value = false);
    proxy?.$modal.msgSuccess("删除成功");
    const res = await getItem(row.itemId);
    skuForm.itemSkuList = res.data.sku
    form.value = res.data
}
const collapse = (draggingNode, dropNode, type) => {
    //注掉的是同级拖拽
    if (draggingNode.data.label !== '全部' && draggingNode.level === dropNode.level && draggingNode.parent.id == dropNode.parent.id) {
        if (dropNode.data.label === '全部') {
            return type === 'next';
        } else {
            return type === 'prev' || type === 'next'
        }
    } else {
        // 不同级进行处理
        return false
    }
}
const handleNodeDrop = async (draggingNode, dropNode, dropType, ev) => {
    if (dropNode.level === 1) {
        await updateOrderNum(dropNode.parent.data.filter(it => it.id !== -1));
    } else {
        await updateOrderNum(dropNode.parent.data.children);
    }
}
/** 取消按钮 */
const cancel = () => {
    reset();
    dialog.visible = false;
}
const cancelType = () => {
    resetType();
    categoryDialog.visible = false;
}
/** 表单重置 */
const reset = () => {
    form.value = {...initFormData};
    itemFormRef.value.resetFields();
}

/** 表单重置 */
const resetType = () => {
    categoryForm.value = {...initCategoryFormData};
    itemCategoryFormRef.value.resetFields();
}
/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value.resetFields();
    handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection) => {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 新增按钮操作 */
const handleAdd = () => {
    resetItemSkuList()
    dialog.visible = true;
    dialog.title = "新增商品";
    nextTick(async () => {
        reset();
    });
}
/** 修改按钮操作 */
const handleUpdate = (row) => {
    resetItemSkuList()
    skuLoading.value = true
    dialog.visible = true;
    dialog.title = "修改商品";
    nextTick(async () => {
        reset();
        const _id = row?.itemId || ids.value[0]
        const res = await listItemSku({'itemId':_id});
        Object.assign(skuForm.itemSkuList, res.data)
        skuLoading.value = false
        Object.assign(form.value, row.item);
    });
}
const handleQueryType = (node, data) => {
    queryParams.value.pageNum = 1
    if (data.data.label === '全部') {
        queryParams.value.itemCategory = '';
        currentType.value = '';
        getList();
    } else {
        queryParams.value.itemCategory = data.data.id;
        currentType.value = data.data.id;
        getList();
    }
}
/** 提交按钮 */
const submitForm = () => {
    form.value.sku = skuForm.itemSkuList
    itemFormRef.value.validate(async (valid) => {
        if (valid) {
            let flag = true
            if (!skuForm.itemSkuList || skuForm.itemSkuList.length === 0) {
                proxy?.$modal.msgError("至少包含一个商品规格");
                flag = false
            }
            await skuFormRef.value.validate((valid2) => {
                if (!valid2) {
                    flag = false;
                }
            })
            if (flag) {
                buttonLoading.value = true;
                if (form.value.id) {
                    await updateItem(form.value).finally(() => buttonLoading.value = false);
                } else {
                    await addItem(form.value).finally(() => buttonLoading.value = false);
                }
                proxy?.$modal.msgSuccess("修改成功");
                dialog.visible = false;
                await getList();
            }
        }
    });
}
const submitCategoryForm = () => {
    itemCategoryFormRef.value.validate(async (valid) => {
        if (valid) {
            buttonLoading.value = true;
            if (categoryForm.value.id) {
                await updateItemCategory(categoryForm.value).finally(() => buttonLoading.value = false);
            } else {
                await addItemCategory(categoryForm.value).finally(() => buttonLoading.value = false);
            }
            proxy?.$modal.msgSuccess(categoryForm.value.id ? '修改成功' : '新增成功');
            categoryDialog.visible = false;
            useWmsStore().getItemCategoryList();
            useWmsStore().getItemCategoryTreeList();
        }
    });
}
/** 删除按钮操作 */
const handleDelete = async (row) => {
    const _ids = row?.itemId || ids.value;
    await proxy?.$modal.confirm('确认删除商品【' + row?.item.itemName + '】吗？');
    loading.value = true;
    await delItem(_ids).finally(()=> loading.value = false);
    proxy?.$modal.msgSuccess("删除成功");
    await getList();
}
const treeRef = ref(null)
/** 导出按钮操作 */
const handleExport = () => {
    proxy?.download('wms/item/export', {
        ...queryParams.value
    }, `item_${new Date().getTime()}.xlsx`)
}
/** 下载条形码 */
const downloadBarcode = (row) => {
    JSBarcode(barcode.value, row.barcode, {
        format: "CODE128",
        displayValue: true
    })
    const canvas = barcode.value
    //创建a标签
    let a = document.createElement('a')
    //设置下载文件的名字
    a.download = row.barcode
    a.href = canvas.toDataURL("image/png")
    a.click()
}
/** 下载二维码 */
const downloadQrcode = async (row) => {
    qrcode.value = await Qrcode.toDataURL(row.barcode)
    //创建a标签
    let a = document.createElement('a')
    //获取二维码的url并赋值为a.href
    a.href = qrcode.value
    //设置下载文件的名字
    a.download = row.barcode
    //点击事件，相当于下载
    a.click()
    //提示信息
    // this.$message.warn('下载中，请稍后...')
}
const getVolumeText = (itemSku) => {
    if((itemSku.length || itemSku.length === 0) && (itemSku.width || itemSku.width === 0) && (itemSku.height || itemSku.height === 0)) {
        return itemSku.length + ' * ' + itemSku.width + ' * ' + itemSku.height
    }
    return ((itemSku.length || itemSku.length === 0) ? ('长：' + itemSku.length) : '')
        + ((itemSku.width || itemSku.width === 0) ? (' 宽：' + itemSku.width) : '')
        + ((itemSku.height || itemSku.height === 0) ? (' 高：' + itemSku.height) : '')
}

// 物料清单
let productShow = ref(false)
let BOMForm = ref({
    version: ''
})
let productList = ref([])
const handleShowProduct = (row) => {
    productShow.value = true
    BOMDataForm.value.itemName = row.item.itemName
    BOMDataForm.value.itemCode = row.item.itemCode
    BOMDataForm.value.itemType = row.item.itemType
    BOMDataForm.value.skuName = row.itemSku.itemName
    BOMDataForm.value.skuItemId = row.skuId
    initBOMVersion(row.skuId)
    bomList({
        skuItemId: BOMDataForm.value.skuItemId,
        bomVersionId: ''
    }).then(res => {
        if(res.code == 200) {
            productList.value = res.data
        }
    })
}

// BOM配置
let configurateShow = ref(false)
const configurate = (row, type) => {
    if(type) {
        BOMDataForm.value.itemName = row.item.itemName
        BOMDataForm.value.itemCode = row.item.itemCode
        BOMDataForm.value.itemType = row.item.itemType
        BOMDataForm.value.skuName = row.itemSku.itemName
        BOMDataForm.value.skuItemId = row.skuId
    }
    configurateShow.value = true
    // bomList({
    //     bomListQueryDto: {
    //         skuItemId: BOMDataForm.value.skuItemId,
    //         bomVersionId: BOMDataForm.value.version
    //     }
    // }).then(res => {
    //     if(res.code == 200) {
    //         BOMDataList.value = res.data
    //     }
    // })
}
let addShow = ref(false)
let addTotal = ref(0)
let addForm = ref({
    itemName: '',
    itemCode: '',
    skuName: '',
    skuCode: '',
    pageNum: 1,
    pageSize: 10
})
let materialList = ref([])
const handleAddUnit = () => {
    addShow.value = true
    listItemSkuPage({
        ...addForm.value
    }).then(res => {
        materialList.value = res.rows
        addTotal.value = res.total
    })
}
const handleSizeChange = (size) => {
    addForm.value.pageSize = size
    listItemSkuPage({
        ...addForm.value
    }).then(res => {
        materialList.value = res.rows
        addTotal.value = res.total
    })
}
const handleCurrentChange = (page) => {
    addForm.value.pageNum = page
    listItemSkuPage({
        ...addForm.value
    }).then(res => {
        materialList.value = res.rows
        addTotal.value = res.total
    })
}
const handleBOMDataCancel = () => {
    configurateShow.value = false
    BOMDataList.value = []
}
const handleBOMDataConfirm = ()=> {
    let list = BOMDataList.value.map(item => {
        return {
            bomItemSkuId: item.skuId,
            quantity: item.quantity,
            unit: item.unit
        }
    })
    addBom({
        version: BOMDataForm.value.version,
        itemSkuId: BOMDataForm.value.skuItemId,
        bomItemSkuList: list
    }).then(res => {
        if(res.code == 200) {
            ElMessage({
                type: 'success',
                message: res.msg
            })
        } else {
            ElMessage({
                type: 'error',
                message: res.msg
            })
        }
        configurateShow.value = false
    })
}

const handleSearch = () => {
    addForm.value.pageNum = 1
    addForm.value.pageSize = 10
    listItemSkuPage({
        ...addForm.value
    }).then(res => {
        materialList.value = res.rows
        addTotal.value = res.total
    })
}

let BOMList = ref([])
const initBOMVersion = (id) => {
    BOMVersion({
        skuId: id
    }).then(res => {
        BOMList.value = res.data
    })
}

const changeBom = () => {
    bomList({
        skuItemId: BOMDataForm.value.skuItemId,
        bomVersionId: BOMForm.value.version
    }).then(res => {
        if(res.code == 200) {
            productList.value = res.data
        }
    })
}

let BOMDataForm = ref({})
let BOMDataList = ref([])

let selected = ref([])
const handleSelectChange = (rows) => {
    selected.value = rows
}
const handleSelectCancel = () => {
    selected.value = []
    addShow.value = false
}
const handleSelectConfirm = () => {
    BOMDataList.value = selected.value
    addShow.value = false
}

onMounted(() => {
    nextTick(()=>{
        getList();
        if (route.query.openDrawer) {
            handleAdd()
        }
    })
});

</script>

<style scoped lang="scss">
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
.pagination{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
}
.btn{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.btns{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.left{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.right{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.el-tree-node__content {
    display: flex;
    align-items: center;
    height: 35px;
    cursor: pointer;
}

.el-table .my-cell {
    vertical-align: top
}

.el-table__empty-text {
    width: 100%;
}
</style>