w-vue-middle
Version:
统一公共服务组件
503 lines (487 loc) • 13 kB
JavaScript
/*
* @Author: Jason Liu
* @Date: 2023-07-17 16:10:28
* @Desc:
*/
//数据源服务
const $dataSource = require("w-vue-middle/api/appService/dataSource.js");
import draggable from "vuedraggable";
export default {
components: { draggable },
props: {
//配置信息
value: {
type: Object,
default: () => {
return {
clusterId: undefined,
dbId: undefined, //数据源ID
dbSchema: undefined, //SchemaName
tableCode: undefined, //数据表
columnName: undefined, //字段名
tables: []
};
}
},
params: {
type: Object,
default: () => {
return undefined;
}
},
tables: {
type: Array,
default: () => {
return [];
}
},
static: {
//是否静态
type: [Object, Boolean],
default: false
},
expandAll: {
type: [Object, Boolean],
default: false
},
//选择表格
selectionTable: {
type: [Object, Boolean],
default: false
},
tableList: {
type: Array,
default: () => {
return [];
}
},
isView: {
type: [Object, Boolean],
default: false
},
sourceList: {
//读取的数据内容
type: Array,
default: () => {
return [];
}
},
columnModels: {
//选择的数据值对象
type: Array,
default: () => {
return [];
}
}
},
data() {
return {
nodeData: this.value,
loading: false,
dataList: [], //表内容信息
tableName: undefined, //表格名称
activeTables: [],
activeColumn: this.columnModels,
tableKey: 0,
selAll: false
};
},
created() {
this.getTableList();
},
methods: {
/**
* @Author: Jason Liu
* @description: 选择全部数据
*/
selectAllData(selAll = true) {
if (this.selectionTable) {
if (selAll) {
this.activeTables = this.dataList.map(item => {
return item;
});
} else {
this.activeTables = [];
}
this.$emit("update:tableList", this.activeTables);
}
},
/**
* @Author: Jason Liu
* @description: 是否选中
*/
hasActiveTables(row) {
let result = "";
let i = this.activeTables.findIndex(item => {
return item.tableName == row.tableName;
});
if (i > -1) {
result = "active";
}
return result;
},
/**
* @Author: Jason Liu
* @description: 点击表格事件
*/
clickTable(row) {
if (this.isView) {
return false;
}
if (this.selectionTable) {
let actIndex = this.activeTables.findIndex(item => {
return item.tableName == row.tableName;
});
if (actIndex > -1) {
this.activeTables.splice(actIndex, 1);
this.selAll = false;
} else {
this.activeTables.push(row);
}
this.$emit("update:tableList", this.activeTables);
this.$emit("change");
} else {
this.activeTables = [row];
this.nodeData.tableCode = row.tableName;
this.$emit("clickTable", {
e: row,
data: this.nodeData
});
this.$emit("change");
}
},
/**
* @Author: Jason Liu
* @description: 点击表格时间
*/
clickColumn(row) {
if (this.isView) {
return false;
}
if (this.selectionTable) {
return false;
}
let activeIndex = this.activeColumn.indexOf(row.columnName);
if (activeIndex > -1) {
this.activeColumn.splice(activeIndex, 1);
} else {
this.activeColumn.push(row.columnName);
}
this.nodeData.columnName = row.columnName;
this.$emit("clickColumn", {
e: row,
data: this.nodeData,
activeColumn: this.activeColumn
});
},
/**
* @Author: Jason Liu
* @description: 获取表格信息
*/
getTableList(useCache = true) {
const {
dbId,
dbSchema,
clusterId,
tableName,
columnName,
tables
} = this.nodeData;
if (this.selectionTable) {
this.activeTables = this.tableList || [];
} else {
this.activeTables = [{ tableName: tableName }];
}
this.nodeData.columnName = columnName;
if (this.static) {
//静态数据，只读取内容
this.dataList = this.tables.map((table, i) => {
if (table.tableCode) {
// tableCode包含中文，树形结构渲染会报错
let isChinese = /[\u4E00-\u9FFF]/.test(table.tableCode);
return {
id: isChinese ? `table_${i}` : table.tableCode,
hasChild: true,
name: table.tableCode,
parentId: undefined,
...table
};
} else {
return {
id: `column_${i}_${table.columnName}`, //功能兼容，以免表名或列名相同
hasChild: false,
name: table.columnName,
...table
};
}
}); //使用本地缓存
// this.selectAllData();
this.$emit("update:sourceList", this.dataList);
this.$emit("table", this.dataList);
//this.tableKey++;
} else {
if (dbSchema) {
let param = {
...this.params,
clusterId: clusterId,
collectType: "table", // 采集类型：schema、table、column
dsId: dbId,
schema: dbSchema,
tableName: "tableName",
useCache: useCache
};
this.loading = true;
$dataSource
.collectionDataInfo(param)
.then(req => {
this.dataList = (req.data || []).map(table => {
return {
id: table.tableCode,
name: table.tableName,
tableCode: table.tableCode,
tableName: table.tableName,
description: table.description,
hasChild: true,
parentId: undefined
};
});
this.$emit("update:sourceList", this.dataList);
this.$emit("table", this.dataList);
})
.finally(() => {
// this.selectAllData();
this.loading = false;
});
}
}
this.$emit("callGetTable");
},
filterTableName({ option, row }) {
const value = option.data;
let has = false;
const keys = value.split(",");
keys.forEach(dataKey => {
if (row.description) {
if (row.description.toLocaleUpperCase().indexOf(dataKey) > -1) {
has = true;
}
}
if (row.tableCode) {
if (row.tableCode.toLocaleUpperCase().indexOf(dataKey) > -1) {
has = true;
}
} else if (row.columnName) {
if (row.columnName.toLocaleUpperCase().indexOf(dataKey) > -1) {
has = true;
}
}
});
return has;
},
/**
* @Author: Jason Liu
* @description: 获取静态映射表格
*/
getStaticMapTable(tables = []) {
return tables.map((table, i) => {
if (table.tableCode) {
return {
id: table.tableCode,
hasChild: true,
name: table.tableCode,
parentId: undefined,
...table
};
} else {
return {
id: `column_${i}_${table.columnName}`, //功能兼容，以免表名或列名相同
hasChild: false,
name: table.columnName,
...table
};
}
});
},
/**
* @Author: Jason Liu
* @description: 获取匹配数据
*/
getMatchTables(keystr) {
//AUTH_DICT,AUTH_MODULE,AUTH_PRODUCT,AUTH_PRODUCT_MENU
if (keystr.indexOf(",")) {
//多数据内容查询
const keys = keystr.split(",");
let matchTables = this.dataList.filter((row, i) => {
let has = false;
keys.forEach(dataKey => {
if (row.tableCode) {
if (row.tableCode.toLocaleUpperCase() == dataKey) {
has = true;
}
}
});
return has;
});
if (matchTables.length > 0) {
this.$confirm({
title: $t('是否添加检索项') + "?",
content: `${$t('匹配出')}${matchTables.length}${$t('条')}${$t('数据完全相同')}`,
zIndex: 1002,
onOk: () => {
matchTables.forEach(row => {
let actIndex = this.activeTables.findIndex(item => {
return item.tableName == row.tableName;
});
if (actIndex > -1) {
} else {
this.activeTables.push(row);
}
});
this.$emit("update:tableList", this.activeTables);
this.$emit("change");
},
onCancel() {}
});
}
}
},
/**
* @Author: Jason Liu
* @description: 查询表格信息
*/
searchTableList(e) {
if (e) {
if (this.static) {
//静态数据，只读取内容
const keystr = e.toLocaleUpperCase();
const keys = keystr.split(",");
this.dataList = this.getStaticMapTable(
this.tables.filter((row, i) => {
let has = false;
keys.forEach(dataKey => {
if (row.description) {
if (
row.description.toLocaleUpperCase().indexOf(dataKey) > -1
) {
has = true;
}
}
if (row.tableCode) {
if (row.tableCode.toLocaleUpperCase().indexOf(dataKey) > -1) {
has = true;
}
} else if (row.columnName) {
if (
row.columnName.toLocaleUpperCase().indexOf(dataKey) > -1
) {
has = true;
}
}
});
return has;
})
);
this.getMatchTables(keystr);
this.tableKey++;
} else {
const xTable = this.$refs.tableList;
const column = xTable.getColumnByField("title");
const option = column.filters[0];
option.data = e.toLocaleUpperCase();
option.checked = !!e;
xTable.updateData();
this.getMatchTables(option.data);
}
} else {
if (this.static) {
this.dataList = this.getStaticMapTable(this.tables);
}
this.tableKey++;
}
},
/**
* @Author: Jason Liu
* @description: 查询表信息
* @return {*}
*/
getColumnList({ row }) {
const { dbId, schemaId, clusterId } = this.nodeData;
if (schemaId) {
return $dataSource
.collectionDataInfo({
clusterId: clusterId,
collectType: "column", // 采集类型：schema、table、column
dsId: dbId,
schema: schemaId,
tableName: row.tableCode,
useCache: true
})
.then(req => {
this.$emit("columns", {
tableCode: row.tableCode,
columns: req.data
});
return req.data;
});
} else {
return new Promise((resolve, reject) => {
this.$emit("columns", {
tableCode: row.tableCode,
columns: row.children
});
resolve(row.children);
});
}
},
cloneEntry(row) {
this.$emit("clone");
return {
key: `${new Date().getTime()}`,
...row
};
},
/**
* @Author: Jason Liu
* @description: 开始克隆事件
*/
cloneStart(e) {
this.$emit("start", e);
},
/**
* @Author: Jason Liu
* @description: 结束克隆事件
*/
cloneEnd(e) {
this.$emit("end", e);
},
/**
* @Author: Jason Liu
* @description: 移动事件
*/
cloneMove(e) {
this.$emit("move", e);
}
},
watch: {
tableList(val) {
this.activeTables = val;
},
tables() {
this.getTableList();
},
columnModels(val) {
this.activeColumn = val;
},
activeColumn(val) {
this.$emit("update:columnModels", val);
},
nodeData(val) {
this.$emit("input", val);
this.$emit("change", val);
},
value(val) {
this.nodeData = val;
this.getTableList();
}
}
};