远程挂接

src/api/system/remoteConnection.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+// 远程挂接列表
+export function FetchInitRemoteConnection(params) {
+  return request({
+    url: 'api/remoteConnection/initRemoteConnection',
+    method: 'get',
+    params
+  })
+}
+
+// 新增
+export function add(data) {
+  return request({
+    url: 'api/remoteConnection/editRemoteConnection',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑
+export function edit(data) {
+  return request({
+    url: 'api/remoteConnection/editRemoteConnection',
+    method: 'post',
+    data
+  })
+}
+
+export function del(ids) {
+  return request({
+    url: 'api/remoteConnection/delMetadataInfos',
+    method: 'post',
+    data: ids
+  })
+}
+
+// 测试远程连接地址
+export function FetchIsConnect(params) {
+  return request({
+    url: 'api/remoteConnection/isConnect',
+    method: 'get',
+    params
+  })
+}
+
+export default { add, edit, del, FetchInitRemoteConnection, FetchIsConnect }

src/assets/iconfonts/light/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3966148 */
-  src: url('iconfont.woff2?t=1715829351281') format('woff2'),
-       url('iconfont.woff?t=1715829351281') format('woff'),
-       url('iconfont.ttf?t=1715829351281') format('truetype');
+  src: url('iconfont.woff2?t=1716796171009') format('woff2'),
+       url('iconfont.woff?t=1716796171009') format('woff'),
+       url('iconfont.ttf?t=1716796171009') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-ceshi:before {
+  content: "\e687";
+}
+
 .icon-yuanchengkongzhi:before {
   content: "\e7d4";
 }

src/assets/iconfonts/light/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "18585490",
+      "name": "数据测试名称",
+      "font_class": "ceshi",
+      "unicode": "e687",
+      "unicode_decimal": 59015
+    },
     {
       "icon_id": "30849212",
       "name": "远程控制",

src/views/system/remoteConnection/index.vue

@@ -4,7 +4,7 @@
       <div class="head-search">
         <!-- 搜索 -->
         <el-input v-model="query.search" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-        <el-select v-model="query.type" placeholder="请选择协议" style="width: 140px;" @change="crud.toQuery">
+        <el-select v-model="query.protocol" placeholder="请选择协议" style="width: 140px;" @change="crud.toQuery">
           <el-option
             v-for="item in options"
             :key="item.value"
@@ -46,20 +46,26 @@
         @selection-change="crud.selectionChangeHandler"
       >
         <el-table-column type="selection" align="center" width="55" />
-        <el-table-column prop="name" label="名称" min-width="160" />
-        <el-table-column prop="type" label="协议" min-width="100" />
-        <el-table-column prop="location" label="地址" min-width="100" />
-        <el-table-column prop="port" label="端口" min-width="85" />
-        <el-table-column prop="file_size" label="根目录" min-width="85" />
-        <el-table-column prop="createBy" label="操作人" align="center" width="100" />
-        <el-table-column prop="createTime" label="操作时间" align="center" width="180">
+        <el-table-column prop="name" label="名称" min-width="100" />
+        <el-table-column prop="protocol" label="协议" min-width="100">
           <template slot-scope="scope">
-            <div>{{ scope.row.createTime | parseTime }}</div>
+            <div v-if="scope.row.protocol===1">服务器磁盘</div>
+            <div v-if="scope.row.protocol===2">FTP</div>
+            <div v-if="scope.row.protocol===3">SFTP</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="caddress" label="地址" min-width="100" />
+        <el-table-column prop="cport" label="端口" min-width="85" />
+        <el-table-column prop="rootDirectory" label="根目录" min-width="85" />
+        <el-table-column prop="create_by" label="操作人" align="center" width="100" />
+        <el-table-column prop="create_time" label="操作时间" align="center" width="180">
+          <template slot-scope="scope">
+            <div>{{ scope.row.create_time | parseTime }}</div>
           </template>
         </el-table-column>
       </el-table>
       <!--分页组件-->
-      <pagination />
+      <pagination v-if="crud.data.length !== 0" />
     </div>
 
     <!-- form -->
@@ -72,38 +78,39 @@
             <el-input v-model="form.name" placeholder="请输入" style="width: 580px;" />
           </el-form-item>
           <el-form-item label="协议" prop="protocol">
-            <el-radio-group v-model="form.protocol" style="width: 580px;">
-              <el-radio :label="0">服务器磁盘</el-radio>
-              <el-radio :label="1">FTP</el-radio>
-              <el-radio :label="2">SFTP</el-radio>
+            <el-radio-group v-model="form.protocol" style="width: 580px;" @input="changeProtocol">
+              <el-radio :label="1">服务器磁盘</el-radio>
+              <el-radio :label="2">FTP</el-radio>
+              <el-radio :label="3">SFTP</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="地址" prop="location">
-            <el-input v-model="form.location" placeholder="请输入" style="width: 580px;" />
+          <el-form-item v-if="form.protocol!==1" label="地址" prop="caddress">
+            <el-input v-model="form.caddress" placeholder="请输入" style="width: 580px;" />
           </el-form-item>
-          <el-form-item label="端口" prop="port">
-            <el-input v-model="form.port" placeholder="请输入" style="width: 580px;" />
+          <el-form-item v-if="form.protocol!==1" label="端口" prop="cport">
+            <el-input v-model="form.cport" placeholder="请输入" style="width: 580px;" />
           </el-form-item>
-          <el-form-item label="账号" prop="account">
+          <el-form-item v-if="form.protocol!==1" label="账号" prop="account">
             <el-input v-model="form.account" placeholder="请输入" style="width: 580px;" />
           </el-form-item>
-          <el-form-item label="密码" prop="password">
-            <el-input v-model="form.password" placeholder="请输入" style="width: 580px;" />
+          <el-form-item v-if="form.protocol!==1" label="密码" prop="cpassword">
+            <el-input v-model="form.cpassword" placeholder="请输入" style="width: 580px;" />
           </el-form-item>
-          <el-form-item label="根目录" prop="root">
-            <el-input v-model="form.root" placeholder="请输入" style="width: 580px;" />
+          <el-form-item label="根目录" prop="rootDirectory">
+            <el-input v-model="form.rootDirectory" placeholder="请输入" style="width: 580px;" />
           </el-form-item>
-          <el-form-item label="成功后操作" prop="operate">
-            <el-radio-group v-model="form.operate">
-              <el-radio :label="0">保留文件</el-radio>
-              <el-radio :label="1">移除文件</el-radio>
+          <el-form-item label="成功后操作" prop="operation">
+            <el-radio-group v-model="form.operation">
+              <el-radio :label="1">保留文件</el-radio>
+              <el-radio :label="2">移除文件</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="备注" prop="remark">
-            <el-input v-model="form.remark" type="textarea" placeholder="请输入" :rows="4" style="width: 580px;" />
+          <el-form-item label="备注" prop="remarks">
+            <el-input v-model="form.remarks" type="textarea" placeholder="请输入" :rows="4" style="width: 580px;" />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
+          <el-button :loading="testIsConnectLoading" class="device-child-btn" @click="handleIsConnect"><i class="iconfont icon-ceshi" />测试</el-button>
           <el-button type="text" @click="crud.cancelCU">取消</el-button>
           <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
         </div>
@@ -113,17 +120,17 @@
 </template>
 
 <script>
-import crudNotify from '@/api/system/notify'
+import crudConnection from '@/api/system/remoteConnection'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
 import rrOperation from '@crud/RR.operation'
 import DateRangePicker from '@/components/DateRangePicker'
 import pagination from '@crud/Pagination'
 import { mapGetters } from 'vuex'
-// import { exportFile } from '@/utils/index'
-// import qs from 'qs'
+import { exportFile } from '@/utils/index'
+import qs from 'qs'
 
-const defaultForm = { id: null, name: '', protocol: 0, location: null, port: null, account: null, password: null, root: null, operate: null, remark: null }
+const defaultForm = { id: null, name: '', protocol: 1, caddress: null, cport: null, account: null, cpassword: null, rootDirectory: null, operation: 1, remarks: null }
 
 export default {
   name: 'RemoteConnection',
@@ -131,9 +138,9 @@ export default {
   cruds() {
     return CRUD({
       title: '远程设置',
-      url: 'api/notice/initNotice',
-      crudMethod: { ...crudNotify },
-      sort: [],
+      url: 'api/remoteConnection/initRemoteConnection',
+      crudMethod: { ...crudConnection },
+      sort: ['create_time,desc'],
       optShow: {
         add: true,
         edit: true,
@@ -167,6 +174,7 @@ export default {
           label: 'SFTP'
         }
       ],
+      testIsConnectLoading: false,
       rules: {
         name: [
           { required: true, message: '名称不可为空', trigger: 'blur' }
@@ -174,22 +182,22 @@ export default {
         protocol: [
           { required: true, message: '请选择', trigger: 'change' }
         ],
-        location: [
+        caddress: [
           { required: true, message: '地址不可为空', trigger: 'blur' }
         ],
-        port: [
+        cport: [
           { required: true, message: '端口不可为空', trigger: 'blur' }
         ],
         account: [
           { required: true, message: '账号不可为空', trigger: 'blur' }
         ],
-        password: [
+        cpassword: [
           { required: true, message: '密码不可为空', trigger: 'blur' }
         ],
-        root: [
+        rootDirectory: [
           { required: true, message: '根目录不可为空', trigger: 'blur' }
         ],
-        operate: [
+        operation: [
           { required: true, message: '请选择', trigger: 'change' }
         ]
       }
@@ -219,35 +227,71 @@ export default {
     },
     resetQuery() {
       this.crud.query.search = ''
-      this.crud.query.type = null
+      this.crud.query.protocol = null
       this.blurryTime = null
       this.crud.query.startTime = null
       this.crud.query.endTime = null
       this.crud.toQuery()
     },
-    toDelete(data) {
-      this.$confirm('此操作将删除当前所选设置' + '<span>你是否还要继续？</span>', '提示', {
+    changeProtocol(val) {
+      if (val === 2) {
+        this.form.cport = '21'
+      } else if (val === 3) {
+        this.form.cport = '22'
+      } else {
+        this.form.cport = null
+      }
+    },
+    // FetchIsConnect
+    handleIsConnect() {
+      this.testIsConnectLoading = true
+      const params = {
+        'account': this.form.account,
+        'cAddress': this.form.caddress,
+        'cPassword': this.form.cpassword,
+        'cPort': this.form.cport,
+        'protocol': this.form.protocol,
+        'rootDirectory': this.form.rootDirectory
+      }
+      crudConnection.FetchIsConnect(params).then((res) => {
+        if (res.code !== 500) {
+          this.$message({ message: '测试连接成功', type: 'success', offset: 8 })
+        } else {
+          this.$message({ message: res.message, type: 'error', offset: 8 })
+        }
+        setTimeout(() => {
+          this.testIsConnectLoading = false
+        }, 1000)
+      }).catch(err => {
+        this.testIsConnectLoading = false
+        console.log(err)
+      })
+    },
+    toDelete(datas) {
+      this.$confirm('此操作将删除当前所选数据' + '<span>你是否还要继续？</span>', '提示', {
         confirmButtonText: '继续',
         cancelButtonText: '取消',
         type: 'warning',
         dangerouslyUseHTMLString: true
       }).then(() => {
-        // const ids = data.map(item => item.id)
-        // const params = {
-        //   'ids': ids,
-        //   'operator': this.user.username
-        // }
-        // crudEditing.del(params).then((res) => {
-        //   console.log(res)
-        //   if (res.code !== 500) {
-        //     this.$message({ message: '删除成功', type: 'success', offset: 8 })
-        //   } else {
-        //     this.$message({ message: res.message, type: 'error', offset: 8 })
-        //   }
-        //   this.initData()
-        // }).catch(err => {
-        //   console.log(err)
-        // })
+        this.crud.delAllLoading = true
+        const ids = []
+        datas.forEach(val => {
+          ids.push(val.id)
+        })
+        crudConnection.del(ids).then((res) => {
+          console.log(res)
+          if (res.code !== 500) {
+            this.$message({ message: '删除成功', type: 'success', offset: 8 })
+          } else {
+            this.$message({ message: res.message, type: 'error', offset: 8 })
+          }
+          this.crud.delAllLoading = false
+          this.crud.refresh()
+        }).catch(err => {
+          console.log(err)
+          this.crud.delAllLoading = false
+        })
       }).catch(() => {
       })
     },
@@ -259,10 +303,11 @@ export default {
         type: 'warning',
         dangerouslyUseHTMLString: true
       }).then(() => {
-        // const params = {
-        //   'isType': this.isType
-        // }
-        // exportFile(this.baseApi + '/api/categoryField/download?' + qs.stringify(params, { indices: false }))
+        const ids = data.map(item => { return item.id })
+        const params = {
+          'ids': ids
+        }
+        exportFile(this.baseApi + '/api/remoteConnection/download?' + qs.stringify(params, { indices: false }))
         this.crud.downloadLoading = false
       }).catch(() => {
         this.crud.downloadLoading = false