Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
JiangQiming
commit
9c64386cc4
|
Before Width: | Height: | Size: 544 B After Width: | Height: | Size: 544 B |
|
|
@ -2,22 +2,21 @@
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div
|
<div
|
||||||
class="card-warp"
|
class="card-warp"
|
||||||
:class="{ active: active ? 'active' : ''}"
|
:class="{ active: active ? 'active' : '' }"
|
||||||
@click="handleClick"
|
@click="handleClick"
|
||||||
>
|
>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<a-row>
|
<div style="display: flex">
|
||||||
<a-col :span="6">
|
<!-- 图片 -->
|
||||||
<!-- 图片 -->
|
<div class="card-item-avatar">
|
||||||
<div class="card-item-avatar">
|
<slot name="img"> </slot>
|
||||||
<slot name="img"> </slot>
|
</div>
|
||||||
</div>
|
|
||||||
</a-col>
|
<!-- 内容 -->
|
||||||
<a-col :span="18">
|
<div class="card-item-body">
|
||||||
<!-- 内容 -->
|
|
||||||
<slot name="content"></slot>
|
<slot name="content"></slot>
|
||||||
</a-col>
|
</div>
|
||||||
</a-row>
|
</div>
|
||||||
|
|
||||||
<!-- 勾选 -->
|
<!-- 勾选 -->
|
||||||
<div v-if="active" class="checked-icon">
|
<div v-if="active" class="checked-icon">
|
||||||
|
|
@ -201,6 +200,13 @@ const handleClick = () => {
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-item-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.card-state {
|
.card-state {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 30px;
|
top: 30px;
|
||||||
|
|
|
||||||
|
|
@ -207,6 +207,7 @@ const JTable = defineComponent<JTableProps>({
|
||||||
_dataSource.value = []
|
_dataSource.value = []
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
console.log(props?.dataSource)
|
||||||
_dataSource.value = props?.dataSource || []
|
_dataSource.value = props?.dataSource || []
|
||||||
}
|
}
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
|
@ -220,6 +221,16 @@ const JTable = defineComponent<JTableProps>({
|
||||||
{deep: true, immediate: true}
|
{deep: true, immediate: true}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.dataSource,
|
||||||
|
(newValue) => {
|
||||||
|
if(props.dataSource){
|
||||||
|
handleSearch(props.params)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{deep: true, immediate: true}
|
||||||
|
)
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
window.onresize = () => {
|
window.onresize = () => {
|
||||||
windowChange()
|
windowChange()
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<template>
|
||||||
|
<a-card>
|
||||||
|
<a-row type="flex">
|
||||||
|
<a-col flex="200px">
|
||||||
|
<div>
|
||||||
|
<a-input-search
|
||||||
|
v-model:value="value"
|
||||||
|
placeholder="请输入事件名称"
|
||||||
|
style="width: 200px; margin-bottom: 10px"
|
||||||
|
@search="onSearch"
|
||||||
|
/>
|
||||||
|
<a-tabs
|
||||||
|
tab-position="left"
|
||||||
|
:style="{ height: '600px' }"
|
||||||
|
v-model:activeKey="activeKey"
|
||||||
|
tabBarStyle="width: 200px"
|
||||||
|
>
|
||||||
|
<a-tab-pane v-for="i in tabList" :key="i.key" :tab="i.tab" />
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col flex="auto">
|
||||||
|
<!-- <component :is="tabs[activeKey]" /> -->
|
||||||
|
123
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const activeKey = ref<string>('property')
|
||||||
|
const tabList = ref<{key: string, tab: string}[]>([
|
||||||
|
{
|
||||||
|
key: 'property',
|
||||||
|
tab: '属性'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'event1',
|
||||||
|
tab: '事件1'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const onSearch = () => {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #extra>
|
<template #extra>
|
||||||
<img @click="handleRefresh" :src="getImage('/device/instance/button.png')" style="margin-right: 20px; cursor: pointer;" />
|
<img @click="handleRefresh" :src="getImage('/device/button.png')" style="margin-right: 20px; cursor: pointer;" />
|
||||||
</template>
|
</template>
|
||||||
<component :is="tabs[instanceStore.tabActiveKey]" />
|
<component :is="tabs[instanceStore.tabActiveKey]" />
|
||||||
</page-container>
|
</page-container>
|
||||||
|
|
@ -41,6 +41,7 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useInstanceStore } from '@/store/instance';
|
import { useInstanceStore } from '@/store/instance';
|
||||||
import Info from './Info/index.vue';
|
import Info from './Info/index.vue';
|
||||||
|
import Running from './Running/index.vue'
|
||||||
import Metadata from '../../components/Metadata/index.vue';
|
import Metadata from '../../components/Metadata/index.vue';
|
||||||
import { _deploy, _disconnect } from '@/api/device/instance'
|
import { _deploy, _disconnect } from '@/api/device/instance'
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
|
|
@ -59,6 +60,10 @@ const list = [
|
||||||
key: 'Info',
|
key: 'Info',
|
||||||
tab: '实例信息'
|
tab: '实例信息'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
key: 'Running',
|
||||||
|
tab: '运行状态'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
key: 'Metadata',
|
key: 'Metadata',
|
||||||
tab: '物模型'
|
tab: '物模型'
|
||||||
|
|
@ -67,7 +72,8 @@ const list = [
|
||||||
|
|
||||||
const tabs = {
|
const tabs = {
|
||||||
Info,
|
Info,
|
||||||
Metadata
|
Metadata,
|
||||||
|
Running
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
|
|
|
||||||
|
|
@ -385,7 +385,7 @@ const handleAdd = () => {
|
||||||
* 查看
|
* 查看
|
||||||
*/
|
*/
|
||||||
const handleView = (id: string) => {
|
const handleView = (id: string) => {
|
||||||
router.push('/device/instance/detail/' + id);
|
router.push('/iot/device/instance/detail/' + id);
|
||||||
};
|
};
|
||||||
|
|
||||||
const getActions = (
|
const getActions = (
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
<!-- 产品保存成功后的提示框 -->
|
||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
:maskClosable="false"
|
||||||
|
destroy-on-close
|
||||||
|
v-model:visible="visible"
|
||||||
|
@cancel="cancel"
|
||||||
|
v-bind="layout"
|
||||||
|
width="650px"
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
<span>产品创建成功</span>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<a-button @click="cancel">关闭</a-button>
|
||||||
|
</template>
|
||||||
|
<div class="product-tips">
|
||||||
|
<div style="display: flex">
|
||||||
|
<div class="product-icon">
|
||||||
|
<check-circle-outlined class="icon-style" />
|
||||||
|
</div>
|
||||||
|
<div class="product-title">产品创建成功</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex">
|
||||||
|
<div class="product-id">产品ID: 12333</div>
|
||||||
|
<div class="product-btn" @click="jump">查看详情</div>
|
||||||
|
</div>
|
||||||
|
<div>接下来推荐操作:</div>
|
||||||
|
<div class="product-main">1、配置产品接入方式</div>
|
||||||
|
<div class="product-text">
|
||||||
|
点击具体产品的查看按钮,进入“设备接入”tab页，并参照设备铭牌说明选择匹配的接入方式
|
||||||
|
</div>
|
||||||
|
<div class="product-main">2、添加测试设备</div>
|
||||||
|
<div class="product-text">
|
||||||
|
进入设备列表，添加单个设备，用于验证产品模型是否配置正确
|
||||||
|
</div>
|
||||||
|
<div class="product-main">3、功能调试</div>
|
||||||
|
<div class="product-text">
|
||||||
|
点击查看具体设备，进入“设备诊断”对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确
|
||||||
|
</div>
|
||||||
|
<div class="product-main">4、批量添加设备</div>
|
||||||
|
<div class="product-text">
|
||||||
|
进入设备列表页面，点击批量导入设备，批量添加同一产品下的设备
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup name="DialogTips">
|
||||||
|
import { getImage } from '@/utils/comm.ts';
|
||||||
|
import { CheckCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
const visible = ref<boolean>(false);
|
||||||
|
/**
|
||||||
|
* 弹窗关闭
|
||||||
|
*/
|
||||||
|
const cancel = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 显示弹窗
|
||||||
|
*/
|
||||||
|
const show = () => {
|
||||||
|
visible.value = true;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 跳转页面
|
||||||
|
*/
|
||||||
|
const jump = () => {};
|
||||||
|
defineExpose({
|
||||||
|
show: show,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.product-tips {
|
||||||
|
.product-icon {
|
||||||
|
.icon-style {
|
||||||
|
color: #52c41a;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.product-title {
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-top: 2px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.product-id {
|
||||||
|
margin: 10px 15px 10px 0px;
|
||||||
|
}
|
||||||
|
.product-btn {
|
||||||
|
margin: 10px 0px 10px 0;
|
||||||
|
color: #0297d7;
|
||||||
|
}
|
||||||
|
.product-text {
|
||||||
|
color: #757575;
|
||||||
|
}
|
||||||
|
.product-main {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -194,6 +194,7 @@
|
||||||
</a-form>
|
</a-form>
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
<DialogTips ref="dialogRef" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
@ -201,7 +202,7 @@ import { category } from '@/api/device/product';
|
||||||
import { Form } from 'ant-design-vue';
|
import { Form } from 'ant-design-vue';
|
||||||
import { getImage } from '@/utils/comm.ts';
|
import { getImage } from '@/utils/comm.ts';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import ChooseCard from '../ChooseCard/index.vue';
|
import DialogTips from '../DialogTips/index.vue';
|
||||||
import { filterTreeSelectNode, filterSelectNode } from '@/utils/comm';
|
import { filterTreeSelectNode, filterSelectNode } from '@/utils/comm';
|
||||||
import { FILE_UPLOAD } from '@/api/comm';
|
import { FILE_UPLOAD } from '@/api/comm';
|
||||||
import { isInput } from '@/utils/regular';
|
import { isInput } from '@/utils/regular';
|
||||||
|
|
@ -225,6 +226,7 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const loading = ref<boolean>(false);
|
const loading = ref<boolean>(false);
|
||||||
|
const dialogRef = ref();
|
||||||
const treeList = ref<Record<string, any>[]>([]);
|
const treeList = ref<Record<string, any>[]>([]);
|
||||||
const visible = ref<boolean>(false);
|
const visible = ref<boolean>(false);
|
||||||
const logoLoading = ref<boolean>(false);
|
const logoLoading = ref<boolean>(false);
|
||||||
|
|
@ -335,26 +337,27 @@ watch(
|
||||||
* 显示弹窗
|
* 显示弹窗
|
||||||
*/
|
*/
|
||||||
const show = (data: any) => {
|
const show = (data: any) => {
|
||||||
console.log(props.isAdd, '11111');
|
|
||||||
if (props.isAdd === 2) {
|
if (props.isAdd === 2) {
|
||||||
// form.name = data.name;
|
form.name = data.name;
|
||||||
// form.classifiedId = data.classifiedId;
|
form.classifiedId = data.classifiedId;
|
||||||
// form.classifiedName = data.classifiedName;
|
form.classifiedName = data.classifiedName;
|
||||||
// form.photoUrl = data.photoUrl || photoValue.value;
|
form.photoUrl = data.photoUrl || photoValue.value;
|
||||||
// form.deviceType = data.deviceType.value;
|
form.deviceType = data.deviceType.value;
|
||||||
// form.describe = form.describe;
|
form.describe = form.describe;
|
||||||
// form.id = data.id;
|
form.id = data.id;
|
||||||
// disabled.value = true;
|
disabled.value = true;
|
||||||
} else {
|
} else if (props.isAdd === 1) {
|
||||||
// form.name = '';
|
form.name = '';
|
||||||
// form.classifiedId = '';
|
form.classifiedId = '';
|
||||||
// form.classifiedName = '';
|
form.classifiedName = '';
|
||||||
// form.photoUrl = photoValue.value;
|
form.photoUrl = getImage('/device/instance/device-card.png');
|
||||||
// form.deviceType = '';
|
form.deviceType = '';
|
||||||
// form.describe = '';
|
form.describe = '';
|
||||||
// form.id = '';
|
form.id = '';
|
||||||
|
disabled.value = false;
|
||||||
|
dialogRef.value.show();
|
||||||
}
|
}
|
||||||
visible.value = true;
|
// visible.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -376,35 +379,6 @@ const submitData = () => {
|
||||||
.then(async () => {})
|
.then(async () => {})
|
||||||
.catch((err: any) => {});
|
.catch((err: any) => {});
|
||||||
};
|
};
|
||||||
/**
|
|
||||||
* 文件上传之前
|
|
||||||
*/
|
|
||||||
const beforeUpload = (file: any) => {
|
|
||||||
const isType: any = imageTypes.includes(file.type);
|
|
||||||
if (!isType) {
|
|
||||||
message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
const isSize = file.size / 1024 / 1024 < 4;
|
|
||||||
if (!isSize) {
|
|
||||||
message.error(`图片大小必须小于${4}M`);
|
|
||||||
}
|
|
||||||
return isType && isSize;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 文件改变事件
|
|
||||||
*/
|
|
||||||
const handleChange = (info: any) => {
|
|
||||||
if (info.file.status === 'uploading') {
|
|
||||||
logoLoading.value = true;
|
|
||||||
}
|
|
||||||
if (info.file.status === 'done') {
|
|
||||||
info.file.url = info.file.response?.result;
|
|
||||||
logoLoading.value = false;
|
|
||||||
photoValue.value = info.file.response?.result;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
/**
|
||||||
* 初始化
|
* 初始化
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -41,27 +41,42 @@
|
||||||
</a-row>
|
</a-row>
|
||||||
</template>
|
</template>
|
||||||
<template #actions="item">
|
<template #actions="item">
|
||||||
<a-popconfirm
|
<a-tooltip
|
||||||
v-if="item.popConfirm"
|
v-bind="item.tooltip"
|
||||||
v-bind="item.popConfirm"
|
:title="item.disabled && item.tooltip.title"
|
||||||
>
|
>
|
||||||
<a-button :disabled="item.disabled">
|
<a-popconfirm
|
||||||
<DeleteOutlined v-if="item.key === 'delete'" />
|
v-if="item.popConfirm"
|
||||||
<template v-else>
|
v-bind="item.popConfirm"
|
||||||
<AIcon :type="item.icon" />
|
:disabled="item.disabled"
|
||||||
<span>{{ item.text }}</span>
|
>
|
||||||
</template>
|
<a-button :disabled="item.disabled">
|
||||||
</a-button>
|
<AIcon
|
||||||
</a-popconfirm>
|
type="DeleteOutlined"
|
||||||
<template v-else>
|
v-if="item.key === 'delete'"
|
||||||
<a-button :disabled="item.disabled">
|
/>
|
||||||
<DeleteOutlined v-if="item.key === 'delete'" />
|
<template v-else>
|
||||||
<template v-else>
|
<AIcon :type="item.icon" />
|
||||||
<AIcon :type="item.icon" />
|
<span>{{ item?.text }}</span>
|
||||||
<span>{{ item.text }}</span>
|
</template>
|
||||||
</template>
|
</a-button>
|
||||||
</a-button>
|
</a-popconfirm>
|
||||||
</template>
|
<template v-else>
|
||||||
|
<a-button
|
||||||
|
:disabled="item.disabled"
|
||||||
|
@click="item.onClick"
|
||||||
|
>
|
||||||
|
<AIcon
|
||||||
|
type="DeleteOutlined"
|
||||||
|
v-if="item.key === 'delete'"
|
||||||
|
/>
|
||||||
|
<template v-else>
|
||||||
|
<AIcon :type="item.icon" />
|
||||||
|
<span>{{ item?.text }}</span>
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
</a-tooltip>
|
||||||
</template>
|
</template>
|
||||||
</CardBox>
|
</CardBox>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -303,7 +318,9 @@ const getActions = (
|
||||||
const add = () => {
|
const add = () => {
|
||||||
isAdd.value = 1;
|
isAdd.value = 1;
|
||||||
title.value = '新增';
|
title.value = '新增';
|
||||||
saveRef.value.show(currentForm.value);
|
nextTick(() => {
|
||||||
|
saveRef.value.show(currentForm.value);
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 筛选
|
// 筛选
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,717 @@
|
||||||
|
<!-- 基础内容 -->
|
||||||
|
<template>
|
||||||
|
<a-form layout="vertical" :model="form" ref="formBasicRef">
|
||||||
|
<a-row :span="24" :gutter="24">
|
||||||
|
<a-col :span="10">
|
||||||
|
<a-form-item
|
||||||
|
label="系统名称"
|
||||||
|
name="title"
|
||||||
|
v-bind="validateInfos.title"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="form.title"
|
||||||
|
:maxlength="64"
|
||||||
|
placeholder="请输入系统名称"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
label="主题色"
|
||||||
|
name="headerTheme"
|
||||||
|
v-bind="validateInfos.headerTheme"
|
||||||
|
>
|
||||||
|
<a-select v-model:value="form.headerTheme">
|
||||||
|
<a-select-option value="light">白色</a-select-option>
|
||||||
|
<a-select-option value="dark">黑色</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<template #label>
|
||||||
|
<span>高德API Key</span>
|
||||||
|
<a-tooltip title="配置后平台可调用高德地图GIS服务">
|
||||||
|
<img
|
||||||
|
class="img-style"
|
||||||
|
:src="getImage('/init-home/mark.png')"
|
||||||
|
/>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
<a-input
|
||||||
|
v-model:value="form.apikey"
|
||||||
|
placeholder="请输入高德API Key"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item name="basePath" v-bind="validateInfos.basePath">
|
||||||
|
<template #label>
|
||||||
|
<span>base-path</span>
|
||||||
|
<a-tooltip title="系统后台访问的url">
|
||||||
|
<img
|
||||||
|
class="img-style"
|
||||||
|
:src="getImage('/init-home/mark.png')"
|
||||||
|
/>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
<a-input
|
||||||
|
v-model:value="form.basePath"
|
||||||
|
placeholder="请输入高德API Key"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-row :gutter="24" :span="24">
|
||||||
|
<a-col>
|
||||||
|
<a-form-item label="系统logo">
|
||||||
|
<div class="upload-image-warp-logo">
|
||||||
|
<div class="upload-image-border-logo">
|
||||||
|
<a-upload
|
||||||
|
name="file"
|
||||||
|
:action="FILE_UPLOAD"
|
||||||
|
:headers="headers"
|
||||||
|
:showUploadList="false"
|
||||||
|
:beforeUpload="beforeLogoUpload"
|
||||||
|
@change="handleChangeLogo"
|
||||||
|
:accept="
|
||||||
|
imageTypes && imageTypes.length
|
||||||
|
? imageTypes.toString()
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="upload-image-content-logo">
|
||||||
|
<div
|
||||||
|
class="loading-logo"
|
||||||
|
v-if="logoLoading"
|
||||||
|
>
|
||||||
|
<LoadingOutlined
|
||||||
|
style="font-size: 28px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="upload-image"
|
||||||
|
v-if="logoValue"
|
||||||
|
:style="
|
||||||
|
logoValue
|
||||||
|
? `background-image: url(${logoValue});`
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
v-if="logoValue"
|
||||||
|
class="upload-image-mask"
|
||||||
|
>
|
||||||
|
点击修改
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div v-if="logoLoading">
|
||||||
|
<LoadingOutlined
|
||||||
|
style="font-size: 28px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<PlusOutlined
|
||||||
|
style="font-size: 28px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-upload>
|
||||||
|
<div v-if="logoLoading">
|
||||||
|
<div class="upload-loading-mask">
|
||||||
|
<LoadingOutlined
|
||||||
|
v-if="logoLoading"
|
||||||
|
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="FILE_UPLOAD"
|
||||||
|
:headers="headers"
|
||||||
|
:showUploadList="false"
|
||||||
|
:beforeUpload="beforeIconUpload"
|
||||||
|
@change="changeIconUpload"
|
||||||
|
:accept="
|
||||||
|
iconTypes && iconTypes.length
|
||||||
|
? iconTypes.toString()
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="upload-image-content-logo">
|
||||||
|
<div
|
||||||
|
v-if="iconLoading"
|
||||||
|
class="loading-icon"
|
||||||
|
>
|
||||||
|
<LoadingOutlined
|
||||||
|
style="font-size: 28px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="upload-image-icon"
|
||||||
|
v-if="iconValue"
|
||||||
|
:style="
|
||||||
|
iconValue
|
||||||
|
? `background-image: url(${iconValue});`
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
v-if="iconValue"
|
||||||
|
class="upload-image-mask"
|
||||||
|
>
|
||||||
|
点击修改
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div>
|
||||||
|
<PlusOutlined
|
||||||
|
style="font-size: 28px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</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="FILE_UPLOAD"
|
||||||
|
:headers="headers"
|
||||||
|
:beforeUpload="beforeBackUpload"
|
||||||
|
:showUploadList="false"
|
||||||
|
@change="changeBackUpload"
|
||||||
|
:accept="
|
||||||
|
imageTypes && imageTypes.length
|
||||||
|
? imageTypes.toString()
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="upload-image-content-back">
|
||||||
|
<div
|
||||||
|
v-if="backLoading"
|
||||||
|
class="loading-back"
|
||||||
|
>
|
||||||
|
<LoadingOutlined
|
||||||
|
style="font-size: 28px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="upload-image"
|
||||||
|
v-if="backValue"
|
||||||
|
:style="
|
||||||
|
backValue
|
||||||
|
? `background-image: url(${backValue});`
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
v-if="backValue"
|
||||||
|
class="upload-image-mask"
|
||||||
|
>
|
||||||
|
点击修改
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div>
|
||||||
|
<PlusOutlined
|
||||||
|
style="font-size: 28px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-upload>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="upload-tips">支持4M以内的图片:支持jpg、png</div>
|
||||||
|
<div class="upload-tips">建议尺寸1400x1080</div>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { modalState, formState, logoState } from '../data/interface';
|
||||||
|
import { getImage } from '@/utils/comm.ts';
|
||||||
|
import { Form } from 'ant-design-vue';
|
||||||
|
import {
|
||||||
|
getSystemPermission,
|
||||||
|
save,
|
||||||
|
addRole,
|
||||||
|
getRoleMenu,
|
||||||
|
updateRoleMenu,
|
||||||
|
getResourcesCurrent,
|
||||||
|
saveNetwork,
|
||||||
|
saveProtocol,
|
||||||
|
getProtocol,
|
||||||
|
saveAccessConfig,
|
||||||
|
saveProduct,
|
||||||
|
saveDevice,
|
||||||
|
changeDeploy,
|
||||||
|
deployDevice,
|
||||||
|
saveInit,
|
||||||
|
} from '@/api/initHome';
|
||||||
|
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
const formRef = ref();
|
||||||
|
const menuRef = ref();
|
||||||
|
const formBasicRef = ref();
|
||||||
|
const useForm = Form.useForm;
|
||||||
|
const iconValue = ref('/public/favicon.ico');
|
||||||
|
const backValue = ref('/public/images/login.png');
|
||||||
|
const logoValue = ref('/public/logo.png');
|
||||||
|
const logoLoading = ref(false);
|
||||||
|
const backLoading = ref(false);
|
||||||
|
const iconLoading = ref(false);
|
||||||
|
const imageTypes = ref(['image/jpeg', 'image/png']);
|
||||||
|
const iconTypes = ref(['image/x-icon']);
|
||||||
|
/**
|
||||||
|
* 表单数据
|
||||||
|
*/
|
||||||
|
const form = ref<formState>({
|
||||||
|
title: '',
|
||||||
|
headerTheme: 'light',
|
||||||
|
apikey: '',
|
||||||
|
basePath: `${window.location.origin}/api`,
|
||||||
|
logo: '',
|
||||||
|
icon: '',
|
||||||
|
});
|
||||||
|
const rulesFrom = ref({
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入系统名称',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
headerTheme: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择主题色',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
basePath: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入base-path',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const { resetFields, validate, validateInfos } = useForm(
|
||||||
|
form.value,
|
||||||
|
rulesFrom.value,
|
||||||
|
);
|
||||||
|
/**
|
||||||
|
* 提交数据
|
||||||
|
*/
|
||||||
|
const saveBasicInfo = async () => {
|
||||||
|
validate()
|
||||||
|
.then(async () => {
|
||||||
|
const item = [
|
||||||
|
{
|
||||||
|
scope: 'front',
|
||||||
|
properties: {
|
||||||
|
...form,
|
||||||
|
apikey: '',
|
||||||
|
'base-path': '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
scope: 'amap',
|
||||||
|
properties: {
|
||||||
|
api: form.apikey,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
scope: 'paths',
|
||||||
|
properties: {
|
||||||
|
'base-path': form.basePath,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const res = await save(item);
|
||||||
|
if (res.status === 200) {
|
||||||
|
const ico: any = document.querySelector('link[rel="icon"]');
|
||||||
|
if (ico !== null) {
|
||||||
|
ico.href = form.icon;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// basicData.isSucessBasic = 3;
|
||||||
|
// } else {
|
||||||
|
// basicData.isSucessBasic = 2;
|
||||||
|
// }
|
||||||
|
})
|
||||||
|
.catch((error: ValidateErrorEntity<formState>) => {
|
||||||
|
// basicData.isSucessBasic = 2;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* logo格式校验
|
||||||
|
*/
|
||||||
|
const beforeLogoUpload = (file: any) => {
|
||||||
|
const isType: any = imageTypes.value.includes(file.type);
|
||||||
|
if (!isType) {
|
||||||
|
message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const isSize = file.size / 1024 / 1024 < 4;
|
||||||
|
if (!isSize) {
|
||||||
|
message.error(`图片大小必须小于${4}M`);
|
||||||
|
}
|
||||||
|
return isType && isSize;
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* logo上传改变事件
|
||||||
|
*/
|
||||||
|
const handleChangeLogo = (info: any) => {
|
||||||
|
if (info.file.status === 'uploading') {
|
||||||
|
logoLoading.value = true;
|
||||||
|
}
|
||||||
|
if (info.file.status === 'done') {
|
||||||
|
info.file.url = info.file.response?.result;
|
||||||
|
logoLoading.value = false;
|
||||||
|
logoValue.value = info.file.response?.result;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 背景图片上传之前
|
||||||
|
*/
|
||||||
|
const beforeBackUpload = (file: any) => {
|
||||||
|
const isType = imageTypes.value.includes(file.type);
|
||||||
|
if (!isType) {
|
||||||
|
message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const isSize = file.size / 1024 / 1024 < 4;
|
||||||
|
if (!isSize) {
|
||||||
|
message.error(`图片大小必须小于${4}M`);
|
||||||
|
}
|
||||||
|
return isType && isSize;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 背景图片发生改变
|
||||||
|
*/
|
||||||
|
const changeBackUpload = (info: any) => {
|
||||||
|
if (info.file.status === 'uploading') {
|
||||||
|
backLoading.value = true;
|
||||||
|
}
|
||||||
|
if (info.file.status === 'done') {
|
||||||
|
info.file.url = info.file.response?.result;
|
||||||
|
backLoading.value = false;
|
||||||
|
backValue.value = info.file.response?.result;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
defineExpose({
|
||||||
|
submitBasic: saveBasicInfo,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.page-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
padding: 32px 128px 64px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-image: url(/images/init-home/background.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.container-text {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
.container-title {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1;
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 4px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #1d39c4;
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.container-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 24px;
|
||||||
|
background: #fff;
|
||||||
|
.container-main {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
.container-right {
|
||||||
|
width: calc(100% - 70px);
|
||||||
|
.title {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.sub-title {
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-left: 8px;
|
||||||
|
color: #666;
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
.img-style {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.menu-style {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.menu-img {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.init-home-role {
|
||||||
|
.init-home-role-content {
|
||||||
|
display: flex;
|
||||||
|
grid-gap: 24px;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
.role-item-1 {
|
||||||
|
background-image: url(/images/init-home/role1.png);
|
||||||
|
}
|
||||||
|
.role-item-2 {
|
||||||
|
background-image: url(/images/init-home/role2.png);
|
||||||
|
}
|
||||||
|
.role-item-3 {
|
||||||
|
background-image: url(/images/init-home/role3.png);
|
||||||
|
}
|
||||||
|
.role-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding: 24px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50%;
|
||||||
|
background-size: 370px;
|
||||||
|
border: 1px solid #f5f5f5;
|
||||||
|
.role-item-title {
|
||||||
|
display: flex;
|
||||||
|
.role-title {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.role-item-content {
|
||||||
|
width: 250px;
|
||||||
|
height: 260px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
.role-item-footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -30px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.init-data-img {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-image-warp-logo {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
.upload-image-border-logo {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
transition: all 0.3s;
|
||||||
|
width: 160px;
|
||||||
|
height: 150px;
|
||||||
|
&:hover {
|
||||||
|
border: 1px dashed #1890ff;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.upload-image-content-logo {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 160px;
|
||||||
|
height: 150px;
|
||||||
|
padding: 8px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.06);
|
||||||
|
cursor: pointer;
|
||||||
|
.loading-logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
.loading-icon {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.upload-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50%;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.upload-image-icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50%;
|
||||||
|
background-size: inherit;
|
||||||
|
}
|
||||||
|
.upload-image-mask {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
&:hover .upload-image-mask {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-image-warp-back {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
.upload-image-border-back {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
transition: all 0.3s;
|
||||||
|
width: 570px;
|
||||||
|
height: 415px;
|
||||||
|
&:hover {
|
||||||
|
border: 1px dashed #1890ff;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.upload-image-content-back {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 570px;
|
||||||
|
height: 415px;
|
||||||
|
padding: 8px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.06);
|
||||||
|
cursor: pointer;
|
||||||
|
.loading-back {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.upload-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50%;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.upload-image-mask {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
&:hover .upload-image-mask {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.upload-tips {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5715;
|
||||||
|
}
|
||||||
|
// .uplod-style {
|
||||||
|
// :deep(.ant-upload.ant-upload-select-picture-card) {
|
||||||
|
// width: 180px;
|
||||||
|
// height: 180px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
.btn-style {
|
||||||
|
margin-top: 20px;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #1d39c4;
|
||||||
|
background: #1d39c4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-style {
|
||||||
|
.data-content {
|
||||||
|
background: rgb(236, 237, 238);
|
||||||
|
.data-p-style {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动槽 */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f2f2f2;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条滑块 */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #cecece;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -16,426 +16,7 @@
|
||||||
>配置平台名称、登录背景图、主题色等基本信息</span
|
>配置平台名称、登录背景图、主题色等基本信息</span
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
<a-form
|
<Basic ref="basicRef" />
|
||||||
layout="vertical"
|
|
||||||
:model="form"
|
|
||||||
ref="formBasicRef"
|
|
||||||
>
|
|
||||||
<a-row :span="24" :gutter="24">
|
|
||||||
<a-col :span="10">
|
|
||||||
<a-form-item
|
|
||||||
label="系统名称"
|
|
||||||
name="title"
|
|
||||||
v-bind="validateInfos.title"
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
v-model:value="form.title"
|
|
||||||
:maxlength="64"
|
|
||||||
placeholder="请输入系统名称"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
label="主题色"
|
|
||||||
name="headerTheme"
|
|
||||||
v-bind="
|
|
||||||
validateInfos.headerTheme
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<a-select
|
|
||||||
v-model:value="
|
|
||||||
form.headerTheme
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<a-select-option
|
|
||||||
value="light"
|
|
||||||
>白色</a-select-option
|
|
||||||
>
|
|
||||||
<a-select-option
|
|
||||||
value="dark"
|
|
||||||
>黑色</a-select-option
|
|
||||||
>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item>
|
|
||||||
<template #label>
|
|
||||||
<span>高德API Key</span>
|
|
||||||
<a-tooltip
|
|
||||||
title="配置后平台可调用高德地图GIS服务"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="img-style"
|
|
||||||
:src="
|
|
||||||
getImage(
|
|
||||||
'/init-home/mark.png',
|
|
||||||
)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</a-tooltip>
|
|
||||||
</template>
|
|
||||||
<a-input
|
|
||||||
v-model:value="form.apikey"
|
|
||||||
placeholder="请输入高德API Key"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
name="basePath"
|
|
||||||
v-bind="validateInfos.basePath"
|
|
||||||
>
|
|
||||||
<template #label>
|
|
||||||
<span>base-path</span>
|
|
||||||
<a-tooltip
|
|
||||||
title="系统后台访问的url"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="img-style"
|
|
||||||
:src="
|
|
||||||
getImage(
|
|
||||||
'/init-home/mark.png',
|
|
||||||
)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</a-tooltip>
|
|
||||||
</template>
|
|
||||||
<a-input
|
|
||||||
v-model:value="
|
|
||||||
form.basePath
|
|
||||||
"
|
|
||||||
placeholder="请输入高德API Key"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-row :gutter="24" :span="24">
|
|
||||||
<a-col>
|
|
||||||
<a-form-item
|
|
||||||
label="系统logo"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="upload-image-warp-logo"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="upload-image-border-logo"
|
|
||||||
>
|
|
||||||
<a-upload
|
|
||||||
name="file"
|
|
||||||
:action="
|
|
||||||
FILE_UPLOAD
|
|
||||||
"
|
|
||||||
:headers="
|
|
||||||
headers
|
|
||||||
"
|
|
||||||
:showUploadList="
|
|
||||||
false
|
|
||||||
"
|
|
||||||
:beforeUpload="
|
|
||||||
beforeLogoUpload
|
|
||||||
"
|
|
||||||
@change="
|
|
||||||
handleChangeLogo
|
|
||||||
"
|
|
||||||
:accept="
|
|
||||||
imageTypes &&
|
|
||||||
imageTypes.length
|
|
||||||
? imageTypes.toString()
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="upload-image-content-logo"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="loading-logo"
|
|
||||||
v-if="
|
|
||||||
logoLoading
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<LoadingOutlined
|
|
||||||
style="
|
|
||||||
font-size: 28px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="upload-image"
|
|
||||||
v-if="
|
|
||||||
logoValue
|
|
||||||
"
|
|
||||||
:style="
|
|
||||||
logoValue
|
|
||||||
? `background-image: url(${logoValue});`
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
logoValue
|
|
||||||
"
|
|
||||||
class="upload-image-mask"
|
|
||||||
>
|
|
||||||
点击修改
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
logoLoading
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<LoadingOutlined
|
|
||||||
style="
|
|
||||||
font-size: 28px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
>
|
|
||||||
<PlusOutlined
|
|
||||||
style="
|
|
||||||
font-size: 28px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-upload>
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
logoLoading
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="upload-loading-mask"
|
|
||||||
>
|
|
||||||
<LoadingOutlined
|
|
||||||
v-if="
|
|
||||||
logoLoading
|
|
||||||
"
|
|
||||||
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="
|
|
||||||
FILE_UPLOAD
|
|
||||||
"
|
|
||||||
:headers="
|
|
||||||
headers
|
|
||||||
"
|
|
||||||
:showUploadList="
|
|
||||||
false
|
|
||||||
"
|
|
||||||
:beforeUpload="
|
|
||||||
beforeIconUpload
|
|
||||||
"
|
|
||||||
@change="
|
|
||||||
changeIconUpload
|
|
||||||
"
|
|
||||||
:accept="
|
|
||||||
iconTypes &&
|
|
||||||
iconTypes.length
|
|
||||||
? iconTypes.toString()
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="upload-image-content-logo"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
iconLoading
|
|
||||||
"
|
|
||||||
class="loading-icon"
|
|
||||||
>
|
|
||||||
<LoadingOutlined
|
|
||||||
style="
|
|
||||||
font-size: 28px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="upload-image-icon"
|
|
||||||
v-if="
|
|
||||||
iconValue
|
|
||||||
"
|
|
||||||
:style="
|
|
||||||
iconValue
|
|
||||||
? `background-image: url(${iconValue});`
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
iconValue
|
|
||||||
"
|
|
||||||
class="upload-image-mask"
|
|
||||||
>
|
|
||||||
点击修改
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<PlusOutlined
|
|
||||||
style="
|
|
||||||
font-size: 28px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</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="
|
|
||||||
FILE_UPLOAD
|
|
||||||
"
|
|
||||||
:headers="headers"
|
|
||||||
:beforeUpload="
|
|
||||||
beforeBackUpload
|
|
||||||
"
|
|
||||||
:showUploadList="
|
|
||||||
false
|
|
||||||
"
|
|
||||||
@change="
|
|
||||||
changeBackUpload
|
|
||||||
"
|
|
||||||
:accept="
|
|
||||||
imageTypes &&
|
|
||||||
imageTypes.length
|
|
||||||
? imageTypes.toString()
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="upload-image-content-back"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
backLoading
|
|
||||||
"
|
|
||||||
class="loading-back"
|
|
||||||
>
|
|
||||||
<LoadingOutlined
|
|
||||||
style="
|
|
||||||
font-size: 28px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="upload-image"
|
|
||||||
v-if="
|
|
||||||
backValue
|
|
||||||
"
|
|
||||||
:style="
|
|
||||||
backValue
|
|
||||||
? `background-image: url(${backValue});`
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
backValue
|
|
||||||
"
|
|
||||||
class="upload-image-mask"
|
|
||||||
>
|
|
||||||
点击修改
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<div>
|
|
||||||
<PlusOutlined
|
|
||||||
style="
|
|
||||||
font-size: 28px;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-upload>
|
|
||||||
<!-- <div v-if="logoValue">
|
|
||||||
<div v-if="logoLoading">
|
|
||||||
<div class="upload-loading-mask"></div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="upload-tips">
|
|
||||||
支持4M以内的图片:支持jpg、png
|
|
||||||
</div>
|
|
||||||
<div class="upload-tips">
|
|
||||||
建议尺寸1400x1080
|
|
||||||
</div>
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</a-form>
|
|
||||||
</a-collapse-panel>
|
</a-collapse-panel>
|
||||||
<a-collapse-panel key="2">
|
<a-collapse-panel key="2">
|
||||||
<template #header>
|
<template #header>
|
||||||
|
|
@ -743,6 +324,7 @@
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { getImage } from '@/utils/comm.ts';
|
import { getImage } from '@/utils/comm.ts';
|
||||||
|
import Basic from './Basic/index.vue';
|
||||||
import {
|
import {
|
||||||
PlusOutlined,
|
PlusOutlined,
|
||||||
ExclamationCircleOutlined,
|
ExclamationCircleOutlined,
|
||||||
|
|
@ -783,6 +365,7 @@ import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
|
||||||
const formRef = ref();
|
const formRef = ref();
|
||||||
const menuRef = ref();
|
const menuRef = ref();
|
||||||
const formBasicRef = ref();
|
const formBasicRef = ref();
|
||||||
|
const basicRef = ref();
|
||||||
const useForm = Form.useForm;
|
const useForm = Form.useForm;
|
||||||
/**
|
/**
|
||||||
* 表单数据
|
* 表单数据
|
||||||
|
|
@ -1358,7 +941,8 @@ const submitData = async () => {
|
||||||
if (keys.value.length > 0) {
|
if (keys.value.length > 0) {
|
||||||
roleData.addRoleData();
|
roleData.addRoleData();
|
||||||
}
|
}
|
||||||
basicData.saveBasicInfo();
|
basicRef.value.submitBasic();
|
||||||
|
// basicData.saveBasicInfo();
|
||||||
// 当前数据是否成功提交
|
// 当前数据是否成功提交
|
||||||
if (
|
if (
|
||||||
basicData.isSucessBasic === 3 &&
|
basicData.isSucessBasic === 3 &&
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div>123</div>
|
<page-container>阿里云</page-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<page-container>
|
||||||
<JTable
|
<JTable
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:request="request"
|
:request="request"
|
||||||
|
|
@ -69,7 +69,7 @@
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
</JTable>
|
</JTable>
|
||||||
</div>
|
</page-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -47,6 +47,7 @@
|
||||||
<template #img>
|
<template #img>
|
||||||
<slot name="img">
|
<slot name="img">
|
||||||
<img
|
<img
|
||||||
|
style="width: 80px; height: 80px"
|
||||||
:src="
|
:src="
|
||||||
getLogo(slotProps.type, slotProps.provider)
|
getLogo(slotProps.type, slotProps.provider)
|
||||||
"
|
"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue