密码框

src/views/DataSource/view/SqlServer.vue

@@ -1,76 +1,121 @@
 <template>
   <!-- Excel类型数据源 -->
   <div class="datalink_mysql">
-        <div class="head"><span>{{dataLinkInfo.name}}(<em>类型：SqlServer</em>)</span></div>
+    <div class="head">
-        <div class="title">
+      <span>{{ dataLinkInfo.name }}(<em>类型：SqlServer</em>)</span>
-          <span>基本信息</span><em></em>
     </div>
+    <div class="title"><span>基本信息</span><em></em></div>
     <div class="base_info">
       <ul>
         <li>
           <div class="label">数据源名称：</div>
-              <el-input class="inp_1" v-model="dataLinkInfo.name" @blur="editDataLink" placeholder="请输入数据源名称"></el-input>
+          <el-input
+            class="inp_1"
+            v-model="dataLinkInfo.name"
+            @blur="editDataLink"
+            placeholder="请输入数据源名称"
+          ></el-input>
         </li>
         <li>
           <div class="label">服务器：</div>
-              <el-input class="inp_1" v-model="dataLinkInfo.host" @blur="editDataLink" placeholder=""></el-input>
+          <el-input
+            class="inp_1"
+            v-model="dataLinkInfo.host"
+            @blur="editDataLink"
+            placeholder=""
+          ></el-input>
         </li>
         <li>
           <div class="label">端口：</div>
-              <el-input class="inp_1" v-model="dataLinkInfo.port" @blur="editDataLink" placeholder=""></el-input>
+          <el-input
+            class="inp_1"
+            v-model="dataLinkInfo.port"
+            @blur="editDataLink"
+            placeholder=""
+          ></el-input>
         </li>
         <li>
           <div class="label">数据库：</div>
-              <el-input class="inp_1" v-model="dataLinkInfo.default_database" @blur="editDataLink" placeholder=""></el-input>
+          <el-input
+            class="inp_1"
+            v-model="dataLinkInfo.default_database"
+            @blur="editDataLink"
+            placeholder=""
+          ></el-input>
         </li>
         <li>
           <div class="label">用户名：</div>
-              <el-input class="inp_1" v-model="dataLinkInfo.username" @blur="editDataLink" placeholder=""></el-input>
+          <el-input
+            class="inp_1"
+            v-model="dataLinkInfo.username"
+            @blur="editDataLink"
+            placeholder=""
+          ></el-input>
         </li>
         <li>
           <div class="label">密码：</div>
-              <el-input class="inp_1" v-model="dataLinkInfo.password" @blur="editDataLink" placeholder=""></el-input>
+          <el-input
+            class="inp_1"
+            type="password"
+            show-password
+            v-model="dataLinkInfo.password"
+            @blur="editDataLink"
+            placeholder=""
+          ></el-input>
         </li>
         <li>
           <div class="label"></div>
 
-            <el-button size="small" type="primary" @click="testLink">{{testLinkText}}</el-button>
+          <el-button size="small" type="primary" @click="testLink">{{
+            testLinkText
+          }}</el-button>
         </li>
       </ul>
     </div>
-        <div class="title">
+    <div class="title"><span>表信息</span><em></em></div>
-          <span>表信息</span><em></em>
-        </div>
     <div class="table_search">
       <div class="label">筛选：</div>
-            <el-input class="inp_1" prefix-icon="el-icon-search" v-model="input" placeholder="输入关键字筛选"></el-input>
+      <el-input
+        class="inp_1"
+        prefix-icon="el-icon-search"
+        v-model="input"
+        placeholder="输入关键字筛选"
+      ></el-input>
     </div>
     <el-table
-            :data="tableData.filter(data => !input || data.table_text.toLowerCase().includes(input.toLowerCase()))"
+      :data="
+        tableData.filter(
+          (data) =>
+            !input ||
+            data.table_text.toLowerCase().includes(input.toLowerCase())
+        )
+      "
       class="table_list"
       highlight-current-row="true"
       :empty-text="emptyext"
       border
-            style="width: 100%">
+      style="width: 100%"
-            <el-table-column
-            prop="table_text"
-            label="表名称"
-            align="center"
     >
+      <el-table-column prop="table_text" label="表名称" align="center">
       </el-table-column>
-            <el-table-column
+      <el-table-column prop="action" label="操作" align="center">
-            prop="action"
-            label="操作"
-            align="center"
-            >
         <template #default="scope">
-                <el-button @click="ShowData(scope.row.table_name,scope.row.table_text)" type="text" size="small">数据预览</el-button>
+          <el-button
+            @click="ShowData(scope.row.table_name, scope.row.table_text)"
+            type="text"
+            size="small"
+            >数据预览</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
   </div>
   <!-- 数据预览 -->
