<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: 15px">
|
<el-col>
|
<!--列表-->
|
<my-table-v2 ref="myTable" :filter="filterFrom" :table="table"/>
|
</el-col>
|
</el-row>
|
<!--添加/编辑弹窗-->
|
<edit v-if="editSetting.show" :setting="editSetting" @close="editSetting.show = false" @search="search"/>
|
</el-card>
|
</el-container>
|
</el-container>
|
<my-import
|
:import-setting="importSetting"
|
:dialog-show="importSetting.dialogShow"
|
:dialog-title="importSetting.dialogTitle"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import myTree from '@/components/myTree/index'
|
import MyTableV2 from "@/components/myTable/myTableV2";
|
import MyButton from "@/components/myButton/myButton";
|
import SettingIplatform from '@/utils/settingIplatform';
|
import items from './items'
|
import edit from './edit'
|
import * as finsystenant from '@/api/baseSetting/finsystenant'
|
import myImport from '@/views/components/myImport'
|
import {getBaseUrl} from '@/utils/base';
|
import {editState} from "@/api/baseSetting/finsystenant";
|
|
export default {
|
name: "index",
|
components: {MyButton, MyTableV2, edit, myTree, myImport},
|
data() {
|
return {
|
// 搜索框
|
items: items,
|
// 树数据
|
treeDataList: [],
|
// 搜索条件
|
filterFrom: {
|
tenantId: null,
|
userName: null,
|
userPhone: null,
|
status: 1
|
},
|
// 导入
|
importSetting: {
|
dialogTitle: '导入',
|
dialogShow: false,
|
fileSettings: {
|
data: {},
|
uploadUrl: getBaseUrl()+"/pc/fin/sys/tenant/import", // 上传地址
|
accept: '.xls', // 格式
|
type: 'text', // 回显形式
|
loading: false // 导入效果
|
},
|
/* 模板下载 */
|
templateSettings: {
|
templateName: '导入模板.xls', // 名称
|
templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate?type=tenant' // 下载地址
|
},
|
onSuccess: null
|
},
|
editSetting: {
|
title: '',
|
id: '',
|
orgId: '',
|
show: false,
|
},
|
// 表格数据
|
table: {
|
showIndex: true, // 是否显示序号
|
expand: false, // 是否显示详情数据
|
url: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/select/list', // 请求地址
|
// 工具条
|
tools: {
|
columnsCtrl: {// 列控制按钮
|
show: false
|
},
|
generalExport: {// 通用导出按钮
|
show: false
|
},
|
// 自定义工具条按钮
|
custom: [
|
{
|
name: '新增',
|
click: () => {
|
this.showAdd(null);
|
},
|
},
|
{
|
name: '机构导入',
|
click: () => {
|
this.importOrg();
|
},
|
}
|
]
|
},
|
// 列信息
|
columns: [
|
{title: '编号', field: 'code', align: 'center', width: '150px'},
|
{title: '机构名称', field: 'name', align: 'left'},
|
{title: '层级', field: 'lv', align: 'center', width: '80px'},
|
{title: '顺序号', field: 'lv', align: 'center', width: '80px'},
|
{title: '备注', field: 'summary', align: 'left', width: '150px'},
|
{
|
field: 'belongProvince',
|
title: '状态',
|
align: 'center',
|
width: 100,
|
switch: row => {
|
const result = {}
|
if (row.status == 1) {
|
Object.assign(result, {
|
value: true, // 开
|
label: '是', // 开的描述
|
click: () => { // 点击事件
|
this.updState(row)
|
}
|
})
|
} else {
|
Object.assign(result, {
|
value: false, // 关
|
label: '否', // 关的描述
|
click: () => {
|
this.updState(row)
|
}
|
})
|
}
|
return result
|
}
|
}
|
],
|
// 操作信息
|
operation: {
|
show: true, // 显示操作列
|
width: '150', // 列宽
|
attr: [
|
{
|
title: '编辑',
|
events: (row) => {
|
this.showAudit(row);
|
},
|
},
|
// {
|
// title: '删除',
|
// events: (row) => {
|
// this.del(row);
|
// },
|
// }
|
],
|
},
|
paging: {
|
show: true, // 显示分页
|
// 分页信息
|
page: {
|
small: false,
|
pageNum: 1,
|
pageSize: 10,
|
total: 0
|
}
|
}
|
},
|
}
|
},
|
created() {
|
// 获取机构树
|
this.initTreeData()
|
},
|
methods: {
|
//导入
|
importOrg() {
|
this.importSetting.dialogShow = true
|
this.importSetting.onSuccess = (response, callBack) => {
|
if (response.code===1){
|
this.$message.success(response.msg)
|
this.search(1)
|
}else{
|
this.$message.warning(response.msg)
|
}
|
callBack()
|
}
|
},
|
// 左侧树初始化
|
initTreeData() {
|
finsystenant.getTree().then(res => {
|
const content = res || []
|
this.treeDataList.splice(0, this.treeDataList.length)
|
this.treeDataList = content
|
if (content.length > 0) {
|
this.importSetting.fileSettings.data = {pid: content[0].id}
|
}
|
})
|
},
|
updState(row) {
|
let vm = this
|
let text = row.status == 0 ? "启用" : "禁用";
|
vm.$modal.confirm('确认要' + text + '"' + row.name + '"吗？').then(function () {
|
let params = Object.assign({}, row)
|
params.status = row.status == 1 ? 0 : 1
|
params.isOnlyState = "1"
|
finsystenant.editState(params).then(res => {
|
if (res) {
|
row.status = row.status === 1 ? 0 : 1
|
vm.$modal.msgSuccess(text + "成功");
|
vm.search()
|
}
|
})
|
})
|
},
|
del(row) {
|
this.$modal
|
.confirm('是否确认删除名称为"' + row.name + '"的机构吗？')
|
.then(function () {
|
finsystenant.del({id: row.id}).then((res) => {
|
});
|
})
|
.then((res) => {
|
this.$message.success('删除成功！');
|
this.search()
|
})
|
.catch(() => {
|
});
|
},
|
showAdd() {
|
if (!this.editSetting.orgId) {
|
this.$message.warning('请先选择左侧机构')
|
} else {
|
this.editSetting.id = null;
|
this.editSetting.info = null;
|
this.editSetting.title = '新增';
|
this.editSetting.show = true;
|
}
|
},
|
showAudit(row) {
|
this.editSetting.id = row.id;
|
this.editSetting.info = JSON.stringify(row);
|
this.editSetting.title = '编辑';
|
this.editSetting.show = true;
|
},
|
nodeClick(param) {
|
param = param || {}
|
this.p = Object.assign({}, {
|
id: param.id,
|
name: param.name
|
})
|
if (this.p.id != undefined && this.p.id != null) {
|
this.filterFrom.tenantId = this.p.id
|
this.editSetting.orgId = this.p.id
|
} else {
|
this.filterFrom.tenantId = null
|
this.editSetting.orgId = null
|
}
|
this.importSetting.fileSettings.data = {pid: param.id}
|
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)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
