update: 基础配置组件替换
This commit is contained in:
easy
parent
e2417ed44e
commit
e2339e28b5
|
|
@ -1,288 +1,291 @@
|
||||||
<template>
|
<template>
|
||||||
<page-container>
|
<page-container>
|
||||||
<a-card class="basis-container">
|
<div class="basis-container">
|
||||||
<a-form
|
<j-form
|
||||||
layout="vertical"
|
layout="vertical"
|
||||||
ref="formBasicRef"
|
ref="formBasicRef"
|
||||||
:rules="rulesFrom"
|
:rules="rulesFrom"
|
||||||
:model="formValue"
|
:model="formValue"
|
||||||
>
|
>
|
||||||
<a-row :span="24" :gutter="24">
|
<j-row :span="24" :gutter="24">
|
||||||
<a-col :span="10">
|
<j-col :span="10">
|
||||||
<a-form-item label="系统名称" name="title">
|
<j-form-item label="系统名称" name="title">
|
||||||
<a-input
|
<j-input
|
||||||
v-model:value="formValue.title"
|
v-model:value="formValue.title"
|
||||||
:maxlength="64"
|
:maxlength="64"
|
||||||
placeholder="请输入系统名称"
|
placeholder="请输入系统名称"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</j-form-item>
|
||||||
<a-form-item label="主题色" name="headerTheme">
|
<j-form-item label="主题色" name="headerTheme">
|
||||||
<a-select v-model:value="formValue.headerTheme">
|
<j-select v-model:value="formValue.headerTheme">
|
||||||
<a-select-option value="light"
|
<j-select-option value="light">
|
||||||
>白色</a-select-option
|
白色
|
||||||
>
|
</j-select-option>
|
||||||
<a-select-option value="dark">黑色</a-select-option>
|
<j-select-option value="dark">
|
||||||
</a-select>
|
黑色
|
||||||
</a-form-item>
|
</j-select-option>
|
||||||
<a-form-item>
|
</j-select>
|
||||||
<template #label>
|
</j-form-item>
|
||||||
<span>高德API Key</span>
|
<j-form-item>
|
||||||
<a-tooltip title="配置后平台可调用高德地图GIS服务">
|
<template #label>
|
||||||
<img
|
<span>高德API Key</span>
|
||||||
class="img-style"
|
<j-tooltip
|
||||||
:src="getImage('/init-home/mark.png')"
|
title="配置后平台可调用高德地图GIS服务"
|
||||||
/>
|
>
|
||||||
</a-tooltip>
|
<img
|
||||||
</template>
|
class="img-style"
|
||||||
<a-input
|
:src="getImage('/init-home/mark.png')"
|
||||||
v-model:value="formValue.apiKey"
|
/>
|
||||||
placeholder="请输入高德API Key"
|
</j-tooltip>
|
||||||
/>
|
</template>
|
||||||
</a-form-item>
|
<j-input
|
||||||
<a-form-item name="'base-path'">
|
v-model:value="formValue.apiKey"
|
||||||
<template #label>
|
placeholder="请输入高德API Key"
|
||||||
<span>base-path</span>
|
/>
|
||||||
<a-tooltip title="系统后台访问的url">
|
</j-form-item>
|
||||||
<img
|
<j-form-item name="'base-path'">
|
||||||
class="img-style"
|
<template #label>
|
||||||
:src="getImage('/init-home/mark.png')"
|
<span>base-path</span>
|
||||||
/>
|
<j-tooltip title="系统后台访问的url">
|
||||||
</a-tooltip>
|
<img
|
||||||
</template>
|
class="img-style"
|
||||||
<a-input
|
:src="getImage('/init-home/mark.png')"
|
||||||
v-model:value="formValue['base-path']"
|
/>
|
||||||
placeholder="请输入高德API Key"
|
</j-tooltip>
|
||||||
/>
|
</template>
|
||||||
</a-form-item>
|
<j-input
|
||||||
<a-row :gutter="24" :span="24">
|
v-model:value="formValue['base-path']"
|
||||||
<a-col>
|
placeholder="请输入高德API Key"
|
||||||
<a-form-item label="系统logo">
|
/>
|
||||||
<div class="upload-image-warp-logo">
|
</j-form-item>
|
||||||
<div class="upload-image-border-logo">
|
<j-row :gutter="24" :span="24">
|
||||||
<a-upload
|
<j-col>
|
||||||
name="file"
|
<j-form-item label="系统logo">
|
||||||
:action="action"
|
<div class="upload-image-warp-logo">
|
||||||
:headers="headers"
|
<div class="upload-image-border-logo">
|
||||||
:showUploadList="false"
|
<a-upload
|
||||||
:beforeUpload="
|
name="file"
|
||||||
uploader.beforeLogoUpload
|
:action="action"
|
||||||
"
|
:headers="headers"
|
||||||
@change="uploader.handleChangeLogo"
|
:showUploadList="false"
|
||||||
:accept="
|
:beforeUpload="
|
||||||
uploader.imageTypes.toString()
|
uploader.beforeLogoUpload
|
||||||
"
|
"
|
||||||
>
|
@change="
|
||||||
<div
|
uploader.handleChangeLogo
|
||||||
class="upload-image-content-logo"
|
"
|
||||||
|
:accept="
|
||||||
|
uploader.imageTypes.toString()
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="loading-logo"
|
class="upload-image-content-logo"
|
||||||
v-if="form.logoLoading"
|
|
||||||
>
|
>
|
||||||
<LoadingOutlined
|
|
||||||
style="font-size: 28px"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="upload-image"
|
|
||||||
style="height: 100%"
|
|
||||||
v-if="formValue.logo"
|
|
||||||
:style="
|
|
||||||
formValue.logo
|
|
||||||
? `background-image: url(${formValue.logo});`
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
v-if="formValue.logo"
|
|
||||||
class="upload-image-mask"
|
|
||||||
>
|
|
||||||
点击修改
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<div
|
<div
|
||||||
|
class="loading-logo"
|
||||||
v-if="form.logoLoading"
|
v-if="form.logoLoading"
|
||||||
>
|
>
|
||||||
<LoadingOutlined
|
<AIcon
|
||||||
style="
|
type="LoadingOutlined"
|
||||||
font-size: 28px;
|
|
||||||
"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="upload-image"
|
||||||
|
style="height: 100%"
|
||||||
|
v-if="formValue.logo"
|
||||||
|
:style="
|
||||||
|
formValue.logo
|
||||||
|
? `background-image: url(${formValue.logo});`
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
v-if="formValue.logo"
|
||||||
|
class="upload-image-mask"
|
||||||
|
>
|
||||||
|
点击修改
|
||||||
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<PlusOutlined
|
<AIcon
|
||||||
style="
|
:type="
|
||||||
font-size: 28px;
|
form.logoLoading
|
||||||
|
? 'LoadingOutlined'
|
||||||
|
: 'PlusOutlined'
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a-upload>
|
||||||
</a-upload>
|
<div v-if="form.logoLoading">
|
||||||
<div v-if="form.logoLoading">
|
|
||||||
<div class="upload-loading-mask">
|
|
||||||
<LoadingOutlined
|
|
||||||
style="font-size: 28px"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="upload-tips">推荐尺寸200*200</div>
|
|
||||||
<div class="upload-tips">支持jpg,png</div>
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col>
|
|
||||||
<a-form-item>
|
|
||||||
<template #label>
|
|
||||||
<span>浏览器页签</span>
|
|
||||||
<a-tooltip
|
|
||||||
title="浏览器tab页中显示的图片元素"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="img-style"
|
|
||||||
:src="
|
|
||||||
getImage('/init-home/mark.png')
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</a-tooltip>
|
|
||||||
</template>
|
|
||||||
<div class="upload-image-warp-logo">
|
|
||||||
<div class="upload-image-border-logo">
|
|
||||||
<a-upload
|
|
||||||
name="file"
|
|
||||||
:action="action"
|
|
||||||
:headers="headers"
|
|
||||||
:showUploadList="false"
|
|
||||||
:beforeUpload="
|
|
||||||
uploader.beforeIconUpload
|
|
||||||
"
|
|
||||||
@change="uploader.changeIconUpload"
|
|
||||||
:accept="
|
|
||||||
uploader.imageTypes.toString()
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="upload-image-content-logo"
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
v-if="form.iconLoading"
|
class="upload-loading-mask"
|
||||||
class="loading-icon"
|
|
||||||
>
|
>
|
||||||
<LoadingOutlined
|
<AIcon
|
||||||
style="font-size: 28px"
|
type="LoadingOutlined"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="upload-tips">
|
||||||
|
推荐尺寸200*200
|
||||||
|
</div>
|
||||||
|
<div class="upload-tips">支持jpg,png</div>
|
||||||
|
</j-form-item>
|
||||||
|
</j-col>
|
||||||
|
<j-col>
|
||||||
|
<j-form-item>
|
||||||
|
<template #label>
|
||||||
|
<span>浏览器页签</span>
|
||||||
|
<j-tooltip
|
||||||
|
title="浏览器tab页中显示的图片元素"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="img-style"
|
||||||
|
:src="
|
||||||
|
getImage(
|
||||||
|
'/init-home/mark.png',
|
||||||
|
)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</j-tooltip>
|
||||||
|
</template>
|
||||||
|
<div class="upload-image-warp-logo">
|
||||||
|
<div class="upload-image-border-logo">
|
||||||
|
<a-upload
|
||||||
|
name="file"
|
||||||
|
:action="action"
|
||||||
|
:headers="headers"
|
||||||
|
:showUploadList="false"
|
||||||
|
:beforeUpload="
|
||||||
|
uploader.beforeIconUpload
|
||||||
|
"
|
||||||
|
@change="
|
||||||
|
uploader.changeIconUpload
|
||||||
|
"
|
||||||
|
:accept="
|
||||||
|
uploader.imageTypes.toString()
|
||||||
|
"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="upload-image-icon"
|
class="upload-image-content-logo"
|
||||||
v-if="formValue.ico"
|
|
||||||
:style="
|
|
||||||
formValue.ico
|
|
||||||
? `background-image: url(${formValue.ico});`
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
v-if="formValue.ico"
|
|
||||||
class="upload-image-mask"
|
|
||||||
>
|
>
|
||||||
点击修改
|
<div
|
||||||
</div>
|
v-if="form.iconLoading"
|
||||||
<div v-else>
|
class="loading-icon"
|
||||||
<div>
|
>
|
||||||
<PlusOutlined
|
<AIcon
|
||||||
style="
|
type="LoadingOutlined"
|
||||||
font-size: 28px;
|
|
||||||
"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="upload-image-icon"
|
||||||
|
v-if="formValue.ico"
|
||||||
|
:style="
|
||||||
|
formValue.ico
|
||||||
|
? `background-image: url(${formValue.ico});`
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
v-if="formValue.ico"
|
||||||
|
class="upload-image-mask"
|
||||||
|
>
|
||||||
|
点击修改
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div>
|
||||||
|
<AIcon
|
||||||
|
type="PlusOutlined"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-upload>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="upload-tips">推荐尺寸64*64</div>
|
||||||
|
<div class="upload-tips">支持icon格式</div>
|
||||||
|
</j-form-item>
|
||||||
|
</j-col>
|
||||||
|
</j-row>
|
||||||
|
</j-col>
|
||||||
|
<j-col :span="14">
|
||||||
|
<j-form-item label="登录背景图">
|
||||||
|
<div class="upload-image-warp-back">
|
||||||
|
<div class="upload-image-border-back">
|
||||||
|
<a-upload
|
||||||
|
name="file"
|
||||||
|
:action="action"
|
||||||
|
:headers="headers"
|
||||||
|
:beforeUpload="
|
||||||
|
uploader.beforeBackUpload
|
||||||
|
"
|
||||||
|
:showUploadList="false"
|
||||||
|
@change="uploader.changeBackUpload"
|
||||||
|
:accept="uploader.imageTypes.toString()"
|
||||||
|
>
|
||||||
|
<div class="upload-image-content-back">
|
||||||
|
<div
|
||||||
|
v-if="form.backLoading"
|
||||||
|
class="loading-back"
|
||||||
|
>
|
||||||
|
<AIcon type="LoadingOutlined" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="upload-image"
|
||||||
|
v-if="formValue.backgroud"
|
||||||
|
:style="
|
||||||
|
formValue.backgroud
|
||||||
|
? `background-image: url(${formValue.backgroud});`
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
v-if="formValue.backgroud"
|
||||||
|
class="upload-image-mask"
|
||||||
|
>
|
||||||
|
点击修改
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div>
|
||||||
|
<AIcon
|
||||||
|
type="PlusOutlined"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-upload>
|
</div>
|
||||||
</div>
|
</a-upload>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="upload-tips">推荐尺寸64*64</div>
|
|
||||||
<div class="upload-tips">支持icon格式</div>
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="14">
|
|
||||||
<a-form-item label="登录背景图">
|
|
||||||
<div class="upload-image-warp-back">
|
|
||||||
<div class="upload-image-border-back">
|
|
||||||
<a-upload
|
|
||||||
name="file"
|
|
||||||
:action="action"
|
|
||||||
:headers="headers"
|
|
||||||
:beforeUpload="uploader.beforeBackUpload"
|
|
||||||
:showUploadList="false"
|
|
||||||
@change="uploader.changeBackUpload"
|
|
||||||
:accept="uploader.imageTypes.toString()"
|
|
||||||
>
|
|
||||||
<div class="upload-image-content-back">
|
|
||||||
<div
|
|
||||||
v-if="form.backLoading"
|
|
||||||
class="loading-back"
|
|
||||||
>
|
|
||||||
<LoadingOutlined
|
|
||||||
style="font-size: 28px"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="upload-image"
|
|
||||||
v-if="formValue.backgroud"
|
|
||||||
:style="
|
|
||||||
formValue.backgroud
|
|
||||||
? `background-image: url(${formValue.backgroud});`
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
v-if="formValue.backgroud"
|
|
||||||
class="upload-image-mask"
|
|
||||||
>
|
|
||||||
点击修改
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<div>
|
|
||||||
<PlusOutlined
|
|
||||||
style="font-size: 28px"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-upload>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="upload-tips">
|
||||||
<div class="upload-tips">
|
支持4M以内的图片:支持jpg、png
|
||||||
支持4M以内的图片:支持jpg、png
|
</div>
|
||||||
</div>
|
<div class="upload-tips">建议尺寸1400x1080</div>
|
||||||
<div class="upload-tips">建议尺寸1400x1080</div>
|
</j-form-item>
|
||||||
</a-form-item>
|
</j-col>
|
||||||
</a-col>
|
</j-row>
|
||||||
</a-row>
|
</j-form>
|
||||||
</a-form>
|
|
||||||
|
|
||||||
<a-button
|
<j-button
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="form.clickSave"
|
@click="form.clickSave"
|
||||||
:disabled="
|
:disabled="
|
||||||
form.saveLoading ||
|
form.saveLoading ||
|
||||||
form.logoLoading ||
|
form.logoLoading ||
|
||||||
form.iconLoading ||
|
form.iconLoading ||
|
||||||
form.backLoading
|
form.backLoading
|
||||||
"
|
"
|
||||||
>保存</a-button
|
>
|
||||||
>
|
保存
|
||||||
</a-card>
|
</j-button>
|
||||||
</page-container>
|
</div>
|
||||||
|
</page-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts" name="Basis">
|
<script setup lang="ts" name="Basis">
|
||||||
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
|
|
||||||
import { formType, uploaderType } from './index';
|
import { formType, uploaderType } from './index';
|
||||||
import { getImage } from '@/utils/comm.ts';
|
import { getImage } from '@/utils/comm.ts';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
|
|
@ -365,8 +368,8 @@ const form = reactive<formType>({
|
||||||
},
|
},
|
||||||
clickSave: () => {
|
clickSave: () => {
|
||||||
const hasPermission = usePermissionStore().hasPermission;
|
const hasPermission = usePermissionStore().hasPermission;
|
||||||
if(hasPermission(`system/Basis:update`) ){
|
if (hasPermission(`system/Basis:update`)) {
|
||||||
formBasicRef.value.validate().then(() => {
|
formBasicRef.value.validate().then(() => {
|
||||||
form.saveLoading = true;
|
form.saveLoading = true;
|
||||||
const params = [
|
const params = [
|
||||||
{
|
{
|
||||||
|
|
@ -400,11 +403,9 @@ const form = reactive<formType>({
|
||||||
})
|
})
|
||||||
.finally(() => (form.saveLoading = false));
|
.finally(() => (form.saveLoading = false));
|
||||||
});
|
});
|
||||||
}else {
|
} else {
|
||||||
message.warning('暂无权限，请联系管理员');
|
message.warning('暂无权限，请联系管理员');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const { formValue, rulesFrom } = toRefs(form);
|
const { formValue, rulesFrom } = toRefs(form);
|
||||||
|
|
@ -502,6 +503,8 @@ form.getDetails();
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.basis-container {
|
.basis-container {
|
||||||
|
padding: 24px;
|
||||||
|
background-color: #fff;
|
||||||
.img-style {
|
.img-style {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
|
|
@ -625,5 +628,9 @@ form.getDetails();
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.5715;
|
line-height: 1.5715;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.anticon {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue