增加数据源类别管理

src/views/source/source.vue

@@ -6,24 +6,29 @@
     </div>
     <div class="scroll">
       <div class="middle">
-        <div class="filter">
-          <div class="condition">
-            <el-select v-model="searchInput.dsClassValue" class="sel" placeholder="数据库类型" clearable>
-              <el-option v-for="item in dsClass.list" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <el-select v-model="searchInput.connectStatus" class="sel" placeholder="连接状态" clearable>
-              <el-option label="正常" value="1" />
-              <el-option label="异常" value="0" />
-            </el-select>
-            <el-input :clearable="true" @clear="searchBtn" v-model="searchInput.keyWord" class="sel"
-              placeholder="数据源名称" />
+        <div class="search-manager">
+          <div class="filter">
+            <div class="condition">
+              <el-select v-model="searchInput.dsClassValue" class="sel" placeholder="数据库类型" clearable>
+                <el-option v-for="item in dsClass.list" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+              <el-select v-model="searchInput.connectStatus" class="sel" placeholder="连接状态" clearable>
+                <el-option label="正常" value="1" />
+                <el-option label="异常" value="0" />
+              </el-select>
+              <el-input :clearable="true" @clear="searchBtn" v-model="searchInput.keyWord" class="sel"
+                placeholder="数据源名称" />
+            </div>
+            <el-button color="rgba(0, 97, 255, 1)" type="primary" class="search" @click="searchBtn">
+              <el-icon>
+                <Search />
+              </el-icon>
+              <span>查询</span>
+            </el-button>
+          </div>
+          <div>
+            <el-button type="primary" color="rgba(0, 97, 255, 1)" plain @click="managerDSClass">数据源类别管理</el-button>
           </div>
-          <el-button color="rgba(0, 97, 255, 1)" type="primary" class="search" @click="searchBtn">
-            <el-icon>
-              <Search />
-            </el-icon>
-            <span>查询</span>
-          </el-button>
         </div>
         <!-- 按钮列表 -->
         <div class="gongneng">
@@ -33,12 +38,11 @@
         </div>
       </div>
       <div class="footer" v-loading="loading">
-        <el-table :row-class-name="tableRowClassName" :data="tableData.list" @selection-change="handleSelectionChange"
-          style="width: 100%" :header-cell-style="{
-            background: 'rgba(240, 243, 247, 1)',
-            height: '50px',
-            border: 0,
-          }">
+        <el-table :row-class-name="tableRowClassName" :data="tableData.list" style="width: 100%" :header-cell-style="{
+          background: 'rgba(240, 243, 247, 1)',
+          height: '50px',
+          border: 0,
+        }">
           <!-- <el-table-column align="center" type="selection" width="80" /> -->
           <el-table-column align="center" prop="dsClsName" label="类型" />
           <el-table-column align="center" prop="dsName" label="名称" />
@@ -59,8 +63,8 @@
             <template #default="scope">
               <div class="edit">
                 <div class="look" @click="editClick(scope.row)">编辑</div>
-                <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
-                  icon-color="#f89626" title="是否删除此数据源?" @confirm="deleteClick(scope.row)" @cancel="cancelEvent">
+                <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" icon-color="#f89626"
+                  title="是否删除此数据源?" @confirm="deleteClick(scope.row)">
                   <template #reference>
                     <div class="del">删除</div>
                   </template>
@@ -70,10 +74,8 @@
           </el-table-column>
         </el-table>
       </div>
-
       <!-- 分页组件 -->
       <div class="pageSize">
-        <span></span>
         <el-pagination background :current-page="currentPage" :page-size="pageSize"
           layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
       </div>
@@ -81,79 +83,86 @@
       <!-- 新增/编辑对话框 -->
       <el-dialog class="editDialog" v-model="editVisible" :close-on-click-modal="false" :close-on-press-escape="false"
         :title="titleDialog" align-center width="900" :before-close="cancelEdit" :show-close="false">
