Skip to content

H
haoban-operation-4
Commit efe8cdae by 无尘
Options

feat: 增加 sql 页面

parent dcf749a5
Showing with 440 additions and 23 deletions
src/api/sql.js
...@@ -4,14 +4,21 @@ ...@@ -4,14 +4,21 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2020-11-09 11:22:08 * @Date: 2020-11-09 11:22:08
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-11-09 11:24:38 * @LastEditTime: 2020-11-10 14:48:12
*/ */
import getFetch from './get-fetch'; import getFetch from './get-fetch';
let api = { let api = {
getProjectList: '/', // 获取项目列表, getProjectList: '/', // 获取项目列表,
getTableList: '/', // 获取表列表, getTableList: '/', // 获取表列表,
getSqlList: '/', // 获取sql列表, getSqlList: '/', // 获取 sql 列表,
addSqlIndex: {
url: '/', // 添加索引
method: 'post',
useFormData: true,
useIntercept: false
},
getSqlDetail: '/', // 获取 sql 详情
}; };
api = getFetch(api, '/hb-manage-operation-web'); api = getFetch(api, '/hb-manage-operation-web');
......
src/components/sql/index-dialog.vue 0 → 100644
<!--
* @Descripttion: 完善索引
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-11-10 13:46:15
* @LastEditors: 无尘
* @LastEditTime: 2020-11-10 15:04:20
-->
<!-- -->
<template>
<el-dialog title="完善索引" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
<div class="">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm" @submit.native.prevent>
<el-form-item label="" prop="sqlIndex">
<el-input class="w-440" type="textarea" rows="3" v-model="ruleForm.sqlIndex" maxlength="500" show-word-limit></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="toCancel">取消</el-button>
<el-button type="primary" :loading="loadBtn" @click="submitForm('ruleForm')">确认</el-button>
</div>
</el-dialog>
</template>
<script>
import { _debounce, emojiToStr } from '@/common/js/public';
import fetch from '@/api/dictionary';
const { addSqlIndex } = fetch;
import showMsg from '@/common/js/showmsg';
export default {
name: '',
components: {},
props: {
sqlId: {
type: String
}
},
data() {
return {
dialogVisible: true,
loadBtn: false,
ruleForm: {
sqlId: '',
sqlIndex: ''
},
rules: {
sqlIndex: [ { required: true, message: '请输入', trigger: 'blur' } ]
},
};
},
// 生命周期 - 挂载完成（访问DOM元素）
mounted() {
const that = this;
if (that.sqlId) {
that.ruleForm.sqlId = that.sqlId;
}
},
// methods
methods: {
/**
* @description: 关闭弹窗
* @author: 无尘
*/
toCancel() {
const that = this;
that.$emit('closeText');
that.$refs['ruleForm'].resetFields();
},
handleClose(done) {
const that = this;
that.$emit('closeText');
that.$refs['ruleForm'].resetFields();
},
/**
* @description: 保存
* @param {String} formName
* @author: 无尘
*/
submitForm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.postSave();
}
});
}, 300),
postSave() {
const that = this;
that.loadBtn = true;
const data = {
sqlId: that.ruleForm.sqlId,
sqlIndex: emojiToStr(that.ruleForm.sqlIndex),
};
addSqlIndex(data)
.then(res => {
that.loadBtn = false;
if (res.code == '0000') {
showMsg.showmsg('操作成功', 'success');
that.$refs['ruleForm'].resetFields();
that.$emit('submitText');
}else {
that.$message({
message: res.message || '接口错误',
type: 'warning'
});
that.$emit('submitText');
}
})
.catch(error => {
that.loadBtn = false;
});
}
},
watch: {}
};
</script>
<style lang='less' scoped>
</style>
src/components/sql/sql-detail.vue 0 → 100644
<!--
* @Descripttion: sql 详情
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-11-10 13:46:26
* @LastEditors: 无尘
* @LastEditTime: 2020-11-10 15:06:15
-->
<template>
<el-dialog title="SQL 详情" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
<div class="">
<el-form :model="ruleForm" ref="ruleForm" label-width="10px" class="demo-ruleForm" @submit.native.prevent>
<el-form-item label="项目名称" prop="">
{{ruleForm.projectName || '--'}}
</el-form-item>
<el-form-item label="表名称" prop="">
{{ruleForm.tableName || '--'}}
</el-form-item>
<el-form-item label="SQL" prop="">
<el-input class="w-440" readonly type="textarea" rows="3" v-model="ruleForm.sqlIndex" maxlength="500" show-word-limit></el-input>
</el-form-item>
<el-form-item label="完善状态" prop="">
{{ruleForm.projectName || '--'}}
</el-form-item>
<el-form-item label="上线状态" prop="">
{{ruleForm.tableName || '--'}}
</el-form-item>
</el-form>
</div>
</el-dialog>
</template>
<script>
export default {
name: '',
components: {},
props: {
sqlRow: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
dialogVisible: true,
loadBtn: false,
ruleForm: {
sqlId: '',
sqlIndex: '',
projectName: '',
tableName: ''
}
};
},
// 生命周期 - 挂载完成（访问DOM元素）
mounted() {
const that = this;
if (Object.keys(that.sqlRow).length) {
that.ruleForm = JSON.parse(JSON.stringify(that.sqlRow));
}
},
// methods
methods: {
/**
* @description: 关闭弹窗
* @author: 无尘
*/
handleClose() {
const that = this;
that.$emit('closeText');
that.$refs['ruleForm'].resetFields();
},
},
watch: {
sqlRow(newData) {
const that = this;
if (Object.keys(newData).length) {
that.ruleForm = JSON.parse(JSON.stringify(newData));
}
}
}
};
</script>
<style lang='less' scoped>
</style>
src/views/sql/project-sql.vue
...@@ -4,31 +4,86 @@ ...@@ -4,31 +4,86 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2020-11-09 11:15:16 * @Date: 2020-11-09 11:15:16
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-11-09 11:26:21 * @LastEditTime: 2020-11-10 11:41:58
--> -->
<template> <template>
<div> <div>
<el-table class="select-table" ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
<el-table-column label="项目名称" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.projectName || '--' }}</template>
</el-table-column>
<el-table-column prop="" label="创建时间" show-overflow-tooltip>
<template slot-scope="scope">
<div>{{ scope.row.createTime | timeStampToYmd }} {{ !scope.row.createTime ? '--': '' }}</div>
<div>{{ scope.row.createTime | timeStampToHms }} {{ !scope.row.createTime ? '--': '' }}</div>
</template>
</el-table-column>
<el-table-column prop="" label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button type="text" @click="toSqlPage(scope.row)">SQL列表</el-button>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
</div>
</div> </div>
</template> </template>
<script> <script>
import fetch from '@/api/dictionary';
const { getProjectList } = fetch;
export default { export default {
name: 'ProjectSql', name: 'ProjectSql',
components: {}, components: {},
data() { data() {
return { return {
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0,
loading: false,
tableData: []
}; };
}, },
// 生命周期 - 挂载完成（访问DOM元素） // 生命周期 - 挂载完成（访问DOM元素）
// mounted() { mounted() {
const that = this;
// }, that.getTableData();
},
// methods // methods
methods: { methods: {
/**
* @description: 获取项目列表
* @author: 无尘
*/
getTableData() {
const that = this;
that.loading = true;
const param = {
pageNum: that.currentPage,
pageSize: that.pageSize
};
getProjectList(param).then(res => {
that.loading = false;
that.tableData = res.result.list || [];
that.total = res.result.totalCount || 0;
})
.catch(function(error) {
that.loading = false;
});
},
/**
* @description: 跳转 sql 列表
* @param {Object} row
* @author: 无尘
*/
toSqlPage(row) {
const that = this;
that.$router.push(`/sql-list?projectId=${row.projectId}`);
}
}, },
watch: {} watch: {}
}; };
......
src/views/sql/sql-list.vue
...@@ -4,32 +4,118 @@ ...@@ -4,32 +4,118 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2020-11-09 11:16:12 * @Date: 2020-11-09 11:16:12
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-11-09 11:25:39 * @LastEditTime: 2020-11-10 13:42:53
--> -->
<!-- --> <!-- -->
<template> <template>
<div> <div>
<el-table class="select-table" ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="项目名称" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.projectName || '--' }}</template>
</el-table-column>
<el-table-column label="表名称" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.tableName || '--' }}</template>
</el-table-column>
<el-table-column label="是否需要完善" show-overflow-tooltip>
<template slot-scope="scope">
<el-switch
v-model="scope.row.tableName"
active-text="''"
inactive-text="''">
</el-switch>
</template>
</el-table-column>
<el-table-column label="SQL" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.tableName || '--' }}</template>
</el-table-column>
<el-table-column label="完善状态" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.tableName || '--' }}</template>
</el-table-column>
<el-table-column label="上线状态" show-overflow-tooltip>
<template slot-scope="scope">
<el-switch
v-model="scope.row.tableName"
active-text="''"
inactive-text="''">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="" label="创建时间" show-overflow-tooltip>
<template slot-scope="scope">
<div>{{ scope.row.createTime | timeStampToYmd }} {{ !scope.row.createTime ? '--': '' }}</div>
<div>{{ scope.row.createTime | timeStampToHms }} {{ !scope.row.createTime ? '--': '' }}</div>
</template>
</el-table-column>
<el-table-column label="操作人" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.tableName || '--' }}</template>
</el-table-column>
<el-table-column prop="" label="操作" >
<template slot-scope="scope">
<el-button type="text" @click="toSqlPage(scope.row)">完善索引</el-button><el-button type="text" @click="toShowDetail(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
</div>
</div> </div>
</template> </template>
<script> <script>
import fetch from '@/api/dictionary';
const { getSqlList } = fetch;
export default { export default {
name: 'SqlList', name: 'SqlList',
components: {}, components: {},
data() { data() {
return { return {
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0,
loading: false,
tableData: [],
multipleSelection: []
}; };
}, },
// 生命周期 - 挂载完成（访问DOM元素） // 生命周期 - 挂载完成（访问DOM元素）
// mounted() { mounted() {
const that = this;
// }, that.getTableData();
},
// methods // methods
methods: { methods: {
/**
* @description: 勾选
* @param {Array} val
* @author: 无尘
*/
handleSelectionChange(val) {
this.multipleSelection = val;
},
/**
* @description: 获取表列表
* @author: 无尘
*/
getTableData() {
const that = this;
that.loading = true;
const param = {
pageNum: that.currentPage,
pageSize: that.pageSize
};
getSqlList(param).then(res => {
that.loading = false;
that.tableData = res.result.list || [];
that.total = res.result.totalCount || 0;
})
.catch(function(error) {
that.loading = false;
});
},
}, },
watch: {} watch: {}
}; };
......
src/views/sql/table-sql.vue
...@@ -4,31 +4,86 @@ ...@@ -4,31 +4,86 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2020-11-09 11:15:55 * @Date: 2020-11-09 11:15:55
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2020-11-09 11:26:06 * @LastEditTime: 2020-11-10 13:36:28
--> -->
<template> <template>
<div> <div>
<el-table class="select-table" ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
<el-table-column label="表名称" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.tableName || '--' }}</template>
</el-table-column>
<el-table-column prop="" label="创建时间" show-overflow-tooltip>
<template slot-scope="scope">
<div>{{ scope.row.createTime | timeStampToYmd }} {{ !scope.row.createTime ? '--': '' }}</div>
<div>{{ scope.row.createTime | timeStampToHms }} {{ !scope.row.createTime ? '--': '' }}</div>
</template>
</el-table-column>
<el-table-column prop="" label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button type="text" @click="toSqlPage(scope.row)">SQL列表</el-button>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
</div>
</div> </div>
</template> </template>
<script> <script>
import fetch from '@/api/dictionary';
const { getTableList } = fetch;
export default { export default {
name: 'TableSql', name: 'TableSql',
components: {}, components: {},
data() { data() {
return { return {
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0,
loading: false,
tableData: []
}; };
}, },
// 生命周期 - 挂载完成（访问DOM元素） // 生命周期 - 挂载完成（访问DOM元素）
// mounted() { mounted() {
const that = this;
// }, that.getTableData();
},
// methods // methods
methods: { methods: {
/**
* @description: 获取表列表
* @author: 无尘
*/
getTableData() {
const that = this;
that.loading = true;
const param = {
pageNum: that.currentPage,
pageSize: that.pageSize
};
getTableList(param).then(res => {
that.loading = false;
that.tableData = res.result.list || [];
that.total = res.result.totalCount || 0;
})
.catch(function(error) {
that.loading = false;
});
},
/**
* @description: 跳转 sql 列表
* @param {Object} row
* @author: 无尘
*/
toSqlPage(row) {
const that = this;
that.$router.push(`/sql-list?projectId=${row.projectId}`);
}
}, },
watch: {} watch: {}
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment