|
|
@@ -1,5 +1,218 @@
|
|
|
<template>
|
|
|
- <div class="">数据源</div>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="header-wrap">
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="100px"
|
|
|
+ :inline="true"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ <el-form-item label="数据源名称">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.sourceName"
|
|
|
+ placeholder="请输入"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="数据源类型">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.sourceType"
|
|
|
+ value-key=""
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in []"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="() => {}">查询</el-button>
|
|
|
+ <el-button @click="() => {}">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="btn-wrap mb10">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="mini"
|
|
|
+ @click="handleAdd"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ size="mini"
|
|
|
+ @click="() => {}"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-table :data="sourceTableData" border stripe>
|
|
|
+ <el-table-column type="selection" width="55" />
|
|
|
+ <el-table-column type="index" width="50" label="序号" />
|
|
|
+ <el-table-column prop="" label="数据源编码"></el-table-column>
|
|
|
+ <el-table-column prop="" label="数据源名称"></el-table-column>
|
|
|
+ <el-table-column prop="" label="数据源描述"></el-table-column>
|
|
|
+ <el-table-column prop="" label="数据源类型"></el-table-column>
|
|
|
+ <el-table-column prop="" label="状态"></el-table-column>
|
|
|
+ <el-table-column prop="" label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-dropdown>
|
|
|
+ <el-button type="warning" plain size="small">
|
|
|
+ 操作<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item
|
|
|
+ ><el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="() => {}"
|
|
|
+ >修改</el-button
|
|
|
+ ></el-dropdown-item
|
|
|
+ >
|
|
|
+ <el-dropdown-item
|
|
|
+ ><el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="() => {}"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ <!-- 数据源新增/修改弹窗 -->
|
|
|
+ <el-dialog :title="title" :visible.sync="show" width="800px">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-form
|
|
|
+ :model="form"
|
|
|
+ ref="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="100px"
|
|
|
+ :inline="false"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="数据源类型">
|
|
|
+ <el-select
|
|
|
+ v-model="form.sourceType"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in []"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="数据源编码">
|
|
|
+ <el-input
|
|
|
+ v-model="form.sourceCode"
|
|
|
+ placeholder="唯一标识"
|
|
|
+ size="normal"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="数据源名称">
|
|
|
+ <el-input
|
|
|
+ v-model="form.sourceCode"
|
|
|
+ placeholder="请输入"
|
|
|
+ size="normal"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="数据源描述">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ v-model="form.sourceDesc"
|
|
|
+ placeholder="请输入"
|
|
|
+ :maxlength="-1"
|
|
|
+ :show-word-limit="false"
|
|
|
+ :autosize="{ minRows: 2, maxRows: 4 }"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="请求路径">
|
|
|
+ <el-input
|
|
|
+ v-model="form.uri"
|
|
|
+ placeholder="请输入"
|
|
|
+ size="normal"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="请求方式">
|
|
|
+ <el-input
|
|
|
+ v-model="form.method"
|
|
|
+ placeholder="请输入"
|
|
|
+ size="normal"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="请求头">
|
|
|
+ <el-input
|
|
|
+ v-model="form.header"
|
|
|
+ placeholder="请输入"
|
|
|
+ size="normal"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="请求体">
|
|
|
+ <el-input
|
|
|
+ v-model="form.body"
|
|
|
+ placeholder="请输入"
|
|
|
+ size="normal"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ <template #footer>
|
|
|
+ <span>
|
|
|
+ <el-button @click="show = false">取消</el-button>
|
|
|
+ <el-button type="warning" @click="show = false">测试</el-button>
|
|
|
+ <el-button type="primary" @click="() => {}">确认</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -8,11 +221,47 @@ export default {
|
|
|
props: [],
|
|
|
components: {},
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ title: "",
|
|
|
+ show: false,
|
|
|
+ isEdit: false,
|
|
|
+ total: 0,
|
|
|
+ sourceTableData: [],
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ sourceName: "",
|
|
|
+ sourceType: "",
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ sourceType: "", //数据源类型
|
|
|
+ sourceCode: "", //编码
|
|
|
+ sourceName: "", //名称
|
|
|
+ sourceDesc: "", //描述
|
|
|
+ username: "",
|
|
|
+ password: "",
|
|
|
+ method: "", //请求方式
|
|
|
+ uri: "", //请求路径
|
|
|
+ header: "", //请求头
|
|
|
+ body: "", //请求体
|
|
|
+ },
|
|
|
+ rules: {},
|
|
|
+ };
|
|
|
},
|
|
|
computed: {},
|
|
|
- methods: {},
|
|
|
+ methods: {
|
|
|
+ getList() {},
|
|
|
+ handleAdd() {
|
|
|
+ this.title = "新增数据源";
|
|
|
+ this.isEdit = true;
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style scoped></style>
|
|
|
+<style scoped lang="scss">
|
|
|
+.btn-wrap {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+</style>
|
lph