Przeglądaj źródła

重构数据集模块

rsbi 4 lat temu
rodzic
commit
53d36ee207

+ 8 - 1
src/common/biConfig.js

@@ -15,8 +15,9 @@ export {
  * 封装Ajax请求
  * @param {*} cfg 
  * @param {*} ts 
+ * @param {*} loadingObj   loading对象,如果有
  */
-export const ajax = (cfg, ts) => {
+export const ajax = (cfg, ts, loadingObj) => {
 	let o = {
 		type:cfg.type,
 		data:cfg.data,
@@ -26,6 +27,9 @@ export const ajax = (cfg, ts) => {
 		crossDomain: true,
 		url:baseUrl+cfg.url,
 		success:function(resp){
+			if(loadingObj){
+				loadingObj.close();
+			}
 			if(resp.result === 1){
 				cfg.success(resp);
 			}else{
@@ -37,6 +41,9 @@ export const ajax = (cfg, ts) => {
 			}
 		},
 		error: function(){
+			if(loadingObj){
+				loadingObj.close();
+			}
 			ts.$notify.error({
 				title: '系统出错',
 				offset: 50

+ 3 - 0
src/components/FrameTop.vue

@@ -135,4 +135,7 @@ export default {
   li {
     list-style-type: none;
   }
+  ul {
+    margin-bottom:0px;
+  }
 </style>

+ 5 - 2
src/view/frame/User.vue

@@ -225,8 +225,11 @@
 					this.addUserDailog = true;	
 					this.dialogTitle = "新增用户";
 					//清空值
-					for(let v in ts.user){
-						ts.user[v] = null;
+					for(let v in this.user){
+						this.user[v] = null;
+					}
+					if(this.$refs['userForm']){
+						this.$refs['userForm'].clearValidate();
 					}
 				}
 				this.isupdate = isupdate;

+ 1 - 2
src/view/frame/UserMenu.vue

@@ -126,8 +126,7 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
-@import "../../style/mixin";
+<style lang="css">
 .jstree-default .jstree-disabled.jstree-clicked {
 	background:none;
 	text-decoration: line-through;

+ 94 - 11
src/view/model/Dset.vue

@@ -1,28 +1,111 @@
 <template>
-  <div> dset </div>
+  <div>
+    <div class="btn-group optbtncls" role="group">
+      <button
+        type="button"
+        class="btn btn-outline btn-default"
+        title="新增"
+        @click="addDset(false)"
+      >
+        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
+      </button>
+      <button
+        type="button"
+        class="btn btn-outline btn-default"
+        title="修改"
+        @click="addDset(true)"
+      >
+        <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
+      </button>
+      <button
+        type="button"
+        class="btn btn-outline btn-default"
+        title="刷新"
+        @click="flashDset()"
+      >
+        <i class="fa fa-refresh" aria-hidden="true"></i>
+      </button>
+      <button
+        type="button"
+        class="btn btn-outline btn-default"
+        title="删除"
+        @click="delDset()"
+      >
+        <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
+      </button>
+    </div>
+    <el-table
+        :data="tableData"
+        @row-click="selectme"
+        border
+        style="width: 100%"
+        header-row-class-name="tableHeadbg"
+      >
+        <el-table-column label="" width="45">
+          <template slot-scope="scope">
+            <el-radio v-model="checked" name="myselect2" :label="scope.row.dsetId"
+              >&nbsp;</el-radio
+            >
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          prop="name"
+          label="名称"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="priTable"
+          label="主表"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="dsname"
+          label="数据源"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="useType"
+          label="连接"
+        ></el-table-column>
+      </el-table>
+  </div>
 </template>
 
 <script>
 import { baseUrl, ajax } from "@/common/biConfig";
-import operationDailog from '@/components/OperationDailog'
-import $ from "jquery"
+import operationDailog from "@/components/OperationDailog";
+import $ from "jquery";
 
 export default {
-   name: 'dset',
+  name: "dset",
   data() {
     return {
-    }
+      tableData: [],
+      checked: null,
+      isupdate: false
+    };
   },
-  components: {
-		
-	},
+  components: {},
   mounted() {
-    
+    this.loadData();
   },
   computed: {},
   methods: {
-	 
-  }
+    loadData(){
+      ajax({
+        type:"GET",
+        data:{},
+        url:"model/listDataset.action",
+        success:(resp)=>{
+          this.tableData = resp.rows;
+        }
+      }, this);
+    },
+    selectme: function (a, b) {
+      this.checked = a.dsetId;
+    }
+  },
 };
 </script>
 

+ 128 - 47
src/view/model/Dsource.vue

@@ -1,68 +1,149 @@
 <template>
-  <div> 
+  <div>
     <div class="btn-group optbtncls" role="group">
-						<button type="button" class="btn btn-outline btn-default" title="新增" @click="addRole(false)">
-							<i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
-						</button>
-						<button type="button" class="btn btn-outline btn-default" title="修改" @click="addRole(true)">
-							<i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
-						</button>
-						<button type="button" class="btn btn-outline btn-default" title="删除" @click="delRole()">
-							<i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
-						</button>
-					</div>
-					<el-table :data="tableData" @row-click="selectme" border style="width: 100%" header-row-class-name="tableHeadbg">
-						<el-table-column label="" width="45">
-							<template slot-scope="scope">
-								<el-radio v-model="checked" name="myselect2" :label="scope.row.dsid">&nbsp;</el-radio>
-							</template>
-						</el-table-column>
-						<el-table-column align="center" width="150" prop="dsname" label="名称"></el-table-column>
-						<el-table-column align="center" width="150" prop="use" label="类型"></el-table-column>
-						<el-table-column align="center" width="150" prop="linkType" label="数据库"></el-table-column>
-						<el-table-column align="center" prop="linkUrl" label="链接字符串"></el-table-column>
-						<el-table-column align="center" width="150" prop="linkName" label="用户名"></el-table-column>
-					</el-table>
+      <button
+        type="button"
+        class="btn btn-outline btn-default"
+        title="新增"
+        @click="addDsource(false)"
+      >
+        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
+      </button>
+      <button
+        type="button"
+        class="btn btn-outline btn-default"
+        title="修改"
+        @click="addDsource(true)"
+      >
+        <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
+      </button>
+      <button
+        type="button"
+        class="btn btn-outline btn-default"
+        title="删除"
+        @click="delDsource()"
+      >
+        <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
+      </button>
+    </div>
+    <el-table
+      :data="tableData"
+      @row-click="selectme"
+      border
+      style="width: 100%"
+      header-row-class-name="tableHeadbg"
+    >
+      <el-table-column label="" width="45">
+        <template slot-scope="scope">
+          <el-radio v-model="checked" name="myselect2" :label="scope.row.dsid"
+            >&nbsp;</el-radio
+          >
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        width="150"
+        prop="dsname"
+        label="名称"
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        width="150"
+        prop="use"
+        label="类型"
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        width="150"
+        prop="linkType"
+        label="数据库"
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        prop="linkUrl"
+        label="链接字符串"
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        width="150"
+        prop="linkName"
+        label="用户名"
+      ></el-table-column>
+    </el-table>
+    <dsourceAdd ref="dsourceadd" :isupdate="isupdate"></dsourceAdd>
   </div>
 </template>
 
 <script>
 import { baseUrl, ajax } from "@/common/biConfig";
-import operationDailog from '@/components/OperationDailog'
-import $ from "jquery"
+import dsourceAdd from "@/view/model/DsourceAdd";
+import $ from "jquery";
 
 export default {
-   name: 'dsource',
+  name: "dsource",
   data() {
     return {
-		tableData:[],
-		checked:""
-    }
+      tableData: [],
+      checked: null,
+      isupdate: false,
+    };
   },
   components: {
-		
-	},
+    dsourceAdd,
+  },
   mounted() {
     this.loadData();
   },
   computed: {},
   methods: {
-	 selectme:function(a, b){
-		this.checked = a.dsid;
-	},
-	loadData:function(){
-		let ts = this;
-		ajax({
-			type:"GET",
-			url:"model/listDataSource.action",
-			dataType:"JSON",
-			data:{},
-			success:function(resp){
-				ts.tableData = resp.rows;
-			}
-		}, ts);
-	}
-  }
+    selectme: function (a, b) {
+      this.checked = a.dsid;
+    },
+    loadData: function () {
+      let ts = this;
+      ajax(
+        {
+          type: "GET",
+          url: "model/listDataSource.action",
+          dataType: "JSON",
+          data: {},
+          success: function (resp) {
+            ts.tableData = resp.rows;
+          },
+        },
+        ts
+      );
+    },
+    addDsource(isupdate) {
+      this.isupdate = isupdate;
+      this.$refs["dsourceadd"].addDsource(isupdate, this.checked);
+    },
+    delDsource() {
+      if (!this.checked) {
+        this.$notify.error({
+          title: "未勾选数据",
+          offset: 50,
+        });
+      }
+      if (confirm("是否确认?")) {
+        ajax(
+          {
+            type: "GET",
+            url: "model/deleteDataSource.action",
+            data: { dsid: this.checked },
+            success: () => {
+              this.$notify.success({
+                title: "删除成功!",
+                offset: 50,
+              });
+              this.loadData();
+            },
+          },
+          this
+        );
+      }
+    },
+  },
 };
 </script>
 

+ 252 - 0
src/view/model/DsourceAdd.vue

@@ -0,0 +1,252 @@
+<template>
+  <el-dialog :title="dialogTitle" :visible.sync="show">
+    <el-tabs v-model="active" type="card">
+      <el-tab-pane label="JDBC" name="jdbc">
+        <el-form :model="dsource" :rules="rules" ref="dsourceForm">
+          <el-form-item label="数据源名称" label-width="100px" prop="dsname">
+            <el-input v-model="dsource.dsname"></el-input>
+          </el-form-item>
+          <el-form-item label="数据源类型" label-width="100px" prop="linkType">
+            <el-select
+              v-model="dsource.linkType"
+              placeholder="请选择"
+              @change="chglinkType"
+            >
+              <el-option
+                v-for="item in opts.linkTypes"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="连接字符串" label-width="100px" prop="linkUrl">
+            <el-input
+              type="textarea"
+              :rows="3"
+              v-model="dsource.linkUrl"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="连接用户名" label-width="100px" prop="linkName">
+            <el-input v-model="dsource.linkName"></el-input>
+          </el-form-item>
+          <el-form-item label="连接密码" label-width="100px" prop="linkPwd">
+            <el-input type="password" v-model="dsource.linkPwd"></el-input>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane label="JNDI" name="jndi">
+        <el-form :model="jndisource" :rules="jndiRules" ref="jndiForm">
+          <el-form-item label="JNDI名称" label-width="100px" prop="jndiName">
+            <el-input v-model="jndisource.jndiName"></el-input>
+          </el-form-item>
+          <el-form-item label="数据源类型" label-width="100px" prop="linkType">
+            <el-select v-model="jndisource.linkType" placeholder="请选择">
+              <el-option
+                v-for="item in opts.linkTypes"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="warning" @click="testDsource()">测试连接</el-button>
+      <el-button type="primary" @click="saveDsource()">确 定</el-button>
+      <el-button @click="show = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { baseUrl, ajax } from "@/common/biConfig";
+import $ from "jquery";
+import { Loading } from "element-ui";
+
+export default {
+  data() {
+    return {
+      dialogTitle: "",
+      show: false,
+      ischeckds:false,
+      dsource: {
+        dsname:null,
+        linkType:null,
+        linkUrl:null,
+        linkName:null,
+        linkPwd:null
+      },
+      jndisource: {
+        jndiName:null,
+        linkType:null
+      },
+      rules: {
+        dsname: [{ required: true, message: "必填", trigger: "blur" }],
+        linkType: [{ required: true, message: "必填", trigger: "blur" }],
+        linkUrl: [{ required: true, message: "必填", trigger: "blur" }],
+        linkName: [{ required: true, message: "必填", trigger: "blur" }],
+        linkPwd: [{ required: true, message: "必填", trigger: "blur" }],
+      },
+      jndiRules: {
+        jndiName: [{ required: true, message: "必填", trigger: "blur" }],
+        linkType: [{ required: true, message: "必填", trigger: "blur" }],
+      },
+      active: "jdbc",
+      opts: {
+        linkTypes: [
+          { label: "Mysql", value: "mysql" },
+          { label: "Oracle", value: "oracle" },
+          { label: "SQL Server", value: "sqlser" },
+          { label: "DB2", value: "db2" },
+          { label: "PostgreSQL", value: "postgresql" },
+          { label: "Hive", value: "hive" },
+          { label: "Kylin", value: "kylin" },
+        ],
+      },
+    };
+  },
+  props: ["isupdate"],
+  components: {},
+  mounted() {
+    if (this.isupdate) {
+      this.dialogTitle = "修改数据源";
+    } else {
+      this.dialogTitle = "创建数据源";
+    }
+  },
+  computed: {},
+  methods: {
+    saveDsource: function () {
+      let ts = this;
+      if (this.active === "jdbc") {
+        this.dsource.use = "jdbc";
+      } else {
+        this.jndisource.use = "jndi";
+      }
+      this.$refs[this.active === "jdbc" ? "dsourceForm" : "jndiForm"].validate(
+        (valid) => {
+          if (valid && this.ischeckds === true) {
+            ajax(
+              {
+                type: "POST",
+                url: this.isupdate
+                  ? "model/updateDataSource.action"
+                  : "model/saveDataSource.action",
+                data: this.active === "jdbc" ? ts.dsource : ts.jndisource,
+                success: (resp) => {
+                  ts.$notify.success({
+                    title: ts.isupdate ? "数据源修改成功" : "数据源创建成功",
+                    offset: 50,
+                  });
+                  //关闭窗口
+                  ts.show = false;
+                  //刷新数据
+                  this.$parent.loadData();
+                },
+              },
+              ts
+            );
+          }else if(this.ischeckds === false){
+            this.$notify.warning("请先点击测试连接,连接成功后再点击确定按钮");
+          }
+        }
+      );
+    },
+    chglinkType: function (val) {
+      let s = "";
+      if (val == "mysql") {
+        s =
+          "jdbc:mysql://ip/database?useUnicode=true&characterEncoding=UTF8&serverTimezone=GMT%2B8";
+      } else if (val == "oracle") {
+        s = "jdbc:oracle:thin:@ip:1521/sid";
+      } else if (val == "sqlser") {
+        s = "jdbc:jtds:sqlserver://ip:1433/database";
+      } else if (val == "db2") {
+        s = "jdbc:db2://ip:50000/database";
+      } else if (val == "postgresql") {
+        s = "jdbc:postgresql://ip:5432/database";
+      } else if (val == "hive") {
+        s = "jdbc:hive2://ip:10000/default";
+      } else if (val == "kylin") {
+        s = "jdbc:kylin://ip:7070/kylin_project_name";
+      }
+      this.dsource.linkUrl = s;
+    },
+    addDsource(update, dsId) {
+      this.ischeckds = false;
+      if (update) {
+        if (!dsId || dsId === "") {
+          this.$notify.error("未勾选数据");
+          return;
+        }
+        this.show = true;
+        //回写数据
+        ajax(
+          {
+            type: "GET",
+            url: "model/getDataSource.action",
+            data: { dsid: dsId },
+            success: (resp) => {
+              let o = resp.rows;
+              if (o.use === "jdbc") {
+                this.dsource = o;
+              } else {
+                this.jndisource = o;
+              }
+              this.active = o.use;
+            },
+          },
+          this
+        );
+      } else {
+        this.show = true;
+        if (this.$refs["dsourceForm"]) {
+          this.$refs["dsourceForm"].resetFields();
+        }
+        if (this.$refs["jndiForm"]) {
+          this.$refs["jndiForm"].resetFields();
+        }
+      }
+    },
+    testDsource() {
+      this.$refs[this.active === "jdbc" ? "dsourceForm" : "jndiForm"].validate(
+        (valid) => {
+          if (valid) {
+            let load = Loading.service({ fullscreen: true });
+            ajax(
+              {
+                type: "POST",
+                url:
+                  this.active === "jdbc"
+                    ? "model/testDataSource.action"
+                    : "model/testJndi.action",
+                data: this.active === "jdbc" ? this.dsource : this.jndisource,
+                success: (resp) => {
+                  this.$notify.success({
+                    title: "测试成功",
+                    offset: 50,
+                  });
+                  this.ischeckds = true;
+                },
+              },
+              this,
+              load
+            );
+          }
+        }
+      );
+    },
+  },
+};
+</script>
+
+<style lang="css">
+.el-dialog__body {
+  padding: 5px;
+}
+</style>