-        <div v-loading="dialog_loading">
-          <el-form ref="editRef" :model="editRuleForm" :rules="editRules" label-width="100px" class="demo-ruleForm"
-            :size="formSize" label-position="right" status-icon>
-            <el-form-item label="类型 :" prop="dsClsId">
-              <el-select v-model="editRuleForm.dsClsId" placeholder="请选择类型" style="width: 740px" clearable>
-                <el-option v-for="item in dsClass.list" :key="item.value" :label="item.label" :value="item.value" />
-              </el-select>
+        <el-form ref="editRef" :model="editRuleForm" :rules="editRules" label-width="100px" class="demo-ruleForm"
+          :size="formSize" label-position="right" status-icon v-loading.fullscreen.lock="dialog_loading"
+          element-loading-text="正在验证数据源有效性，请等待...">
+          <el-form-item label="类型 :" prop="dsClsId">
+            <el-select v-model="editRuleForm.dsClsId" placeholder="请选择类型" style="width: 740px" clearable>
+              <el-option v-for="item in dsClass.list" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="名称 :" prop="dsName">
+            <el-input v-model="editRuleForm.dsName" placeholder="数据源名称" clearable style="width: 740px" />
+          </el-form-item>
+          <div v-if="titleDialog == '新增'" style="display: flex; justify-content: space-between;">
+            <!-- <span class="typeTitle">使用辅助选项请先选择类型</span> -->
+            <el-form-item label="辅助选项 :" prop="ip">
+              <el-input v-model="editRuleForm.ip" placeholder="数据库服务IP地址" clearable @keyup="paramsChange"
+                @blur="paramsChange" @clear="paramsChange" ref="inputRef" maxlength="15" />
             </el-form-item>
-            <el-form-item label="名称 :" prop="dsName">
-              <el-input v-model="editRuleForm.dsName" placeholder="数据源名称" clearable style="width: 740px" />
+            <el-form-item label="端口：" prop="port" style="width: 270px;">
+              <el-input v-model="editRuleForm.port" placeholder="数据库服务端口号" clearable @keyup="paramsChange"
+                @blur="paramsChange" @clear="paramsChange" maxlength="5" />
             </el-form-item>
-            <div v-if="titleDialog == '新增'" style="display: flex; justify-content: space-between;">
-              <!-- <span class="typeTitle">使用辅助选项请先选择类型</span> -->
-              <el-form-item label="辅助选项 :" prop="ip">
-                <el-input v-model="editRuleForm.ip" placeholder="数据库服务IP地址" clearable @keyup="paramsChange"
-                  @blur="paramsChange" @clear="paramsChange" ref="inputRef" maxlength="15" />
-              </el-form-item>
-              <el-form-item label="端口：" prop="port" style="width: 270px;">
-                <el-input v-model="editRuleForm.port" placeholder="数据库服务端口号" clearable @keyup="paramsChange"
-                  @blur="paramsChange" @clear="paramsChange" maxlength="5" />
-              </el-form-item>
-              <el-form-item label="数据库名称：" prop="dbname" :label-width="'130px'" style="width: 270px;">
-                <el-input v-model="editRuleForm.dbname" placeholder="数据库名称" clearable @keyup="paramsChange"
-                  @blur="paramsChange" @clear="paramsChange" maxlength="32" />
-              </el-form-item>
-            </div>
-            <el-form-item label="连接地址 :" prop="dsUrl">
-              <el-input v-model="editRuleForm.dsUrl" placeholder="数据库连接地址" :disabled="isDisabled" clearable
-                style="width: 740px;" />
+            <el-form-item label="数据库名称：" prop="dbname" :label-width="'130px'" style="width: 270px;">
+              <el-input v-model="editRuleForm.dbname" placeholder="数据库名称" clearable @keyup="paramsChange"
+                @blur="paramsChange" @clear="paramsChange" maxlength="32" />
             </el-form-item>
