mirror of
https://github.com/dataease/dataease.git
synced 2026-05-23 13:58:26 +08:00
Merge remote-tracking branch 'origin/main' into main
# Conflicts: # frontend/src/components/vue-drag-resize-rotate/index.vue
This commit is contained in:
@@ -4,6 +4,7 @@ export function dsGrid(pageIndex, pageSize, data) {
|
||||
return request({
|
||||
url: 'datasource/list/' + pageIndex + '/' + pageSize,
|
||||
method: 'post',
|
||||
loading: true,
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -41,4 +41,11 @@ export function editDept(data) {
|
||||
})
|
||||
}
|
||||
|
||||
export default { addDept, delDept, editDept, getDeptTree, loadTable }
|
||||
export function treeByDeptId(deptId) {
|
||||
return request({
|
||||
url: '/api/dept/nodesByDeptId/' + deptId,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
export default { addDept, delDept, editDept, getDeptTree, loadTable, treeByDeptId }
|
||||
|
||||
90
frontend/src/components/business/tree-table/index.vue
Normal file
90
frontend/src/components/business/tree-table/index.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="complex-table">
|
||||
<div v-if="$slots.header || header" class="complex-table__header">
|
||||
<slot name="header">{{ header }}</slot>
|
||||
</div>
|
||||
|
||||
<div v-if="$slots.toolbar || searchConfig" class="complex-table__toolbar">
|
||||
<slot name="toolbar">
|
||||
<fu-search-bar v-bind="searchConfig" @exec="search">
|
||||
<slot name="buttons" />
|
||||
<fu-table-column-select :columns="columns" />
|
||||
</fu-search-bar>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div class="complex-table__body">
|
||||
<slot />
|
||||
<!-- <fu-table ref="table" v-bind="$attrs" :columns="columns" :local-key="localKey" v-on="$listeners">
|
||||
<slot />
|
||||
</fu-table> -->
|
||||
</div>
|
||||
|
||||
<div v-if="$slots.pagination || paginationConfig" class="complex-table__pagination">
|
||||
<slot name="pagination">
|
||||
<fu-table-pagination
|
||||
:current-page.sync="paginationConfig.currentPage"
|
||||
:page-size.sync="paginationConfig.pageSize"
|
||||
v-bind="paginationConfig"
|
||||
@change="search"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'TreeTable',
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
localKey: String, // 如果需要记住选择的列,则这里添加一个唯一的Key
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
header: String,
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
searchConfig: Object,
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
paginationConfig: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
condition: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search(condition, e) {
|
||||
if (condition) {
|
||||
this.condition = condition
|
||||
}
|
||||
this.$emit('search', this.condition, e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~@/styles/mixin.scss";
|
||||
@import "~@/styles/variables.scss";
|
||||
.complex-table {
|
||||
.complex-table__header {
|
||||
@include flex-row(flex-start, center);
|
||||
height: 60px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.complex-table__toolbar {
|
||||
@include flex-row(flex-end, center);
|
||||
}
|
||||
|
||||
.complex-table__pagination {
|
||||
margin-top: 20px;
|
||||
@include flex-row(flex-end);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -69,10 +69,6 @@ export default {
|
||||
replace: true,
|
||||
name: 'vue-drag-resize-rotate',
|
||||
props: {
|
||||
viewId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'vdr'
|
||||
@@ -399,11 +395,6 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
removeView(){
|
||||
debugger
|
||||
console.log(this.viewId);
|
||||
this.$emit('removeView',this.viewId)
|
||||
},
|
||||
// 重置边界和鼠标状态
|
||||
resetBoundsAndMouseState() {
|
||||
this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 }
|
||||
@@ -1320,15 +1311,13 @@ export default {
|
||||
}
|
||||
},
|
||||
style() {
|
||||
let newStyle ={
|
||||
return {
|
||||
transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
|
||||
width: this.computedWidth,
|
||||
height: this.computedHeight,
|
||||
zIndex: this.zIndex,
|
||||
...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
|
||||
};
|
||||
this.$emit('newStyle', this.viewId,newStyle);
|
||||
return newStyle;
|
||||
},
|
||||
// 控制柄显示与否
|
||||
actualHandles() {
|
||||
@@ -1515,11 +1504,4 @@ export default {
|
||||
height: 7px;
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.close {
|
||||
float: right;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -666,7 +666,9 @@ export default {
|
||||
close: '关闭',
|
||||
required: '必填',
|
||||
input_content: '请输入内容',
|
||||
add_sql_table: '添加SQL'
|
||||
add_sql_table: '添加SQL',
|
||||
preview: '预览',
|
||||
pls_input_name: '请输入名称'
|
||||
},
|
||||
datasource: {
|
||||
create: '新建数据连接',
|
||||
@@ -682,7 +684,7 @@ export default {
|
||||
please_input_password: '请输入密码',
|
||||
please_input_host: '请输入主机',
|
||||
please_input_port: '请输入端口',
|
||||
modify: '修改组织',
|
||||
modify: '编辑数据连接',
|
||||
validate_success: '校验成功',
|
||||
delete: '删除组织',
|
||||
delete_confirm: '删除该组织会关联删除该组织下的所有资源(如:相关工作空间,项目,测试用例等),确定要删除吗?',
|
||||
|
||||
@@ -31,6 +31,10 @@ import * as echarts from 'echarts'
|
||||
|
||||
Vue.prototype.$echarts = echarts
|
||||
|
||||
import UmyUi from 'umy-ui'
|
||||
import 'umy-ui/lib/theme-chalk/index.css'// 引入样式
|
||||
Vue.use(UmyUi)
|
||||
|
||||
/**
|
||||
* If you don't want to use mock-server
|
||||
* you want to use MockJs for mock api
|
||||
|
||||
@@ -178,7 +178,8 @@ export const constantRoutes = [
|
||||
]
|
||||
|
||||
const createRouter = () => new Router({
|
||||
mode: 'history', // require service support
|
||||
// mode: 'history', // require service support
|
||||
mode: 'hash',
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: constantRoutes
|
||||
})
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<el-dropdown trigger="click" size="small">
|
||||
<span class="el-dropdown-link">
|
||||
<el-tag size="small" class="item-axis">
|
||||
{{ item.name }}<span class="summary-span">{{ $t('chart.'+item.summary) }}</span><i class="el-icon-arrow-down el-icon--right" />
|
||||
{{ item.name }}<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span><i class="el-icon-arrow-down el-icon--right" />
|
||||
</el-tag>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-notebook-2">
|
||||
|
||||
@@ -291,10 +291,10 @@ export default {
|
||||
this.removeCheckedKey(e)
|
||||
this.save()
|
||||
},
|
||||
// 右边往左边拖动时的事件
|
||||
start2(e) {
|
||||
console.log(e)
|
||||
},
|
||||
// 右边往左边拖动时的事件
|
||||
end2(e) {
|
||||
console.log(e)
|
||||
this.removeDuplicateKey(e)
|
||||
@@ -394,8 +394,8 @@ export default {
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 3px 10px;
|
||||
margin: 3px 3px 0 3px;
|
||||
padding: 2px 10px;
|
||||
margin: 2px 2px 0 2px;
|
||||
border: solid 1px #eee;
|
||||
text-align: left;
|
||||
color: #606266;
|
||||
@@ -403,15 +403,15 @@ export default {
|
||||
}
|
||||
|
||||
.item-on-move {
|
||||
padding: 3px 10px;
|
||||
margin: 3px 3px 0 3px;
|
||||
padding: 2px 10px;
|
||||
margin: 2px 2px 0 2px;
|
||||
border: solid 1px #eee;
|
||||
text-align: left;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.item + .item {
|
||||
margin-top: 3px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row style="overflow: auto;height: 600px;">
|
||||
<el-row style="overflow: auto;height: 60vh;">
|
||||
<el-checkbox-group v-model="checkTableList" size="small">
|
||||
<el-checkbox
|
||||
v-for="t in tableData"
|
||||
@@ -62,7 +62,10 @@ import { listDatasource, post } from '@/api/dataset/dataset'
|
||||
export default {
|
||||
name: 'AddDB',
|
||||
props: {
|
||||
param: Object
|
||||
param: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -163,4 +166,8 @@ export default {
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
span{
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<el-button size="mini" @click="cancel">
|
||||
{{ $t('dataset.cancel') }}
|
||||
</el-button>
|
||||
<el-button size="mini" type="primary">
|
||||
<el-button size="mini" type="primary" @click="save">
|
||||
{{ $t('dataset.confirm') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
@@ -27,29 +27,133 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<el-input v-model="name" size="mini" :placeholder="$t('commons.name')" />
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<el-radio v-model="mode" label="0">{{ $t('dataset.direct_connect') }}</el-radio>
|
||||
<el-radio v-model="mode" label="1">{{ $t('dataset.sync_data') }}</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col style="min-width: 200px;">
|
||||
<codemirror
|
||||
ref="myCm"
|
||||
v-model="sql"
|
||||
class="codemirror"
|
||||
:options="sqlOption"
|
||||
@ready="onCmReady"
|
||||
@focus="onCmFocus"
|
||||
@input="onCmCodeChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 10px;">
|
||||
<el-card class="box-card dataPreview" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ $t('dataset.data_preview') }}</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" size="mini" @click="getSQLPreview">{{ $t('dataset.preview') }}</el-button>
|
||||
</div>
|
||||
<div class="text item">
|
||||
<ux-grid
|
||||
ref="plxTable"
|
||||
size="mini"
|
||||
style="width: 100%;"
|
||||
:height="height"
|
||||
:checkbox-config="{highlight: true}"
|
||||
>
|
||||
<ux-table-column
|
||||
v-for="field in fields"
|
||||
:key="field.fieldName"
|
||||
min-width="200px"
|
||||
:field="field.fieldName"
|
||||
:title="field.remarks"
|
||||
:resizable="true"
|
||||
/>
|
||||
</ux-grid>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post, listDatasource } from '@/api/dataset/dataset'
|
||||
import { codemirror } from 'vue-codemirror'
|
||||
// 核心样式
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
// 引入主题后还需要在 options 中指定主题才会生效
|
||||
import 'codemirror/theme/solarized.css'
|
||||
import 'codemirror/mode/sql/sql.js'
|
||||
// require active-line.js
|
||||
import 'codemirror/addon/selection/active-line.js'
|
||||
// closebrackets
|
||||
import 'codemirror/addon/edit/closebrackets.js'
|
||||
// keyMap
|
||||
import 'codemirror/mode/clike/clike.js'
|
||||
import 'codemirror/addon/edit/matchbrackets.js'
|
||||
import 'codemirror/addon/comment/comment.js'
|
||||
import 'codemirror/addon/dialog/dialog.js'
|
||||
import 'codemirror/addon/dialog/dialog.css'
|
||||
import 'codemirror/addon/search/searchcursor.js'
|
||||
import 'codemirror/addon/search/search.js'
|
||||
import 'codemirror/keymap/emacs.js'
|
||||
// 引入代码自动提示插件
|
||||
import 'codemirror/addon/hint/show-hint.css'
|
||||
import 'codemirror/addon/hint/sql-hint'
|
||||
import 'codemirror/addon/hint/show-hint'
|
||||
|
||||
export default {
|
||||
name: 'AddSQL',
|
||||
components: { codemirror },
|
||||
props: {
|
||||
param: Object
|
||||
param: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataSource: '',
|
||||
options: []
|
||||
options: [],
|
||||
name: '',
|
||||
sql: '',
|
||||
sqlOption: {
|
||||
tabSize: 2,
|
||||
styleActiveLine: true,
|
||||
lineNumbers: true,
|
||||
line: true,
|
||||
mode: 'text/x-sql',
|
||||
theme: 'solarized',
|
||||
hintOptions: { // 自定义提示选项
|
||||
completeSingle: false // 当匹配只有一项的时候是否自动补全
|
||||
}
|
||||
},
|
||||
data: [],
|
||||
fields: [],
|
||||
mode: '0',
|
||||
height: 500
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
codemirror() {
|
||||
return this.$refs.myCm.codemirror
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
mounted() {
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
this.height = window.innerHeight / 2
|
||||
})()
|
||||
}
|
||||
this.height = window.innerHeight / 2
|
||||
this.initDataSource()
|
||||
this.$refs.myCm.codemirror.on('keypress', () => {
|
||||
this.$refs.myCm.codemirror.showHint()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
initDataSource() {
|
||||
@@ -57,9 +161,77 @@ export default {
|
||||
this.options = response.data
|
||||
})
|
||||
},
|
||||
|
||||
getSQLPreview() {
|
||||
if (!this.dataSource || this.datasource === '') {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.pls_slc_data_source'),
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
post('/dataset/table/sqlPreview', {
|
||||
dataSourceId: this.dataSource,
|
||||
type: 'sql',
|
||||
info: '{"sql":"' + this.sql + '"}'
|
||||
}).then(response => {
|
||||
this.fields = response.data.fields
|
||||
this.data = response.data.data
|
||||
const datas = this.data
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
})
|
||||
},
|
||||
|
||||
save() {
|
||||
if (!this.dataSource || this.datasource === '') {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.pls_slc_data_source'),
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.name || this.name === '') {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.pls_input_name'),
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
const table = {
|
||||
name: this.name,
|
||||
sceneId: this.param.id,
|
||||
dataSourceId: this.dataSource,
|
||||
type: 'sql',
|
||||
mode: parseInt(this.mode),
|
||||
info: '{"sql":"' + this.sql + '"}'
|
||||
}
|
||||
post('/dataset/table/update', table).then(response => {
|
||||
this.$store.dispatch('dataset/setSceneData', new Date().getTime())
|
||||
this.cancel()
|
||||
})
|
||||
},
|
||||
|
||||
cancel() {
|
||||
// this.dataReset()
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
},
|
||||
|
||||
showSQL(val) {
|
||||
this.sql = val || ''
|
||||
},
|
||||
onCmReady(cm) {
|
||||
this.codemirror.setSize('-webkit-fill-available', 'auto')
|
||||
},
|
||||
onCmFocus(cm) {
|
||||
// console.log('the editor is focus!', cm)
|
||||
},
|
||||
onCmCodeChange(newCode) {
|
||||
// console.log(newCode)
|
||||
this.sql = newCode
|
||||
this.$emit('codeChange', this.sql)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -83,4 +255,25 @@ export default {
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.codemirror {
|
||||
height: 160px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.codemirror >>> .CodeMirror-scroll {
|
||||
height: 160px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dataPreview>>>.el-card__header{
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.dataPreview>>>.el-card__body{
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
span{
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,21 +1,22 @@
|
||||
<template>
|
||||
<el-col>
|
||||
<span>{{ table.name }}</span>
|
||||
<el-table
|
||||
<ux-grid
|
||||
ref="plxTable"
|
||||
size="mini"
|
||||
:data="data"
|
||||
height="40vh"
|
||||
border
|
||||
style="width: 100%;margin-top: 6px;"
|
||||
style="width: 100%;"
|
||||
:height="height"
|
||||
:checkbox-config="{highlight: true}"
|
||||
>
|
||||
<el-table-column
|
||||
<ux-table-column
|
||||
v-for="field in fields"
|
||||
:key="field.originName"
|
||||
min-width="200px"
|
||||
:prop="field.originName"
|
||||
:label="field.name"
|
||||
:field="field.originName"
|
||||
:title="field.name"
|
||||
:resizable="true"
|
||||
/>
|
||||
</el-table>
|
||||
</ux-grid>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
@@ -25,13 +26,16 @@ import { post } from '@/api/dataset/dataset'
|
||||
export default {
|
||||
name: 'DatasetTableData',
|
||||
props: {
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
table: Object
|
||||
table: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [],
|
||||
data: []
|
||||
data: [],
|
||||
height: 500
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -39,10 +43,14 @@ export default {
|
||||
this.initData()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData()
|
||||
},
|
||||
mounted() {
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
this.height = window.innerHeight / 3
|
||||
})()
|
||||
}
|
||||
this.height = window.innerHeight / 3
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
@@ -51,6 +59,8 @@ export default {
|
||||
post('/dataset/table/getPreviewData', this.table).then(response => {
|
||||
this.fields = response.data.fields
|
||||
this.data = response.data.data
|
||||
const datas = this.data
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
<template>
|
||||
<el-col>
|
||||
<el-table
|
||||
<ux-grid
|
||||
ref="plxTable"
|
||||
size="mini"
|
||||
:data="data"
|
||||
border
|
||||
style="width: 100%;"
|
||||
:height="height"
|
||||
:checkbox-config="{highlight: true}"
|
||||
>
|
||||
<el-table-column
|
||||
<ux-table-column
|
||||
v-for="field in fields"
|
||||
:key="field.originName"
|
||||
min-width="200px"
|
||||
:prop="field.originName"
|
||||
:label="field.name"
|
||||
:field="field.originName"
|
||||
:title="field.name"
|
||||
:resizable="true"
|
||||
/>
|
||||
</el-table>
|
||||
</ux-grid>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
@@ -21,19 +23,39 @@
|
||||
export default {
|
||||
name: 'TabDataPreview',
|
||||
props: {
|
||||
table: Object,
|
||||
fields: Array,
|
||||
data: Array
|
||||
table: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
fields: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 500
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
const datas = this.data
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
this.height = window.innerHeight / 2
|
||||
})()
|
||||
}
|
||||
this.height = window.innerHeight / 2
|
||||
},
|
||||
activated() {
|
||||
},
|
||||
|
||||
@@ -1,40 +1,32 @@
|
||||
<template>
|
||||
<div v-loading="result.loading">
|
||||
|
||||
<el-card class="table-card">
|
||||
<template v-slot:header>
|
||||
<ms-table-header
|
||||
:condition.sync="condition"
|
||||
:create-tip="$t('datasource.create')"
|
||||
:title="$t('commons.datasource')"
|
||||
@search="initTableData"
|
||||
@create="create"
|
||||
/>
|
||||
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<complex-table
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:buttons="buttons"
|
||||
:header="header"
|
||||
:search-config="searchConfig"
|
||||
:pagination-config="paginationConfig"
|
||||
@select="select"
|
||||
@search="search"
|
||||
>
|
||||
<template #buttons>
|
||||
<fu-table-button icon="el-icon-circle-plus-outline" :label="$t('datasource.create')" @click="create" />
|
||||
</template>
|
||||
<!-- system menu datasource table-->
|
||||
<el-table border class="adjust-table" :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="name" :label="$t('commons.name')" />
|
||||
<el-table-column prop="desc" :label="$t('commons.description')" />
|
||||
<el-table-column prop="type" :label="$t('datasource.type')" />
|
||||
<el-table-column :label="$t('commons.operating')">
|
||||
<template v-slot:default="scope">
|
||||
<ms-table-operator @editClick="edit(scope.row)" @deleteClick="handleDelete(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<ms-table-pagination
|
||||
:change="initTableData"
|
||||
:current-page.sync="currentPage"
|
||||
:page-size.sync="pageSize"
|
||||
:total="total"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- <el-table-column type="selection" fix /> -->
|
||||
<el-table-column prop="name" :label="$t('commons.name')" />
|
||||
<el-table-column prop="desc" :label="$t('commons.description')" />
|
||||
<el-table-column prop="type" :label="$t('datasource.type')" />
|
||||
<fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix />
|
||||
|
||||
</complex-table>
|
||||
|
||||
<!-- add datasource form -->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="$t('datasource.create')"
|
||||
:visible.sync="dialogDatasourceAddVisible"
|
||||
:title="formType=='add' ? $t('datasource.create') : $t('datasource.modify')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:destroy-on-close="true"
|
||||
@closed="closeFunc"
|
||||
@@ -84,130 +76,37 @@
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<ms-dialog-footer
|
||||
:is-show-validate="true"
|
||||
@cancel="dialogDatasourceAddVisible = false"
|
||||
@validate="validaDatasource('createDatasource')"
|
||||
@confirm="createDatasource('createDatasource')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="saveDatasource('createDatasource')">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- update datasource form -->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="$t('datasource.modify')"
|
||||
:visible.sync="dialogDatasourceUpdateVisible"
|
||||
width="30%"
|
||||
:destroy-on-close="true"
|
||||
@close="closeFunc"
|
||||
>
|
||||
<el-form
|
||||
ref="updateDatasourceForm"
|
||||
:model="form"
|
||||
label-position="right"
|
||||
label-width="100px"
|
||||
size="small"
|
||||
:rules="rule"
|
||||
>
|
||||
<el-form-item
|
||||
:label="$t('commons.name')"
|
||||
prop="name"
|
||||
:rules="[{required: true, message: this.$t('datasource.input_name'), trigger: 'blur'},
|
||||
{min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur'}]"
|
||||
>
|
||||
<el-input v-model="form.name" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('commons.description')"
|
||||
prop="desc"
|
||||
:rules="[{required: true, message: this.$t('datasource.input_desc'), trigger: 'blur'},
|
||||
{min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur'}]"
|
||||
>
|
||||
<el-input v-model="form.desc" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.data_base')" prop="configuration.dataBase" :rules="{required: true, message: $t('datasource.please_input_data_base'), trigger: 'blur'}">
|
||||
<el-input v-model="form.configuration.dataBase" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.user_name')" prop="configuration.username">
|
||||
<el-input v-model="form.configuration.username" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.password')" prop="configuration.password" :rules="{required: true, message: $t('datasource.please_input_password'), trigger: 'change'}">
|
||||
<el-input v-model="form.configuration.password" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.host')" prop="configuration.host" :rules="{required: true, message: $t('datasource.please_input_host'), trigger: 'change'}">
|
||||
<el-input v-model="form.configuration.host" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.port')" prop="configuration.port" :rules="{required: true, message: $t('datasource.please_input_port'), trigger: 'change'}">
|
||||
<el-input v-model="form.configuration.port" autocomplete="off" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<ms-dialog-footer
|
||||
:is-show-validate="true"
|
||||
@cancel="dialogDatasourceUpdateVisible = false"
|
||||
@validate="validaDatasource('updateDatasourceForm')"
|
||||
@confirm="updateDatasource('updateDatasourceForm')"
|
||||
/>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<ms-delete-confirm ref="deleteConfirm" :title="$t('datasource.delete')" @delete="_handleDelete" />
|
||||
|
||||
</div>
|
||||
</layout-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MsTablePagination from '@/metersphere/common/pagination/TablePagination'
|
||||
import MsTableHeader from '@/metersphere/common/components/MsTableHeader'
|
||||
import MsTableOperator from '@/metersphere/common/components/MsTableOperator'
|
||||
import MsDialogFooter from '@/metersphere/common/components/MsDialogFooter'
|
||||
import {
|
||||
listenGoBack,
|
||||
removeGoBackListener
|
||||
} from '@/metersphere/common/js/utils'
|
||||
import MsDeleteConfirm from '@/metersphere/common/components/MsDeleteConfirm'
|
||||
|
||||
import LayoutContent from '@/components/business/LayoutContent'
|
||||
import ComplexTable from '@/components/business/complex-table'
|
||||
import { checkPermission } from '@/utils/permission'
|
||||
import { formatCondition } from '@/utils/index'
|
||||
import { dsGrid, addDs, editDs, delDs, validateDs } from '@/api/system/datasource'
|
||||
|
||||
export default {
|
||||
name: 'DEDatasource',
|
||||
components: {
|
||||
MsDeleteConfirm,
|
||||
MsTablePagination,
|
||||
MsTableHeader,
|
||||
MsTableOperator,
|
||||
MsDialogFooter
|
||||
LayoutContent,
|
||||
ComplexTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryPath: '/datasource/list',
|
||||
deletePath: '/datasource/delete/',
|
||||
createPath: '/datasource/add',
|
||||
updatePath: '/datasource/update',
|
||||
validatePath: '/datasource/validate',
|
||||
result: {},
|
||||
dialogDatasourceAddVisible: false,
|
||||
dialogDatasourceUpdateVisible: false,
|
||||
dialogDatasourceMemberVisible: false,
|
||||
dialogDatasourceMemberAddVisible: false,
|
||||
dialogDatasourceMemberUpdateVisible: false,
|
||||
multipleSelection: [],
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
dialogCurrentPage: 1,
|
||||
dialogPageSize: 10,
|
||||
dialogTotal: 0,
|
||||
currentRow: {},
|
||||
condition: {},
|
||||
dialogCondition: {},
|
||||
tableData: [],
|
||||
memberLineData: [],
|
||||
formType: 'add',
|
||||
dialogVisible: false,
|
||||
data: [],
|
||||
form: { configuration: {}},
|
||||
allTypes: [{ name: 'mysql', type: 'jdbc' }, { name: 'sqlServer', type: 'jdbc' }],
|
||||
memberForm: {},
|
||||
rule: {
|
||||
name: [
|
||||
{ required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
|
||||
@@ -217,79 +116,62 @@ export default {
|
||||
{ required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
|
||||
{ max: 50, message: this.$t('commons.input_limit', [0, 50]), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
header: '',
|
||||
columns: [],
|
||||
buttons: [
|
||||
{
|
||||
label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit,
|
||||
show: checkPermission(['datasource:edit'])
|
||||
}, {
|
||||
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.del,
|
||||
show: checkPermission(['datasource:del'])
|
||||
}
|
||||
],
|
||||
searchConfig: {
|
||||
useQuickSearch: true,
|
||||
quickPlaceholder: '按名称搜索',
|
||||
combine: false,
|
||||
components: [
|
||||
// { field: 'name', label: '姓名', component: 'FuComplexInput', defaultOperator: 'eq' },
|
||||
{ field: 'name', label: '名称', component: 'FuComplexInput' },
|
||||
|
||||
{
|
||||
field: 'type',
|
||||
label: '类型',
|
||||
component: 'FuComplexSelect',
|
||||
options: [{ label: 'mysql', value: 'mysql' }, { label: 'sqlServer', value: 'sqlServer' }],
|
||||
multiple: false
|
||||
}
|
||||
// { field: 'deptId', label: '组织', component: conditionTable }
|
||||
]
|
||||
},
|
||||
paginationConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
this.initTableData()
|
||||
this.search()
|
||||
},
|
||||
methods: {
|
||||
select(selection) {
|
||||
console.log(selection)
|
||||
},
|
||||
create() {
|
||||
this.dialogDatasourceAddVisible = true
|
||||
listenGoBack(this.closeFunc)
|
||||
},
|
||||
dataFilter(val) {
|
||||
if (val) {
|
||||
this.memberForm.userList = this.memberForm.copyUserList.filter((item) => {
|
||||
if (!!~item.id.indexOf(val) || !!~item.id.toUpperCase().indexOf(val.toUpperCase())) {
|
||||
return true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.memberForm.userList = this.memberForm.copyUserList
|
||||
}
|
||||
this.formType = 'add'
|
||||
this.dialogVisible = true
|
||||
},
|
||||
|
||||
edit(row) {
|
||||
this.dialogDatasourceUpdateVisible = true
|
||||
this.formType = 'modify'
|
||||
this.dialogVisible = true
|
||||
this.form = Object.assign({}, row)
|
||||
this.form.configuration = JSON.parse(this.form.configuration)
|
||||
listenGoBack(this.closeFunc)
|
||||
},
|
||||
cellClick(row) {
|
||||
// 保存当前点击的组织信息到currentRow
|
||||
this.currentRow = row
|
||||
this.dialogDatasourceMemberVisible = true
|
||||
const param = {
|
||||
name: '',
|
||||
organizationId: row.id
|
||||
}
|
||||
const path = '/user/special/org/member/list'
|
||||
this.result = this.$post(path + '/' + this.dialogCurrentPage + '/' + this.dialogPageSize, param, res => {
|
||||
const data = res.data
|
||||
this.memberLineData = data.listObject
|
||||
const url = '/userrole/list/org/' + row.id
|
||||
for (let i = 0; i < this.memberLineData.length; i++) {
|
||||
this.$get(url + '/' + encodeURIComponent(this.memberLineData[i].id), response => {
|
||||
const roles = response.data
|
||||
this.$set(this.memberLineData[i], 'roles', roles)
|
||||
})
|
||||
}
|
||||
this.dialogTotal = data.itemCount
|
||||
})
|
||||
listenGoBack(this.closeFunc)
|
||||
},
|
||||
dialogSearch() {
|
||||
const row = this.currentRow
|
||||
this.dialogDatasourceMemberVisible = true
|
||||
const param = this.dialogCondition
|
||||
this.$set(param, 'organizationId', row.id)
|
||||
const path = '/user/special/org/member/list'
|
||||
this.result = this.$post(path + '/' + this.dialogCurrentPage + '/' + this.dialogPageSize, param, res => {
|
||||
const data = res.data
|
||||
this.memberLineData = data.listObject
|
||||
const url = '/userrole/list/org/' + row.id
|
||||
for (let i = 0; i < this.memberLineData.length; i++) {
|
||||
this.$get(url + '/' + encodeURIComponent(this.memberLineData[i].id), response => {
|
||||
const roles = response.data
|
||||
this.$set(this.memberLineData[i], 'roles', roles)
|
||||
})
|
||||
}
|
||||
this.dialogTotal = data.itemCount
|
||||
})
|
||||
},
|
||||
handleDelete(datasource) {
|
||||
this.$refs.deleteConfirm.open(datasource)
|
||||
},
|
||||
|
||||
_handleDelete(datasource) {
|
||||
this.$confirm(this.$t('datasource.delete_confirm'), '', {
|
||||
confirmButtonText: this.$t('commons.confirm'),
|
||||
@@ -298,7 +180,7 @@ export default {
|
||||
}).then(() => {
|
||||
delDs(datasource.id).then(res => {
|
||||
this.$success(this.$t('commons.delete_success'))
|
||||
this.initTableData()
|
||||
this.search()
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
@@ -307,37 +189,22 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
createDatasource(createDatasourceForm) {
|
||||
saveDatasource(createDatasourceForm) {
|
||||
this.$refs[createDatasourceForm].validate(valid => {
|
||||
if (valid) {
|
||||
const method = this.formType === 'add' ? addDs : editDs
|
||||
this.form.configuration = JSON.stringify(this.form.configuration)
|
||||
addDs(this.form).then(res => {
|
||||
method(this.form).then(res => {
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
this.initTableData()
|
||||
this.dialogDatasourceAddVisible = false
|
||||
})
|
||||
|
||||
this.dialogDatasourceAddVisible = false
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
updateDatasource(updateDatasourceForm) {
|
||||
this.$refs[updateDatasourceForm].validate(valid => {
|
||||
if (valid) {
|
||||
this.form.configuration = JSON.stringify(this.form.configuration)
|
||||
|
||||
editDs(this.form).then(res => {
|
||||
this.$success(this.$t('commons.modify_success'))
|
||||
this.dialogDatasourceUpdateVisible = false
|
||||
this.initTableData()
|
||||
this.search()
|
||||
this.dialogVisible = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
validaDatasource(datasourceForm) {
|
||||
this.$refs[datasourceForm].validate(valid => {
|
||||
if (valid) {
|
||||
@@ -359,54 +226,46 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
initTableData() {
|
||||
dsGrid(this.currentPage, this.pageSize, this.condition).then(response => {
|
||||
const data = response.data
|
||||
this.tableData = data.listObject
|
||||
this.total = data.itemCount
|
||||
quick_condition(condition) {
|
||||
const result = {}
|
||||
if (condition && condition.quick) {
|
||||
for (const [key, value] of Object.entries(condition)) {
|
||||
// console.log(`${key}`)
|
||||
if (`${key}` === 'quick') {
|
||||
const v_new = Object.assign({}, value)
|
||||
v_new['field'] = 'name'
|
||||
result['name'] = v_new
|
||||
} else {
|
||||
result[`${key}`] = value
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
return Object.assign({}, condition)
|
||||
},
|
||||
search(condition) {
|
||||
const temp_param = this.quick_condition(condition)
|
||||
const temp = formatCondition(temp_param)
|
||||
const param = temp || {}
|
||||
const { currentPage, pageSize } = this.paginationConfig
|
||||
dsGrid(currentPage, pageSize, param).then(response => {
|
||||
this.data = response.data.listObject
|
||||
this.paginationConfig.total = response.data.itemCount
|
||||
})
|
||||
},
|
||||
|
||||
closeFunc() {
|
||||
this.memberLineData = []
|
||||
this.initTableData()
|
||||
this.formType = 'add'
|
||||
// this.search()
|
||||
this.form = { configuration: {}}
|
||||
removeGoBackListener(this.closeFunc)
|
||||
this.dialogDatasourceAddVisible = false
|
||||
this.dialogDatasourceUpdateVisible = false
|
||||
this.dialogDatasourceMemberVisible = false
|
||||
this.dialogDatasourceMemberAddVisible = false
|
||||
this.dialogDatasourceMemberUpdateVisible = false
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val
|
||||
this.dialogVisible = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "~@/metersphere/common/css/index.css";
|
||||
.member-size {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.org-member-id {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.org-member-email {
|
||||
float: right;
|
||||
color: #8492a6;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.select-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dialog-css >>> .el-dialog__header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
|
||||
<complex-table
|
||||
<!-- <complex-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
:lazy="isLazy"
|
||||
@@ -15,15 +15,31 @@
|
||||
:default-expand-all="isTableExpand"
|
||||
row-key="deptId"
|
||||
@search="search"
|
||||
> -->
|
||||
<tree-table
|
||||
:columns="columns"
|
||||
:buttons="buttons"
|
||||
:header="header"
|
||||
:search-config="searchConfig"
|
||||
@search="search"
|
||||
>
|
||||
<template #buttons>
|
||||
<fu-table-button icon="el-icon-circle-plus-outline" :label="$t('organization.create')" @click="create" />
|
||||
<fu-table-button v-permission="['dept:add']" icon="el-icon-circle-plus-outline" :label="$t('organization.create')" @click="create" />
|
||||
</template>
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
lazy
|
||||
:load="loadExpandDatas"
|
||||
style="width: 100%"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
row-key="deptId"
|
||||
>
|
||||
|
||||
<!-- <el-table-column type="selection" fix /> -->
|
||||
<el-table-column label="名称" prop="name" />
|
||||
<el-table-column label="下属组织数" prop="subCount" />
|
||||
<!-- <el-table-column label="状态" align="center" prop="enabled">
|
||||
<!-- <el-table-column type="selection" fix /> -->
|
||||
<el-table-column label="名称" prop="name" />
|
||||
<el-table-column label="下属组织数" prop="subCount" />
|
||||
<!-- <el-table-column label="状态" align="center" prop="enabled">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.enabled"
|
||||
@@ -34,14 +50,16 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="createTime" label="创建日期">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<fu-table-operations :buttons="buttons" label="操作" fix />
|
||||
</complex-table>
|
||||
<fu-table-operations :buttons="buttons" label="操作" fix />
|
||||
</el-table>
|
||||
</tree-table>
|
||||
<!-- </complex-table> -->
|
||||
|
||||
<!-- add organization form -->
|
||||
<el-dialog
|
||||
@@ -106,19 +124,19 @@
|
||||
|
||||
<script>
|
||||
import LayoutContent from '@/components/business/LayoutContent'
|
||||
import ComplexTable from '@/components/business/complex-table'
|
||||
import TreeTable from '@/components/business/tree-table'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import { formatCondition } from '@/utils/index'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
|
||||
|
||||
import { checkPermission } from '@/utils/permission'
|
||||
import { getDeptTree, addDept, editDept, delDept, loadTable } from '@/api/system/dept'
|
||||
|
||||
export default {
|
||||
name: 'MsOrganization',
|
||||
components: {
|
||||
LayoutContent,
|
||||
ComplexTable,
|
||||
TreeTable,
|
||||
Treeselect
|
||||
},
|
||||
data() {
|
||||
@@ -155,9 +173,11 @@ export default {
|
||||
columns: [],
|
||||
buttons: [
|
||||
{
|
||||
label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit
|
||||
label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit,
|
||||
show: checkPermission(['dept:edit'])
|
||||
}, {
|
||||
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete
|
||||
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete,
|
||||
show: checkPermission(['dept:del'])
|
||||
}
|
||||
],
|
||||
searchConfig: {
|
||||
@@ -168,11 +188,7 @@ export default {
|
||||
|
||||
]
|
||||
},
|
||||
paginationConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
},
|
||||
|
||||
defaultCondition: {
|
||||
field: 'pid',
|
||||
operator: 'eq',
|
||||
@@ -271,7 +287,7 @@ export default {
|
||||
},
|
||||
// 加载表格数据
|
||||
search(condition) {
|
||||
this.setTableAttr()
|
||||
// this.setTableAttr()
|
||||
this.tableData = []
|
||||
let param = {}
|
||||
if (condition && condition.quick) {
|
||||
@@ -293,7 +309,7 @@ export default {
|
||||
|
||||
if (condition && condition.quick) {
|
||||
data = this.buildTree(data)
|
||||
this.setTableAttr(true)
|
||||
// this.setTableAttr(true)
|
||||
}
|
||||
this.tableData = data
|
||||
this.depts = null
|
||||
|
||||
@@ -1,59 +1,46 @@
|
||||
<template>
|
||||
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<complex-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
lazy
|
||||
:load="initTableData"
|
||||
<tree-table
|
||||
:columns="columns"
|
||||
:buttons="buttons"
|
||||
:header="header"
|
||||
:search-config="searchConfig"
|
||||
:pagination-config="paginationConfig"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
row-key="menuId"
|
||||
@search="initTableData"
|
||||
>
|
||||
<template #buttons>
|
||||
<fu-table-button icon="el-icon-circle-plus-outline" :label="$t('menu.create')" @click="create" />
|
||||
<template v-permission="['menu:add']" #buttons>
|
||||
<fu-table-button v-permission="['menu:add']" icon="el-icon-circle-plus-outline" :label="$t('menu.create')" @click="create" />
|
||||
</template>
|
||||
|
||||
<!-- <el-table-column type="selection" fix /> -->
|
||||
<el-table-column :show-overflow-tooltip="true" label="菜单标题" width="150px" prop="title" />
|
||||
<el-table-column prop="icon" label="图标" align="center" width="60px">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
lazy
|
||||
:load="initTableData"
|
||||
style="width: 100%"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
row-key="menuId"
|
||||
>
|
||||
|
||||
<el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
|
||||
<!-- <el-table-column prop="iframe" label="外链" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.iframe">是</span>
|
||||
<span v-else>否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cache" label="缓存" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.cache">是</span>
|
||||
<span v-else>否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="hidden" label="可见" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.hidden">否</span>
|
||||
<span v-else>是</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="createTime" label="创建日期" width="160px">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column type="selection" fix /> -->
|
||||
<el-table-column :show-overflow-tooltip="true" label="菜单标题" width="150px" prop="title" />
|
||||
<el-table-column prop="icon" label="图标" align="center" width="60px">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<fu-table-operations :buttons="buttons" label="操作" fix />
|
||||
</complex-table>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
|
||||
|
||||
<el-table-column prop="createTime" label="创建日期" width="160px">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<fu-table-operations :buttons="buttons" label="操作" fix />
|
||||
</el-table>
|
||||
</tree-table>
|
||||
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
@@ -66,13 +53,13 @@
|
||||
<el-form ref="menuForm" inline :model="form" :rules="rule" size="small" label-width="80px">
|
||||
|
||||
<el-form-item label="菜单类型" prop="type">
|
||||
<el-radio-group v-model="form.type" size="mini" style="width: 179px">
|
||||
<el-radio-group v-model="form.type" size="mini" :disabled="formType!=='add'" style="width: 179px">
|
||||
<el-radio-button label="0">目录</el-radio-button>
|
||||
<el-radio-button label="1">菜单</el-radio-button>
|
||||
<el-radio-button label="2">按钮</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type!== '2'" label="菜单图标" prop="icon">
|
||||
<el-form-item v-show="form.type!== 2" label="菜单图标" prop="icon">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
width="425"
|
||||
@@ -86,48 +73,32 @@
|
||||
</el-input>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item v-show="form.type !== '2'" label="外链菜单" prop="iframe">
|
||||
<el-radio-group v-model="form.iframe" size="mini">
|
||||
<el-radio-button label="true">是</el-radio-button>
|
||||
<el-radio-button label="false">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type=== '1'" label="菜单缓存" prop="cache">
|
||||
<el-radio-group v-model="form.cache" size="mini">
|
||||
<el-radio-button label="true">是</el-radio-button>
|
||||
<el-radio-button label="false">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type !== '2'" label="菜单可见" prop="hidden">
|
||||
<el-radio-group v-model="form.hidden" size="mini">
|
||||
<el-radio-button label="false">是</el-radio-button>
|
||||
<el-radio-button label="true">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item> -->
|
||||
<el-form-item v-if="form.type !== '2'" label="菜单标题" prop="title">
|
||||
|
||||
<el-form-item v-if="form.type !== 2" label="菜单标题" prop="title">
|
||||
<el-input v-model="form.title" :style=" form.type === '0' ? 'width: 450px' : 'width: 179px'" placeholder="菜单标题" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === '2'" label="按钮名称" prop="title">
|
||||
<el-form-item v-if="form.type === 2" label="按钮名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="按钮名称" style="width: 179px;" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type !== '0'" label="权限标识" prop="permission">
|
||||
<el-input v-model="form.permission" :disabled="form.iframe" placeholder="权限标识" style="width: 179px;" />
|
||||
<el-form-item v-show="form.type !== 0" label="权限标识" prop="permission">
|
||||
<el-input v-model="form.permission" :disabled="form.iframe || formType!=='add'" placeholder="权限标识" style="width: 179px;" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type !== '2'" label="路由地址" prop="path">
|
||||
<el-input v-model="form.path" placeholder="路由地址" style="width: 179px;" />
|
||||
<el-form-item v-if="form.type !== 2" label="路由地址" prop="path">
|
||||
<el-input v-model="form.path" placeholder="路由地址" :disabled="formType!=='add'" style="width: 179px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单排序" prop="menuSort">
|
||||
<el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 179px;" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="!form.iframe && form.type === '1'" label="组件名称" prop="componentName">
|
||||
<el-input v-model="form.componentName" style="width: 179px;" placeholder="匹配组件内Name字段" />
|
||||
<el-form-item v-show="!form.iframe && form.type === 1" label="组件名称" prop="componentName">
|
||||
<el-input v-model="form.componentName" :disabled="formType!=='add'" style="width: 179px;" placeholder="匹配组件内Name字段" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="!form.iframe && form.type === '1'" label="组件路径" prop="component">
|
||||
<el-input v-model="form.component" style="width: 179px;" placeholder="组件路径" />
|
||||
<el-form-item v-show="!form.iframe && form.type === 1" label="组件路径" prop="component">
|
||||
<el-input v-model="form.component" :disabled="formType!=='add'" style="width: 179px;" placeholder="组件路径" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上级类目" prop="pid">
|
||||
<treeselect
|
||||
v-model="form.pid"
|
||||
:disabled="formType!=='add'"
|
||||
:options="menus"
|
||||
:load-options="loadMenus"
|
||||
style="width: 450px;"
|
||||
@@ -139,12 +110,7 @@
|
||||
<el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="createMenu('menuForm')">确认</el-button>
|
||||
</div>
|
||||
<!-- <template v-slot:footer>
|
||||
<ms-dialog-footer
|
||||
@cancel="dialogVisible = false"
|
||||
@confirm="createMenu('menuForm')"
|
||||
/>
|
||||
</template> -->
|
||||
|
||||
</el-dialog>
|
||||
|
||||
</layout-content>
|
||||
@@ -152,19 +118,18 @@
|
||||
|
||||
<script>
|
||||
import LayoutContent from '@/components/business/LayoutContent'
|
||||
import ComplexTable from '@/components/business/complex-table'
|
||||
import TreeTable from '@/components/business/tree-table'
|
||||
// import { checkPermission } from '@/utils/permission'
|
||||
import IconSelect from '@/components/IconSelect'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
|
||||
|
||||
import { checkPermission } from '@/utils/permission'
|
||||
import { addMenu, editMenu, delMenu, getMenusTree } from '@/api/system/menu'
|
||||
|
||||
export default {
|
||||
name: 'MsMenu',
|
||||
components: {
|
||||
ComplexTable,
|
||||
TreeTable,
|
||||
LayoutContent,
|
||||
Treeselect,
|
||||
IconSelect
|
||||
@@ -172,7 +137,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
menus: [],
|
||||
topMunu: { id: 0, label: '顶级类目', children: null },
|
||||
topMunu: { id: 0, label: '顶级目录', children: null },
|
||||
formType: 'add',
|
||||
dialogVisible: false,
|
||||
condition: {},
|
||||
@@ -200,9 +165,11 @@ export default {
|
||||
columns: [],
|
||||
buttons: [
|
||||
{
|
||||
label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit
|
||||
label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit,
|
||||
show: checkPermission(['menu:edit'])
|
||||
}, {
|
||||
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete
|
||||
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete,
|
||||
show: checkPermission(['menu:del'])
|
||||
}
|
||||
],
|
||||
searchConfig: {
|
||||
@@ -224,11 +191,6 @@ export default {
|
||||
// multiple: false
|
||||
// }
|
||||
]
|
||||
},
|
||||
paginationConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
|
||||
}
|
||||
@@ -374,7 +336,7 @@ export default {
|
||||
this.formType === 'modify' && this.form['menuId'] && (method = editMenu)
|
||||
method(this.form).then(res => {
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
this.initTableData()
|
||||
// this.initTableData()
|
||||
this.oldPid && this.reloadByPid(this.oldPid)
|
||||
this.reloadByPid(this.form['pid'])
|
||||
this.dialogVisible = false
|
||||
@@ -407,7 +369,8 @@ export default {
|
||||
reloadByPid(pid) {
|
||||
if (pid !== 0 && this.maps.get(pid)) {
|
||||
const { row, treeNode, resolve } = this.maps.get(pid)
|
||||
this.$set(this.$refs.table.store.states.lazyTreeNodeMap, pid, [])
|
||||
const sto = this.$refs.table['store']
|
||||
this.$set(sto.states.lazyTreeNodeMap, pid, [])
|
||||
this.initTableData(row, treeNode, resolve)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -11,10 +11,10 @@
|
||||
@search="search"
|
||||
>
|
||||
<template #buttons>
|
||||
<fu-table-button icon="el-icon-circle-plus-outline" :label="$t('user.create')" @click="create" />
|
||||
<fu-table-button v-permission="['user:add']" icon="el-icon-circle-plus-outline" :label="$t('user.create')" @click="create" />
|
||||
</template>
|
||||
|
||||
<el-table-column type="selection" fix />
|
||||
<!-- <el-table-column type="selection" fix /> -->
|
||||
<el-table-column prop="username" label="ID" width="80" />
|
||||
<el-table-column prop="nickName" :label="$t('commons.name')" width="140" />
|
||||
<el-table-column prop="gender" label="性别" width="50" />
|
||||
@@ -157,7 +157,7 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
|
||||
import { userLists, addUser, editUser, delUser, editPassword, editStatus } from '@/api/system/user'
|
||||
import { allRoles } from '@/api/system/role'
|
||||
import { getDeptTree } from '@/api/system/dept'
|
||||
import { getDeptTree, treeByDeptId } from '@/api/system/dept'
|
||||
|
||||
export default {
|
||||
|
||||
@@ -168,9 +168,11 @@ export default {
|
||||
columns: [],
|
||||
buttons: [
|
||||
{
|
||||
label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit
|
||||
label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit,
|
||||
show: checkPermission(['user:edit'])
|
||||
}, {
|
||||
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.del
|
||||
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.del,
|
||||
show: checkPermission(['user:del'])
|
||||
}, {
|
||||
label: this.$t('member.edit_password'), icon: 'el-icon-s-tools', type: 'danger', click: this.editPassword,
|
||||
show: checkPermission(['user:editPwd'])
|
||||
@@ -306,14 +308,20 @@ export default {
|
||||
},
|
||||
|
||||
create() {
|
||||
this.depts = null
|
||||
this.formType = 'add'
|
||||
this.form = Object.assign({}, this.defaultForm)
|
||||
this.dialogVisible = true
|
||||
},
|
||||
edit(row) {
|
||||
this.depts = null
|
||||
this.formType = 'modify'
|
||||
this.dialogVisible = true
|
||||
this.form = Object.assign({}, row)
|
||||
if (this.form.deptId === 0) {
|
||||
this.form.deptId = null
|
||||
}
|
||||
this.initDeptTree()
|
||||
},
|
||||
editPassword(row) {
|
||||
this.editPasswordVisible = true
|
||||
@@ -364,6 +372,7 @@ export default {
|
||||
})
|
||||
},
|
||||
handleClose() {
|
||||
this.depts = null
|
||||
this.formType = 'add'
|
||||
this.form = {}
|
||||
this.editPasswordVisible = false
|
||||
@@ -376,12 +385,30 @@ export default {
|
||||
this.$success(this.$t('commons.modify_success'))
|
||||
})
|
||||
},
|
||||
|
||||
initDeptTree() {
|
||||
treeByDeptId(this.form.deptId || 0).then(res => {
|
||||
const results = res.data.map(node => {
|
||||
if (node.hasChildren && !node.children) {
|
||||
node.children = null
|
||||
}
|
||||
return node
|
||||
})
|
||||
this.depts = results
|
||||
})
|
||||
},
|
||||
// 获取弹窗内部门数据
|
||||
loadDepts({ action, parentNode, callback }) {
|
||||
if (action === LOAD_ROOT_OPTIONS) {
|
||||
if (action === LOAD_ROOT_OPTIONS && !this.form.deptId) {
|
||||
const _self = this
|
||||
!this.depts && getDeptTree('0').then(res => {
|
||||
_self.depts = res.data.map(node => _self.normalizer(node))
|
||||
treeByDeptId(0).then(res => {
|
||||
const results = res.data.map(node => {
|
||||
if (node.hasChildren && !node.children) {
|
||||
node.children = null
|
||||
}
|
||||
return node
|
||||
})
|
||||
_self.depts = results
|
||||
callback()
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user