|
|
<script setup>
|
|
|
/**
|
|
|
* name：
|
|
|
* user：sa0ChunLuyu
|
|
|
* date：2022年12月26日 15:06:33
|
|
|
*/
|
|
|
import {
|
|
|
ConfigDeleteAction,
|
|
|
ConfigUpdateAction,
|
|
|
UploadImageAction,
|
|
|
ConfigCreateAction,
|
|
|
ConfigListAction,
|
|
|
$response,
|
|
|
$base64,
|
|
|
$image,
|
|
|
} from '~/api'
|
|
|
import JsonEditorVue from 'json-editor-vue3'
|
|
|
import {h} from "vue";
|
|
|
import {NInput} from 'naive-ui'
|
|
|
|
|
|
onMounted(() => {
|
|
|
ConfigList()
|
|
|
})
|
|
|
const config_active = ref([])
|
|
|
const config_list = ref([])
|
|
|
const ConfigList = async () => {
|
|
|
const response = await ConfigListAction()
|
|
|
$response(response, () => {
|
|
|
config_list.value = response.data.list
|
|
|
})
|
|
|
}
|
|
|
const type_arr = ['', '文字', '图片', '文字数组', '图片数组', 'JSON']
|
|
|
const config_columns = [{
|
|
|
type: 'selection',
|
|
|
multiple: false,
|
|
|
}, {
|
|
|
type: 'expand',
|
|
|
renderExpand: (row) => {
|
|
|
switch (row.type) {
|
|
|
case 1:
|
|
|
return h(
|
|
|
'div',
|
|
|
{
|
|
|
class: ['config_text_wrapper']
|
|
|
},
|
|
|
{
|
|
|
default: () => {
|
|
|
return row.value
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
case 2:
|
|
|
return h(
|
|
|
'div',
|
|
|
{
|
|
|
class: ['config_image_wrapper']
|
|
|
},
|
|
|
[h(
|
|
|
'div',
|
|
|
{
|
|
|
class: ['config_image_item_wrapper'],
|
|
|
},
|
|
|
[h(
|
|
|
'img',
|
|
|
{
|
|
|
src: $image(row.value_turn)
|
|
|
},
|
|
|
{
|
|
|
default: () => {
|
|
|
}
|
|
|
}
|
|
|
)]
|
|
|
)]
|
|
|
)
|
|
|
case 3:
|
|
|
return h(
|
|
|
'div',
|
|
|
{},
|
|
|
row.value_turn.map((item) => {
|
|
|
return h(
|
|
|
'div',
|
|
|
{
|
|
|
class: ['config_text_wrapper']
|
|
|
},
|
|
|
{
|
|
|
default: () => {
|
|
|
return item
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
})
|
|
|
)
|
|
|
case 4:
|
|
|
return h(
|
|
|
'div',
|
|
|
{
|
|
|
class: ['config_image_wrapper']
|
|
|
},
|
|
|
row.value_turn.map((item) => {
|
|
|
return h(
|
|
|
'div',
|
|
|
{
|
|
|
class: ['config_image_item_wrapper', 'm-1'],
|
|
|
},
|
|
|
[h(
|
|
|
'img',
|
|
|
{
|
|
|
src: $image(item)
|
|
|
},
|
|
|
{
|
|
|
default: () => {
|
|
|
}
|
|
|
}
|
|
|
)]
|
|
|
)
|
|
|
})
|
|
|
)
|
|
|
case 5:
|
|
|
return h(
|
|
|
NInput,
|
|
|
{
|
|
|
type: "textarea",
|
|
|
disabled: true,
|
|
|
autosize: {minRows: 8},
|
|
|
value: JSON.stringify(row.value_turn, null, 4),
|
|
|
},
|
|
|
{
|
|
|
default: () => {
|
|
|
return row.value
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
}, {
|
|
|
title: '名称',
|
|
|
key: 'label'
|
|
|
}, {
|
|
|
title: '类型',
|
|
|
key: 'type',
|
|
|
render(row) {
|
|
|
return type_arr[row.type]
|
|
|
}
|
|
|
}, {
|
|
|
title: '备注',
|
|
|
key: 'remark'
|
|
|
}]
|
|
|
const type_value_arr = ['', '', '', [], [], {}]
|
|
|
const create_show = ref(false)
|
|
|
const create_data_default = {
|
|
|
label: '',
|
|
|
value: '',
|
|
|
value_edit: '',
|
|
|
value_push: '',
|
|
|
type: 1,
|
|
|
remark: '',
|
|
|
}
|
|
|
const create_data = ref(JSON.parse(JSON.stringify(create_data_default)))
|
|
|
const ConfigCreate = async () => {
|
|
|
const response = await ConfigCreateAction({
|
|
|
label: create_data.value.label,
|
|
|
value: [3, 4, 5].indexOf(create_data.value.type) !== -1 ? JSON.stringify(create_data.value.value_edit) : create_data.value.value_edit,
|
|
|
type: create_data.value.type,
|
|
|
remark: create_data.value.remark,
|
|
|
})
|
|
|
$response(response, () => {
|
|
|
window.$message().success(response.message)
|
|
|
create_show.value = false
|
|
|
create_data.value = JSON.parse(JSON.stringify(create_data_default))
|
|
|
ConfigList()
|
|
|
})
|
|
|
}
|
|
|
const createShowClick = () => {
|
|
|
create_data.value = JSON.parse(JSON.stringify(create_data_default))
|
|
|
create_show.value = true
|
|
|
}
|
|
|
const typeChooseUpdate = (e) => {
|
|
|
if (create_show.value) {
|
|
|
create_data.value.value_edit = JSON.parse(JSON.stringify(type_value_arr[e]))
|
|
|
create_data.value.value_push = ''
|
|
|
create_data.value.type = e
|
|
|
} else {
|
|
|
update_data.value.value_edit = JSON.parse(JSON.stringify(type_value_arr[e]))
|
|
|
update_data.value.value_push = ''
|
|
|
update_data.value.type = e
|
|
|
}
|
|
|
}
|
|
|
const addValueClick = () => {
|
|
|
if (create_show.value) {
|
|
|
const push = JSON.parse(JSON.stringify(create_data.value.value_push))
|
|
|
create_data.value.value_push = ''
|
|
|
create_data.value.value_edit.push(push)
|
|
|
} else {
|
|
|
const push = JSON.parse(JSON.stringify(update_data.value.value_push))
|
|
|
update_data.value.value_push = ''
|
|
|
update_data.value.value_edit.push(push)
|
|
|
}
|
|
|
}
|
|
|
const delValueClick = (key) => {
|
|
|
if (create_show.value) {
|
|
|
create_data.value.value_edit.splice(key, 1)
|
|
|
} else {
|
|
|
update_data.value.value_edit.splice(key, 1)
|
|
|
}
|
|
|
}
|
|
|
const update_input_ref = ref(null)
|
|
|
const updateInputRef = (e) => {
|
|
|
update_input_ref.value = e
|
|
|
}
|
|
|
const image_active = ref(-2)
|
|
|
const inputUpdate = async (e) => {
|
|
|
const file = e.target.files[0]
|
|
|
update_input_ref.value.value = null
|
|
|
const base64 = await $base64(file)
|
|
|
const response = await UploadImageAction(base64)
|
|
|
$response(response, () => {
|
|
|
let url = response.data.url
|
|
|
if (create_show.value) {
|
|
|
if (image_active.value === -2) {
|
|
|
create_data.value.value_edit = url
|
|
|
} else if (image_active.value === -1) {
|
|
|
create_data.value.value_edit.push(url)
|
|
|
} else {
|
|
|
create_data.value.value_edit[image_active.value] = url
|
|
|
}
|
|
|
} else {
|
|
|
if (image_active.value === -2) {
|
|
|
update_data.value.value_edit = url
|
|
|
} else if (image_active.value === -1) {
|
|
|
update_data.value.value_edit.push(url)
|
|
|
} else {
|
|
|
update_data.value.value_edit[image_active.value] = url
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
const updateImageClick = (key) => {
|
|
|
image_active.value = key
|
|
|
update_input_ref.value.click()
|
|
|
}
|
|
|
const update_show = ref(false)
|
|
|
const update_data_default = {
|
|
|
id: 0,
|
|
|
label: '',
|
|
|
value: '',
|
|
|
value_edit: '',
|
|
|
value_push: '',
|
|
|
type: 1,
|
|
|
remark: '',
|
|
|
}
|
|
|
const update_data = ref(JSON.parse(JSON.stringify(update_data_default)))
|
|
|
const ConfigUpdate = async () => {
|
|
|
const response = await ConfigUpdateAction({
|
|
|
config_id: update_data.value.id,
|
|
|
label: update_data.value.label,
|
|
|
value: [3, 4, 5].indexOf(update_data.value.type) !== -1 ? JSON.stringify(update_data.value.value_edit) : update_data.value.value_edit,
|
|
|
type: update_data.value.type,
|
|
|
remark: update_data.value.remark,
|
|
|
})
|
|
|
$response(response, () => {
|
|
|
window.$message().success(response.message)
|
|
|
update_show.value = false
|
|
|
update_data.value = JSON.parse(JSON.stringify(update_data_default))
|
|
|
ConfigList()
|
|
|
})
|
|
|
}
|
|
|
const updateShowClick = () => {
|
|
|
if (config_active.value.length !== 1) return window.$message().error('请选择一个配置')
|
|
|
update_data.value = JSON.parse(JSON.stringify(update_data_default))
|
|
|
for (let i = 0; i < config_list.value.length; i++) {
|
|
|
if (config_active.value[0] === config_list.value[i].id) {
|
|
|
update_data.value = {
|
|
|
id: config_list.value[i].id,
|
|
|
label: config_list.value[i].label,
|
|
|
value: config_list.value[i].value,
|
|
|
value_edit: config_list.value[i].value_turn,
|
|
|
value_push: '',
|
|
|
type: config_list.value[i].type,
|
|
|
remark: config_list.value[i].remark,
|
|
|
}
|
|
|
update_show.value = true
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const deleteImageClick = (key) => {
|
|
|
if (create_show.value) {
|
|
|
if (key === -2) {
|
|
|
create_data.value.value_edit = ''
|
|
|
} else {
|
|
|
create_data.value.value_edit.splice(key, 1)
|
|
|
}
|
|
|
} else {
|
|
|
if (key === -2) {
|
|
|
update_data.value.value_edit = ''
|
|
|
} else {
|
|
|
update_data.value.value_edit.splice(key, 1)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
const delete_show = ref(false)
|
|
|
const deleteShowClick = () => {
|
|
|
if (config_active.value.length !== 1) return window.$message().error('请选择一个配置')
|
|
|
delete_show.value = true
|
|
|
}
|
|
|
const ConfigDelete = async () => {
|
|
|
const response = await ConfigDeleteAction(config_active.value[0])
|
|
|
$response(response, () => {
|
|
|
window.$message().success(response.message)
|
|
|
delete_show.value = false
|
|
|
config_active.value = []
|
|
|
ConfigList()
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
<template>
|
|
|
<div>
|
|
|
<n-modal v-model:show="delete_show" preset="card" :style="{width: '400px'}" title="删除确认" :auto-focus="false"
|
|
|
:bordered="false">
|
|
|
<div>
|
|
|
<n-alert title="删除不可恢复，且可能会引发严重BUG！" type="error">
|
|
|
<template #icon>
|
|
|
<n-icon>
|
|
|
<Icon type="alarm"></Icon>
|
|
|
</n-icon>
|
|
|
</template>
|
|
|
</n-alert>
|
|
|
<n-alert mt-2 title="删除不可恢复，且可能会引发严重BUG！" type="error">
|
|
|
<template #icon>
|
|
|
<n-icon>
|
|
|
<Icon type="alarm"></Icon>
|
|
|
</n-icon>
|
|
|
</template>
|
|
|
</n-alert>
|
|
|
<n-alert mt-2 title="删除不可恢复，且可能会引发严重BUG！" type="error">
|
|
|
<template #icon>
|
|
|
<n-icon>
|
|
|
<Icon type="alarm"></Icon>
|
|
|
</n-icon>
|
|
|
</template>
|
|
|
</n-alert>
|
|
|
<n-space mt-2 justify="center">
|
|
|
<n-button @click="ConfigDelete()" type="info">确定</n-button>
|
|
|
<n-button @click="delete_show = false">取消</n-button>
|
|
|
</n-space>
|
|
|
</div>
|
|
|
</n-modal>
|
|
|
<n-modal v-model:show="update_show" preset="card" :style="{width: '1000px'}" title="修改" :auto-focus="false"
|
|
|
:bordered="false">
|
|
|
<div>
|
|
|
<n-space align="center">
|
|
|
<n-tag>
|
|
|
<div class="form_tag_wrapper">名称</div>
|
|
|
</n-tag>
|
|
|
<n-input class="form_input_wrapper" v-model:value="update_data.label"></n-input>
|
|
|
</n-space>
|
|
|
<n-space mt-2 align="center">
|
|
|
<n-tag>
|
|
|
<div class="form_tag_wrapper">类型</div>
|
|
|
</n-tag>
|
|
|
<n-radio-group v-model:value="update_data.type" @update:value="typeChooseUpdate" name="type_radio">
|
|
|
<n-space>
|
|
|
<n-radio :value="1">文字</n-radio>
|
|
|
<n-radio :value="2">图片</n-radio>
|
|
|
<n-radio :value="3">文字数组</n-radio>
|
|
|
<n-radio :value="4">图片数组</n-radio>
|
|
|
<n-radio :value="5">JSON</n-radio>
|
|
|
</n-space>
|
|
|
</n-radio-group>
|
|
|
</n-space>
|
|
|
<n-space mt-2>
|
|
|
<n-tag mt-1>
|
|
|
<div class="form_tag_wrapper">内容</div>
|
|
|
</n-tag>
|
|
|
<template v-if="update_data.type === 1">
|
|
|
<n-input class="form_input_wrapper" v-model:value="update_data.value_edit"></n-input>
|
|
|
</template>
|
|
|
<template v-if="update_data.type === 2">
|
|
|
<div class="config_image_wrapper">
|
|
|
<div class="config_image_item_wrapper" m-1>
|
|
|
<span v-if="!update_data.value_edit">暂无图片</span>
|
|
|
<div class="config_image_cover_wrapper">
|
|
|
<div class="config_image_cover_upload_wrapper" cursor-pointer @click="updateImageClick(-2)">
|
|
|
<Icon type="upload-three"></Icon>
|
|
|
</div>
|
|
|
<div v-if="!!update_data.value_edit" cursor-pointer class="config_image_cover_delete_wrapper"
|
|
|
@click="deleteImageClick(-2)">
|
|
|
<Icon type="delete-one"></Icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
<img v-if="!!update_data.value_edit" :src="$image(update_data.value_edit)" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-if="update_data.type === 3">
|
|
|
<n-scrollbar style="max-height: 500px">
|
|
|
<n-space mb-2 v-for="(i,k) in update_data.value_edit" :key="k" align="center">
|
|
|
<n-input class="form_input_wrapper" v-model:value="update_data.value_edit[k]"></n-input>
|
|
|
<n-button @click="delValueClick(k)" quaternary circle type="error">
|
|
|
<template #icon>
|
|
|
<n-icon>
|
|
|
<Icon type="minus"></Icon>
|
|
|
</n-icon>
|
|
|
</template>
|
|
|
</n-button>
|
|
|
</n-space>
|
|
|
<n-space align="center">
|
|
|
<n-input class="form_input_wrapper" v-model:value="update_data.value_push"></n-input>
|
|
|
<n-button @click="addValueClick()" quaternary circle type="info">
|
|
|
<template #icon>
|
|
|
<n-icon>
|
|
|
<Icon type="plus"></Icon>
|
|
|
</n-icon>
|
|
|
</template>
|
|
|
</n-button>
|
|
|
</n-space>
|
|
|
</n-scrollbar>
|
|
|
</template>
|
|
|
<template v-if="update_data.type === 4">
|
|
|
<n-scrollbar style="max-height: 500px">
|
|
|
<div class="config_image_wrapper">
|
|
|
<div v-for="(i,k) in update_data.value_edit" :key="k"
|
|
|
class="config_image_item_wrapper" m-1 cursor-pointer>
|
|
|
<div class="config_image_cover_wrapper">
|
|
|
<div class="config_image_cover_upload_wrapper" @click="updateImageClick(k)">
|
|
|
<Icon type="upload-three"></Icon>
|
|
|
</div>
|
|
|
<div class="config_image_cover_delete_wrapper" @click="deleteImageClick(k)">
|
|
|
<Icon type="delete-one"></Icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
<img :src="$image(i)" alt="">
|
|
|
</div>
|
|
|
<div @click="updateImageClick(-1)" class="config_image_item_wrapper" m-1 cursor-pointer>上传图片</div>
|
|
|
</div>
|
|
|
</n-scrollbar>
|
|
|
</template>
|
|
|
<template v-if="update_data.type === 5">
|
|
|
<JsonEditorVue style="width: 840px;height: 500px;" v-model="update_data.value_edit" language="zh-CN"
|
|
|
:modeList="[]"></JsonEditorVue>
|
|
|
</template>
|
|
|
</n-space>
|
|
|
<n-space mt-2 align="center">
|
|
|
<n-tag>
|
|
|
<div class="form_tag_wrapper">备注</div>
|
|
|
</n-tag>
|
|
|
<n-input class="form_input_wrapper" v-model:value="update_data.remark"></n-input>
|
|
|
</n-space>
|
|
|
<n-space mt-2>
|
|
|
<n-button @click="ConfigUpdate()" type="info">确定</n-button>
|
|
|
</n-space>
|
|
|
</div>
|
|
|
</n-modal>
|
|
|
<n-modal v-model:show="create_show" preset="card" :style="{width: '1000px'}" title="新建" :auto-focus="false"
|
|
|
:bordered="false">
|
|
|
<div>
|
|
|
<n-space align="center">
|
|
|
<n-tag>
|
|
|
<div class="form_tag_wrapper">名称</div>
|
|
|
</n-tag>
|
|
|
<n-input class="form_input_wrapper" v-model:value="create_data.label"></n-input>
|
|
|
</n-space>
|
|
|
<n-space mt-2 align="center">
|
|
|
<n-tag>
|
|
|
<div class="form_tag_wrapper">类型</div>
|
|
|
</n-tag>
|
|
|
<n-radio-group v-model:value="create_data.type" @update:value="typeChooseUpdate" name="type_radio">
|
|
|
<n-space>
|
|
|
<n-radio :value="1">文字</n-radio>
|
|
|
<n-radio :value="2">图片</n-radio>
|
|
|
<n-radio :value="3">文字数组</n-radio>
|
|
|
<n-radio :value="4">图片数组</n-radio>
|
|
|
<n-radio :value="5">JSON</n-radio>
|
|
|
</n-space>
|
|
|
</n-radio-group>
|
|
|
</n-space>
|
|
|
<n-space mt-2>
|
|
|
<n-tag mt-1>
|
|
|
<div class="form_tag_wrapper">内容</div>
|
|
|
</n-tag>
|
|
|
<template v-if="create_data.type === 1">
|
|
|
<n-input class="form_input_wrapper" v-model:value="create_data.value_edit"></n-input>
|
|
|
</template>
|
|
|
<template v-if="create_data.type === 2">
|
|
|
<div class="config_image_wrapper">
|
|
|
<div class="config_image_item_wrapper" m-1>
|
|
|
<span v-if="!create_data.value_edit">暂无图片</span>
|
|
|
<div class="config_image_cover_wrapper">
|
|
|
<div class="config_image_cover_upload_wrapper" cursor-pointer @click="updateImageClick(-2)">
|
|
|
<Icon type="upload-three"></Icon>
|
|
|
</div>
|
|
|
<div v-if="!!create_data.value_edit" cursor-pointer class="config_image_cover_delete_wrapper"
|
|
|
@click="deleteImageClick(-2)">
|
|
|
<Icon type="delete-one"></Icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
<img v-if="!!create_data.value_edit" :src="$image(create_data.value_edit)" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-if="create_data.type === 3">
|
|
|
<n-scrollbar style="max-height: 500px">
|
|
|
<n-space mb-2 v-for="(i,k) in create_data.value_edit" :key="k" align="center">
|
|
|
<n-input class="form_input_wrapper" v-model:value="create_data.value_edit[k]"></n-input>
|
|
|
<n-button @click="delValueClick(k)" quaternary circle type="error">
|
|
|
<template #icon>
|
|
|
<n-icon>
|
|
|
<Icon type="minus"></Icon>
|
|
|
</n-icon>
|
|
|
</template>
|
|
|
</n-button>
|
|
|
</n-space>
|
|
|
<n-space align="center">
|
|
|
<n-input class="form_input_wrapper" v-model:value="create_data.value_push"></n-input>
|
|
|
<n-button @click="addValueClick()" quaternary circle type="info">
|
|
|
<template #icon>
|
|
|
<n-icon>
|
|
|
<Icon type="plus"></Icon>
|
|
|
</n-icon>
|
|
|
</template>
|
|
|
</n-button>
|
|
|
</n-space>
|
|
|
</n-scrollbar>
|
|
|
</template>
|
|
|
<template v-if="create_data.type === 4">
|
|
|
<n-scrollbar style="max-height: 500px">
|
|
|
<div class="config_image_wrapper">
|
|
|
<div v-for="(i,k) in create_data.value_edit" :key="k" @click="updateImageClick(k)"
|
|
|
class="config_image_item_wrapper" m-1 cursor-pointer>
|
|
|
<div class="config_image_cover_wrapper">
|
|
|
<div class="config_image_cover_upload_wrapper" @click="updateImageClick(k)">
|
|
|
<Icon type="upload-three"></Icon>
|
|
|
</div>
|
|
|
<div class="config_image_cover_delete_wrapper" @click="deleteImageClick(k)">
|
|
|
<Icon type="delete-one"></Icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
<img :src="$image(i)" alt="">
|
|
|
</div>
|
|
|
<div @click="updateImageClick(-1)" class="config_image_item_wrapper" m-1 cursor-pointer>上传图片</div>
|
|
|
</div>
|
|
|
</n-scrollbar>
|
|
|
</template>
|
|
|
<template v-if="create_data.type === 5">
|
|
|
<JsonEditorVue style="width: 840px;height: 500px;" v-model="create_data.value_edit" language="zh-CN"
|
|
|
:modeList="[]"></JsonEditorVue>
|
|
|
</template>
|
|
|
</n-space>
|
|
|
<n-space mt-2 align="center">
|
|
|
<n-tag>
|
|
|
<div class="form_tag_wrapper">备注</div>
|
|
|
</n-tag>
|
|
|
<n-input class="form_input_wrapper" v-model:value="create_data.remark"></n-input>
|
|
|
</n-space>
|
|
|
<n-space mt-2>
|
|
|
<n-button @click="ConfigCreate()" type="info">确定</n-button>
|
|
|
</n-space>
|
|
|
</div>
|
|
|
</n-modal>
|
|
|
<input class="upload_input_wrapper" accept="image/*" @change="inputUpdate" type="file" :ref="updateInputRef">
|
|
|
<n-card title="后台配置">
|
|
|
<div>
|
|
|
<n-space>
|
|
|
<n-button @click="createShowClick()" type="success">新建</n-button>
|
|
|
<n-button @click="deleteShowClick()" type="error">删除</n-button>
|
|
|
<n-button @click="updateShowClick()" type="info">修改</n-button>
|
|
|
</n-space>
|
|
|
<n-alert mt-2 title="在修改和删除前，请确保您已经充分理解该配置的含义及用法，盲目修改或删除可能会引发严重BUG！"
|
|
|
type="error">
|
|
|
<template #icon>
|
|
|
<n-icon>
|
|
|
<Icon type="alarm"></Icon>
|
|
|
</n-icon>
|
|
|
</template>
|
|
|
</n-alert>
|
|
|
<n-data-table mt-2 v-model:checked-row-keys="config_active"
|
|
|
:columns="config_columns"
|
|
|
:row-key="row=>row.id" :data="config_list"/>
|
|
|
</div>
|
|
|
</n-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
<style>
|
|
|
a.jsoneditor-poweredBy {
|
|
|
font-size: 8pt;
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.config_text_wrapper {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.config_image_wrapper {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
max-width: 700px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.config_image_item_wrapper {
|
|
|
width: 200px;
|
|
|
height: 200px;
|
|
|
display: table-cell;
|
|
|
vertical-align: middle;
|
|
|
text-align: center;
|
|
|
line-height: 200px;
|
|
|
background: #00000010;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.config_image_item_wrapper img {
|
|
|
width: auto;
|
|
|
height: auto;
|
|
|
max-width: 100%;
|
|
|
max-height: 100%;
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
left: 50%;
|
|
|
bottom: 0;
|
|
|
right: 0;
|
|
|
top: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
.config_image_cover_upload_wrapper {
|
|
|
width: 50%;
|
|
|
background: #5e92ff50;
|
|
|
}
|
|
|
|
|
|
.config_image_cover_upload_wrapper:hover {
|
|
|
background: #5e92ff70;
|
|
|
}
|
|
|
|
|
|
.config_image_cover_delete_wrapper {
|
|
|
width: 50%;
|
|
|
background: #fd606050;
|
|
|
}
|
|
|
|
|
|
.config_image_cover_delete_wrapper:hover {
|
|
|
background: #fd606070;
|
|
|
}
|
|
|
|
|
|
.config_image_cover_wrapper {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
display: flex;
|
|
|
z-index: 2;
|
|
|
opacity: 0;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.config_image_cover_wrapper:hover {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
.upload_input_wrapper {
|
|
|
width: 0px;
|
|
|
height: 0px;
|
|
|
opacity: 0;
|
|
|
}
|
|
|
</style>
|
|
|
<route>
|
|
|
{"meta":{"title":"后台配置"}}
|
|
|
</route>
|
|
|
|