-            <div class="account">
-              <el-form-item label="数据库账号 :" prop="dsUser">
-                <el-input v-model="editRuleForm.dsUser" placeholder="请输入数据库账号" clearable maxlength="32" />
-              </el-form-item>
-              <el-form-item label="数据库密码 :" prop="dsPassword">
-                <el-input v-model="editRuleForm.dsPassword" placeholder="请输入数据库密码" clearable maxlength="32" />
-              </el-form-item>
-            </div>
-            <el-form-item label="描述 :" prop="dsDescrition">
-              <el-input v-model="editRuleForm.dsDescrition" placeholder="请输入该数据库相关简述" clearable type="textarea" :rows="5"
-                maxlength="150" show-word-limit style="width: 740px" />
+          </div>
+          <el-form-item label="连接地址 :" prop="dsUrl">
+            <el-input v-model="editRuleForm.dsUrl" placeholder="数据库连接地址" :disabled="isDisabled" clearable
+              style="width: 740px;" />
+          </el-form-item>
+          <div class="account">
+            <el-form-item label="数据库账号 :" prop="dsUser">
+              <el-input v-model="editRuleForm.dsUser" placeholder="请输入数据库账号" clearable maxlength="32" />
             </el-form-item>
-            <el-form-item class="options">
-              <el-button color="rgba(41, 109, 227, 1)" class="queding" type="primary"
-                @click="confirmEdit(editRef)">确认</el-button>
-              <el-button @click="cancelEdit(editRef)">取消</el-button>
+            <el-form-item label="数据库密码 :" prop="dsPassword">
+              <el-input v-model="editRuleForm.dsPassword" placeholder="请输入数据库密码" clearable maxlength="32" />
             </el-form-item>
-          </el-form>
-        </div>
+          </div>
+          <el-form-item label="描述 :" prop="dsDescrition">
+            <el-input v-model="editRuleForm.dsDescrition" placeholder="请输入该数据库相关简述" clearable type="textarea" :rows="5"
+              maxlength="150" show-word-limit style="width: 740px" />
+          </el-form-item>
+          <el-form-item class="options">
+            <el-button color="rgba(41, 109, 227, 1)" class="queding" type="primary"
+              @click="confirmEdit(editRef)">确认</el-button>
+            <el-button @click="cancelEdit(editRef)">取消</el-button>
+          </el-form-item>
+        </el-form>
       </el-dialog>
 
-      <!-- 勾选删除 -->
-      <el-dialog class="closeAccount" v-model="selDelVisible" :close-on-click-modal="false" :close-on-press-escape="false"
-        title="勾选删除" align-center width="500" :before-close="cancelSelDel">
-        <div class="content">
-          <img src="@/assets/images/warning.png" alt="" />
-          <span>是否删除勾选的数据库？</span>
-        </div>
-        <div class="option">
-          <el-button color="rgba(41, 109, 227, 1)" class="queding" type="primary" @click="confirmSelDel">
-            确认
-          </el-button>
-          <el-button @click="cancelSelDel">取消</el-button>
+      <!-- 数据源类别管理对话框 -->
+      <el-dialog v-model="managerDialogVisible" title="数据源类别管理" :close-on-click-modal="false"
+        :close-on-press-escape="false">
+        <div>
+          <div style="display: flex; justify-content: space-between;">
+            <el-button type="primary">增加</el-button>
+            <el-input v-model="dsClassSearch" @change="dsClassNameSearch" @keyup.enter="dsClassNameSearch" size="small" placeholder="搜索数据源类别名称"
+                  style="width: 180px;" clearable />
+          </div>
+          <el-table :data="dsClassTableData.list" stripe style="width: 100%" v-loading="dsClassLoading"
+            element-loading-text="加载中...">
+            <el-table-column prop="dsClsName" label="数据源类别名称" width="180" />
+            <el-table-column prop="dsClsDriver" label="数据源驱动" width="180" />
+            <el-table-column prop="dsClsCreateTime" label="创建时间" />
+            <el-table-column prop="dsClsUpdateTime" label="修改时间" />
+            <el-table-column align="right">
+              <template #default="scope">
+                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div style="display: flex; justify-content: center;">
+            <el-pagination background layout="prev, pager, next" :total="dsClassTableTotal"
+              :current-page="dsClassCurrentPage" :default-page-size="dsClassPageCount"
+              :current-change="dsClassCurrentPageChange" style="margin-top: 10px;" />
+          </div>
         </div>
       </el-dialog>
     </div>
