数据源接口对接完成

src/views/source/source.vue

@@ -8,26 +8,28 @@
       <div class="middle">
         <div class="filter">
           <div class="condition">
-            <el-select v-model="searchInput.dsClassValue" class="sel" placeholder="数据库类型">
+            <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="连接状态">
+            <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>
+          <el-button color="rgba(0, 97, 255, 1)" type="primary" class="search" @click="searchBtn">
+            <el-icon>
               <Search />
             </el-icon>
-            <span>查询</span></el-button>
+            <span>查询</span>
+          </el-button>
         </div>
         <!-- 按钮列表 -->
         <div class="gongneng">
           <el-button type="primary" color="rgba(0, 97, 255, 1)" plain @click="addClick">新增</el-button>
-          <el-button type="primary" color="rgba(0, 97, 255, 1)" plain @click="editClick">编辑</el-button>
-          <el-button type="primary" color="rgba(0, 97, 255, 1)" @click="delClick" plain>删除</el-button>
+          <!-- <el-button type="primary" color="rgba(0, 97, 255, 1)" plain @click="editClick">编辑</el-button>
+          <el-button type="primary" color="rgba(0, 97, 255, 1)" @click="delClick" plain>删除</el-button> -->
         </div>
       </div>
       <div class="footer" v-loading="loading">
@@ -38,22 +40,27 @@
             border: 0,
           }">
           <!-- <el-table-column align="center" type="selection" width="80" /> -->
-          <el-table-column align="center" prop="dsClsId" width="200" label="类型" />
+          <el-table-column align="center" prop="dsClsName" label="类型" />
           <el-table-column align="center" prop="dsName" label="名称" />
-          <el-table-column align="center" prop="dsUrl" width="300" label="连接地址" />
-          <el-table-column align="center" prop="dsStatus" label="连接状态">
+          <el-table-column align="center" prop="dsUrl" width="390" label="连接地址" />
+          <el-table-column align="center" prop="dsStatus" width="60" label="连接状态">
             <template #default="scope">
               <span v-if="scope.row.dsStatus == 1" class="normal">正常</span>
               <span v-else class="abnormal">异常</span>
             </template>
           </el-table-column>
-          <el-table-column align="center" prop="dsDescrition" show-overflow-tooltip label="描述" />
-          <el-table-column align="center" label="操作" width="200">
+          <el-table-column align="center" prop="dsDescrition" label="描述">
+          </el-table-column>
+          <el-table-column align="center" prop="dsCreateTime" label="创建时间" width="90">
+          </el-table-column>
+          <el-table-column align="center" prop="dsUpdateTime" label="修改时间" width="90">
+          </el-table-column>
+          <el-table-column align="center" label="操作" width="120">
             <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="del(scope.row)" @cancel="cancelEvent">
+                  icon-color="#f89626" title="是否删除此数据源?" @confirm="deleteClick(scope.row)" @cancel="cancelEvent">
                   <template #reference>
                     <div class="del">删除</div>
                   </template>
@@ -71,49 +78,53 @@
           layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
       </div>
 
-      <!-- 编辑对话框 -->
+      <!-- 新增/编辑对话框 -->
       <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">
         <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">
-              <el-option v-for="item in dsClassAdd.list" :key="item.value" :label="item.label" :value="item.value" />
+              <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="数据源名称.如: xxx数据库" clearable style="width: 740px" />
+            <el-input v-model="editRuleForm.dsName" placeholder="数据源名称" clearable style="width: 740px" />
           </el-form-item>
