<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="refreshData"
|
/>
|
</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 { getTree } from '@/api/foudation/classification';
|
import myImport from '@/views/components/myImport';
|
import { getBaseUrl } from '@/utils/base';
|
import { getType } from '@/api/system/dict/type';
|
import { getDicts } from '@/api/system/dict/data';
|
|
export default {
|
name: 'index',
|
components: { MyButton, MyTableV2, edit, myTree, myImport },
|
data() {
|
return {
|
// 搜索框
|
items: items,
|
// 树数据
|
treeDataList: [],
|
// 搜索条件
|
filterFrom: {
|
tenantId: null,
|
userName: null,
|
userPhone: null,
|
states: 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', // 下载地址
|
},
|
onSuccess: null,
|
},
|
editSetting: {
|
title: '',
|
id: '',
|
orgId: '',
|
show: false,
|
},
|
// 表格数据
|
table: {
|
showIndex: true, // 是否显示序号
|
expand: false, // 是否显示详情数据
|
url: SettingIplatform.apiBaseURL + '/pc/base/category/list', // 请求地址
|
// 工具条
|
tools: {
|
columnsCtrl: {
|
// 列控制按钮
|
show: false,
|
},
|
generalExport: {
|
// 通用导出按钮
|
show: false,
|
},
|
// 自定义工具条按钮
|
custom: [
|
{
|
name: '新增',
|
click: () => {
|
this.showAdd(null);
|
},
|
},
|
],
|
},
|
// 列信息
|
columns: [
|
{ title: '分类名称', field: 'categoryName', align: 'center' },
|
{ title: '类别', field: 'classification', align: 'left' },
|
{ title: '显示顺序', field: 'orderNumber', align: 'center', width: '80px' },
|
{
|
field: 'states',
|
title: '状态',
|
align: 'center',
|
width: 100,
|
switch: (row) => {
|
const result = {};
|
if (row.states == 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();
|
// 类别字典
|
getDicts('GOODS_PRICE').then((res) => {
|
this.items[1].options = res.map((v) => {
|
v.label = v.dict_label;
|
v.value = v.dict_value;
|
return v;
|
});
|
});
|
},
|
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() {
|
getTree().then((res) => {
|
console.log(res, 'restree');
|
console.log(this.importSetting, 'this.importSetting');
|
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.states == 0 ? '启用' : '禁用';
|
vm.$modal.confirm('确认要' + text + '"' + row.categoryName + '"吗？').then(function () {
|
let params = Object.assign({}, row);
|
params.states = row.states == 1 ? 0 : 1;
|
finsystenant.edit(params).then((res) => {
|
if (res) {
|
row.states = row.states === 1 ? 0 : 1;
|
vm.$modal.msgSuccess(text + '成功');
|
vm.search();
|
}
|
});
|
});
|
},
|
del(row) {
|
this.$modal
|
.confirm('是否确认删除名称为"' + row.categoryName + '"的机构吗？')
|
.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 {
|
if (this.p && this.p) {
|
this.editSetting.pid = this.p.id;
|
}
|
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) {
|
console.log(param, 'param');
|
param = param || {};
|
this.p = Object.assign(
|
{},
|
{
|
id: param.id,
|
name: param.name,
|
},
|
);
|
if (this.p.id != undefined && this.p.id != null) {
|
this.filterFrom.fatherCategoryId = this.p.id;
|
this.editSetting.orgId = this.p.id;
|
} else {
|
this.filterFrom.fatherCategoryId = 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();
|
}
|
},
|
refreshData() {
|
this.initTreeData();
|
this.search();
|
},
|
fifterForm(params) {
|
this.filterFrom = Object.assign(this.filterFrom, params);
|
this.search(1);
|
},
|
},
|
};
|
</script>
|
|
<style scoped></style>
|
