Add edit&copy link

ui/package.json

@@ -19,6 +19,7 @@
     "moment": "^2.29.1",
     "store": "^2.0.12",
     "vue": "^2.6.11",
+    "vue-clipboard2": "^0.3.3",
     "vue-codemirror": "4.0.6",
     "vue-i18n": "^8.22.1",
     "vue-router": "^3.4.8",

ui/src/api/manage.js

@@ -116,11 +116,9 @@ export function moveDefField (src, dist, mode) {
   })
 }
 
-export function previewDefData (defId) {
-  const params = {defId: defId}
-
+export function previewDefData (params) {
   return request({
-    url: `/defs/previewData`,
+    url: `/data/generate`,
     method: 'get',
     params
   })

ui/src/locales/lang/en-US.js

@@ -173,6 +173,11 @@ const locale = {
   'update.reboot': 'Reboot Now',
   'update.pending': 'Reboot Later',
   'update.failed': 'Upgrade error. Please contact the administrator.',
+
+  'copy.success': 'Copy Success',
+  'copy.title': 'Copy Link',
+  
+  'preview.title': 'Refresh Data',
 }
 
 export default {

ui/src/locales/lang/zh-CN.js

@@ -173,6 +173,11 @@ const locale = {
   'update.reboot': '立即重启',
   'update.pending': '稍后重启',
   'update.failed': '升级错误，请联系管理员。',
+
+  'copy.success': '复制成功',
+  'copy.title': '复制链接',
+  
+  'preview.title': '刷新数据',
 }
 
 export default {

ui/src/main.js

@@ -80,6 +80,9 @@ import notification from "ant-design-vue/lib/notification";
 import 'ant-design-vue/lib/notification/style';
 import message from "ant-design-vue/lib/message";
 import 'ant-design-vue/lib/message/style';
+
+import VueClipboard from 'vue-clipboard2'
+
 Vue.prototype.$message = message;
 Vue.prototype.$notification = notification;
 
@@ -117,6 +120,7 @@ Vue.use(Card)
 Vue.use(Upload)
 Vue.use(Drawer)
 Vue.use(Progress)
+Vue.use(VueClipboard)
 
 new Vue({
   router,

ui/src/views/data/mine/Preview.vue

 <template>
   <a-card>
-    <span slot="title">
+    <div slot="title">
       <a-icon type="profile" />
       <span>{{$t('msg.preview')}}</span>
-    </span>
+      <a-input v-model="previewUrl" id="url" />&nbsp;&nbsp;
+      <a @click="doCopy" :title="$t('action.design')">
+        {{ $t('copy.title') }}
+      </a> &nbsp;
+      <a @click="loadPreviewData" :title="$t('action.design')">
+        {{ $t('preview.title') }}
+      </a> &nbsp;
+    </div>
     <pre v-if="previewData !== null" v-html="previewData" style="margin: 0"></pre>
     <div v-else style="padding: 10px; text-align: center"><a-icon type="loading" /></div>
   </a-card>
@@ -11,6 +18,7 @@
 
 <script>
 import {previewDefData} from "../../../api/manage";
+import {serverUrl} from '../../../utils/request'
 
 export default {
   name: 'Preview',
@@ -23,7 +31,10 @@ export default {
     },
   },
   data: function() {
-    return {previewData: null};
+    return {
+        previewData: null,
+        previewUrl: serverUrl + "/data/generate?format=txt&config=" + this.record.referName.replace(/\\/g, "/"),
+    };
   },
   mounted: function() {
     this.loadPreviewData();
@@ -32,15 +43,50 @@ export default {
     loadPreviewData() {
       console.log(this.record)
       this.previewData = null;
-      previewDefData(this.record.id).then(json => {
-        this.previewData = json.data
+      let params = this.getQuery()
+
+      previewDefData(params).then(data => {
+        this.previewData = data
       })
+    },
+    getQuery() {
+    let url = decodeURI(this.previewUrl); // 获取url中"?"符后的字串(包括问号)
+    url = url.replace(`${serverUrl}/data/generate`, "")
+
+    let query = {};
+    if (url.indexOf("?") != -1) {
+        const str = url.substr(1);
+        const pairs = str.split("&");
+        for(let i = 0; i < pairs.length; i ++) {
+             const pair = pairs[i].split("=");
+            query[pair[0]] = pair[1];
+        }
+    }
+    return query ;  // 返回对象
+  },
+  doCopy: function () {
+    let that = this;
+    this.$copyText(this.previewUrl).then(function () {
+        that.$notification['success']({
+        message: that.$t('copy.success'),
+      });
+    }, function (e) {
+        console.log(e)
+    })
     }
   },
   watch: {
     record: function() {
+      this.previewUrl = serverUrl + "/data/generate?format=txt&config=" + this.record.referName.replace(/\\/g, "/");
       this.loadPreviewData();
     }
   }
 }
 </script>
+
+<style>
+#url{
+    max-width: 30vw;
+    margin-left: 20px;
+}
+</style>
\ No newline at end of file