-          <div v-if="titleDialog == '新增'">
-            <span class="typeTitle">使用辅助选项请先选择类型</span>
-            <el-form-item label="辅助选项 :">
-              <el-input v-model="editRuleForm.ip" placeholder="数据库服务IP地址" clearable @keyup="paramsChange" @clear="paramsChange"
-                style="width: 300px; margin-right: 10px" />
-              <el-input v-model="editRuleForm.port" placeholder="数据库服务端口号" clearable @keyup="paramsChange" @clear="paramsChange"
-                style="width: 210px; margin-right: 10px" />
-              <el-input v-model="editRuleForm.dbname" placeholder="数据库名称" clearable @keyup="paramsChange" @clear="paramsChange"
-               style="width: 210px" />
+          <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" readonly placeholder="数据库连接地址" clearable style="width: 740px" />
+            <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 />
+              <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 />
+              <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"
-              style="width: 740px" />
+              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 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>
@@ -161,40 +172,39 @@ import { dayjs } from "element-plus";
 import lodash from "lodash";
 import axios from "axios";
 import { useStore } from "vuex";
+
+// 数据================================
 const store = useStore();
 const api = ref("");
 const router = useRouter();
-// 表格数据
 const loading = ref(false);
+
+// 表格数据
 const tableData = reactive({
-  list: [
-  ],
+  list: [],
 });
 // 页面中数据源类别下拉列表参数
 const dsClass = reactive({
-  list: [
-  ],
-});
-// 新增对话框中的数据源类别下拉列表参数
-const dsClassAdd = reactive({
-  list: [
-  ],
+  list: [],
 });
 
 const searchInput = reactive({
   dsClassValue: "",
-  connectStatus: "",// 是否数据源连接状态
-  keyWord: ""
+  connectStatus: "", // 是否数据源连接状态
+  keyWord: "",
 }); // 搜索按钮数据
 
 const currentPage = ref(1); // 当前页
 const pageSize = ref(10);
 const total = ref(5); // 当前总数
-const selectData = reactive({ list: [] }); // 表格勾选的数据
+// const selectData = reactive({
+//   list: []
+// }); // 表格勾选的数据
 
 // 编辑功能
 const titleDialog = ref("");
 const editVisible = ref(false);
+const isDisabled = ref(true);
 const editRef = ref();
 const editRuleForm = reactive({
   dsId: "", // 数据源id
@@ -209,9 +219,17 @@ const editRuleForm = reactive({
   dbname: "", // 数据库名称
 });
 
+const inputRef = ref(null);
+
 // 表单验证
 const editRules = reactive({
-  dsClsId: [{ required: true, message: "类型不能为空", trigger: "blur" }],
+  dsClsId: [
+    {
+      required: true,
+      message: "类型不能为空",
+      trigger: "blur"
+    }
+  ],
   dsName: [
     {
       required: true,
@@ -247,8 +265,52 @@ const editRules = reactive({
       trigger: "blur",
     },
   ],
+  ip: [
+    {
+      required: true,
+      message: "ip不能为空",
+      trigger: "blur",
+    },
+    {
+      // pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
+      pattern: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
+      message: "请输入正确的IP地址",
+      trigger: "blur",
+    },
+  ],
+  port: [
+    {
+      required: true,
+      message: "端口不能为空",
+      trigger: "blur",
+    },
+    {
+      pattern: /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-3][0-9]|6553[0-5])$/,
+      message: "端口号只能是：0到65535",
+      trigger: "blur",
+    },
+    {
+      pattern: /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-3][0-9]|6553[0-5])$/,
+      message: "端口号只能是：0到65535",
+      trigger: "change",
+    }
+  ],
+  dbname: [
+    {
+      required: true,
+      message: "数据库名称不能为空",
+      trigger: "blur",
+    },
+    {
+      pattern: /^[a-zA-Z0-9_]+$/,
+      message: "数据库名称只能包含字母、数字和下划线",
+      trigger: "blur",
+    },
+  ],
 });
 
+// 方法=================================
+// 数据源参数发生变化
 const paramsChange = () => {
   if (editRuleForm.dsClsId == "") {
     ElMessage({
@@ -265,9 +327,16 @@ const paramsChange = () => {
 
   if (editRuleForm.ip == "" && editRuleForm.port == "" && editRuleForm.dbname == "") {
     editRuleForm.dsUrl = "";
-  } else {
-    editRuleForm.dsUrl = "jdbc:mysql://" + editRuleForm.ip + ":" + editRuleForm.port + "/" + editRuleForm.dbname;
+    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;
+      }
+    }
+  });
 };
 
 // 删除弹窗
@@ -298,10 +367,6 @@ const getDsClass = async () => {
         label: item.dsClsName,
         value: item.dsClsId,
       });
