|
|
|
|
@ -0,0 +1,667 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
|
|
|
|
|
<!-- 搜索工作栏 -->
|
|
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
|
|
<el-form-item label="物料编码" prop="materialCode">
|
|
|
|
|
<el-input v-model="queryParams.materialCode" placeholder="请输入物料编码" clearable @keyup.enter.native="handleQuery"/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="物料名称" prop="materialName">
|
|
|
|
|
<el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable @keyup.enter.native="handleQuery"/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- <el-form-item label="物料图片" prop="materialPictures">
|
|
|
|
|
<el-input v-model="queryParams.materialPictures" placeholder="请输入物料图片" clearable @keyup.enter.native="handleQuery"/>
|
|
|
|
|
</el-form-item> -->
|
|
|
|
|
<!-- <el-form-item label="物料类型id" prop="materialTypeId">
|
|
|
|
|
<el-input v-model="queryParams.materialTypeId" placeholder="请输入物料类型id" clearable @keyup.enter.native="handleQuery"/>
|
|
|
|
|
</el-form-item> -->
|
|
|
|
|
<!-- <el-form-item label="行业id" prop="materialIndustryId">
|
|
|
|
|
<el-input v-model="queryParams.materialIndustryId" placeholder="请输入行业id" clearable @keyup.enter.native="handleQuery"/>
|
|
|
|
|
</el-form-item> -->
|
|
|
|
|
<!-- <el-form-item label="品牌id" prop="materialBrandId">
|
|
|
|
|
<el-input v-model="queryParams.materialBrandId" placeholder="请输入品牌id" clearable @keyup.enter.native="handleQuery"/>
|
|
|
|
|
</el-form-item> -->
|
|
|
|
|
<el-form-item label="创建时间" prop="createTime">
|
|
|
|
|
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
|
|
|
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- <el-form-item label="物料英文名称" prop="materialEnglishName">
|
|
|
|
|
<el-input v-model="queryParams.materialEnglishName" placeholder="请输入物料英文名称" clearable @keyup.enter.native="handleQuery"/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="物料简称" prop="materialAbbreviation">
|
|
|
|
|
<el-input v-model="queryParams.materialAbbreviation" placeholder="请输入物料简称" clearable @keyup.enter.native="handleQuery"/>
|
|
|
|
|
</el-form-item> -->
|
|
|
|
|
<!-- <el-form-item label="物料条码" prop="materialBarcode">
|
|
|
|
|
<el-input v-model="queryParams.materialBarcode" placeholder="请输入物料条码" clearable @keyup.enter.native="handleQuery"/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="物料规格" prop="materialSpec">
|
|
|
|
|
<el-input v-model="queryParams.materialSpec" placeholder="请输入物料规格" clearable @keyup.enter.native="handleQuery"/>
|
|
|
|
|
</el-form-item> -->
|
|
|
|
|
<!-- <el-form-item label="物料类目" prop="materialKind">
|
|
|
|
|
<el-input v-model="queryParams.materialKind" placeholder="请输入物料类目" clearable @keyup.enter.native="handleQuery"/>
|
|
|
|
|
</el-form-item> -->
|
|
|
|
|
<el-form-item label="存货类型" prop="inventoryType">
|
|
|
|
|
<el-select v-model="queryParams.inventoryType" placeholder="请选择存货类型(0：原材料 1：半成品 2：产成品)" clearable size="small">
|
|
|
|
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.MATERIAL_INVENTORY_TYPE)"
|
|
|
|
|
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="物料状态" prop="materialState">
|
|
|
|
|
<el-select v-model="queryParams.materialState" placeholder="请选择物料状态(0：上架 1：下架)" clearable size="small">
|
|
|
|
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.MATERIAL_STATUS1)"
|
|
|
|
|
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="销售状态" prop="saleState">
|
|
|
|
|
<el-select v-model="queryParams.saleState" placeholder="请选择销售状态(0：销售中 1：已售罄 2：仓库中)" clearable size="small">
|
|
|
|
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.MATERIAL_SALE_STATUS)"
|
|
|
|
|
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- <el-form-item label="物料分类id" prop="materialCategoryId">
|
|
|
|
|
<el-input v-model="queryParams.materialCategoryId" placeholder="请输入物料分类id" clearable @keyup.enter.native="handleQuery"/>
|
|
|
|
|
</el-form-item> -->
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|
|
|
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<!-- 操作工具栏 -->
|
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
|
|
|
<el-col :span="1.5">
|
|
|
|
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
|
|
|
|
v-hasPermi="['xxjj:material:create']">新增</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="1.5">
|
|
|
|
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
|
|
|
|
v-hasPermi="['xxjj:material:export']">导出</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-tabs v-model="activeTabs" @tab-click="handleClick">
|
|
|
|
|
<!-- 全部 -->
|
|
|
|
|
<el-tab-pane label="全部" name="all">
|
|
|
|
|
<!-- 列表 -->
|
|
|
|
|
<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange" sortable custom-column stripe :cell-class-name="addSeparate">
|
|
|
|
|
<el-table-column type="selection" width="55"></el-table-column>
|
|
|
|
|
<!-- <el-table-column label="编号" align="center" prop="id" /> -->
|
|
|
|
|
<el-table-column label="产品名称" width="250px" >
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<div class="material-info">
|
|
|
|
|
<ImagePreview :src="scope.row.materialPictures" class="img-height" />
|
|
|
|
|
<el-link type="primary" :underline="false" class="message">{{ scope.row.materialName }}</el-link>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column label="物料编码" align="center" prop="materialCode" /> -->
|
|
|
|
|
<!-- <el-table-column label="物料图片" align="center" prop="materialPictures" /> -->
|
|
|
|
|
<el-table-column label="产品类型" align="center" prop="materialTypeId" sortable />
|
|
|
|
|
<!-- <el-table-column label="物料行业" align="center" prop="materialIndustryId" /> -->
|
|
|
|
|
<!-- <el-table-column label="物料规格" align="center" prop="materialSpec" sortable /> -->
|
|
|
|
|
<el-table-column label="产品分类" align="center" prop="materialCategoryId" sortable />
|
|
|
|
|
<el-table-column label="产品类目" align="center" prop="materialKind" sortable />
|
|
|
|
|
<el-table-column label="存货类型" align="center" prop="inventoryType" sortable >
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<dict-tag :type="DICT_TYPE.MATERIAL_INVENTORY_TYPE" :value="scope.row.inventoryType" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="状态" align="center" prop="materialState" sortable >
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<dict-tag :type="DICT_TYPE.MATERIAL_STATUS1" :value="scope.row.materialState" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="销售状态" align="center" prop="saleState" sortable >
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<dict-tag :type="DICT_TYPE.MATERIAL_SALE_STATUS" :value="scope.row.saleState" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column label="品牌id" align="center" prop="materialBrandId" /> -->
|
|
|
|
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column label="物料英文名称" align="center" prop="materialEnglishName" width="120px"/>
|
|
|
|
|
<el-table-column label="物料简称" align="center" prop="materialAbbreviation" />
|
|
|
|
|
<el-table-column label="物料条码" align="center" prop="materialBarcode" /> -->
|
|
|
|
|
<el-table-column label="操作" align="center" width="200px" class-name="small-padding fixed-width" fixed="right">
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
|
|
|
|
v-hasPermi="['xxjj:material:update']">修改</el-button>
|
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpOrDown(scope.row)"
|
|
|
|
|
>{{scope.row.materialState == 0 ? '下架' : '上架'}}</el-button>
|
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
|
|
|
|
v-hasPermi="['xxjj:material:delete']">删除</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<!-- 已上架 -->
|
|
|
|
|
<el-tab-pane label="已上架" name="up">
|
|
|
|
|
<!-- 列表 -->
|
|
|
|
|
<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange" sortable custom-column :cell-class-name="addSeparate">
|
|
|
|
|
<el-table-column type="selection" width="55"></el-table-column>
|
|
|
|
|
<!-- <el-table-column label="编号" align="center" prop="id" /> -->
|
|
|
|
|
<el-table-column label="产品名称" width="250px" >
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<div class="material-info">
|
|
|
|
|
<ImagePreview :src="scope.row.materialPictures" class="img-height" />
|
|
|
|
|
<el-link type="primary" :underline="false" class="message">{{ scope.row.materialName }}</el-link>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column label="物料编码" align="center" prop="materialCode" /> -->
|
|
|
|
|
<!-- <el-table-column label="物料图片" align="center" prop="materialPictures" /> -->
|
|
|
|
|
<el-table-column label="产品类型" align="center" prop="materialTypeId" sortable />
|
|
|
|
|
<!-- <el-table-column label="物料行业" align="center" prop="materialIndustryId" /> -->
|
|
|
|
|
<!-- <el-table-column label="物料规格" align="center" prop="materialSpec" /> -->
|
|
|
|
|
<el-table-column label="产品分类" align="center" prop="materialCategoryId" sortable />
|
|
|
|
|
<el-table-column label="产品类目" align="center" prop="materialKind" sortable />
|
|
|
|
|
<el-table-column label="存货类型" align="center" prop="inventoryType" sortable >
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<dict-tag :type="DICT_TYPE.MATERIAL_INVENTORY_TYPE" :value="scope.row.inventoryType" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="状态" align="center" prop="materialState" sortable >
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<dict-tag :type="DICT_TYPE.MATERIAL_STATUS1" :value="scope.row.materialState" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="销售状态" align="center" prop="saleState" sortable >
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<dict-tag :type="DICT_TYPE.MATERIAL_SALE_STATUS" :value="scope.row.saleState" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column label="品牌id" align="center" prop="materialBrandId" /> -->
|
|
|
|
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column label="物料英文名称" align="center" prop="materialEnglishName" width="120px"/>
|
|
|
|
|
<el-table-column label="物料简称" align="center" prop="materialAbbreviation" />
|
|
|
|
|
<el-table-column label="物料条码" align="center" prop="materialBarcode" /> -->
|
|
|
|
|
<el-table-column label="操作" align="center" width="200px" class-name="small-padding fixed-width">
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
|
|
|
|
v-hasPermi="['xxjj:material:update']">修改</el-button>
|
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpOrDown(scope.row)"
|
|
|
|
|
>{{scope.row.materialState == 0 ? '下架' : '上架'}}</el-button>
|
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
|
|
|
|
v-hasPermi="['xxjj:material:delete']">删除</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<!-- 已下架 -->
|
|
|
|
|
<el-tab-pane label="已下架" name="down">
|
|
|
|
|
<!-- 列表 -->
|
|
|
|
|
<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange" sortable custom-column :cell-class-name="addSeparate">
|
|
|
|
|
<el-table-column type="selection" width="55"></el-table-column>
|
|
|
|
|
<!-- <el-table-column label="编号" align="center" prop="id" /> -->
|
|
|
|
|
<el-table-column label="产品名称" width="250px" >
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<div class="material-info">
|
|
|
|
|
<ImagePreview :src="scope.row.materialPictures" class="img-height" />
|
|
|
|
|
<el-link type="primary" :underline="false" class="message">{{ scope.row.materialName }}</el-link>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column label="物料编码" align="center" prop="materialCode" /> -->
|
|
|
|
|
<!-- <el-table-column label="物料图片" align="center" prop="materialPictures" /> -->
|
|
|
|
|
<el-table-column label="产品类型" align="center" prop="materialTypeId" sortable />
|
|
|
|
|
<!-- <el-table-column label="物料行业" align="center" prop="materialIndustryId" /> -->
|
|
|
|
|
<!-- <el-table-column label="物料规格" align="center" prop="materialSpec" /> -->
|
|
|
|
|
<el-table-column label="产品分类" align="center" prop="materialCategoryId" sortable />
|
|
|
|
|
<el-table-column label="产品类目" align="center" prop="materialKind" sortable />
|
|
|
|
|
<el-table-column label="存货类型" align="center" prop="inventoryType" sortable >
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<dict-tag :type="DICT_TYPE.MATERIAL_INVENTORY_TYPE" :value="scope.row.inventoryType" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="物料状态" align="center" prop="materialState" sortable >
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<dict-tag :type="DICT_TYPE.MATERIAL_STATUS1" :value="scope.row.materialState" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="销售状态" align="center" prop="saleState" sortable >
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<dict-tag :type="DICT_TYPE.MATERIAL_SALE_STATUS" :value="scope.row.saleState" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column label="品牌id" align="center" prop="materialBrandId" /> -->
|
|
|
|
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column label="物料英文名称" align="center" prop="materialEnglishName" width="120px"/>
|
|
|
|
|
<el-table-column label="物料简称" align="center" prop="materialAbbreviation" />
|
|
|
|
|
<el-table-column label="物料条码" align="center" prop="materialBarcode" /> -->
|
|
|
|
|
<el-table-column label="操作" align="center" width="200px" class-name="small-padding fixed-width">
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
|
|
|
|
v-hasPermi="['xxjj:material:update']">修改</el-button>
|
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpOrDown(scope.row)"
|
|
|
|
|
>{{scope.row.materialState == 0 ? '下架' : '上架'}}</el-button>
|
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
|
|
|
|
v-hasPermi="['xxjj:material:delete']">删除</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
<!-- 分页组件 -->
|
|
|
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
|
|
|
|
@pagination="getList"/>
|
|
|
|
|
|
|
|
|
|
<!-- 对话框(添加 / 修改) -->
|
|
|
|
|
<el-dialog :title="title" :visible.sync="open" width="1300px" v-dialogDrag append-to-body>
|
|
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px" style="width: 95%">
|
|
|
|
|
<el-row :gutter="15" class="">
|
|
|
|
|
<template v-if="!loading">
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-form-item label="产品图片" prop="materialPictures">
|
|
|
|
|
<ImageUpload v-model="form.materialPictures" :value="form.materialPictures" :limit="10" class="mall-image"/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="产品编码" prop="materialCode">
|
|
|
|
|
<!-- <div class="itemName">物料编码</div> -->
|
|
|
|
|
<el-input v-model="form.materialCode" placeholder="请输入物料编码" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="产品名称" prop="materialName">
|
|
|
|
|
<el-input v-model="form.materialName" placeholder="请输入物料名称" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="产品简称" prop="materialAbbreviation">
|
|
|
|
|
<el-input v-model="form.materialAbbreviation" placeholder="请输入物料简称" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="产品英文名称" prop="materialEnglishName">
|
|
|
|
|
<el-input v-model="form.materialEnglishName" placeholder="请输入物料英文名称" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="产品条码" prop="materialBarcode">
|
|
|
|
|
<el-input v-model="form.materialBarcode" placeholder="请输入物料条码" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="产品规格" prop="materialSpec">
|
|
|
|
|
<el-input v-model="form.materialSpec" placeholder="请输入物料规格" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="存货类型" prop="inventoryType">
|
|
|
|
|
<el-select v-model="form.inventoryType" placeholder="请选择存货类型(0：原材料 1：半成品 2：产成品)">
|
|
|
|
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.MATERIAL_INVENTORY_TYPE)"
|
|
|
|
|
:key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="品牌" prop="materialBrandId">
|
|
|
|
|
<el-input v-model="form.materialBrandId" placeholder="请输入品牌" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<!-- <el-form-item label="物料分类id" prop="materialTypeId">
|
|
|
|
|
<el-input v-model="form.materialTypeId" placeholder="请输入物料分类id" />
|
|
|
|
|
</el-form-item> -->
|
|
|
|
|
<el-form-item label="产品分类" prop="materialCategoryIds">
|
|
|
|
|
<el-cascader v-model="form.materialCategoryIds" placeholder="物料分类" style="width: 100%"
|
|
|
|
|
:options="categoryList" :props="propName" clearable/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="产品类目" prop="materialKind">
|
|
|
|
|
<el-input v-model="form.materialKind" placeholder="请输入物料类目" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="行业id" prop="materialIndustryId">
|
|
|
|
|
<el-input v-model="form.materialIndustryId" placeholder="请输入行业id" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="物料状态" prop="materialState">
|
|
|
|
|
<el-select v-model="form.materialState" placeholder="请选择物料状态(0：上架 1：下架)">
|
|
|
|
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.MATERIAL_STATUS1)"
|
|
|
|
|
:key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="销售状态" prop="saleState">
|
|
|
|
|
<el-select v-model="form.saleState" placeholder="请选择销售状态(0：销售中 1：已售罄 2：仓库中)">
|
|
|
|
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.MATERIAL_SALE_STATUS)"
|
|
|
|
|
:key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</template>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
|
|
<el-button @click="cancel">取 消</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { createMaterial, updateMaterial, deleteMaterial, getMaterial, getMaterialPage, exportMaterialExcel } from "@/api/xxjj/material";
|
|
|
|
|
import {MaterialStatusEnum} from "@/utils/constants";
|
|
|
|
|
import ImageUpload from "@/components/ImageUpload";
|
|
|
|
|
import ImagePreview from "@/components/ImagePreview";
|
|
|
|
|
import {listMaterialCategory} from "@/api/xxjj/material/materialCategory";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "Material",
|
|
|
|
|
components: {
|
|
|
|
|
ImageUpload,
|
|
|
|
|
ImagePreview
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
picture: "",
|
|
|
|
|
categoryList: [],
|
|
|
|
|
activeTabs: "all",
|
|
|
|
|
propName: {
|
|
|
|
|
checkStrictly: true,
|
|
|
|
|
label: "name",
|
|
|
|
|
value: "id",
|
|
|
|
|
},
|
|
|
|
|
// 遮罩层
|
|
|
|
|
loading: true,
|
|
|
|
|
// 导出遮罩层
|
|
|
|
|
exportLoading: false,
|
|
|
|
|
// 显示搜索条件
|
|
|
|
|
showSearch: true,
|
|
|
|
|
// 总条数
|
|
|
|
|
total: 0,
|
|
|
|
|
// 物料列表
|
|
|
|
|
list: [],
|
|
|
|
|
// 弹出层标题
|
|
|
|
|
title: "",
|
|
|
|
|
// 是否显示弹出层
|
|
|
|
|
open: false,
|
|
|
|
|
// 查询参数
|
|
|
|
|
queryParams: {
|
|
|
|
|
pageNo: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
materialCode: null,
|
|
|
|
|
materialName: null,
|
|
|
|
|
materialPictures: null,
|
|
|
|
|
materialTypeId: null,
|
|
|
|
|
materialIndustryId: null,
|
|
|
|
|
materialBrandId: null,
|
|
|
|
|
createTime: [],
|
|
|
|
|
materialEnglishName: null,
|
|
|
|
|
materialAbbreviation: null,
|
|
|
|
|
materialBarcode: null,
|
|
|
|
|
materialSpec: null,
|
|
|
|
|
materialKind: null,
|
|
|
|
|
inventoryType: null,
|
|
|
|
|
materialState: null,
|
|
|
|
|
saleState: null,
|
|
|
|
|
materialCategoryId: null,
|
|
|
|
|
materialCategoryIds: null,
|
|
|
|
|
},
|
|
|
|
|
// 表单参数
|
|
|
|
|
form: {},
|
|
|
|
|
addSeparate(row) {
|
|
|
|
|
if (row.columnIndex == 0 || row.columnIndex == 1 || row.columnIndex == 8) {
|
|
|
|
|
return "separator-border"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 表单校验
|
|
|
|
|
rules: {
|
|
|
|
|
materialCategoryIds: [{required: true, message: "物料分类不能为空", trigger: "blur"},],
|
|
|
|
|
materialCode: [{ required: true, message: "物料编码不能为空", trigger: "blur" }],
|
|
|
|
|
materialName: [{ required: true, message: "物料名称不能为空", trigger: "blur" }],
|
|
|
|
|
materialPictures: [{ required: true, message: "物料图片不能为空", trigger: "blur" }],
|
|
|
|
|
// materialTypeId: [{ required: true, message: "物料分类id不能为空", trigger: "blur" }],
|
|
|
|
|
materialIndustryId: [{ required: true, message: "行业id不能为空", trigger: "blur" }],
|
|
|
|
|
materialBrandId: [{ required: true, message: "品牌id不能为空", trigger: "blur" }],
|
|
|
|
|
materialBarcode: [{ required: true, message: "物料条码不能为空", trigger: "blur" }],
|
|
|
|
|
materialSpec: [{ required: true, message: "物料规格不能为空", trigger: "blur" }],
|
|
|
|
|
materialKind: [{ required: true, message: "物料类目不能为空", trigger: "blur" }],
|
|
|
|
|
inventoryType: [{ required: true, message: "存货类型(0：原材料 1：半成品 2：产成品)不能为空", trigger: "change" }],
|
|
|
|
|
materialState: [{ required: true, message: "物料状态(0：上架 1：下架)不能为空", trigger: "change" }],
|
|
|
|
|
saleState: [{ required: true, message: "销售状态(0：销售中 1：已售罄 2：仓库中)不能为空", trigger: "change" }],
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getList();
|
|
|
|
|
this.getListCategory();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
/** 查询分类 */
|
|
|
|
|
getListCategory() {
|
|
|
|
|
// 执行查询
|
|
|
|
|
listMaterialCategory().then((response) => {
|
|
|
|
|
this.categoryList = this.handleTree(response.data, "id", "parentId");
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 点击上架,下架
|
|
|
|
|
handleUpOrDown(row) {
|
|
|
|
|
if (row.materialState == 1) {
|
|
|
|
|
this.$confirm('你确定要上架该商品吗', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(async () => {
|
|
|
|
|
try {
|
|
|
|
|
row.materialState = 0
|
|
|
|
|
updateMaterial(row).then(response => {
|
|
|
|
|
this.$modal.msgSuccess("上架成功");
|
|
|
|
|
this.open = false;
|
|
|
|
|
this.getList();
|
|
|
|
|
});
|
|
|
|
|
} catch (err) {
|
|
|
|
|
this.$message.error('上架失败')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else if (row.materialState == 0) {
|
|
|
|
|
this.$confirm('你确定要下架该商品吗', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(async () => {
|
|
|
|
|
try {
|
|
|
|
|
row.materialState = 1
|
|
|
|
|
updateMaterial(row).then(response => {
|
|
|
|
|
this.$modal.msgSuccess("下架成功");
|
|
|
|
|
this.open = false;
|
|
|
|
|
this.getList();
|
|
|
|
|
});
|
|
|
|
|
} catch (err) {
|
|
|
|
|
this.$message.error('下架失败')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//表单选择框
|
|
|
|
|
handleSelectionChange(val) {
|
|
|
|
|
this.multipleSelection = val;
|
|
|
|
|
},
|
|
|
|
|
// 选中 tab
|
|
|
|
|
handleClick(val) {
|
|
|
|
|
if (val.name === "all") {
|
|
|
|
|
this.queryParams.materialState = undefined;
|
|
|
|
|
this.queryParams.alarmStock = undefined;
|
|
|
|
|
} else if (val.name === "up") {
|
|
|
|
|
this.queryParams.materialState = MaterialStatusEnum.UP.status;
|
|
|
|
|
this.queryParams.alarmStock = undefined;
|
|
|
|
|
} else if (val.name === "down") {
|
|
|
|
|
this.queryParams.materialState = MaterialStatusEnum.DOWN.status;
|
|
|
|
|
this.queryParams.alarmStock = undefined;
|
|
|
|
|
}
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
/** 查询列表 */
|
|
|
|
|
getList() {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
// 执行查询
|
|
|
|
|
getMaterialPage(this.queryParams).then(response => {
|
|
|
|
|
this.list = response.data.list;
|
|
|
|
|
this.total = response.data.total;
|
|
|
|
|
this.loading = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
/** 取消按钮 */
|
|
|
|
|
cancel() {
|
|
|
|
|
this.open = false;
|
|
|
|
|
this.reset();
|
|
|
|
|
},
|
|
|
|
|
/** 表单重置 */
|
|
|
|
|
reset() {
|
|
|
|
|
this.form = {
|
|
|
|
|
id: undefined,
|
|
|
|
|
materialCode: undefined,
|
|
|
|
|
materialName: undefined,
|
|
|
|
|
materialPictures: undefined,
|
|
|
|
|
materialTypeId: undefined,
|
|
|
|
|
materialIndustryId: undefined,
|
|
|
|
|
materialEnglishName: undefined,
|
|
|
|
|
materialAbbreviation: undefined,
|
|
|
|
|
materialBarcode: undefined,
|
|
|
|
|
materialSpec: undefined,
|
|
|
|
|
materialKind: undefined,
|
|
|
|
|
inventoryType: undefined,
|
|
|
|
|
materialState: undefined,
|
|
|
|
|
saleState: undefined,
|
|
|
|
|
materialCategoryId: undefined,
|
|
|
|
|
materialCategoryIds: undefined,
|
|
|
|
|
};
|
|
|
|
|
this.resetForm("form");
|
|
|
|
|
},
|
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
|
handleQuery() {
|
|
|
|
|
this.queryParams.pageNo = 1;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
|
resetQuery() {
|
|
|
|
|
this.resetForm("queryForm");
|
|
|
|
|
this.handleQuery();
|
|
|
|
|
},
|
|
|
|
|
/** 新增按钮操作 */
|
|
|
|
|
handleAdd() {
|
|
|
|
|
this.reset();
|
|
|
|
|
this.open = true;
|
|
|
|
|
this.title = "添加物料";
|
|
|
|
|
},
|
|
|
|
|
/** 修改按钮操作 */
|
|
|
|
|
handleUpdate(row) {
|
|
|
|
|
this.reset();
|
|
|
|
|
const id = row.id;
|
|
|
|
|
getMaterial(id).then(response => {
|
|
|
|
|
this.form = response.data;
|
|
|
|
|
this.form.materialCategoryIds = this.form.materialCategoryId
|
|
|
|
|
this.open = true;
|
|
|
|
|
this.title = "修改物料";
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
/** 提交按钮 */
|
|
|
|
|
submitForm() {
|
|
|
|
|
this.$refs["form"].validate(valid => {
|
|
|
|
|
if (!valid) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
let form = this.form
|
|
|
|
|
let category = form.materialCategoryIds instanceof Array ? form.materialCategoryIds: Array.of(form.materialCategoryIds)
|
|
|
|
|
this.form.materialCategoryId = category[category.length - 1];
|
|
|
|
|
this.form.distinct = 1
|
|
|
|
|
// 修改的提交
|
|
|
|
|
if (this.form.id != null) {
|
|
|
|
|
updateMaterial(this.form).then(response => {
|
|
|
|
|
this.$modal.msgSuccess("修改成功");
|
|
|
|
|
this.open = false;
|
|
|
|
|
this.getList();
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 添加的提交
|
|
|
|
|
createMaterial(this.form).then(response => {
|
|
|
|
|
this.$modal.msgSuccess("新增成功");
|
|
|
|
|
this.open = false;
|
|
|
|
|
this.getList();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
/** 删除按钮操作 */
|
|
|
|
|
handleDelete(row) {
|
|
|
|
|
const id = row.id;
|
|
|
|
|
this.$modal.confirm('是否确认删除物料编号为"' + id + '"的数据项?').then(function() {
|
|
|
|
|
return deleteMaterial(id);
|
|
|
|
|
}).then(() => {
|
|
|
|
|
this.getList();
|
|
|
|
|
this.$modal.msgSuccess("删除成功");
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
},
|
|
|
|
|
/** 导出按钮操作 */
|
|
|
|
|
handleExport() {
|
|
|
|
|
// 处理查询参数
|
|
|
|
|
let params = {...this.queryParams};
|
|
|
|
|
params.pageNo = undefined;
|
|
|
|
|
params.pageSize = undefined;
|
|
|
|
|
this.$modal.confirm('是否确认导出所有物料数据项?').then(() => {
|
|
|
|
|
this.exportLoading = true;
|
|
|
|
|
return exportMaterialExcel(params);
|
|
|
|
|
}).then(response => {
|
|
|
|
|
this.$download.excel(response, '物料.xls');
|
|
|
|
|
this.exportLoading = false;
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
.app-container {
|
|
|
|
|
.el-tag + .el-tag {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
.separator-border {
|
|
|
|
|
border-right: 1px solid #eeeff2!important;
|
|
|
|
|
}
|
|
|
|
|
.material-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.img-height {
|
|
|
|
|
height: 50px;
|
|
|
|
|
width: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.message {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
-webkit-line-clamp: 2;
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
white-space: normal;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
height: 50px;
|
|
|
|
|
line-height: 25px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
