wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨差异日志新增对比功能

Browse Source
This commit is contained in:
不做码农 2023-12-07 21:35:22 +08:00
parent 1fe328fbee
commit c47cb4a508
2 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -37,6 +37,7 @@
"qrcodejs2-fixes": "^0.0.2",
"qs": "^6.11.0",
"sortablejs": "^1.15.0",
"v-code-diff": "^1.8.0",
"vue": "^3.3.4",
"vue-clipboard3": "^2.0.0",
"vue-cropper": "1.0.2",

21
src/views/monitor/SqlDiffLog.vue
View File

@ -114,21 +114,25 @@
<el-col :lg="24">
<el-form-item label="执行sql语句" prop="sql">
<el-input type="textarea" v-model="form.sql" placeholder="请输入执行sql语句" />
<code class="hljs" v-html="highlightedCode(form.sql)"></code>
<!-- <el-input type="textarea" v-model="form.sql" placeholder="请输入执行sql语句" /> -->
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item label="变更前数据" prop="beforeData">
<el-input type="textarea" v-model="form.beforeData" placeholder="请输入变更前数据" />
<code class="hljs" v-html="highlightedCode(form.beforeData)"></code>
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item label="变更后数据" prop="afterData">
<el-input type="textarea" v-model="form.afterData" placeholder="请输入变更后数据" />
<el-form-item label="变更后数据">
<code class="hljs" v-html="highlightedCode(form.afterData)"></code>
</el-form-item>
</el-col>
<el-col :lg="24">
<code-diff :old-string="form.beforeData" :new-string="form.afterData" language="json" output-format="side-by-side" />
</el-col>
<el-col :lg="12">
<el-form-item label="操作用户名" prop="userName">
@ -158,6 +162,10 @@
<script setup name="sqldifflog">
import { listSqlDiffLog, delSqlDiffLog } from '@/api/monitor/sqldifflog.js'
import { CodeDiff } from 'v-code-diff'
import hljs from 'highlight.js'
import 'highlight.js/styles/default.css' // 这里有多个样式，自己可以根据需要切换
const { proxy } = getCurrentInstance()
const ids = ref([])
const loading = ref(false)
@ -319,6 +327,9 @@ function handleExport() {
await proxy.downFile('/monitor/SqlDiffLog/export', { ...queryParams })
})
}
function highlightedCode(code) {
const result = hljs.highlightAuto(code)
return result.value || '&nbsp;'
}
handleQuery()
</script>