108 lines
2.8 KiB
Vue
108 lines
2.8 KiB
Vue
<template>
|
|
<div class="container">
|
|
<el-form :rules="rules" ref="previewConfigForm" :model="configFormData" label-width="120px" size="small"
|
|
style="width: 860px" autocomplete="off">
|
|
<el-form-item label="iframe 预览" prop="iframe">
|
|
<span class="form-instruction"><a href="https://alist.nn.ci/zh/config/preview.html#iframe-%E9%A2%84%E8%A7%88" target="_blank"><svg-icon icon-class="wailian"/>参考Alist的iframe预览 </a> </span>
|
|
<el-input
|
|
type="textarea"
|
|
:autosize="{ minRows: 2}"
|
|
:placeholder="defaultIframeConfig"
|
|
v-model="configFormData.iframe">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" v-loading="saveConfigLoading" @click="submitForm">保存配置</el-button>
|
|
<el-button type="warning" @click="resetConfig">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import settingApi from '@/api/setting-api'
|
|
|
|
export default {
|
|
name: 'PreviewConfig',
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
},
|
|
computed: {},
|
|
data() {
|
|
const validateIframeFormat = async (rule, value, callback) => {
|
|
if (!value) {
|
|
callback()
|
|
} else {
|
|
try {
|
|
this.configFormData.iframe = JSON.stringify(JSON.parse(value), null, 4)
|
|
} catch (e) {
|
|
callback(new Error('json格式错误'))
|
|
}
|
|
callback()
|
|
}
|
|
}
|
|
return {
|
|
saveConfigLoading: false,
|
|
defaultIframeConfig: '{\n' +
|
|
' "pdf": {\n' +
|
|
' "PDF.js": "/pdf.js/web/viewer.html?file=$e_url"\n' +
|
|
' },\n' +
|
|
' "epub": {\n' +
|
|
' "epub.js": "/resource/epubjs/viewer.html?url=$e_url"\n' +
|
|
' }\n' +
|
|
'}',
|
|
configFormData: {
|
|
iframe: '',
|
|
},
|
|
rules: {
|
|
iframe: [
|
|
{ required: false, validator: validateIframeFormat, trigger: 'submit'}
|
|
],
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getPreviewConfig()
|
|
},
|
|
methods: {
|
|
getPreviewConfig() {
|
|
settingApi.getPreviewConfig().then(res => {
|
|
this.configFormData = res.data
|
|
})
|
|
},
|
|
submitForm() {
|
|
this.$refs.previewConfigForm.validate((valid) => {
|
|
if (valid) {
|
|
this.saveConfig()
|
|
} else {
|
|
return false
|
|
}
|
|
});
|
|
},
|
|
resetConfig() {
|
|
this.configFormData.iframe = this.defaultIframeConfig
|
|
},
|
|
saveConfig() {
|
|
this.saveConfigLoading = true
|
|
settingApi.updatePreviewConfig(this.configFormData).then(() => {
|
|
this.saveConfigLoading = false
|
|
this.$message.success('保存成功')
|
|
this.$store.dispatch('user/getInfo')
|
|
}).catch(() => {
|
|
this.saveConfigLoading = false
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
padding: 0 !important;
|
|
}
|
|
</style>
|