External Link Add

src/api/link.js

@@ -7,3 +7,11 @@ export function fetchLinkList(data) {
     data: data
   })
 }
+
+export function pushLinkAdd(data) {
+  return request({
+    url: 'external/add',
+    method: 'post',
+    data: data
+  })
+}

src/styles/index.scss

@@ -238,6 +238,10 @@ aside {
   .el-dialog__body {
     padding: 0;
   }
+
+  &.link-add-dialog {
+    width: 500px !important;
+  }
 }
 
 .main-edit-dialog {

src/views/home/Link.vue

@@ -8,16 +8,17 @@
       <div class="link-content">
         <div class="link-box">
           <div class="link-item-box">
-            <a v-for="item in tableData" :key="item.id" class="link-item" :href="item.url">
+            <a v-for="item in tableData" :key="item.id" class="link-item" :href="item.url" target="_blank">
               {{ item.designation }}
             </a>
           </div>
         </div>
         <div class="link-btn">
-          <el-button type="text">添加</el-button>
+          <el-button type="text" @click="showAdd">添加</el-button>
         </div>
       </div>
     </el-card>
+    <link-add ref="linkAdd" @refreshData="getTablelist" />
   </div>
 </template>
 
@@ -25,8 +26,13 @@
 import { fetchLinkList } from '@/api/link'
 import { hasValidRecords } from '@/utils/convert'
 
+import LinkAdd from './components/LinkAdd'
+
 export default {
   name: 'HomeLink',
+  components: {
+    LinkAdd
+  },
   data() {
     return {
       // table
@@ -66,8 +72,10 @@ export default {
           message: '获取消息列表出错: ' + error.message
         })
       })
+    },
+    showAdd() {
+      this.$refs['linkAdd'].open()
     }
-
   }
 }
 </script>
@@ -77,6 +85,8 @@ export default {
   height: calc(100% - 40px) !important;
   margin: 20px 0;
   background-color: rgba(0,0,0,0.02);
+  display: flex;
+  align-items: center;
 }
 
 .link-box {

src/views/home/components/LinkAdd.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <el-dialog
+      v-loading="loading"
+      :visible.sync="visible"
+      :close-on-press-escape="true"
+      :close-on-click-modal="false"
+      :show-close="false"
+      append-to-body
+      custom-class="home-edit-dialog link-add-dialog"
+      title="添加外部应用"
+    >
+      <div class="form-box">
+        <el-form :ref="formName" :model="formData" :rules="rules" label-width="100px">
+          <el-form-item prop="designation" label="应用名称">
+            <el-input v-model="formData.designation" clearable placeholder="请输入" />
+          </el-form-item>
+          <el-form-item prop="url" label="应用URL">
+            <el-input v-model="formData.url" clearable placeholder="请输入" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="saveItem">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+
+import { pushLinkAdd } from '@/api/link'
+
+export default {
+  name: 'LinkAdd',
+  data() {
+    return {
+      // dialog
+      visible: false,
+      // form
+      formName: 'editForm',
+      formData: {
+        designation: '',
+        url: ''
+      },
+      rules: {
+        designation: [
+          { required: true, message: '请输入应用名称', trigger: 'blur' }
+        ],
+        url: [
+          { type: 'url', required: true, message: '请输入应用URL', trigger: 'blur' }
+        ]
+      },
+      // others
+      loading: false
+    }
+  },
+  methods: {
+    saveItem() {
+      this.$refs[this.formName].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          pushLinkAdd(this.formData).then(res => {
+            this.loading = false
+            this.visible = false
+            this.$emit('refreshData')
+            this.$message({
+              type: 'success',
+              message: '保存成功!'
+            })
+          }).catch(error => {
+            console.log(error)
+            this.loading = false
+            this.$message({
+              type: 'error',
+              duration: 0,
+              showClose: true,
+              message: '保存出错：' + error.message
+            })
+          })
+        }
+      })
+    },
+    /**
+     * 加载dialog
+     */
+    open() {
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.home-edit-dialog {
+  width: 500px !important;
+}
+
+.form-box {
+  margin: 20px;
+}
+</style>