新增友情链接url正确性检测

src/views/FRIENDLYLINKS/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="链接名称" prop="linkName">
+        <el-input v-model="queryParams.linkName" placeholder="请输入链接名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -62,7 +65,7 @@
         </template>
       </el-table-column>
       <el-table-column label="部门编码" align="center" prop="deptId" />
-      <el-table-column label="链接名称" align="center" prop="deptId" />
+      <el-table-column label="链接名称" align="center" prop="linkName" />
       <el-table-column label="链接" align="center" prop="linkUrl" />
       <el-table-column label="更新人" align="center" prop="updateBy" />
       <el-table-column label="更新时间" align="center" prop="updateTime" >
@@ -115,26 +118,27 @@
 <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.linkUrl"/>-->
 <!--        </template>-->
 <!--      </el-table-column>-->
-<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
-<!--        <template slot-scope="scope">-->
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-edit"-->
-<!--            @click="handleUpdate(scope.row)"-->
-<!--            v-hasPermi="['business:FRIENDLYLINKS:edit']"-->
-<!--          >修改</el-button>-->
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-delete"-->
-<!--            @click="handleDelete(scope.row)"-->
-<!--            v-hasPermi="['business:FRIENDLYLINKS:remove']"-->
-<!--          >删除</el-button>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['business:FRIENDLYLINKS:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['business:FRIENDLYLINKS:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
     </el-table>
 
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -144,8 +148,27 @@
     />
 
     <!-- 添加或修改友情链接对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="部门编码" prop="deptId">
+              <el-input v-model="form.deptId" placeholder="请输入部门编码" type="number" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="链接名称" prop="linkName">
+              <el-input v-model="form.linkName" placeholder="请输入链接名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="链接" prop="linkUrl">
+              <el-input v-model="form.linkUrl" placeholder="请输入链接"  @blur="validateUrl(form.linkUrl)" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -279,10 +302,19 @@ export default {
         this.title = "修改友情链接";
       });
     },
+    /** 检验url的正确性 */
+    validateUrl(url) {
+      if (url && !/^https?:\/\/.*/.test(url)) {
+        this.$modal.msgError('请输入正确的 HTTP 或 HTTPS 链接');
+        return false;
+      }
+      return true;
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
+          if(this.validateUrl(this.form.linkUrl)){
           if (this.form.id != null) {
             updateFRIENDLYLINKS(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
@@ -295,6 +327,7 @@ export default {
               this.open = false;
               this.getList();
             });
+            }
           }
         }
       });