Update index.vue

peiyanni 3 years ago
parent b975c53d9e
commit 3880b18d89

@ -6,224 +6,103 @@
!--> !-->
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form> <el-form v-permission="'resultsetManage:query'">
<!-- 搜索 --> <!-- 搜索 -->
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :xs="24" <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
:sm="20" <el-form-item label="数据集编码" label-width="120px">
:md="6" <el-input v-model.trim="query.setCode" size="mini" clearable placeholder="数据集编码" class="filter-item" />
:lg="6"
:xl="6">
<el-form-item label="数据集编码"
label-width="120px">
<el-input v-model.trim="query.setCode"
size="mini"
clearable
placeholder="数据集编码"
class="filter-item" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
:sm="20" <el-form-item label="数据集名称" label-width="120px">
:md="6" <el-input v-model.trim="query.setName" size="mini" clearable placeholder="数据源名称" class="filter-item" />
:lg="6"
:xl="6">
<el-form-item label="数据集名称"
label-width="120px">
<el-input v-model.trim="query.setName"
size="mini"
clearable
placeholder="数据源名称"
class="filter-item" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" <el-col :xs="24" :sm="20" :md="4" :lg="4" :xl="4" class="query">
:sm="20" <el-button type="primary" size="mini" @click="search('form')"></el-button>
:md="4" <el-button type="danger" size="mini" @click="reset('form')"></el-button>
:lg="4"
:xl="4" class="query">
<el-button type="primary"
size="mini"
@click="search('form')">查询</el-button>
<el-button type="danger"
size="mini"
@click="reset('form')">重置</el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<el-button type="primary" <el-button type="primary" size="mini" @click="addOrEditDataSet()" v-permission="'resultsetManage:insert'">+ </el-button>
size="mini"
@click="addOrEditDataSet()">+ 新增</el-button>
<!--表格渲染--> <!--表格渲染-->
<el-table ref="table" <el-table ref="table" v-loading="listLoading" border :data="data" size="small" class="mt10" style="width: 100%">
v-loading="listLoading" <el-table-column align="center" label="序号" type="index" min-width="40" />
border <el-table-column prop="setName" label="数据集名称" />
:data="data" <el-table-column prop="setCode" label="数据集编码" />
size="small" <el-table-column prop="setDesc" label="描述" />
class="mt10"
style="width: 100%">
<el-table-column align="center"
label="序号"
type="index"
min-width="40" />
<el-table-column prop="setName"
label="数据集名称" />
<el-table-column prop="setCode"
label="数据集编码" />
<el-table-column prop="setDesc"
label="描述" />
<el-table-column label="折叠列"> <el-table-column label="折叠列">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="isShowCaseResult(scope.row)"></el-button> <el-button @click="isShowCaseResult(scope.row)"></el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="createBy" <el-table-column prop="createBy" width="100" label="创建人" />
width="100" <el-table-column prop="createTime" width="140" label="创建人" />
label="创建人" /> <el-table-column prop="updateBy" width="100" label="更新人" />
<el-table-column prop="createTime" <el-table-column prop="updateTime" width="140" label="更新时间" />
width="140" <el-table-column label="操作" width="120px" align="center">
label="创建人" />
<el-table-column prop="updateBy"
width="100"
label="更新人" />
<el-table-column prop="updateTime"
width="140"
label="更新时间" />
<el-table-column label="操作"
width="120px"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" <el-button size="mini" type="text" @click="addOrEditDataSet(scope.row)" v-permission="'resultsetManage:update'"></el-button>
type="text"
@click="addOrEditDataSet(scope.row)">编辑</el-button>
<!-- <el-popconfirm :title="'确定删除' + scope.row.setName + '吗?'" <!-- <el-popconfirm :title="'确定删除' + scope.row.setName + '吗?'"
@onConfirm="delect(scope.row)"> --> @onConfirm="delect(scope.row)"> -->
<el-button slot="reference" <el-button slot="reference" type="text" @click="delect(scope.row)" v-permission="'resultsetManage:delete'"></el-button>
type="text"
@click="delect(scope.row)">删除</el-button>
<!-- </el-popconfirm> --> <!-- </el-popconfirm> -->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<div class="block"> <div class="block">
<el-pagination :total="totalCount" <el-pagination :total="totalCount" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" :current-page="params.pageNumber" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
:page-sizes="[10, 20, 50, 100]"
:page-size="params.pageSize"
:current-page="params.pageNumber"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange" />
</div> </div>
<!--表单组件--> <!--表单组件-->
<el-dialog :visible.sync="dialogFormVisible" <el-dialog :visible.sync="dialogFormVisible" :title="dialogFormVisibleTitle" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="handleClose" width="65%">
:title="dialogFormVisibleTitle" <el-form ref="form" :model="formData" :rules="formRules" size="small" label-width="130px">
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="handleClose"
width="65%">
<el-form ref="form"
:model="formData"
:rules="formRules"
size="small"
label-width="130px">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :xs="24" <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
:sm="20" <el-form-item label="数据源" prop="sourceCode">
:md="6" <el-select v-model.trim="formData.sourceCode" class="organisation" size="mini" @change="changeSource">
:lg="6" <el-option v-for="item in sourceList" :key="item.sourceName" :label="item.sourceName" :value="item.sourceCode" />
:xl="6">
<el-form-item label="数据源"
prop="sourceCode">
<el-select v-model.trim="formData.sourceCode"
class="organisation"
size="mini"
@change="changeSource">
<el-option v-for="item in sourceList"
:key="item.sourceName"
:label="item.sourceName"
:value="item.sourceCode" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" <el-col :xs="24" :sm="20" :md="8" :lg="8" :xl="8">
:sm="20" <el-form-item label="数据集编码" prop="setCode">
:md="8" <el-input :disabled="updataDisabled" v-model.trim="formData.setCode" size="mini" />
:lg="8"
:xl="8">
<el-form-item label="数据集编码"
prop="setCode">
<el-input :disabled="updataDisabled" v-model.trim="formData.setCode"
size="mini" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" <el-col :xs="24" :sm="20" :md="8" :lg="8" :xl="8">
:sm="20" <el-form-item label="数据集名称" prop="setName">
:md="8" <el-input v-model.trim="formData.setName" size="mini" />
:lg="8"
:xl="8">
<el-form-item label="数据集名称"
prop="setName">
<el-input v-model.trim="formData.setName"
size="mini" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" <el-col :xs="24" :sm="20" :md="22" :lg="22" :xl="22">
:sm="20"
:md="22"
:lg="22"
:xl="22">
<el-form-item label="数据集描述"> <el-form-item label="数据集描述">
<el-input v-model.trim="formData.setDesc" <el-input v-model.trim="formData.setDesc" size="mini" />
size="mini" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" <el-col :xs="24" :sm="20" :md="22" :lg="22" :xl="22" class="code-mirror-form">
:sm="20"
:md="22"
:lg="22"
:xl="22"
class="code-mirror-form">
<el-form-item label="查询SQL或请求体"> <el-form-item label="查询SQL或请求体">
<div class="codemirror"> <div class="codemirror">
<codemirror v-model.trim="formData.dynSentence" <codemirror v-model.trim="formData.dynSentence" :options="optionsSql" style="height: 190px" />
:options="optionsSql"
style="height: 190px" />
</div> </div>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :xs="24" <el-col :xs="24" :sm="20" :md="22" :lg="22" :xl="22">
:sm="20" <el-form label-width="100px" class="demo-ruleForm">
:md="22" <el-tabs v-model.trim="tabsActiveName" type="card" @tab-click="handleClickTabs">
:lg="22" <el-tab-pane label="查询参数" name="first">
:xl="22"> <el-button v-if="tableData.length == 0" type="text" size="small" @click="addRow()"></el-button>
<el-form label-width="100px" <el-table :data="tableData" border style="width: 100%">
class="demo-ruleForm"> <el-table-column align="center" label="序号" type="index" min-width="40" />
<el-tabs v-model.trim="tabsActiveName"
type="card"
@tab-click="handleClickTabs">
<el-tab-pane label="查询参数"
name="first">
<el-button v-if="tableData.length == 0"
type="text"
size="small"
@click="addRow()">添加</el-button>
<el-table :data="tableData"
border
style="width: 100%">
<el-table-column align="center"
label="序号"
type="index"
min-width="40" />
<el-table-column label="参数名"> <el-table-column label="参数名">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model.trim="tableData[scope.$index].paramName" <el-input v-model.trim="tableData[scope.$index].paramName" :disabled="tableData[scope.$index].paramName == 'pageSize' || tableData[scope.$index].paramName == 'pageNumber'" />
:disabled="tableData[scope.$index].paramName == 'pageSize' || tableData[scope.$index].paramName == 'pageNumber'" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="描述"> <el-table-column label="描述">
@ -241,14 +120,10 @@
<el-input v-model.trim="tableData[scope.$index].sampleItem" /> <el-input v-model.trim="tableData[scope.$index].sampleItem" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="校验" <el-table-column label="校验" width="220">
width="220">
<template slot-scope="scope"> <template slot-scope="scope">
<el-checkbox v-model="tableData[scope.$index].mandatory" <el-checkbox v-model="tableData[scope.$index].mandatory" @change="Mandatory(scope.$index)"></el-checkbox>
@change="Mandatory(scope.$index)">必选</el-checkbox> <el-button type="primary" icon="el-icon-plus" @click="permissionClick(scope.row, scope.$index)"> 高级规则 </el-button>
<el-button type="primary"
icon="el-icon-plus"
@click="permissionClick(scope.row, scope.$index)"> 高级规则 </el-button>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column :label="$t('btn.operationCol')" <!-- <el-table-column :label="$t('btn.operationCol')"
@ -263,65 +138,34 @@
</template> </template>
</el-table-column> --> </el-table-column> -->
</el-table> </el-table>
<el-checkbox v-model="isShowPagination" <el-checkbox v-model="isShowPagination" @change="changePagination"></el-checkbox>
@change="changePagination">加入分页参数</el-checkbox>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="数据转换" <el-tab-pane label="数据转换" name="second">
name="second">
<template> <template>
<div class="filterWrapper"> <div class="filterWrapper">
<div class="filterTable"> <div class="filterTable">
<div v-for="(item, index) in itemFilterList" <div v-for="(item, index) in itemFilterList" :key="index" class="filterBox">
:key="index"
class="filterBox">
<div class="box"> <div class="box">
<Dictionary v-model="item.transformType" <Dictionary v-model="item.transformType" :updata-dict="item.transformType" :dict-key="'TRANSFORM_TYPE'" />
:updata-dict="item.transformType" <el-button type="text" class="reduceFilter" icon="el-icon-close" @click="reduceFilter(item)" />
:dict-key="'TRANSFORM_TYPE'" /> <el-button v-if="item.transformType == 'js' || item.transformType == 'dict'" type="text" class="editor" icon="el-icon-edit" @click="filterScriptBtn(item)" />
<el-button type="text"
class="reduceFilter"
icon="el-icon-close"
@click="reduceFilter(item)" />
<el-button v-if="item.transformType == 'js' || item.transformType == 'dict'"
type="text"
class="editor"
icon="el-icon-edit"
@click="filterScriptBtn(item)" />
</div> </div>
<el-button type="text" <el-button type="text" class="font-icon-right" icon="el-icon-right" />
class="font-icon-right"
icon="el-icon-right" />
</div> </div>
<el-dialog :title="dialogTitle" <el-dialog :title="dialogTitle" :visible.sync="dialogSwitchVisible" width="60%" min-height="400px" append-to-body>
:visible.sync="dialogSwitchVisible"
width="60%"
min-height="400px"
append-to-body>
<div v-if="isItemFilterType.transformType == 'js'"> <div v-if="isItemFilterType.transformType == 'js'">
<div class="codemirror"> <div class="codemirror">
<!-- // --> <!-- // -->
<codemirror v-model.trim="transformScript" <codemirror v-model.trim="transformScript" :options="optionsJavascript" style="height: 210px;overflow: hidden;" />
:options="optionsJavascript"
style="height: 210px;overflow: hidden;" />
</div> </div>
</div> </div>
<div v-else> <div v-else>
<div v-for="(item, index) in tableData2" <div v-for="(item, index) in tableData2" :key="index">
:key="index">
<label>字典项名称</label> <label>字典项名称</label>
<el-input v-model.trim="item.name" <el-input v-model.trim="item.name" size="small" style="width: 25%" />
size="small" <el-button type="danger" size="small" plain icon="el-icon-delete" @click="delAllDict(index, tableData2)" />
style="width: 25%" /> <el-table :data="item.children" border style="width: 80%">
<el-button type="danger" <el-table-column label="key" width="180">
size="small"
plain
icon="el-icon-delete"
@click="delAllDict(index, tableData2)" />
<el-table :data="item.children"
border
style="width: 80%">
<el-table-column label="key"
width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model.trim="item.children[scope.$index].name" /> <el-input v-model.trim="item.children[scope.$index].name" />
</template> </template>
@ -331,54 +175,33 @@
<el-input v-model.trim="item.children[scope.$index].value" /> <el-input v-model.trim="item.children[scope.$index].value" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" <el-table-column label="操作" width="150px" align="center">
width="150px"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="success" <el-button type="success" circle plain icon="el-icon-plus" @click="addDict(scope.$index, item.children)" />
circle
plain
icon="el-icon-plus"
@click="addDict(scope.$index, item.children)" />
<el-button type="danger" <el-button type="danger" circle plain icon="el-icon-delete" @click="delDict(scope.$index, item.children)" />
circle
plain
icon="el-icon-delete"
@click="delDict(scope.$index, item.children)" />
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<el-button type="success" <el-button type="success" @click="addAllDict()"></el-button>
@click="addAllDict()">新增</el-button>
</div> </div>
<span slot="footer" <span slot="footer" class="dialog-footer">
class="dialog-footer">
<el-button @click="dialogSwitchVisible = false">取消</el-button> <el-button @click="dialogSwitchVisible = false">取消</el-button>
<el-button type="primary" <el-button type="primary" @click="filterScriptConfirm"></el-button>
@click="filterScriptConfirm">保存</el-button>
</span> </span>
</el-dialog> </el-dialog>
<!-- // --> <!-- // -->
<div class="addFilter" <div class="addFilter" disabled="true" @click="addFilter">
disabled="true"
@click="addFilter">
<i class="el-icon-plus" /><span>新增</span> <i class="el-icon-plus" /><span>新增</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="测试预览" <el-tab-pane label="测试预览" name="third">
name="third">
<div style="max-height: 400px; overflow: auto"> <div style="max-height: 400px; overflow: auto">
<vue-json-editor v-model="cols" <vue-json-editor v-model="cols" :show-btns="false" :mode="'code'" lang="zh" @json-change="onJsonChange" @json-save="onJsonSave" />
:show-btns="false"
:mode="'code'"
lang="zh"
@json-change="onJsonChange"
@json-save="onJsonSave" />
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@ -386,54 +209,44 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<div slot="footer" <div slot="footer" class="dialog-footer">
class="dialog-footer">
<!-- <el-button type="warning" @click="test"></el-button> --> <!-- <el-button type="warning" @click="test"></el-button> -->
<el-button @click="dialogFormVisible = false">取消</el-button> <el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" <el-button type="primary" @click="submit('form')"></el-button>
@click="submit('form')">保存</el-button>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog :title="title" <el-dialog :title="title" :visible.sync="dialogPermissionVisible" width="60%">
:visible.sync="dialogPermissionVisible"
width="60%">
<div class="codemirror"> <div class="codemirror">
<!-- // --> <!-- // -->
<codemirror v-model.trim="validationRules" <codemirror v-model.trim="validationRules" :options="optionsJavascript" style="height: 210px;overflow: hidden;" />
:options="optionsJavascript"
style="height: 210px;overflow: hidden;" />
</div> </div>
<span slot="footer" <span slot="footer" class="dialog-footer">
class="dialog-footer"> <el-button type="warning" @click="testResultset"></el-button>
<el-button type="warning"
@click="testResultset">测试</el-button>
<el-button type="primary" <el-button type="primary" @click="dialogValidationRules"></el-button>
@click="dialogValidationRules">保存</el-button>
<el-button @click="dialogPermissionVisible = false">关闭</el-button> <el-button @click="dialogPermissionVisible = false">关闭</el-button>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog :title="caseResultTitle" <el-dialog :title="caseResultTitle" :visible.sync="dialogCaseResult" width="70%">
:visible.sync="dialogCaseResult" <vue-json-editor v-model="caseResultContent" :show-btns="false" :mode="'code'" lang="zh" class="my-editor" @json-change="onJsonChange" @json-save="onJsonSave" />
width="70%"> <span slot="footer" class="dialog-footer">
<vue-json-editor v-model="caseResultContent" <el-button type="primary" @click="dialogCaseResult = false">关闭</el-button>
:show-btns="false"
:mode="'code'"
lang="zh"
class="my-editor"
@json-change="onJsonChange"
@json-save="onJsonSave" />
<span slot="footer"
class="dialog-footer">
<el-button type="primary"
@click="dialogCaseResult = false">关闭</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { queryAllDataSourceSet, verificationSet, testTransformSet, dataSetPreview, addDataSet, editDataSet, deleteDataSet, dataSetPageList } from '@/api/report' import {
queryAllDataSourceSet,
verificationSet,
testTransformSet,
dataSetPreview,
addDataSet,
editDataSet,
deleteDataSet,
dataSetPageList,
} from '@/api/report'
import Dictionary from '@/components/Dictionary/index' import Dictionary from '@/components/Dictionary/index'
import { codemirror } from 'vue-codemirror' // codeMirror import { codemirror } from 'vue-codemirror' // codeMirror
import 'codemirror/mode/sql/sql.js' import 'codemirror/mode/sql/sql.js'
@ -518,9 +331,15 @@ export default {
sort: 'update_time', sort: 'update_time',
}, },
formRules: { formRules: {
setName: [{ required: true, message: '数据集名称必填', trigger: 'blur' }], setName: [
setCode: [{ required: true, message: '数据集编码必填', trigger: 'blur' }], { required: true, message: '数据集名称必填', trigger: 'blur' },
sourceCode: [{ required: true, message: '数据源必选', trigger: 'change' }], ],
setCode: [
{ required: true, message: '数据集编码必填', trigger: 'blur' },
],
sourceCode: [
{ required: true, message: '数据源必选', trigger: 'change' },
],
}, },
sourceList: [], sourceList: [],
validationRules: '', validationRules: '',
@ -551,8 +370,8 @@ export default {
testMassageCode: null, testMassageCode: null,
query: { query: {
setName: '', setName: '',
setCode: '' setCode: '',
} },
} }
}, },
watch: {}, watch: {},
@ -582,10 +401,10 @@ export default {
let params = { let params = {
page: this.params.pageNumber, page: this.params.pageNumber,
size: this.params.pageSize, size: this.params.pageSize,
sort: "update_time", sort: 'update_time',
order: "DESC", order: 'DESC',
pageNumber: this.params.pageNumber, pageNumber: this.params.pageNumber,
pageSize: this.params.pageSize pageSize: this.params.pageSize,
} }
const res = await dataSetPageList(params) const res = await dataSetPageList(params)
if (res.code != '200') return if (res.code != '200') return
@ -649,11 +468,17 @@ export default {
this.dialogFormVisibleTitle = '编辑数据集' this.dialogFormVisibleTitle = '编辑数据集'
dataSetPreview(row).then((data) => { dataSetPreview(row).then((data) => {
this.formData = data.data this.formData = data.data
if (data.data.dataSetParamDtoList != null || data.data.dataSetParamDtoList.length > 0) { if (
data.data.dataSetParamDtoList != null ||
data.data.dataSetParamDtoList.length > 0
) {
this.tableData = data.data.dataSetParamDtoList this.tableData = data.data.dataSetParamDtoList
var count = 0 var count = 0
this.tableData.find((value, i) => { this.tableData.find((value, i) => {
if (value.paramName === 'pageNumber' || value.paramName === 'pageSize') { if (
value.paramName === 'pageNumber' ||
value.paramName === 'pageSize'
) {
count++ count++
} }
if (value.requiredFlag == 1) { if (value.requiredFlag == 1) {
@ -783,7 +608,9 @@ export default {
// //
return data; return data;
}` }`
this.transformScript = item.transformScript ? item.transformScript : fnCont this.transformScript = item.transformScript
? item.transformScript
: fnCont
} else if (item.transformType == 'dict') { } else if (item.transformType == 'dict') {
// this.dialogTitle = '' // this.dialogTitle = ''
// this.itemFilterScriptId = item.itemFilterSort // this.itemFilterScriptId = item.itemFilterSort
@ -854,7 +681,9 @@ export default {
// //
return true; return true;
}` }`
this.validationRules = row.validationRules ? row.validationRules : fnCont this.validationRules = row.validationRules
? row.validationRules
: fnCont
this.dialogPermissionVisible = true this.dialogPermissionVisible = true
} }
}, },

Loading…
Cancel
Save