数据源类别管理完成

src/views/source/source.vue

@@ -76,8 +76,10 @@
       </div>
       <!-- 分页组件 -->
       <div class="pageSize">
-        <el-pagination background :current-page="currentPage" :page-size="pageSize"
-          layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
+        <div></div>
+        <el-pagination background :current-page="tableCurrentPage" :page-size="tablePageSize"
+          layout="total, prev, pager, next, jumper, slot" :total="tableTotal"
+          @update:current-page="handleCurrentChange" />
       </div>
 
       <!-- 新增/编辑对话框 -->
@@ -138,30 +140,56 @@
         :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 />
+            <el-button type="primary" @click="dsAddModifyClass">增加</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="dsClsDriver" label="数据源驱动" width="280" />
             <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>
+                <el-button size="small" @click="dsClassEditRow(scope.row)">编辑</el-button>
+                <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" icon-color="#f89626"
+                  title="是否删除此数据源类别?" @confirm="dsClassDeleteRow(scope.row)">
+                  <template #reference>
+                    <el-button size="small" type="danger">删除</el-button>
+                  </template>
+                </el-popconfirm>
               </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;" />
+            <el-pagination background :current-page="dsClassCurrentPage" :page-size="dsClassPageCount"
+              layout="total, prev, pager, next, jumper, slot" :total="dsClassTableTotal"
+              @update:current-page="handleCurdsClassCurrentPageChangerentChange" style="margin-top: 20px;" />
           </div>
         </div>
       </el-dialog>
+
+      <!-- 新增/编辑 数据源类别 -->
+      <el-dialog v-model="managerAddModifyDialogVisible" :title="dsAddModifyTitle" :close-on-click-modal="false"
+        :close-on-press-escape="false" width="30%" top="18vh">
+        <el-form ref="dsClassForm" :model="dsAddModifyRuleForm" :rules="dsAddModifyRules" label-width="100px"
+          class="demo-ruleForm" :size="formSize" label-position="right" status-icon>
+          <el-form-item label="名称 :" prop="dsClsName">
+            <el-input v-model="dsAddModifyRuleForm.dsClsName" maxlength="64" placeholder="数据源类别名称" clearable
+              style="width: 740px" />
+          </el-form-item>
+          <el-form-item label="驱动 :" prop="dsClsDriver">
+            <el-input v-model="dsAddModifyRuleForm.dsClsDriver" maxlength="128" placeholder="数据源驱动" clearable
+              style="width: 740px" />
+          </el-form-item>
+          <el-form-item class="options">
+            <el-button color="rgba(41, 109, 227, 1)" class="queding" type="primary"
+              @click="dsAddModifyConfirmEdit(dsClassForm)">确认</el-button>
+            <el-button @click="dsAddModifyCancelEdit(dsClassForm)">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -190,10 +218,7 @@ const api = ref("");
 // const router = useRouter();
 const loading = ref(false);
 
