数据源新增、修改时加载状态

src/views/source/source.vue

@@ -80,54 +80,56 @@
 
       <!-- 新增/编辑对话框 -->
       <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 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" />
+        :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-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 label="名称 :" prop="dsName">
+              <el-input v-model="editRuleForm.dsName" placeholder="数据源名称" clearable style="width: 740px" />
             </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" />
+            <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>
-          </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" />
+            <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" />
             </el-form-item>
-            <el-form-item label="数据库密码 :" prop="dsPassword">
-              <el-input v-model="editRuleForm.dsPassword" placeholder="请输入数据库密码" clearable maxlength="32" />
+            <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>
-          </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-form>
+        </div>
       </el-dialog>
 
       <!-- 勾选删除 -->
@@ -178,6 +180,7 @@ const store = useStore();
 const api = ref("");
 const router = useRouter();
 const loading = ref(false);
+const dialog_loading = ref(false);
 
 // 表格数据
 const tableData = reactive({
@@ -344,7 +347,6 @@ const selDelVisible = ref(false);
 
 // 数据源类别列表
 const getDsClass = async () => {
-  loading.value = true;
   let data = {
     currentPage: 1,
     pageCount: 100,
@@ -361,7 +363,6 @@ const getDsClass = async () => {
   });
   // console.log(res, "数据源类别");
   if (res.data.code == 200) {
-    loading.value = false;
     res.data.data.list.forEach((item) => {
       dsClass.list.push({
         label: item.dsClsName,
@@ -369,7 +370,6 @@ const getDsClass = async () => {
       });
     });
   } else {
-    loading.value = false;
     ElMessage({
       type: "error",
       showClose: true,
@@ -425,6 +425,20 @@ const addClick = async () => {
   titleDialog.value = "新增";
   editVisible.value = true;
   isDisabled.value = true;
+  clearEditFormData();
+};
+
+const clearEditFormData = () => {
+  editRuleForm.dsId = "";
+  editRuleForm.dsClsId = "";
+  editRuleForm.dsName = "";
+  editRuleForm.dsUrl = "";
+  editRuleForm.dsUser = "";
+  editRuleForm.dsPassword = "";
+  editRuleForm.dsDescrition = "";
+  editRuleForm.ip = "";
+  editRuleForm.port = "";
+  editRuleForm.dbname = "";
 };
 
 // 编辑按钮  （-------------------------------------------）
@@ -449,6 +463,7 @@ const editClick = async (row) => {
 // 删除按钮
 const deleteClick = async (row) => {
   // console.log(row);
+  loading.value = true;
   let data = {
     "id": row.dsId
   };
@@ -489,16 +504,14 @@ const deleteClick = async (row) => {
 const cancelEdit = () => {
   editVisible.value = false;
   editRef.value.resetFields();
-  editRuleForm.ip = "";
-  editRuleForm.port = "";
-  editRuleForm.dbname = "";
+  clearEditFormData();
 };
 
 // 添加（新增）、编辑窗口的确定按钮事件
 const confirmEdit = (formEl) => {
   if (!formEl) return;
   formEl.validate(async (valid, fields) => {
-    loading.value = true;
+    dialog_loading.value = true;
     if (valid) {
       let data = {
         "dsClsId": editRuleForm.dsClsId,
@@ -524,8 +537,7 @@ const confirmEdit = (formEl) => {
       });
       // console.log(res, "添加/修改数据源");
       if (res.data.code == 200) {
-        loading.value = false;
-        editVisible.value = false;
+        dialog_loading.value = false;
         getList();
         ElMessage({
           type: "success",
@@ -535,14 +547,13 @@ const confirmEdit = (formEl) => {
         });
         cancelEdit();
       } else {
-        loading.value = false;
+        dialog_loading.value = false;
         ElMessage({
           type: "error",
           showClose: true,
           message: res.data.message,
           center: true,
         });
-        cancelEdit();
       }
     }
   });