<template>
|
<div class="app-container">
|
<el-container>
|
<el-card shadow="never" style="width: 240px;margin-right: 15px">
|
<my-tree ref="searchTree" :tree-list="treeDataList" @setNode="nodeClick" @search="search"></my-tree>
|
</el-card>
|
<el-container>
|
<el-card class="box-card" style="width: 100%" shadow="never">
|
<!--搜索条件-->
|
<div class="filter-container">
|
<my-search ref="searchBar" :items="items" @search="fifterForm"></my-search>
|
</div>
|
<el-row style="margin-top: 8px">
|
<el-col>
|
<!--列表-->
|
<my-table-v2 ref="myTable" :filter="filterFrom" :table="table"/>
|
</el-col>
|
</el-row>
|
</el-card>
|
</el-container>
|
</el-container>
|
<edit v-if="setting.show" :setting="setting" @close="setting.show=false" @search="search" @initTreeData="initTreeData"/>
|
</div>
|
</template>
|
|
<script>
|
import myTree from '@/components/myTree/index'
|
import MyTableV2 from "@/components/myTable/myTableV2";
|
import SettingIplatform from '@/utils/settingIplatform';
|
import items from './items'
|
import edit from './edit'
|
import * as classify from '@/api/projectManage/classify'
|
|
export default {
|
name: "index",
|
components: { MyTableV2, myTree,edit },
|
data() {
|
return {
|
// 搜索框
|
items: items,
|
// 树数据
|
treeDataList: [],
|
// 搜索条件
|
filterFrom: {
|
status: 0,
|
title: null,
|
parentId:null
|
},
|
setting:{
|
show:false,
|
id:null,
|
title:'新增'
|
},
|
// 表格数据
|
table: {
|
showIndex: true, // 是否显示序号
|
expand: false, // 是否显示详情数据
|
url: SettingIplatform.apiBaseURL + '/pc/p/project/category/list', // 请求地址
|
// 工具条
|
tools: {
|
columnsCtrl: {// 列控制按钮
|
show: false
|
},
|
generalExport: {// 通用导出按钮
|
show: false
|
},
|
// 自定义工具条按钮
|
custom: [
|
{
|
name: '新增',
|
click: () => {
|
this.showAdd(null)
|
}
|
}
|
]
|
},
|
// 列信息
|
columns: [
|
{title: '分类名称', field: 'title', align: 'left',},
|
{title: '显示顺序', field: 'orderNum', align: 'center', width: '250px'},
|
{title: '状态', field: 'status', align: 'center', width: '80px',
|
switch: row => {
|
const result = {}
|
if (row.status == 0) {
|
Object.assign(result, {
|
value: true, // 开
|
label: '启用', // 开的描述
|
click: () => { // 点击事件
|
this.updState(row)
|
}
|
})
|
} else {
|
Object.assign(result, {
|
value: false, // 关
|
label: '禁用', // 关的描述
|
click: () => {
|
this.updState(row)
|
}
|
})
|
}
|
return result
|
}
|
}
|
],
|
// 操作信息
|
operation: {
|
width: 200,
|
align:'center',
|
show: true, // 显示操作列
|
attr: [
|
{
|
title: '编辑',
|
events: row => {
|
this.showAdd(row.id)
|
}
|
},
|
// 分类下有正在进行中的项目时，给出提示不允许禁用和删除。且禁用一级分类前需要先禁用下面的所有二级，有启用的二级时不允许禁用一级
|
{
|
title: '删除',
|
events: row => {
|
this.showDel(row.id)
|
}
|
}
|
]
|
},
|
paging: {
|
show: true, // 显示分页
|
// 分页信息
|
page: {
|
small: false,
|
pageNum: 1,
|
pageSize: 10,
|
total: 0
|
}
|
}
|
},
|
}
|
},
|
created() {
|
// 获取机构树
|
this.initTreeData()
|
},
|
methods: {
|
// 左侧树初始化
|
initTreeData() {
|
classify.classifyTree().then(res => {
|
const content = res || []
|
this.treeDataList.splice(0, this.treeDataList.length)
|
this.treeDataList = content
|
})
|
},
|
// 修改状态
|
updState(row) {
|
// 分类下有正在进行中的项目时，给出提示不允许禁用和删除。且禁用一级分类前需要先禁用下面的所有二级，有启用的二级时不允许禁用一级
|
let vm = this
|
let text = row.status == 1 ? "启用" : "禁用";
|
vm.$modal.confirm('确认要' + text + '"' + row.title + '"吗？').then(function() {
|
let params = Object.assign({},row)
|
params.status = row.status == 1 ? 0 : 1
|
classify.updateStatus(params).then(res=>{
|
if(res){
|
row.status = row.status == 1 ? 0 : 1
|
vm.$message.success(text + "成功");
|
vm.search()
|
}
|
})
|
})
|
},
|
nodeClick(param) {
|
this.setting.parentId = param.id;
|
this.setting.parentName = param.name;
|
param = param || {}
|
this.p = Object.assign({}, {
|
id: param.id,
|
name: param.name
|
})
|
if (this.p.id != undefined && this.p.id != null) {
|
this.filterFrom.parentId = this.p.id
|
} else {
|
this.filterFrom.parentId = null
|
}
|
this.search(1)
|
},
|
// 查询table列表
|
search(pageNum) {
|
if (pageNum != undefined) {
|
this.$refs.myTable.search(pageNum)
|
} else {
|
this.$refs.myTable.search()
|
}
|
},
|
fifterForm(params) {
|
this.filterFrom = Object.assign(this.filterFrom, params)
|
this.search(1)
|
},
|
// 新增/编辑
|
showAdd(id){
|
let title = '添加'
|
if (id != null) {
|
title = '编辑'
|
}
|
this.setting.id = id
|
this.setting.title = title
|
this.setting.show = true
|
},
|
// 删除
|
showDel(id){
|
let vm = this
|
vm.$modal.confirm('确认要删除该分类吗？').then(function() {
|
classify.del({ id:id }).then(res=>{
|
if(res){
|
vm.$message.success("删除成功");
|
vm.search(1)
|
}
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