-    <div class="bgImg" v-if="bgImg">
-      <el-carousel @click="bgImg = false" ref="bgImgs" indicator-position arrow="always" :autoplay="false" trigger>
-        <el-carousel-item v-for="item in bgImgList" :key="item.id">
-          <img :src="item.url" alt="" />
-        </el-carousel-item>
-      </el-carousel>
-    </div>
   </div>
 </template>
 
@@ -166,11 +175,11 @@ import {
   onBeforeMount,
   onUnmounted,
 } from "vue";
-import { useRouter } from "vue-router";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { Calendar } from "@element-plus/icons-vue";
-import vidiconsApi from "@/api/vidicons.js";
-import { dayjs } from "element-plus";
+// import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+// import { Calendar } from "@element-plus/icons-vue";
+// import vidiconsApi from "@/api/vidicons.js";
+// import { dayjs } from "element-plus";
 import lodash from "lodash";
 import axios from "axios";
 import { useStore } from "vuex";
@@ -178,9 +187,8 @@ import { useStore } from "vuex";
 // 数据================================
 const store = useStore();
 const api = ref("");
-const router = useRouter();
+// const router = useRouter();
 const loading = ref(false);
-const dialog_loading = ref(false);
 
 // 表格数据
 const tableData = reactive({
@@ -190,6 +198,9 @@ const tableData = reactive({
 const dsClass = reactive({
   list: [],
 });
+const dsClassTableData = reactive({
+  list: [],
+})
 
 const searchInput = reactive({
   dsClassValue: "",
@@ -199,10 +210,7 @@ const searchInput = reactive({
 
 const currentPage = ref(1); // 当前页
 const pageSize = ref(10);
-const total = ref(5); // 当前总数
-// const selectData = reactive({
-//   list: []
-// }); // 表格勾选的数据
+const total = ref(0); // 当前总数
 
 // 编辑功能
 const titleDialog = ref("");
@@ -312,7 +320,60 @@ const editRules = reactive({
   ],
 });
 
-// 方法=================================
+// 编辑数据库类别对话框
+const dsClassLoading = ref(false);
+const dsClassSearch = ref("");
+const managerDialogVisible = ref(false);
+const dsClassTableTotal = ref(0);
+const dsClassCurrentPage = ref(1);
+const dsClassPageCount = ref(10);
+// 查询数据源类别
+const managerDSClass = async () => {
+  managerDialogVisible.value = true;
+  dsClassLoading.value = true;
+  let data = {
+    currentPage: dsClassCurrentPage.value,
+    pageCount: dsClassPageCount.value,
+    name: dsClassSearch.value, // 数据源类别名称
+    managerId: sessionStorage.getItem("token"),
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartDataClass/queryPageSmartDataClass",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  // console.log(res, "数据源类别");
+  if (res.data.code == 200) {
+    dsClassLoading.value = false;
+    dsClassTableData.list = res.data.data.list;
+    dsClassCurrentPage.value = res.data.data.currPage;
+    dsClassTableTotal.value = res.data.data.totalCount;
+  } else {
+    dsClassLoading.value = false;
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+}
+
+// 查询数据源类别
+const dsClassNameSearch = () => {
+  dsClassCurrentPage.value = 1;
+  managerDSClass();
+}
+
+const dsClassCurrentPageChange = (val) => {
+  dsClassCurrentPage.value = val;
+  managerDSClass();
+}
+
 // 数据源参数发生变化
 const paramsChange = () => {
   if (editRuleForm.dsClsId == "") {
@@ -418,9 +479,9 @@ const getList = async () => {
 // 搜索功能
 const searchBtn = lodash.debounce(async () => {
   getList();
-}, 100);
+}, 300);
 
-// 添加按钮 （-------------------------------------------）
+// 添加（新增）按钮 （-------------------------------------------）
 const addClick = async () => {
   titleDialog.value = "新增";
   editVisible.value = true;
@@ -508,6 +569,7 @@ const cancelEdit = () => {
 };
 
 // 添加（新增）、编辑窗口的确定按钮事件
+const dialog_loading = ref(false);
 const confirmEdit = (formEl) => {
   if (!formEl) return;
   formEl.validate(async (valid, fields) => {
@@ -562,60 +624,12 @@ const confirmEdit = (formEl) => {
 //删除按钮
 const delClick = async () => {
   selDelVisible.value = true;
-  // if (selectData.list.length >= 1) {
-  //   selDelVisible.value = true;
-  // } else {
-  //   ElMessage({
-  //     type: "warning",
-  //     showClose: true,
-  //     message: "请先选定所需要删除的数据库!",
-  //     center: true,
-  //   });
-  // }
-  // let data = {
-  //   id: row.id,
-  // };
-  //   let res = await axios({
-  //     method: "post",
-  //     url: api.value + "/mhotel/housedelHouser.action",
-  //     headers: {
-  //       // token: sessionStorage.getItem("token"),
-  //       // user_head: sessionStorage.getItem("userhead"),
-  //     },
-  //     params: data,
-  //   });
-  //   if (res.data.code == 200) {
-  //     if (tableData.list.length == 1 && currentPage.value != 1) {
-  //       currentPage.value = currentPage.value - 1;
-  //     }
-  //     getList();
-  //     ElMessage({
-  //       type: "success",
-  //       showClose: true,
-  //       message: res.data.message,
-  //       center: true,
-  //     });
-  //   } else {
-  //     ElMessage({
-  //       type: "error",
-  //       showClose: true,
-  //       message: res.data.message,
-  //       center: true,
-  //     });
-  //   }
-  // console.log(res);
 };
 
 // const cancelSelDel = () => {
 //   selDelVisible.value = false;
 // };
 
-// // 多选框功能
-// const handleSelectionChange = (val) => {
-//   console.log(val);
-//   selectData.list = val;
-// };
-
 // 表格斑马纹颜色修改
 const tableRowClassName = ({ row, rowIndex }) => {
   if (rowIndex % 2 === 0) {
@@ -691,28 +705,35 @@ onUnmounted(() => {
 
     color: #000;
 
-    // border-bottom: 1px solid rgb(231, 231, 231);
-    .filter {
+    .search-manager {
       display: flex;
-      flex-wrap: wrap;
+      justify-content: space-between;
       align-items: center;
       margin: 10px 0 0 0;
 
-      .search {
-        color: #fff;
-      }
-
-      .condition {
+      // border-bottom: 1px solid rgb(231, 231, 231);
+      .filter {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
-        margin: 10px 30px 10px 0;
+        margin: 10px 0 0 0;
 
-        .sel {
-          margin-right: 10px;
+        .search {
+          color: #fff;
         }
 
-        :deep(.el-input .el-input__inner) {
-          font-size: 14px;
+        .condition {
+          display: flex;
+          align-items: center;
+          margin: 10px 30px 10px 0;
+
+          .sel {
+            margin-right: 10px;
+          }
+
+          :deep(.el-input .el-input__inner) {
+            font-size: 14px;
+          }
         }
       }
     }