数据源模板化

report-ui/src/views/report/datasource/components/EditDataSource.vue

@@ -41,14 +41,7 @@
   </el-dialog>
 </template>
 <script>
-import {
+import { testConnection, reportDataSourceDetail, reportDataSourceAdd, reportDataSourceUpdate } from '@/api/reportDataSource'
-  pageList,
-
-  addDataSource,
-  editDataSource,
-  deleteDataSource,
-} from '@/api/report'
-import { testConnection, reportDataSourceDetail, reportDataSourceAdd, reportDataSourceDeleteBatch, reportDataSourceUpdate,  } from '@/api/reportDataSource'
 import { getDictList } from '@/api/dict-data' // 获取数据字典
 import Dictionary from '@/components/Dictionary/index'
 export default {

report-ui/src/views/report/datasource/index.vue

@@ -1,340 +1,200 @@
-<!--
- * @Author: lide1202@hotmail.com
- * @Date: 2021-3-13 11:04:24
- * @Last Modified by:   lide1202@hotmail.com
- * @Last Modified time: 2021-3-13 11:04:24
- !-->
 <template>
-  <div class="app-container">
+  <anji-crud ref="listPage" :option="crudOption">
-    <el-form ref="form" :model="params" :rules="rules" label-width="120px" v-permission="'datasourceManage:query'">
+    <template v-slot:buttonLeftOnTable>
-      <!-- 搜索 -->
+      <el-button type="primary" icon="el-icon-plus" @click="operateDatasource('add')" v-permission="'datasourceManage:insert'">新增</el-button>
-      <el-row :gutter="10">
+    </template>
-        <el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4">
-          <el-form-item label="数据源名称">
-            <el-input v-model.trim="params.sourceName" size="mini" clearable placeholder="数据源名称" class="filter-item" @keyup.enter.native="crud.toQuery" />
-          </el-form-item>
-        </el-col>
-        <el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4">
-          <el-form-item label="数据源编码">
-            <el-input v-model.trim="params.sourceCode" size="mini" clearable placeholder="数据源Code" class="filter-item" @keyup.enter.native="crud.toQuery" />
-          </el-form-item>
-        </el-col>
-        <el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4" class="query">
-          <el-form-item label="数据源类型" size="mini">
-            <Dictionary v-model="params.sourceType" :updata-dict="params.sourceType" :dict-key="'SOURCE_TYPE'" />
-          </el-form-item>
-        </el-col>
-        <el-col :xs="24" :sm="20" :md="4" :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-row>
-    </el-form>
-    <el-button type="primary" icon="el-icon-plus" size="mini" @click="showAddLogModel()" v-permission="'datasourceManage:insert'">新增</el-button>
 
-    <!--表格渲染-->
+    <template slot="rowButton" slot-scope="props">
-    <el-table v-loading="listLoading" border :data="list" class="mt10" element-loading-text="Loading" style="width: 100%">
+      <el-button type="text" @click="operateDatasource('edit',props)" v-permission="'datasourceManage:update'">编辑</el-button>
-      <el-table-column align="center" label="序号" type="index" min-width="60px" />
+    </template>
-      <el-table-column prop="sourceType" label="数据源类型" min-width="140px" />
+    <!--自定义的卡片插槽，将在编辑详情页面，出现在底部新卡片-->
-      <el-table-column prop="sourceNameCode" label="数据源名称[编码]" min-width="250px" />
+    <!--这里可以将自定义的弹出框代码，放入到page中
-      <el-table-column prop="sourceDesc" label="数据源描述" min-width="250px" />
+    -->
-      <el-table-column prop="createBy" label="创建人" min-width="100px" />
+    <template v-slot:pageSection>
-      <el-table-column prop="createTime" label="创建时间" min-width="150px" />
+      <EditDataSource :dataSource="dataSource" :visib="dialogVisibleSetDataSource" @handleClose="dialogVisibleSetDataSource = false" @refreshList="refreshList" />
-      <el-table-column prop="updateBy" label="修改人" min-width="100px" />
-      <el-table-column prop="updateTime" label="修改时间" min-width="150px" />
-      <el-table-column label="操作" align="center" min-width="120px">
-        <template slot-scope="scope">
-          <el-button type="text" @click="showAddLogModel(scope.row)" v-permission="'datasourceManage:update'">编辑</el-button>
-          <!-- <el-popconfirm :title="'确定删除' + scope.row.sourceNameCode + '吗？'"
-                         @onConfirm="delData(scope.row)"> -->
-          <el-button slot="reference" @click="delData(scope.row)" type="text" v-permission="'datasourceManage:delete'">删除</el-button>
-          <!-- </el-popconfirm> -->
     </template>
-      </el-table-column>
+  </anji-crud>
-    </el-table>
-    <div class="block">
-      <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" />
-    </div>
-    <!--表单组件-->
-    <el-dialog title="项目基础配置" width="50%" :close-on-click-modal="false" center :visible.sync="basicDialog" @close="closeDialog">
-      <el-form ref="userForm" :model="dialogForm" :rules="rules" size="small" label-width="100px">
-        <el-row :gutter="10">
-          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
-            <el-form-item label="数据源类型" prop="sourceType">
-              <el-select v-model.trim="dialogForm.sourceType" placeholder="请选择" clearable @change="selectChange">
-                <el-option v-for="item in dictionaryOptions" :key="item.id" :label="item.text" :value="item.id" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="20" :md="7" :lg="7" :xl="7">
-            <el-form-item label="数据源编码" prop="sourceCode">
-              <el-input :disabled="updataDisabled" v-model.trim="dialogForm.sourceCode" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="20" :md="7" :lg="7" :xl="7">
-            <el-form-item label="数据源名称" prop="sourceName">
-              <el-input v-model.trim="dialogForm.sourceName" />
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
-            <el-form-item label="数据源描述">
-              <el-input v-model.trim="dialogForm.sourceDesc" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="10">
-          <el-col v-for="(data, index) in dataLink" :key="index" :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
-            <el-form-item :label="data.labelValue">
-              <el-input v-model.trim="data.value" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="closeDialog">取消</el-button>
-        <el-button type="warning" @click="test">测试</el-button>
-        <el-button type="primary" @click="UserConfirm('userForm')">确定</el-button>
-      </div>
-    </el-dialog>
-  </div>
 </template>
-
 <script>
-import {
+import { reportDataSourceList, reportDataSourceAdd, reportDataSourceDeleteBatch, reportDataSourceUpdate, reportDataSourceDetail } from '@/api/reportDataSource'
-  pageList,
+import EditDataSource from '@/views/report/datasource/components/EditDataSource'
-  testConnection,
-  addDataSource,
-  editDataSource,
-  deleteDataSource,
-} from '@/api/report'
-import { getDictList } from '@/api/dict-data' // 获取数据字典
-import Dictionary from '@/components/Dictionary/index'
-
 export default {
-  name: 'Support',
+  name: 'ReportDataSource',
-  components: { Dictionary },
+  components: {
+    EditDataSource: EditDataSource
+  },
   data() {
     return {
-      dictionaryOptions: [], // 数据源类型
+      dialogVisibleSetDataSource : false,
-      selectedList: [],
+      dataSource : {},
-      clickType: '',
+      crudOption: {
-      formData: {},
+        // 使用菜单做为页面标题
-      list: null,
+        title: '数据源',
-      totalCount: 0,
+        // 详情页中输入框左边文字宽度
-      totalPage: 0,
+        labelWidth: '120px',
-      listLoading: true,
+        // 查询表单条件
-      // 弹框默认隐藏
+        queryFormFields: [
-      dialogFormVisible: false,
+          {
-      basicDialog: false,
+            inputType: 'input',
-      params: {
+            label: '数据源编码',
-        sourceName: '',
+            field: 'sourceCode'
-        sourceCode: '',
+          },
-        sourceType: '',
+          {
-        pageNumber: 1,
+            inputType: 'input',
-        pageSize: 10,
+            label: '数据源名称',
-        order: 'DESC',
+            field: 'sourceName'
-        sort: 'update_time',
+          },
-      },
+          {
-      dialogForm: {
+            inputType: 'anji-select', //form表单类型 input|input-number|anji-select(传递url或者dictCode)|anji-tree(左侧树)|date|datetime|datetimerange
-        sourceName: '',
+            anjiSelectOption: {
-        sourceCode: '',
+              dictCode: 'SOURCE_TYPE',
-        sourceType: '',
+            },
-        sourceDesc: '',
+            label: '数据源类型',
-        sourceConfig: '',
+            field: 'sourceType'
           },
-      dataLink: [],
-      rules: {
-        sourceType: [
-          { required: true, message: '数据集名称必选', trigger: 'change' },
         ],
-        sourceCode: [
+        // 操作按钮
-          { required: true, message: '数据集编码必填', trigger: 'blur' },
+        buttons: {
+          query: {
+            api: reportDataSourceList,
+            permission: 'datasourceManage:query',
+            sort: 'update_time',
+            order: 'DESC'
+          },
+          queryByPrimarykey: {
+            api: reportDataSourceDetail,
+            permission: 'datasourceManage:detail'
+          },
+          add: {
+            api: reportDataSourceAdd,
+            permission: 'datasourceManage:insert',
+            isShow:false
+          },
+          delete: {
+            api: reportDataSourceDeleteBatch,
+            permission: 'datasourceManage:delete'
+          },
+          edit: {
+            api: reportDataSourceUpdate,
+            permission: 'datasourceManage:update',
+            isShow:false
+          },
+        },
+        // 表格列
+        columns: [
+          {
+            label: '',
+            field: 'id',
+            primaryKey: true, // 根据主键查询详情或者根据主键删除时, 主键的
+            tableHide: true, // 表格中不显示
+            editHide: true, // 编辑弹框中不显示
+          },
+          {
+            label: '数据源编码',//数据源编码
+            placeholder: '',
+            field: 'sourceCode',
+            editField: 'sourceCode',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 100, message: '不超过100个字符', trigger: 'blur' }
             ],
-        sourceName: [
+            disabled: false,
-          { required: true, message: '数据源名称必选', trigger: 'blur' },
+          },
+          {
+            label: '数据源名称',//数据源名称
+            placeholder: '',
+            field: 'sourceName',
+            editField: 'sourceName',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 100, message: '不超过100个字符', trigger: 'blur' }
             ],
+            disabled: false,
+          },
+          {
+            label: '数据源描述',//数据源描述
+            placeholder: '',
+            field: 'sourceDesc',
+            editField: 'sourceDesc',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 255, message: '不超过255个字符', trigger: 'blur' }
+            ],
+            disabled: false,
+          },
+          {
+            label: '数据源类型',//数据源类型 DIC_NAME=SOURCE_TYPE; mysql，orace，sqlserver，elasticsearch，接口，javaBean，数据源类型字典中item-extend动态生成表单
+            placeholder: '',
+            field: 'sourceType',
+            fieldTableRowRenderer: (row) => {
+              return this.getDictLabelByCode('SOURCE_TYPE', row['sourceType'])
+            },
+            editField: 'sourceType',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 50, message: '不超过50个字符', trigger: 'blur' }
+            ],
+            disabled: false,
+          },
+          {
+            label: '数据源连接配置json',//数据源连接配置json：关系库{ jdbcUrl:'', username:'', password:'' } ES{ hostList:'ip1:9300,ip2:9300,ip3:9300', clusterName:'elasticsearch_cluster' }  接口{ apiUrl:'http://ip:port/url', method:'' } javaBean{ beanNamw:'xxx' }
+            placeholder: '',
+            field: 'sourceConfig',
+            editField: 'sourceConfig',
+            tableHide: true,
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 2048, message: '不超过2048个字符', trigger: 'blur' }
+            ],
+            disabled: false,
+          },
+          {
+            label: '状态',//0--已禁用 1--已启用  DIC_NAME=ENABLE_FLAG
+            placeholder: '',
+            field: 'enableFlag',
+            fieldTableRowRenderer: (row) => {
+              return this.getDictLabelByCode('ENABLE_FLAG', row['enableFlag'])
+            },
+            colorStyle: {
+              0: 'table-danger', //key为editField渲染的值（字典的提交值）'红色': 'danger','蓝色': 'primary','绿色': 'success','黄色': 'warning','灰色': 'info','白色'：''
+              1: 'table-success',
+            },
+            editField: 'enableFlag',
+            inputType: 'input',
+            rules: [
+            ],
+            disabled: false,
+          },
+          {
+            label: '删除标记',//0--未删除 1--已删除 DIC_NAME=DELETE_FLAG
+            placeholder: '',
+            field: 'deleteFlag',
+            editField: 'deleteFlag',
+            tableHide: true,
+            inputType: 'input',
+            rules: [
+            ],
+            disabled: false,
           },
-      value: '',
+        ],
-      updataDisabled: false,
-      testReplyCode: null,
-    }
-  },
-  watch: {},
-  // 在生命周期 beforeCreate里面改变this指向
-  beforeCreate: function () {},
-  mounted() {},
-  created() {
-    this.getSystem()
-    this.queryByPage()
-  },
-  methods: {
-    // 查询
-    search() {
-      this.params.pageNumber = 1
-      this.queryByPage()
-    },
-    // 重置
-    reset(formName) {
-      // this.$refs[formName].resetFields()
-      this.params.sourceName = ''
-      this.params.sourceCode = ''
-      this.params.pageNumber = 1
-      this.params.sourceType = ''
-      this.queryByPage()
-    },
-    async queryByPage() {
-      const res = await pageList(this.params)
-      if (res.code != '200') return
-      this.listLoading = true
-      this.list = res.data.records
-      this.list.forEach((value) => {
-        value['sourceNameCode'] =
-          value.sourceName + '[' + value.sourceCode + ']'
-      })
-      this.totalCount = res.data.total
-      this.totalPage = res.data.pages
-      this.listLoading = false
-    },
-    handleSizeChange(val) {
-      this.params.pageSize = val
-      this.queryByPage()
-    },
-    handleCurrentChange(val) {
-      this.params.pageNumber = val
-      this.queryByPage()
-    },
-    // 关闭模态框
-    closeDialog(bool) {
-      // bool && this.search('form') // 点确定关闭弹窗的时候才会刷新列表
-      // this.$refs['userForm'].resetFields()
-      this.basicDialog = false
       },
-    // 打开模态框
-    showAddLogModel(val) {
-      this.basicDialog = true
-      if (val == undefined) {
-        this.updataDisabled = false
-        this.getSystem()
-        this.dialogForm = {
-          sourceName: '',
-          sourceCode: '',
-          sourceType: '',
-          sourceDesc: '',
-          sourceConfig: '',
-        }
-      } else {
-        this.updataDisabled = true
-        this.dialogForm = val
-        const newSourceType = this.dialogForm
-        let newDataLink = []
-        this.dictionaryOptions.map((item) => {
-          if (item.id == newSourceType.sourceType) {
-            newDataLink = JSON.parse(item.extend)
-            var sourceConfigJson = JSON.parse(newSourceType.sourceConfig)
-            for (var i = 0; i < newDataLink.length; i++) {
-              newDataLink[i].value = sourceConfigJson[newDataLink[i].label]
     }
-          }
-        })
-        this.dataLink = newDataLink
-      }
-    },
-    // 获取数据字典
-    async getSystem() {
-      const { code, data } = await getDictList('SOURCE_TYPE')
-      if (code != '200') return
-      this.dictionaryOptions = data
-      this.dialogForm.sourceType = this.dictionaryOptions[0].text
-      this.dataLink = JSON.parse(this.dictionaryOptions[0].extend)
-    },
-    selectChange(val) {
-      this.dataLink = []
-      const extendJSON = this.dictionaryOptions.find(function (obj) {
-        return obj.id == val
-      })
-      this.dataLink = JSON.parse(extendJSON.extend)
   },
-    // 测试
+
-    test() {
+  created() { },
-      const newList = {}
+  methods: {
-      this.dataLink.forEach((item) => {
+    operateDatasource(type, prop) {
-        newList[item.label] = item.value
+      this.dialogVisibleSetDataSource = true
-      })
+      if (prop) {
-      this.dialogForm.sourceConfig = JSON.stringify(newList)
+        this.dataSource = prop.msg;
-      testConnection(this.dialogForm).then((data) => {
+      }else {
-        if (data.code == '200') {
+        this.dataSource = {}
-          this.testReplyCode = data.code
-          this.$message({
-            message: '测试成功！',
-            type: 'success',
-          })
-        } else {
-          this.testReplyCode = null
       }
-      })
-    },
-    async delData(val) {
-      this.$confirm('确定删除?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(async () => {
-          this.$emit('deletelayer')
-          this.visible = false
-          const { code, data } = await deleteDataSource(val)
-          if (code != '200') return
-          this.queryByPage()
-          this.$message({
-            type: 'success',
-            message: '删除成功!',
-          })
-        })
-        .catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消删除',
-          })
-        })
     },
-    // 提交
+    refreshList(){
-    async UserConfirm(formName) {
+      this.$refs.listPage.handleQueryForm('query')
-      const newList = {}
-      this.dataLink.forEach((item) => {
-        newList[item.label] = item.value
-      })
-      this.dialogForm.sourceConfig = JSON.stringify(newList)
-      this.$refs[formName].validate(async (valid, obj) => {
-        if (valid) {
-          if (this.testReplyCode != '200') {
-            this.$message.error('测试结果为成功后方可保存！')
-            return
     }
-          if (this.dialogForm.id == undefined) {
-            const { code } = await addDataSource(this.dialogForm)
-            if (code != '200') return
-            this.queryByPage()
-          } else {
-            const { code } = await editDataSource(this.dialogForm)
-            if (code != '200') return
-            this.queryByPage()
   }
-          this.closeDialog(false)
-        } else {
-          return
-        }
-      })
-    },
-  },
 }
 </script>
-<style lang="scss" scoped>
+
-.title {
-  width: 100%;
-  display: inline-block;
-  text-align: left;
-}
-.query {
-  margin-top: 5px;
-}
-</style>