<template>
|
<div class="app-container">
|
|
<div class="filter-container">
|
|
<el-row>
|
<el-input v-model="queryForm.name" class="filter-item" placeholder="产品名称" style="width: 30%;float: left"
|
@keyup.enter.native="queryHandle"/>
|
<el-select v-model="queryForm.manufacturer" filterable placeholder="请选择" style="float: left;margin-left: 10px">
|
<el-option
|
v-for="item in manufacturerTree"
|
:key="item.attributes"
|
:label="item.text"
|
:value="item.text">
|
</el-option>
|
</el-select>
|
</el-row>
|
<el-row>
|
<el-input v-model="queryForm.directionCode" class="filter-item" placeholder="流向码" style="width: 30%;float: left"
|
@keyup.enter.native="queryHandle"/>
|
<el-select v-model="queryForm.type" clearable placeholder="请选择" style="float: left;margin-left: 10px"
|
@change="getProductSecondaryCategory">
|
<el-option
|
class="filter-item"
|
v-for="item in typeOptions"
|
:key="item.attributes"
|
:label="item.text"
|
:value="item.attributes">{{item.text}}
|
</el-option>
|
</el-select>
|
<el-select v-model="queryForm.secondaryType" clearable placeholder="请选择" style="float: left;margin-left: 10px">
|
<el-option
|
v-for="item in secondaryOptions"
|
:key="item.attributes"
|
:label="item.text"
|
:value="item.attributes">
|
</el-option>
|
</el-select>
|
<el-button v-if="getBtnPermission('add')" class="filter-item" style="margin-left: 10px;" type="primary"
|
icon="el-icon-plus" @click="showCreateHandle">旧系统信息录入
|
</el-button>
|
<el-upload v-if="userType === 1"
|
class="filter-item"
|
ref="upload"
|
:headers="headers"
|
:action="actionUrlPrefixx+'/product/import/old-system'"
|
:before-upload="beforeUploadHandler"
|
:file-list="fileList"
|
:limit="1"
|
:show-file-list="false"
|
:on-success="onSuccessHandler"
|
:on-error="onErrorHandler"
|
:auto-upload="true">
|
<el-dropdown @command="handleCommand" split-button trigger="hover" type="primary" style="margin-left: 10px;" icon="el-icon-plus" :disabled="uploadBtnControl">旧系统信息导入
|
<el-button type="primary" slot="trigger" :disabled="uploadBtnControl"></el-button>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item icon="el-icon-plus" command="download" >下载模板</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
|
</el-upload>
|
<el-button v-if="getBtnPermission('add')" class="filter-item" style="margin-left: 10px;" type="primary"
|
icon="el-icon-plus" @click="showCreateNewHandle">新增
|
</el-button>
|
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-refresh"
|
@click="refreshHandle">刷新
|
</el-button>
|
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search"
|
@click="queryHandle"/>
|
</el-row>
|
|
</div>
|
<div class="table_content">
|
<el-table
|
v-loading="listLoading"
|
:key="tableKey"
|
:data="productData"
|
border
|
fit
|
highlight-current-row
|
style="width: 100%;"
|
@sort-change="sortChange"
|
>
|
<!-- <el-table-column type="selection" width="55">
|
</el-table-column> -->
|
<el-table-column type="index" label="序号" align="center" width="80"/>
|
<el-table-column label="产品名称" prop="name" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.name }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="流向码" prop="directionCode" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.directionCode }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="生产厂家" prop="manufacturer" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.manufacturer }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="规格" prop="specification" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.specification }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="单挂（个）含药量" prop="explosiveContent" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.explosiveContent }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="大类" prop="type" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.type }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="小类" prop="secondaryType" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.secondaryType }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="产品级别" prop="level" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.level }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="箱含量" prop="boxNumber" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.boxNumber }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="生产日期" prop="createdDate" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.productDate | parseTime('{y}-{m}-{d}') }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button v-if="getBtnPermission('edit')" type="text" @click="showEditHandle(scope.row)">查看</el-button>
|
<el-button v-if="getBtnPermission('delete')" type="text" style="color:red;"
|
@click="deleteHandle(scope.row)">删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<br>
|
<el-pagination
|
v-show="recordTotal>0"
|
:current-page="currentPage"
|
:page-sizes="[10, 20, 30, 50]"
|
:page-size="pageSize"
|
:total="recordTotal"
|
layout="total, sizes, prev, pager, next, jumper"
|
background
|
style="float:right;"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
<el-dialog :title="dialogStatus==='create'|| dialogStatus === 'createNew'?'新增':'查看'" :visible.sync="dialogFormVisible"
|
:modal-append-to-body="false" :close-on-click-modal="false" width="700px">
|
<el-form ref="dataForm" :rules="dataFormRules" :model="dataForm" label-position="right" label-width="140px"
|
style="margin-left:50px;width:500px;" element-loading-text="保存中...">
|
<el-form-item label="流向码:" prop="directionCode" v-if="dialogStatus!=='createNew'">
|
<el-input v-model="dataForm.directionCode" :disabled="dialogStatus!=='create'"/>
|
</el-form-item>
|
<el-form-item label="产品名称:" prop="name">
|
<el-input v-model="dataForm.name" :disabled="dialogStatus==='editor'"></el-input>
|
</el-form-item>
|
<el-form-item label="产品大类:" prop="type">
|
<el-select v-model="dataForm.type" clearable placeholder="请选择" :disabled="dialogStatus==='editor'"
|
@change="getProductSecondaryCategory">
|
<el-option
|
v-for="item in typeOptions"
|
:key="item.attributes"
|
:label="item.text"
|
:value="item.attributes">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="产品小类:" prop="type">
|
<el-select v-model="dataForm.secondaryType" clearable placeholder="请选择" :disabled="dialogStatus==='editor'"
|
@change="selectChange">
|
<el-option
|
v-for="item in secondaryOptions"
|
:key="item.attributes"
|
:value="item.attributes">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="产品级别:" prop="level">
|
<el-select v-model="dataForm.level" clearable placeholder="请选择" :disabled="dialogStatus==='editor'">
|
<el-option
|
v-for="item in permitLevelOptions"
|
:key="item.attributes"
|
:label="item.attributes"
|
:value="item.attributes">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="生产厂家:" prop="manufacturer">
|
<el-select v-model="dataForm.manufacturer" filterable placeholder="请选择" :disabled="dialogStatus==='editor'">
|
<el-option
|
v-for="item in manufacturerTree"
|
:key="item.attributes"
|
:label="item.text"
|
:value="item.attributes">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="规格:" prop="specification">
|
<el-input-number v-if="dialogStatus==='createNew'" :controls="false"
|
v-model.number="dataForm.specification" :disabled="dialogStatus==='editor'"/>
|
<el-input v-else="dialogStatus==='create'" v-model="dataForm.specification" :disabled="dialogStatus==='editor'"/>
|
<br>
|
<span v-show="dialogStatus !== 'create'" style="font-size: 12px;color: red">(如单挂鞭炮2000发，则填2000)</span>
|
</el-form-item>
|
<el-form-item :label="dialogStatus === 'createNew' ? '最小单位含药量:':'含药量:'" prop="explosiveContent">
|
<el-input-number v-model.number="dataForm.explosiveContent" :controls="false" :disabled="dialogStatus==='editor'"/>
|
<span> g</span>
|
<br>
|
<span v-show="dialogStatus !== 'create'" style="font-size: 12px;color: red">(箱含药量 = 最小单位含药量×规格×箱含量，如单发鞭炮含药量为0.5g，则填写0.5)</span>
|
</el-form-item>
|
<el-form-item label="箱含量:" prop="boxNumber">
|
<el-input-number v-model.number="dataForm.boxNumber" :controls="false" :disabled="dialogStatus==='editor'"/>
|
</el-form-item>
|
<el-form-item label="包装方式:" prop="packing">
|
<el-input v-model="dataForm.packing"/>
|
</el-form-item>
|
<el-form-item label="生产日期:" prop="productDate">
|
<el-date-picker
|
v-model="dataForm.productDate"
|
type="date"
|
value-format="yyyy-MM-dd"
|
placeholder="选择日期"
|
:disabled="dialogStatus==='editor'">
|
</el-date-picker>
|
</el-form-item>
|
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
<el-button type="primary" @click="submitHandle">确认</el-button>
|
</div>
|
</el-dialog>
|
<div style="clear: both;"></div>
|
</div>
|
</template>
|
|
<script>
|
import Cookies from 'js-cookie'
|
import {checkBtnPermission} from "../../utils/permission";
|
import {
|
createNewProduct,
|
createProduct,
|
deleteProduct,
|
getMajorCategoryTree,
|
getManufacturerTree, getPermitLevelTree, getSecondaryCategoryTree,
|
productList,
|
updateProduct
|
} from "../../api/product";
|
import {parseError} from "../../utils/messageDialog";
|
import {computePageCount} from "../../utils";
|
import {mapGetters} from "vuex";
|
import {dictionaryAllItems} from '@/api/dictionary'
|
import {MessageBox} from 'element-ui'
|
import { getToken } from '@/utils/auth'
|
const exampleFile = require('@/assets/example/product.xlsx')
|
|
export default {
|
name: "product",
|
data() {
|
return {
|
pageSize: 10,
|
recordTotal: 0,
|
currentPage: 1,
|
pageTotal: 0,
|
tableKey: 0,
|
fileList:[],
|
uploadBtnControl:false,
|
actionUrlPrefixx:process.env.BASE_API,
|
headers:{'Authorization':getToken()},
|
productData: null,
|
listLoading: true,
|
manufacturerTree: [],
|
dataForm: {
|
id: '',
|
name: '',
|
type: '',
|
secondaryType:'',
|
directionCode: '',
|
manufacturer: '',
|
specification: '',
|
explosiveContent: '',
|
level: '',
|
packing: '',
|
boxNumber: '',
|
productDate: ''
|
},
|
queryForm: {
|
name: '',
|
manufacturer: '',
|
directionCode: '',
|
type: '',
|
secondaryType:'',
|
},
|
dialogFormVisible: false,
|
dialogStatus: '',
|
dataFormRules: {
|
name: [{required: true, message: '产品名不能为空', trigger: 'blur'}],
|
type: [{required: true, message: '产品类型不能为空', trigger: 'blur'}],
|
manufacturer: [{required: true, message: '生产厂家不能为空', trigger: 'blur'}],
|
specification: [{required: true, message: '规格不能为空', trigger: 'blur'}],
|
explosiveContent: [{required: true, message: '含药量不能为空', trigger: 'blur'}],
|
level: [{required: true, message: '产品级别不能为空', trigger: 'blur'}],
|
boxNumber: [{required: true, message: '箱含量不能为空', trigger: 'blur'}],
|
productDate: [{required: true, message: '生产日期不能为空', trigger: 'blur'}],
|
},
|
levelOptions: [],
|
permitLevelOptions:[],
|
typeOptions: [],
|
secondaryOptions:[],
|
|
}
|
},
|
created() {
|
this.getProductList();
|
this.getDictionaryItemLevelList();
|
this.getProductMajorCategory();
|
},
|
mounted() {
|
getManufacturerTree().then(res => {
|
this.manufacturerTree = (res.data);
|
})
|
},
|
computed: {
|
...mapGetters([
|
'userType',
|
'username'
|
])
|
},
|
methods: {
|
async selectChange(){
|
this.$forceUpdate();
|
this.dataForm.level = '';
|
let res = await getPermitLevelTree(this.dataForm.secondaryType);
|
this.permitLevelOptions = res.data;
|
},
|
getProductMajorCategory(){
|
getMajorCategoryTree().then(res=>{
|
this.typeOptions = res.data;
|
})
|
},
|
getProductSecondaryCategory(major){
|
this.secondaryOptions = [];
|
this.queryForm.secondaryType = '';
|
this.dataForm.secondaryType = '';
|
this.dataForm.level = '';
|
getSecondaryCategoryTree(major).then(res=>{
|
this.secondaryOptions = res.data;
|
})
|
},
|
getDictionaryItemLevelList() {
|
const _this = this
|
if (_this.levelOptions && _this.levelOptions.length > 0) {
|
return
|
}
|
const params = {}
|
params['dictionaryType'] = '产品级别';
|
dictionaryAllItems(params).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.levelOptions = res.result
|
} else {
|
parseError({error: res.message, vm: _this})
|
}
|
}).catch(error => {
|
parseError({error: error, vm: _this})
|
})
|
},
|
getProductList() {
|
const _this = this;
|
const params = {};
|
params['pageIndex'] = _this.currentPage;
|
params['pageSize'] = _this.pageSize;
|
params['sort'] = _this.sort;
|
params['order'] = _this.order;
|
const userName = Cookies.get('userName');
|
const name = Cookies.get('name');
|
params['operator'] = name + '(' + userName + ')';
|
for (const i in _this.queryForm) {
|
if (_this.queryForm[i] != undefined && _this.queryForm[i].toString() != '') {
|
params[i] = _this.queryForm[i]
|
}
|
}
|
_this.listLoading = true
|
productList(params).then(response => {
|
const res = response.data;
|
if (res.code === "200") {
|
const result = res.result;
|
_this.recordTotal = result.totalCount;
|
_this.pageSize = result.pageSize;
|
_this.pageTotal = computePageCount(result.totalCount, result.pageSize);
|
_this.currentPage = result.pageIndex;
|
_this.productData = result.result
|
} else {
|
parseError({error: res.message, vm: _this})
|
}
|
_this.listLoading = false
|
}).catch(error => {
|
_this.listLoading = false
|
parseError({error: error, vm: _this})
|
})
|
},
|
submitHandle:function(){
|
if (this.dialogStatus === 'create') {
|
this.createHandle();
|
}else if (this.dialogStatus === 'createNew') {
|
this.createNewHandle();
|
}else {
|
// this.updateHandle();
|
this.dialogFormVisible = false;
|
}
|
},
|
createHandle: function () {
|
const _this = this
|
const userName = Cookies.get('userName');
|
const name = Cookies.get('name');
|
this.$refs['dataForm'].validate((valid) => {
|
if (valid) {
|
_this.dataForm['createdBy'] = name + '(' + userName + ')';
|
createProduct(_this.dataForm).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.dialogFormVisible = false
|
_this.$message({
|
message: '创建成功',
|
type: 'success'
|
});
|
_this.getProductList()
|
} else {
|
parseError({error: res.message, vm: _this})
|
}
|
}).catch(error => {
|
parseError({error: error, vm: _this})
|
})
|
}
|
})
|
},
|
createNewHandle: function () {
|
const _this = this;
|
const userName = Cookies.get('userName');
|
const name = Cookies.get('name');
|
this.$refs['dataForm'].validate((valid) => {
|
if (valid) {
|
_this.dataForm['createdBy'] = name + '(' + userName + ')';
|
createNewProduct(_this.dataForm).then(response => {
|
const res = response.data;
|
if (res.code === "200") {
|
_this.dialogFormVisible = false;
|
_this.$message({
|
message: '创建成功',
|
type: 'success'
|
});
|
_this.getProductList()
|
} else {
|
parseError({error: res.message, vm: _this})
|
}
|
}).catch(error => {
|
parseError({error: error, vm: _this})
|
})
|
}
|
})
|
},
|
deleteHandle: function (row) {
|
const _this = this
|
MessageBox.confirm('确定删除信息', '确定删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
|
_this.deleteAction(row)
|
}).catch(() => {
|
console.log('已取消删除')
|
})
|
},
|
deleteAction: function (row) {
|
const _this = this;
|
const params = {}
|
params['id'] = row.id;
|
const userName = Cookies.get('userName');
|
const name = Cookies.get('name');
|
params['modifiedBy'] = name + '(' + userName + ')';
|
_this.dataFormSetValue(row);
|
deleteProduct(_this.dataForm).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
_this.getProductList()
|
} else {
|
parseError({error: res.message, vm: _this})
|
}
|
}).catch(error => {
|
parseError({error: error, vm: _this})
|
})
|
},
|
refreshHandle: function () {
|
this.getProductList()
|
},
|
queryHandle: function () {
|
// if (this.queryForm.name == '') {
|
// parseError({ error: '请输入查询条件', vm: this })
|
// return
|
// }
|
this.currentPage = 1
|
this.getProductList()
|
},
|
resetDataForm() {
|
this.dataForm = {
|
id: '',
|
name: '',
|
type: '',
|
directionCode: '',
|
manufacturer: '',
|
specification: '',
|
explosiveContent: '',
|
level: '',
|
packing: '',
|
boxNumber: '',
|
productDate: ''
|
}
|
},
|
showCreateHandle() {
|
this.resetDataForm();
|
this.dialogStatus = 'create';
|
this.dialogFormVisible = true;
|
this.$nextTick(() => {
|
this.$refs['dataForm'].clearValidate()
|
})
|
},
|
showCreateNewHandle() {
|
this.resetDataForm();
|
this.dialogStatus = 'createNew';
|
this.dialogFormVisible = true;
|
this.$nextTick(() => {
|
this.$refs['dataForm'].clearValidate()
|
})
|
},
|
updateHandle() {
|
this.$refs['dataForm'].validate((valid) => {
|
const _this = this
|
if (valid) {
|
const userName = Cookies.get('userName');
|
const name = Cookies.get('name');
|
_this.dataForm['modifiedBy'] = name + '(' + userName + ')';
|
updateProduct(_this.dataForm).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.dialogFormVisible = false
|
_this.$message({
|
message: '更新成功',
|
type: 'success'
|
});
|
_this.getProductList()
|
} else {
|
parseError({error: res.message, vm: _this})
|
}
|
}).catch(error => {
|
parseError({error: error, vm: _this})
|
})
|
}
|
})
|
},
|
showEditHandle: function (row) {
|
this.resetDataForm();
|
this.dialogStatus = 'editor';
|
this.dataFormSetValue(row);
|
this.dialogFormVisible = true;
|
this.$nextTick(() => {
|
this.$refs['dataForm'].clearValidate()
|
})
|
},
|
dataFormSetValue(row) {
|
this.dataForm.id = row.id;
|
this.dataForm.name = row.name;
|
this.dataForm.type = row.type;
|
this.dataForm.directionCode = row.directionCode;
|
this.dataForm.manufacturer = row.companyNumber;
|
this.dataForm.specification = row.specification;
|
this.dataForm.explosiveContent = row.explosiveContent;
|
this.dataForm.level = row.level;
|
this.dataForm.packing = row.packing;
|
this.dataForm.boxNumber = row.boxNumber;
|
this.dataForm.productDate = row.productDate;
|
},
|
handleSizeChange: function (val) {
|
this.pageSize = val
|
this.currentPage = 1
|
this.getProductList()
|
},
|
handleCurrentChange: function (val) {
|
this.currentPage = val
|
this.getProductList()
|
},
|
getBtnPermission(btnType) {
|
return checkBtnPermission(this.userType, btnType)
|
},
|
sortChange(param) {
|
this.sort = param.prop;
|
this.order = param.order;
|
this.getProductList();
|
},
|
beforeUploadHandler(file){
|
const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
|| file.type === 'application/vnd.ms-excel'
|
if (!isExcel) this.$message.error('上传文件须要是Excel文件');
|
if (isExcel) this.uploadBtnControl = true;
|
return isExcel
|
},
|
|
onSuccessHandler(res, file, fileList){
|
console.log(res)
|
this.fileList = []
|
this.uploadBtnControl = false
|
if (res.code === '200') {
|
this.$message.success("导入成功")
|
}
|
if (res.code === '400'){
|
this.$message.warning(res.message)
|
}
|
|
},
|
onErrorHandler(){
|
this.fileList = []
|
this.uploadBtnControl = false
|
this.$message.warning("发生错误，请联系管理员")
|
},
|
handleCommand(command) {
|
if (command === 'download')
|
window.open(exampleFile, '_blank')
|
}
|
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