-// 表格数据
-const tableData = reactive({
-  list: [],
-});
+
 // 页面中数据源类别下拉列表参数
 const dsClass = reactive({
   list: [],
@@ -208,10 +233,6 @@ const searchInput = reactive({
   keyWord: "",
 }); // 搜索按钮数据
 
-const currentPage = ref(1); // 当前页
-const pageSize = ref(10);
-const total = ref(0); // 当前总数
-
 // 编辑功能
 const titleDialog = ref("");
 const editVisible = ref(false);
@@ -323,7 +344,35 @@ const editRules = reactive({
 // 编辑数据库类别对话框
 const dsClassLoading = ref(false);
 const dsClassSearch = ref("");
-const managerDialogVisible = ref(false);
+const managerDialogVisible = ref(false); // 数据源类别对话框的显示隐藏
+const managerAddModifyDialogVisible = ref(false);  // 新增数据源类别对话框的显示隐藏
+const dsClassForm = ref();
+const dsAddModifyTitle = ref("");
+const dsAddModifyRuleForm = reactive({
+  dsClsName: "", // 数据源类别名称
+  dsClsDriver: "", // 数据源类别驱动
+});
+const dsAddModifyRules = reactive({
+  dsClsName: [
+    {
+      required: true,
+      message: "数据源类别名称不能为空",
+      trigger: "blur",
+    },
+  ],
+  dsClsDriver: [
+    {
+      required: true,
+      message: "数据库类别驱动不能为空",
+      trigger: "blur",
+    },
+    {
+      pattern: /^[a-zA-Z\.]+$/,
+      message: "数据库名称只能包含字母和点(.)",
+      trigger: "blur",
+    },
+  ],
+});
 const dsClassTableTotal = ref(0);
 const dsClassCurrentPage = ref(1);
 const dsClassPageCount = ref(10);
@@ -350,7 +399,6 @@ const managerDSClass = async () => {
   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;
@@ -363,50 +411,50 @@ const managerDSClass = async () => {
   }
 }
 
-// 查询数据源类别
-const dsClassNameSearch = () => {
-  dsClassCurrentPage.value = 1;
-  managerDSClass();
-}
-
+// 数据源类别分页
 const dsClassCurrentPageChange = (val) => {
   dsClassCurrentPage.value = val;
   managerDSClass();
 }
 
-// 数据源参数发生变化
-const paramsChange = () => {
-  if (editRuleForm.dsClsId == "") {
+// 编辑数据源类别
+const dsClassEditRow = (row) => {
+  dsAddModifyTitle.value = "编辑数据源类别";
+  managerAddModifyDialogVisible.value = true;
+
+  dsAddModifyRuleForm.dsClsId = row.dsClsId;
+  dsAddModifyRuleForm.dsClsName = row.dsClsName;
+  dsAddModifyRuleForm.dsClsDriver = row.dsClsDriver;
+}
+// 删除数据源类别
+const dsClassDeleteRow = async (row) => {
+  let data = {
+    id: row.dsClsId, // 需要删除的id
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartDataClass/deleteSmartDataClassById",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  // console.log(res, "删除数据源类别");
+  if (res.data.code == 200) {
+    managerDSClass();
+  } else {
+    dsClassLoading.value = false;
     ElMessage({
       type: "error",
       showClose: true,
-      message: "请先选择数据库类型",
+      message: res.data.message,
       center: true,
     });
-    editRuleForm.ip = "";
-    editRuleForm.port = "";
-    editRuleForm.dbname = "";
-    return;
   }
+}
 
-  if (editRuleForm.ip == "" && editRuleForm.port == "" && editRuleForm.dbname == "") {
-    editRuleForm.dsUrl = "";
-    return;
-  }
-
-  dsClass.list.forEach((item) => {
-    if (item.value == editRuleForm.dsClsId) {
-      if (item.label.toLowerCase().includes("mysql")) {
-        editRuleForm.dsUrl = "jdbc:mysql://" + editRuleForm.ip + ":" + editRuleForm.port + "/" + editRuleForm.dbname;
-      }
-    }
-  });
-};
-
-// 删除弹窗
-const selDelVisible = ref(false);
-
-// 数据源类别列表
+// 数据源类别填充下拉列表
 const getDsClass = async () => {
   let data = {
     currentPage: 1,
@@ -440,12 +488,130 @@ const getDsClass = async () => {
   }
 };
 
+// 新增/编辑 数据源类别操作
+const dsAddModifyConfirmEdit = (dsClassFormEl) => {
+  if (!dsClassFormEl) return;
+  dsClassFormEl.validate(async (valid, fields) => {
+    if (valid) {
+      let data = {
+        dsClsName: dsAddModifyRuleForm.dsClsName,
+        dsClsDriver: dsAddModifyRuleForm.dsClsDriver,
+        managerId: sessionStorage.getItem("token"),
+      };
+      let url = "insertSmartDataClass";
+      if (dsAddModifyTitle.value == "编辑数据源类别") {
+        url = "updateSmartDataClassById";
+        data.dsClsId = dsAddModifyRuleForm.dsClsId;
+      }
+      let res = await axios({
+        method: "post",
+        url: api.value + "/wanzai/api/smartDataClass/" + url,
+        headers: {
+          // token: sessionStorage.getItem("token"),
+          // user_head: sessionStorage.getItem("userhead"),
+        },
+        data,
+      });
+      // console.log(res, "数据源类别");
+      if (res.data.code == 200) {
+        ElMessage({
+          type: "success",
+          showClose: true,
+          message: res.data.message,
+          center: true,
+        });
+        dsAddModifyCancelEdit();
+        managerDSClass();
+      } else {
+        ElMessage({
+          type: "error",
+          showClose: true,
+          message: res.data.message,
+          center: true,
+        });
+      }
+    }
+  });
+};
+
+// 新增数据源类别对话框按钮的点击事件
+const dsAddModifyClass = () => {
+  managerAddModifyDialogVisible.value = true;
+  dsAddModifyTitle.value = "新增数据源类别";
+  dsClassForm.dsClsName = "";
+  dsClassForm.dsClsDesc = "";
+}
+
+// 查询数据源类别
+const dsClassNameSearch = () => {
+  dsClassCurrentPage.value = 1;
+  managerDSClass();
+}
+
+// 新增数据源类别取消按钮
+const dsAddModifyCancelEdit = () => {
+  managerAddModifyDialogVisible.value = false;
+  dsAddModifyClearEditFormData();
+};
+
+// 数据源类别添加成功了，清理数据
+const dsAddModifyClearEditFormData = () => {
+  dsAddModifyRuleForm.dsClsName = "";
+  dsAddModifyRuleForm.dsClsDriver = "";
+}
+
+// 数据源类别分页
+const handleCurdsClassCurrentPageChangerentChange = (value) => {
+  // console.log(value);
+  dsClassCurrentPage.value = value;
+  managerDSClass();
+};
+
+// 数据源参数发生变化
+const paramsChange = () => {
+  if (editRuleForm.dsClsId == "") {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: "请先选择数据库类型",
+      center: true,
+    });
+    editRuleForm.ip = "";
+    editRuleForm.port = "";
+    editRuleForm.dbname = "";
+    return;
+  }
+
+  if (editRuleForm.ip == "" && editRuleForm.port == "" && editRuleForm.dbname == "") {
+    editRuleForm.dsUrl = "";
+    return;
+  }
+
+  dsClass.list.forEach((item) => {
+    if (item.value == editRuleForm.dsClsId) {
+      if (item.label.toLowerCase().includes("mysql")) {
+        editRuleForm.dsUrl = "jdbc:mysql://" + editRuleForm.ip + ":" + editRuleForm.port + "/" + editRuleForm.dbname;
+      }
+    }
+  });
+};
+
+// 删除弹窗
+const selDelVisible = ref(false);
+
+// 表格数据
+const tableData = reactive({
+  list: [],
+});
+const tableCurrentPage = ref(1); // 当前页
+const tablePageSize = ref(10); // 每页显示条数
+const tableTotal = ref(0); // 当前总数
 // 数据源列表
 const getList = async () => {
   loading.value = true;
   let data = {
-    currentPage: currentPage.value,
-    pageCount: pageSize.value,
+    currentPage: tableCurrentPage.value,
+    pageCount: tablePageSize.value,
     dsClsId: searchInput.dsClassValue,
     dsName: searchInput.keyWord, // 数据源名称
     dsStatus: searchInput.connectStatus, // 数据源状态
@@ -464,7 +630,7 @@ const getList = async () => {
   if (res.data.code == 200) {
     loading.value = false;
     tableData.list = res.data.data.list;
-    total.value = res.data.data.totalCount;
+    tableTotal.value = res.data.data.total || 0;
   } else {
     loading.value = false;
     ElMessage({
@@ -476,7 +642,7 @@ const getList = async () => {
   }
 };
 
-// 搜索功能
+// 数据源搜索功能
 const searchBtn = lodash.debounce(async () => {
   getList();
 }, 300);
@@ -561,7 +727,7 @@ const deleteClick = async (row) => {
   }
 }
 
-// 取消按钮
+// 新增数据源取消按钮
 const cancelEdit = () => {
   editVisible.value = false;
   editRef.value.resetFields();
@@ -640,10 +806,10 @@ const tableRowClassName = ({ row, rowIndex }) => {
   return "";
 };
 
-// 分页
+// 数据源分页
 const handleCurrentChange = (value) => {
   // console.log(value);
-  currentPage.value = value;
+  tableCurrentPage.value = value;
   getList();
 };