-      dsClassAdd.list.push({
-        label: item.dsClsName,
-        value: item.dsClsId,
-      });
     });
   } else {
     loading.value = false;
@@ -353,126 +418,149 @@ const getList = async () => {
 // 搜索功能
 const searchBtn = lodash.debounce(async () => {
   getList();
-}, 300);
+}, 100);
 
 // 添加按钮 （-------------------------------------------）
 const addClick = async () => {
   titleDialog.value = "新增";
   editVisible.value = true;
-  //   let data = {
-  //     linkId: row.id,
-  //   };
-  //   let res = await axios({
-  //     method: "post",
-  //     url: api.value + "/mhotel/uploadgetByLinkId.action",
-  //     headers: {},
-  //     params: data,
-  //   });
-  //   console.log(res, "编辑中查找图片");
-  //   if (res.data.code == 200) {
-  //     // res.data.data.fileInfoList.forEach((item) => {
-  //     //   item.uid = item.id;
-  //     // });
-  //     // fileList.list = res.data.data.fileInfoList;
-  //     // ruleForm.fileListJson = fileList.list;
-  //     res.data.data.forEach((item) => {
-  //       item.uid = item.id;
-  //     });
-  //     fileList.list = res.data.data;
-  //     ruleForm.fileListJson = fileList.list;
-  //     // ElMessage({
-  //     //   type: "success",
-  //     //   showClose: true,
-  //     //   message: res.data.message,
-  //     //   center: true,
-  //     // });
-  //   } else {
-  //     ElMessage({
-  //       type: "error",
-  //       showClose: true,
-  //       message: res.data.message,
-  //       center: true,
-  //     });
-  //   }
+  isDisabled.value = true;
 };
 
 // 编辑按钮  （-------------------------------------------）