-      <show-data ref="ShowData1" :tableName="showTableName" :tableText="showTableText" />
+  <show-data
+    ref="ShowData1"
+    :tableName="showTableName"
+    :tableText="showTableText"
+  />
 </template>
 
 <script>
@@ -87,114 +132,129 @@ export default {
   },
   data() {
     return {
-      name:"",
+      name: '',
       dataLinkInfo: {}, //数据连接基本信息
-      input:"",
+      input: '',
-      testLinkText:"测试数据连接",//测试连接文字
+      testLinkText: '测试数据连接', //测试连接文字
       testLineOK: true, //测试连接开关按钮
-      emptyext:"暂无数据",
+      emptyext: '暂无数据',
       tableData: [], //数据源下所有的表
-      showTableName:"",//需要预览的表的表名
+      showTableName: '', //需要预览的表的表名
-      showTableText:"",//需要预览的表的表名
+      showTableText: '' //需要预览的表的表名
-      
     }
   },
   mounted() {
     //加载数据连接基本信息
-	  this.getDataLinkInfo();
+    this.getDataLinkInfo()
-    this.getTables();
+    this.getTables()
   },
   methods: {
     //数据预览
     ShowData(tableName, tableText) {
       if (!tableName) {
-              return false;
+        return false
       }
-          this.showTableName=tableName;
+      this.showTableName = tableName
-          this.showTableText=tableText;
+      this.showTableText = tableText
-          this.$refs['ShowData1'].onOpen();
+      this.$refs['ShowData1'].onOpen()
     },
     //加载数据连接基本信息
     async getDataLinkInfo() {
       //   alert(12)
-		  var dataLinkId=this.$route.query.dataLinkId;
+      var dataLinkId = this.$route.query.dataLinkId
-          const res =await axios({url:'dataLink/getDataLink',params:{data_link_id:dataLinkId}, method: 'get'});
+      const res = await axios({
+        url: 'dataLink/getDataLink',
+        params: { data_link_id: dataLinkId },
+        method: 'get'
+      })
       // console.log("res",res);
       //成功
       if (res.code == 1) {
-            this.dataLinkInfo=res.data;
+        this.dataLinkInfo = res.data
       } else {
         // ElMessage(res.message);
-            this.$message({ type: 'error', message:res.message});
+        this.$message({ type: 'error', message: res.message })
       }
     },
     //测试数据连接
     async testLink() {
       if (!this.testLineOK) {
-                ElMessage("正在测试中...请等待测试结果！");
+        ElMessage('正在测试中...请等待测试结果！')
-                return false;
+        return false
       }
-            this.testLineOK=false;
+      this.testLineOK = false
-            this.testLinkText="连接中.....";
+      this.testLinkText = '连接中.....'
-            var dataLinkId=this.$route.query.dataLinkId;
+      var dataLinkId = this.$route.query.dataLinkId
-            const res =await axios({url:'dataLink/testLink',params:{data_link_id:dataLinkId}, method: 'get'});
+      const res = await axios({
+        url: 'dataLink/testLink',
+        params: { data_link_id: dataLinkId },
+        method: 'get'
+      })
       //成功
       if (res.code == 1) {
         if (res.data) {
           // ElMessage("测试连接成功！");
-                    this.$message({ type: 'success', message:"测试连接成功！"});
+          this.$message({ type: 'success', message: '测试连接成功！' })
-                    this.getTables();//测试成功，重载表信息
+          this.getTables() //测试成功，重载表信息
         } else {
           // ElMessage("测试连接失败！");
-                    this.$message({ type: 'error', message:"测试连接失败！"});
+          this.$message({ type: 'error', message: '测试连接失败！' })
         }
       } else {
         // ElMessage(res.message);
-                this.$message({ type: 'error', message:res.message});
+        this.$message({ type: 'error', message: res.message })
         // this.emptyext=res.message;
       }
       //无论成功与否，都还原为之前的状态
-            this.testLineOK=true;
+      this.testLineOK = true
-            this.testLinkText="测试数据连接";
+      this.testLinkText = '测试数据连接'
     },
     //加载表信息
     async getTables() {
-		  var dataLinkId=this.$route.query.dataLinkId;
+      var dataLinkId = this.$route.query.dataLinkId
-          const res =await axios({url:'dataLink/getTables',params:{data_link_id:dataLinkId}, method: 'get'});
+      const res = await axios({
+        url: 'dataLink/getTables',
+        params: { data_link_id: dataLinkId },
+        method: 'get'
+      })
       //当请求的数据源连接id不一致时，说明已经切换数据源，需要拦截之前已经请求过的数据链id，不做任何处理
       if (dataLinkId != this.$route.query.dataLinkId) {
-            return false;
+        return false
       }
       //成功
       if (res.code == 1) {
-            this.tableData=res.data;
+        this.tableData = res.data
       } else {
         // ElMessage(res.message);
-            this.tableData=[];
+        this.tableData = []
         // this.emptyext=res.message;
       }
     },
     async editDataLink() {
-          const res =await axios({url:'dataLink/editDataLink',data:this.dataLinkInfo, method: 'post'});
+      const res = await axios({
+        url: 'dataLink/editDataLink',
+        data: this.dataLinkInfo,
+        method: 'post'
+      })
       // console.log("res",res);
       //成功
       if (res.code != 1) {
         // this.dataLinkInfo=res.data;
         // ElMessage(res.message);
-            this.$message({ type: 'error', message:res.message});
+        this.$message({ type: 'error', message: res.message })
       }
-          this.$emit("getGroupList");
+      this.$emit('getGroupList')
     }
   },
   watch: {
-		'$route' (to, from) {
+    $route(to, from) {
       //加载数据连接基本信息
       // this.getDataLinkInfo();
       //加载数据连接基本信息
-			if(to.path=="/dataSource/sqlserver"){
+      if (to.path == '/dataSource/sqlserver') {
-        this.tableData=[];
+        this.tableData = []
-				this.getDataLinkInfo();
+        this.getDataLinkInfo()
-                this.getTables();
+        this.getTables()
       }
     }
   }
@@ -203,55 +263,250 @@ export default {
 
 <style lang="scss">
 //excel数据源
-.datalink_mysql{ width: 100%; overflow: hidden;}
+.datalink_mysql {
-.datalink_mysql .head{ width:100%; border-bottom: #101419 1px solid; height: 42px; overflow: hidden; padding: 0 0 14px 0;}
+  width: 100%;
-.datalink_mysql .head span{ display: block; height: 24px; border-left: #2681ff 2px solid; margin: 9px 0 0 2px; padding: 0 0 0 15px; font-size: 16px; color: #ddd;}
+  overflow: hidden;
-.datalink_mysql .head span em{ color: #2681ff;}
+}
-.datalink_mysql .title{ width: 100%; height: 32px; background: #2c2f40; margin: 30px 0 0 0; overflow: hidden;}
+.datalink_mysql .head {
-.datalink_mysql .title span{ width: 104px; height: 32px; float: left; line-height: 32px; text-indent: 20px; color: #fff; background: #2681ff; font-size: 14px;}
+  width: 100%;
-.datalink_mysql .title em{ float: left;width:0; height:0;border-top:16px solid transparent;border-bottom: 16px solid transparent;border-left: 16px solid #2681ff;}
+  border-bottom: #101419 1px solid;
-.datalink_mysql .base_info{ width: 100%;}
+  height: 42px;
-.datalink_mysql .base_info ul{margin: 20px 0 0 20px; overflow: hidden; padding: 0 0 20px 0;}
+  overflow: hidden;
-.datalink_mysql .base_info ul li{ overflow: hidden; height: 36px; margin: 20px 0 0 0;}
+  padding: 0 0 14px 0;
-.datalink_mysql .base_info ul li .label{ float: left; width: 112px; height: 34px; line-height: 34px; text-align: right; color: #666666; font-size: 14px; font-weight: 700; margin: 0 5px 0 0;}
+}
+.datalink_mysql .head span {
+  display: block;
+  height: 24px;
+  border-left: #2681ff 2px solid;
+  margin: 9px 0 0 2px;
+  padding: 0 0 0 15px;
+  font-size: 16px;
+  color: #ddd;
+}
+.datalink_mysql .head span em {
+  color: #2681ff;
+}
+.datalink_mysql .title {
+  width: 100%;
+  height: 32px;
+  background: #2c2f40;
+  margin: 30px 0 0 0;
+  overflow: hidden;
+}
+.datalink_mysql .title span {
+  width: 104px;
+  height: 32px;
+  float: left;
+  line-height: 32px;
+  text-indent: 20px;
+  color: #fff;
+  background: #2681ff;
+  font-size: 14px;
+}
+.datalink_mysql .title em {
+  float: left;
+  width: 0;
+  height: 0;
+  border-top: 16px solid transparent;
+  border-bottom: 16px solid transparent;
+  border-left: 16px solid #2681ff;
+}
+.datalink_mysql .base_info {
+  width: 100%;
+}
+.datalink_mysql .base_info ul {
+  margin: 20px 0 0 20px;
+  overflow: hidden;
+  padding: 0 0 20px 0;
+}
+.datalink_mysql .base_info ul li {
+  overflow: hidden;
+  height: 36px;
+  margin: 20px 0 0 0;
+}
+.datalink_mysql .base_info ul li .label {
+  float: left;
+  width: 112px;
+  height: 34px;
+  line-height: 34px;
+  text-align: right;
+  color: #666666;
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0 5px 0 0;
+}
 //element-ui 输入框
-.datalink_mysql .base_info .inp_1.el-input{ float: left; width: 435px;}
+.datalink_mysql .base_info .inp_1.el-input {
-.datalink_mysql .base_info .inp_1.el-input .el-input__inner{ float: left; width: 425px; height: 32px; margin: 0px 0 0 0; background-color: #0f1217; border-radius: 0; border: #3c465a 1px solid; padding: 0 0 0 14px; font-size: 14px;color: #ddd; }
+  float: left;
-.datalink_mysql .base_info .inp_1.el-input .el-input__inner::placeholder{ color: #333;}
+  width: 435px;
-.datalink_mysql .base_info .inp_1.el-input .el-input__inner:focus{ border: #2681ff 1px solid;}
+}
+.datalink_mysql .base_info .inp_1.el-input .el-input__inner {
+  float: left;
+  width: 425px;
+  height: 32px;
+  margin: 0px 0 0 0;
+  background-color: #0f1217;
+  border-radius: 0;
+  border: #3c465a 1px solid;
+  padding: 0 0 0 14px;
+  font-size: 14px;
+  color: #ddd;
+}
+.datalink_mysql .base_info .inp_1.el-input .el-input__inner::placeholder {
+  color: #333;
+}
+.datalink_mysql .base_info .inp_1.el-input .el-input__inner:focus {
+  border: #2681ff 1px solid;
+}
 
-.datalink_mysql .base_info ul li .file{ float: left; height: 34px; line-height: 34px; color: #666666; font-size: 14px;}
+.datalink_mysql .base_info ul li .file {
-.datalink_mysql .base_info ul li .moban{ float: left; height: 34px; line-height: 34px; color: #666666; font-size: 14px;}
+  float: left;
-.datalink_mysql .base_info ul li .moban a{ color: #1856ad; text-decoration: underline; margin: 0 0 0 15px;}
+  height: 34px;
-.datalink_mysql .base_info ul li .moban a:hover{ color: #2270dd;}
+  line-height: 34px;
+  color: #666666;
+  font-size: 14px;
+}
+.datalink_mysql .base_info ul li .moban {
+  float: left;
+  height: 34px;
+  line-height: 34px;
+  color: #666666;
+  font-size: 14px;
+}
+.datalink_mysql .base_info ul li .moban a {
+  color: #1856ad;
+  text-decoration: underline;
+  margin: 0 0 0 15px;
+}
+.datalink_mysql .base_info ul li .moban a:hover {
+  color: #2270dd;
+}
 
 //element-ui 文件上传 按钮
 // .datalink_mysql .base_info ul li{ float: left;}
-.datalink_mysql .base_info ul li .el-button{ border: #2681ff 1px solid; color:#2681ff ; border-radius: 0; background: none; padding: 0; width: 423px; height: 32px;}
+.datalink_mysql .base_info ul li .el-button {
-.datalink_mysql .base_info ul li .el-button:hover{ border: #4794ff 1px solid; color: #4794ff;}
+  border: #2681ff 1px solid;
-.datalink_mysql .base_info ul li .el-button:active{ border: #145dc2 1px solid; color: #145dc2;}
+  color: #2681ff;
+  border-radius: 0;
+  background: none;
+  padding: 0;
+  width: 423px;
+  height: 32px;
+}
+.datalink_mysql .base_info ul li .el-button:hover {
+  border: #4794ff 1px solid;
+  color: #4794ff;
+}
+.datalink_mysql .base_info ul li .el-button:active {
+  border: #145dc2 1px solid;
+  color: #145dc2;
+}
 
-.table_search{ width: 100%; overflow: hidden; height: 38px; margin: 25px 0 0 0;}
+.table_search {
-.table_search .label{ float: left; width: 50px; height: 34px; line-height: 34px; text-align: right; color: #666666; font-size: 14px; margin: 0 0 0 15px; font-weight: 700; margin: 0 5px 0 0;}
+  width: 100%;
+  overflow: hidden;
+  height: 38px;
+  margin: 25px 0 0 0;
+}
+.table_search .label {
+  float: left;
+  width: 50px;
+  height: 34px;
+  line-height: 34px;
+  text-align: right;
+  color: #666666;
+  font-size: 14px;
+  margin: 0 0 0 15px;
+  font-weight: 700;
+  margin: 0 5px 0 0;
+}
 //element-ui 输入框
-.table_search .inp_1.el-input{ float: left; width: 435px;}
+.table_search .inp_1.el-input {
-.table_search .inp_1.el-input .el-input__inner{ float: left; width: 248px; height: 32px; margin: 0px 0 0 0; background-color: #0f1217; border-radius: 0; border: #3c465a 1px solid; padding: 0 0 0 28px; font-size: 14px;color: #ddd; }
+  float: left;
-.table_search .inp_1.el-input .el-input__inner::placeholder{ color: #333;}
+  width: 435px;
-.table_search .inp_1.el-input .el-icon-search{ font-size: 14px; color: #666; line-height: 30px;}
+}
+.table_search .inp_1.el-input .el-input__inner {
+  float: left;
+  width: 248px;
+  height: 32px;
+  margin: 0px 0 0 0;
+  background-color: #0f1217;
+  border-radius: 0;
+  border: #3c465a 1px solid;
+  padding: 0 0 0 28px;
+  font-size: 14px;
+  color: #ddd;
+}
+.table_search .inp_1.el-input .el-input__inner::placeholder {
+  color: #333;
+}
+.table_search .inp_1.el-input .el-icon-search {
+  font-size: 14px;
+  color: #666;
+  line-height: 30px;
+}
 
 //element-ui 表格
-.table_list{ background: none; border: 1px solid #27343e; margin: 15px 0 0 0;}
+.table_list {
-.table_list tr{ background: none;}
+  background: none;
-.table_list tr th{ background: none;border-right: 1px solid #27343e; border-bottom: 1px solid #27343e; padding: 6px 0; color: #aaaaaa; font-size: 14px;}
+  border: 1px solid #27343e;
-.table_list tr td{ background: none;border-right: 1px solid #27343e; border-bottom: 1px solid #27343e; padding: 2px 0; color: #ccc; font-size: 12px;}
+  margin: 15px 0 0 0;
-.table_list.el-table td, .table_list.el-table th.is-leaf{border-bottom: 1px solid #27343e;}
+}
-.table_list.el-table--border::after, .table_list.el-table--group::after, .table_list.el-table::before{background:none;}
+.table_list tr {
-.table_list .el-table__body tr.current-row>td{ background-color: #23272d;}
+  background: none;
-.table_list .el-table__body tr:hover>td{ background-color: #23272d;}
+}
+.table_list tr th {
+  background: none;
+  border-right: 1px solid #27343e;
+  border-bottom: 1px solid #27343e;
+  padding: 6px 0;
+  color: #aaaaaa;
+  font-size: 14px;
+}
+.table_list tr td {
+  background: none;
+  border-right: 1px solid #27343e;
+  border-bottom: 1px solid #27343e;
+  padding: 2px 0;
+  color: #ccc;
+  font-size: 12px;
+}
+.table_list.el-table td,
+.table_list.el-table th.is-leaf {
+  border-bottom: 1px solid #27343e;
+}
+.table_list.el-table--border::after,
+.table_list.el-table--group::after,
+.table_list.el-table::before {
+  background: none;
+}
+.table_list .el-table__body tr.current-row > td {
+  background-color: #23272d;
+}
+.table_list .el-table__body tr:hover > td {
+  background-color: #23272d;
+}
 //element-ui 表格--按钮
-.table_list .el-button{ /*border: #2681ff 1px solid;*/border:none; color:#2681ff ; border-radius: 0; background: none; padding: 0; width: 60px; height: 22px; margin: 5px 0; font-size: 12px;}
+.table_list .el-button {
-.table_list .el-button:hover{ /*border: #4794ff 1px solid;*/border:none; color: #4794ff;}
+  /*border: #2681ff 1px solid;*/
-.table_list .el-button:active{ /*border: #145dc2 1px solid;*/border:none; color: #145dc2;}
+  border: none;
+  color: #2681ff;
+  border-radius: 0;
+  background: none;
+  padding: 0;
+  width: 60px;
+  height: 22px;
+  margin: 5px 0;
+  font-size: 12px;
+}
+.table_list .el-button:hover {
+  /*border: #4794ff 1px solid;*/
+  border: none;
+  color: #4794ff;
+}
+.table_list .el-button:active {
+  /*border: #145dc2 1px solid;*/
+  border: none;
+  color: #145dc2;
+}
 </style>
-
-