<template>
<div class="full-box zhglcss" style="overflow: hidden">
<div class="" style="width: 100%;height:100%;">
<div class="top-tip-box t-title">当前位置：后台系统管理 > 行业管理</div>
<div class="table-info-box">
<div class="table-search-box onerow" v-if="false">
<div class="search-info-box" style="">
<div class="search-item">
<div class="search-item-label">上级行业</div>
<el-select v-model="valueType" clearable filterable placeholder="请选择" @change="typeChanged">
<el-option label="全部" value=""></el-option>
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</div>
<el-button class="search-btn" type="primary" @click="searchResult" v-if="false">查询</el-button>
<el-button class="operate-btn" type="primary" style="float:left;margin-left: 20px;" @click="showAdd">新增</el-button>
</div>
<div class="search-border-box">
<div class="sbb-line"></div>
<div class="sbb-role"></div>
</div>
</div>
<div class="" style="width: 100%;height: 34px;">
<el-button class="operate-btn" type="primary" style="float:left" @click="showAdd">新增</el-button>
</div>
<div class="table-result-boxx" style="height:calc(100% - 49px);">
<div class="table-container-style">
<el-table :data="tableData.list" height="200">
<el-table-column type="index" align="center" label="序号" width="80"></el-table-column>
<el-table-column prop="code" align="center" label="行业代码"></el-table-column>
<el-table-column prop="name" align="center" label="行业名称"></el-table-column>
<el-table-column prop="swlx" align="center" label="上级行业" v-if="false"></el-table-column>
<el-table-column prop="sort" align="center" label="排序" width="80"></el-table-column>
<el-table-column prop="tagString" align="center" label="标签"></el-table-column>
<el-table-column prop="updateTime" align="center" label="最近更新时间" ></el-table-column>
<el-table-column label="操作" align="center" width="200">
<template slot-scope="scope">
<div class="table-edit-btn" @click="editTag(scope.row)">修改标签</div>
<div class="table-edit-btn" @click="editModule(scope.row)">修改</div>
<div class="table-edit-btn" @click="deleteModule(scope.row)">删除</div>
</template>
</el-table-column>
</el-table>
<el-pagination @current-change="handlePageChange" background layout="total, prev, pager, next" :total="tableData.total" :current-page="tableData.pageNum" :page-size="tableData.pageSize" :page-count="tableData.pages" style="text-align: right;"></el-pagination>
</div>
</div>
</div>
</div>
<el-dialog title="添加标签" :visible.sync="addTagDialogVisible" width="450px" :close-on-click-modal=false>
<div class="">
<div class="search-row" style="padding-top:0;margin-bottom:10px;height: auto;">
<div class="search-row-label">行业标签</div>
<div class="search-row-condition" style="height: auto;">
<el-checkbox class="search-condition-checkall" :indeterminate="popTagCheckObj.isIndeterminate" v-model="popTagCheckObj.checkAll" @change="(value) => handleCheckAllChange(value,'tagPop')">全选</el-checkbox>
<el-checkbox-group v-model="popTagCheckObj.checkedList" @change="(value) => handleCheckedChange(value,'tagPop')">
<el-checkbox v-for="item in popTagCheckObj.checkList" :label="item.code" :key="item.code">{{item.name}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="addTagDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addSucess('tag')">确 定</el-button>
</div>
</el-dialog>
<el-dialog :title="type==0?'新增':'修改'" :visible.sync="dialogVisible" width="450px" :close-on-click-modal=false>
<el-form :model="addForm" :rules="addRules" ref="addForm" :label-width="formLabelWidth+'px'">
<el-form-item label="行业代码" prop="code">
<el-input v-model="addForm.code" clearable auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="行业名称" prop="name">
<el-input v-model="addForm.name" clearable auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="上级行业" v-if="false">
<el-select v-model="addForm.parentCode " clearable filterable placeholder="请选择">
<el-option label="全部" value=""></el-option>
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input v-model.number="addForm.sort" clearable auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" autosize v-model="addForm.remarks"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="updateModule('addForm')">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
let month = new Date().getMonth()==0?0:new Date().getMonth();
let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
export default {
name: 'yjManage',
data () {
return {
timeFilter:[new Date().format("yyyy-")+"01",new Date(year).format("yyyy-MM")],
dialogVisible:false,addTagDialogVisible:false,
type:0,
valueType:'',
typeList: [{id:12,name:'生物产业'},{id:13,name:'新能源'},],
formLabelWidth: 120,
addRules:{
code: [
{ required: true, message: '请输入行业代码', trigger: 'blur' }
],
name: [
{ required: true, message: '请输入行业名称', trigger: 'blur' }
],
sort: [
{ required: true, message: '请输入排序', trigger: 'blur' },
{ type: 'integer', message: '排序必须为数字值'}
]
},
addForm: {code: "",name: "",parentCode : "",sort: "",remarks: ""},
tableData:{
list: [],
pageNum: 1,
pageSize: 10,
pages: 0,
total: 0,
},
popTagCheckObj:{
isIndeterminate: false,
checkList: [],
checkedList: [],
checkAll: false
},
currentData:{}
}
},
mounted (){},
created(){
this.getTypeList();
this.getDataList();
},
methods:{
searchResult(){},
getTypeList: function () {
let _this = this;
_this.$http.get('/dx-economy-api/industry').then(function (resp) {
let _data = resp.data;
if (_data.code === 200) {
let _list = [];
if(!_this.$Util.isEmpty(_data.data)){
_list = _list.concat(_data.data);
}
_this.typeList = _list;
} else {
_this.$message.error(_data.message);
}
});
},
getDataList: function (pager) {
let _this = this,_id = _this.valueType;
_this.tableData.pageNum = _this.$Util.isEmpty(pager) ? _this.tableData.pageNum : pager;
_this.$http.get('/dx-economy-api/industry/page', {
params: {
pageNum: _this.tableData.pageNum,
pageSize: _this.tableData.pageSize
}
}).then(function (resp) {
let _data = resp.data;
if (_data.code === 200 && !_this.$Util.isEmpty(_data.data)) {
let _flowList = _data.data.list;
_flowList.forEach(function (item) {
item.tagString = '';
item.tagNames.forEach(function (i) {
item.tagString = item.tagString=='' ? i :(item.tagString+','+ i);
})
});
_this.tableData.list = _data.data.list;
_this.tableData.pageNum = _data.data.pageNum;
_this.tableData.pageSize = _data.data.pageSize;
_this.tableData.pages = _data.data.pages;
_this.tableData.total = _data.data.total;
} else {
_this.$message.error(_data.message);
}
});
},
typeChanged: function () {
this.getDataList(1);
},
showAdd(){
this.type = 0;
this.resetForm("addForm");
this.dialogVisible = true;
},
resetForm(formName) {
let _this = this;
if(!_this.$Util.isEmpty(_this.$refs[formName])){
_this.$refs[formName].resetFields();
_this.addForm = {
code: "",
name: "",
pId: "",
sort: "",
remarks: ""
}
}
},
updateModule: function (formName) {
let _this = this;
_this.$refs[formName].validate((valid) => {
if (valid) {
if(_this.type === 0){ //新增
_this.$http.post('/dx-economy-api/industry', _this.addForm).then(function (resp) {
let _data = resp.data;
if (_data.code === 200) {
_this.$message.success("新增成功！");
/*_this.getTypeList();*/
_this.getDataList(1);
} else {
_this.$message.error(_data.message);
}
});
}else{ // 修改
_this.$http.put('/dx-economy-api/industry/'+_this.addForm.code, _this.addForm).then(function (resp) {
let _data = resp.data;
if (_data.code === 200) {
_this.$message.success("修改成功！");
_this.getDataList(1);
} else {
_this.$message.error(_data.message);
}
});
}
_this.dialogVisible = false;
} else {
return false;
}
});
},
editModule: function (rowData) {
this.type = 1;
this.addForm = JSON.parse(JSON.stringify(rowData));
this.dialogVisible = true;
},
deleteModule: function (rowData) {
let _this = this;
console.log("12")
_this.$confirm('确认删除？','提示', {type: 'warning'}).then(() => {
if(!_this.$Util.isEmpty(rowData) && !_this.$Util.isEmpty(rowData.code)){
_this.$http.delete('/dx-economy-api/industry/'+rowData.code).then(function (resp) {
let _data = resp.data;
if (_data.code === 200) {
_this.$message.success("删除成功！");
/*_this.getTypeList();*/
_this.getDataList(1);
} else {
_this.$message.error(_data.message);
}
});
}
}).catch(() => {});
},
handlePageChange(currentPage){
this.getDataList(currentPage)
},
getTagList(){
let vm = this;
vm.$http.get('/dx-economy-api/tag').then(function (resp) {
let _data = resp.data;
vm.popTagCheckObj.checkList = _data.data
})
},
editTag(rowData){
let vm = this
vm.addTagDialogVisible = true;
vm.getTagList();
vm.currentData = rowData;
vm.popTagCheckObj.checkedList = rowData.tagCodes;
},
addSucess(type){
let vm = this
let dataTag = {tagCodes:vm.popTagCheckObj.checkedList};
vm.$http.put('/dx-economy-api/industry/'+vm.currentData.code+'/tag',dataTag).then(function (resp) {
let _data = resp.data.data;
let tagString = '';
vm.tableData.list.forEach(function (item) {
if(vm.currentData.code == item.code){
item.tagCodes = _data.codes;
item.tagNames = _data.names;
item.tagString = '';
item.tagNames.forEach(function (i) {
item.tagString = item.tagString=='' ? i :(item.tagString+','+ i);
})
}
})
vm.addTagDialogVisible = false
})
},
handleCheckAllChange(value,type){
let _this = this,_list = [];
let obj = _this.popTagCheckObj;
if(value){
obj.checkList.forEach(item => {
_list.push(item.code);
});
}
obj.checkedList = _list;
obj.isIndeterminate = false;
},
handleCheckedChange(value,type) {
let _this = this;
let obj = _this.popTagCheckObj;
obj.checkAll = value.length === obj.checkList.length;
obj.isIndeterminate = value.length > 0 && value.length < obj.checkList.length;
},
}
}
</script>
<style></style>
<style scoped>
.table-result-boxx{height:calc(100% - 95px);}
.el-form-item{margin-bottom:15px;}
.el-form-item label{width: 90px;}
.search-row-condition .el-checkbox-group .el-checkbox:first-child{margin-left: 0;}
/* .el-select-dropdown__item{float: left;width: calc(50% - 10px);margin-left:10px;}*/
</style>