-const editClick = async () => {
-  if (selectData.list.length == 1) {
-    titleDialog.value = "编辑";
-    editVisible.value = true;
+const editClick = async (row) => {
+  // console.log(row);
+  titleDialog.value = "编辑";
+  editVisible.value = true;
+  isDisabled.value = false;
+  // 表单赋值
+  editRuleForm.dsId = row.dsId;
+  editRuleForm.dsClsId = row.dsClsId;
+  editRuleForm.dsName = row.dsName;
+  editRuleForm.dsUrl = row.dsUrl;
+  editRuleForm.dsUser = row.dsUser;
+  editRuleForm.dsPassword = row.dsPassword;
+  editRuleForm.dsDescrition = row.dsDescrition;
+  editRuleForm.ip = row.ip;
+  editRuleForm.port = row.port;
+  editRuleForm.dbname = row.dbname;
+};
+
+// 删除按钮
+const deleteClick = async (row) => {
+  // console.log(row);
+  let data = {
+    "id": row.dsId
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartDataClass/deleteSmartDataSourceById",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  // console.log(res, "删除数据源");
+  if (res.data.code == 200) {
+    loading.value = false;
+    editVisible.value = false;
+    getList();
+    ElMessage({
+      type: "success",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+    cancelEdit();
   } else {
+    loading.value = false;
     ElMessage({
-      type: "warning",
+      type: "error",
       showClose: true,
-      message: "请先选定一条记录!",
+      message: res.data.message,
       center: true,
     });
+    cancelEdit();
   }
+}
 
-  //   let data = {
-  //     linkId: row.id,
-  //   };
-  //   let res = await axios({
-  //     method: "post",
-  //     url: api.value + "/mhotel/uploadgetByLinkId.action",
-  //     headers: {},
-  //     params: data,
-  //   });
-  //   console.log(res, "编辑中查找图片");
-  //   if (res.data.code == 200) {
-  //     // res.data.data.fileInfoList.forEach((item) => {
-  //     //   item.uid = item.id;
-  //     // });
-  //     // fileList.list = res.data.data.fileInfoList;
-  //     // ruleForm.fileListJson = fileList.list;
-  //     res.data.data.forEach((item) => {
-  //       item.uid = item.id;
-  //     });
-  //     fileList.list = res.data.data;
-  //     ruleForm.fileListJson = fileList.list;
-  //     // ElMessage({
-  //     //   type: "success",
-  //     //   showClose: true,
-  //     //   message: res.data.message,
-  //     //   center: true,
-  //     // });
-  //   } else {
-  //     ElMessage({
-  //       type: "error",
-  //       showClose: true,
-  //       message: res.data.message,
-  //       center: true,
-  //     });
-  //   }
-};
-
+// 取消按钮
 const cancelEdit = () => {
   editVisible.value = false;
   editRef.value.resetFields();
+  editRuleForm.ip = "";
+  editRuleForm.port = "";
+  editRuleForm.dbname = "";
 };
 
-// 确定编辑
+// 添加（新增）、编辑窗口的确定按钮事件
 const confirmEdit = (formEl) => {
   if (!formEl) return;
   formEl.validate(async (valid, fields) => {
+    loading.value = true;
     if (valid) {
+      let data = {
+        "dsClsId": editRuleForm.dsClsId,
+        "dsName": editRuleForm.dsName,
+        "dsUrl": editRuleForm.dsUrl,
+        "dsUser": editRuleForm.dsUser,
+        "dsPassword": editRuleForm.dsPassword,
+        "dsDescrition": editRuleForm.dsDescrition
+      };
+      let url = "insertSmartDataSource";
+      if (titleDialog.value == "编辑") {
+        url = "updateSmartDataSourceById";
+        data.dsId = editRuleForm.dsId;
+      }
+      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) {
+        loading.value = false;
+        editVisible.value = false;
+        getList();
+        ElMessage({
+          type: "success",
+          showClose: true,
+          message: res.data.data,
+          center: true,
+        });
+        cancelEdit();
+      } else {
+        loading.value = false;
+        ElMessage({
+          type: "error",
+          showClose: true,
+          message: res.data.message,
+          center: true,
+        });
+        cancelEdit();
+      }
     }
   });
 };
 
 //删除按钮
 const delClick = async () => {
-  if (selectData.list.length >= 1) {
-    selDelVisible.value = true;
-  } else {
-    ElMessage({
-      type: "warning",
-      showClose: true,
-      message: "请先选定所需要删除的数据库!",
-      center: true,
-    });
-  }
+  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,
   // };
@@ -506,15 +594,16 @@ const delClick = async () => {
   //   }
   // console.log(res);
 };
-const cancelSelDel = () => {
-  selDelVisible.value = false;
-};
 
-// 多选框功能
-const handleSelectionChange = (val) => {
-  console.log(val);
-  selectData.list = val;
-};
+// const cancelSelDel = () => {
+//   selDelVisible.value = false;
+// };
+
+// // 多选框功能
+// const handleSelectionChange = (val) => {
+//   console.log(val);
+//   selectData.list = val;
+// };
 
 // 表格斑马纹颜色修改
 const tableRowClassName = ({ row, rowIndex }) => {
@@ -525,6 +614,7 @@ const tableRowClassName = ({ row, rowIndex }) => {
   }
   return "";
 };
+
 // 分页
 const handleCurrentChange = (value) => {
   // console.log(value);
@@ -532,11 +622,14 @@ const handleCurrentChange = (value) => {
   getList();
 };
 
+// 挂载前钩子
 onBeforeMount(async () => {
   api.value = store.state.user.api;
   getList();
   getDsClass();
 });
+
+// 卸载钩子
 onUnmounted(() => {
   // document.removeEventListener("keyup", Enters);
 });