<template>
|
<div class="container">
|
<div class="filter-container">
|
<el-input v-model="categoryName" class="filter-item" placeholder="产品名称" style="width: 30%;float: left"
|
@keyup.enter.native="queryHandle"/>
|
<el-button v-if="getBtnPermission('add')" class="filter-item" style="margin-left: 10px;" type="primary"
|
icon="el-icon-plus" @click="showCreateHandle">新增
|
</el-button>
|
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search"
|
@click="queryHandle"/>
|
</div>
|
|
<div class="table_content">
|
<el-table
|
v-loading="listLoading"
|
:data="categoryData"
|
border
|
fit
|
height="800px"
|
style="width: 100%;"
|
>
|
<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="type" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ typeName (scope.row.type)}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="大类名称" prop="parentname" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.parentname}}</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="content" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.content }}</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>
|
</div>
|
|
<el-dialog :title="dialogStatus==='create'?'新增':'编辑'" :visible.sync="dialogFormVisible"
|
:modal-append-to-body="false" :close-on-click-modal="false" width="700px">
|
<el-form ref="dataForm" :model="dataForm" label-position="right" label-width="140px"
|
style="margin-left:50px;width:500px;" element-loading-text="保存中...">
|
<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="name">
|
<el-select v-model="dataForm.type" @change="majorSelect">
|
<el-option value="1" label="大类">大类</el-option>
|
<el-option value="2" label="小类">小类</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="选择大类" v-if="showMajor">
|
<el-select v-model="dataForm.parentname">
|
<el-option v-for="item in majorTree"
|
:key="item.attributes"
|
:label="item.text"
|
:value="item.text">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="选择级别">
|
<el-select v-model="levelArr" multiple>
|
<el-option v-for="item in levelOptions"
|
:key="item.attributes"
|
:label="item.text"
|
:value="item.text">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="类别信息">
|
<el-input type="textarea" :row="2" v-model="dataForm.content"></el-input>
|
</el-form-item>
|
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
<el-button type="primary" @click="dialogStatus==='create'?createHandle():updateHandle()">确认</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
addProductCategory, deleteProductCategory,
|
getMajorCategoryTree,
|
getProductCategorise,
|
updateProductCategory
|
} from "../../api/product";
|
import {parseError} from "../../utils/messageDialog";
|
import {checkBtnPermission} from "../../utils/permission";
|
import {MessageBox} from 'element-ui'
|
import {dictionaryAllItems} from "../../api/dictionary";
|
|
export default {
|
name: "productCategory",
|
data(){
|
return{
|
categoryName:"",
|
categoryData:[],
|
listLoading: true,
|
dialogStatus: '',
|
dialogFormVisible:false,
|
showMajor:false,
|
majorTree:[],
|
levelOptions:[],
|
levelArr:[],
|
|
dataForm:{
|
id:"",
|
name:"",
|
type:"",
|
parentname:"",
|
content:"",
|
level:"",
|
},
|
|
}
|
},
|
mounted(){
|
this.queryHandle();
|
this.getDictionaryItemLevelList();
|
},
|
methods:{
|
queryHandle(){
|
const _this = this;
|
_this.listLoading = true
|
getProductCategorise(_this.categoryName).then(res=>{
|
if (res.data.code === "200"){
|
_this.categoryData = res.data.result;
|
}else {
|
parseError({error: res.message, vm: _this})
|
}
|
_this.listLoading = false;
|
});
|
},
|
showCreateHandle(){
|
this.resetDataForm();
|
this.showMajor = false;
|
this.dialogStatus = 'create';
|
this.dialogFormVisible = true;
|
},
|
createHandle(){
|
const _this = this;
|
let level = '';
|
if (_this.levelArr.length > 0){
|
_this.levelArr.forEach(item=>{
|
level += item;
|
level += ",";
|
})
|
}
|
_this.dataForm.level = level;
|
addProductCategory(_this.dataForm).then(response=>{
|
const res = response.data;
|
if (res.code === "200") {
|
_this.dialogFormVisible = false;
|
_this.$message({
|
message: '新增成功',
|
type: 'success'
|
});
|
_this.queryHandle()
|
} else {
|
parseError({error: res.message, vm: _this})
|
}
|
}).catch(error => {
|
parseError({error: error, vm: _this})
|
})
|
},
|
|
updateHandle() {
|
const _this = this;
|
let level = '';
|
if (_this.levelArr.length > 0){
|
_this.levelArr.forEach(item=>{
|
level += item;
|
level += ",";
|
})
|
level = level.substring(0,level.length -1)
|
}
|
_this.dataForm.level = level;
|
updateProductCategory(_this.dataForm).then(response => {
|
const res = response.data;
|
if (res.code === "200") {
|
_this.dialogFormVisible = false;
|
_this.$message({
|
message: '更新成功',
|
type: 'success'
|
});
|
_this.queryHandle();
|
_this.resetDataForm();
|
_this.showMajor = false;
|
} 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;
|
if (row.type === 2){
|
this.showMajor = true;
|
this.dataForm.parentname = row.parentname;
|
}
|
if (row.level != null && row.level!== "") {
|
this.levelArr = row.level.split(",");
|
}
|
this.dataForm.type=row.type.toString();
|
this.dataForm.content = row.content;
|
},
|
deleteHandle:function(row){
|
const _this = this;
|
MessageBox.confirm('确定删除信息', '确定删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
_this.deleteAction(row)
|
}).catch(() => {
|
parseError('已取消删除')
|
})
|
},
|
deleteAction(row){
|
const _this = this;
|
_this.dataForm.id = row.id;
|
deleteProductCategory(row).then(response=>{
|
const res = response.data;
|
if (res.code === "200"){
|
_this.$message({
|
message: '删除成功',
|
type: 'success'
|
});
|
this.queryHandle();
|
} else {
|
parseError({error: res.message, vm: _this})
|
}
|
}).catch(error => {
|
parseError({error: error, vm: _this})
|
})
|
},
|
resetDataForm(){
|
this.dataForm = {
|
id:"",
|
name:"",
|
type:"",
|
parentname:"",
|
content:"",
|
};
|
this.levelArr = [];
|
},
|
majorSelect(val){
|
if (val === "2"){
|
this.showMajor = true;
|
getMajorCategoryTree().then(res=>{
|
this.majorTree = res.data;
|
});
|
}else {
|
this.showMajor = false;
|
}
|
},
|
|
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})
|
})
|
},
|
getBtnPermission(btnType) {
|
return checkBtnPermission(this.userType, btnType)
|
},
|
},
|
computed:{
|
typeName () {
|
return function(val){
|
if (val === 1) {
|
return "大类";
|
}else if (val === 2){
|
return "小类";
|
} else {
|
return "未分类";
|
}
|
}
|
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
